Global Search - Refactor Group/Project Filters

app/assets/javascripts/search/topbar/components/group_filter.vue

@@ -39,8 +39,8 @@ export default {
   <searchable-dropdown
     data-testid="group-filter"
     :header-text="$options.GROUP_DATA.headerText"
-    :selected-display-value="$options.GROUP_DATA.selectedDisplayValue"
-    :items-display-value="$options.GROUP_DATA.itemsDisplayValue"
+    :name="$options.GROUP_DATA.name"
+    :full-name="$options.GROUP_DATA.fullName"
     :loading="fetchingGroups"
     :selected-item="selectedGroup"
     :items="groups"

app/assets/javascripts/search/topbar/components/project_filter.vue

@@ -42,8 +42,8 @@ export default {
   <searchable-dropdown
     data-testid="project-filter"
     :header-text="$options.PROJECT_DATA.headerText"
-    :selected-display-value="$options.PROJECT_DATA.selectedDisplayValue"
-    :items-display-value="$options.PROJECT_DATA.itemsDisplayValue"
+    :name="$options.PROJECT_DATA.name"
+    :full-name="$options.PROJECT_DATA.fullName"
     :loading="fetchingProjects"
     :selected-item="selectedProject"
     :items="projects"

app/assets/javascripts/search/topbar/components/searchable_dropdown.vue

@@ -8,7 +8,10 @@ import {
   GlButton,
   GlSkeletonLoader,
   GlTooltipDirective,
+  GlAvatar,
 } from '@gitlab/ui';
+import highlight from '~/lib/utils/highlight';
+import { truncateNamespace } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
 import { ANY_OPTION } from '../constants';
 
@@ -25,6 +28,7 @@ export default {
     GlIcon,
     GlButton,
     GlSkeletonLoader,
+    GlAvatar,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -35,12 +39,12 @@ export default {
       required: false,
       default: "__('Filter')",
     },
-    selectedDisplayValue: {
+    name: {
       type: String,
       required: false,
       default: 'name',
     },
-    itemsDisplayValue: {
+    fullName: {
       type: String,
       required: false,
       default: 'name',
@@ -75,6 +79,12 @@ export default {
     resetDropdown() {
       this.$emit('change', ANY_OPTION);
     },
+    truncateNamespace(namespace) {
+      return truncateNamespace(namespace);
+    },
+    highlightedItemName(name) {
+      return highlight(name, this.searchText);
+    },
   },
   ANY_OPTION,
 };
@@ -83,15 +93,16 @@ export default {
 <template>
   <gl-dropdown
     class="gl-w-full"
-    menu-class="gl-w-full!"
+    menu-class="global-search-dropdown-menu"
     toggle-class="gl-text-truncate"
     :header-text="headerText"
+    :right="true"
     @show="$emit('search', searchText)"
     @shown="$refs.searchBox.focusInput()"
   >
     <template #button-content>
       <span class="dropdown-toggle-text gl-flex-grow-1 gl-text-truncate">
-        {{ selectedItem[selectedDisplayValue] }}
+        {{ selectedItem[name] }}
       </span>
       <gl-loading-icon v-if="loading" inline class="gl-mr-3" />
       <gl-button
@@ -121,9 +132,10 @@ export default {
         class="gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-pb-2! gl-mb-2"
         :is-check-item="true"
         :is-checked="isSelected($options.ANY_OPTION)"
+        :is-check-centered="true"
         @click="resetDropdown"
       >
-        {{ $options.ANY_OPTION.name }}
+        <span data-testid="item-title">{{ $options.ANY_OPTION.name }}</span>
       </gl-dropdown-item>
     </div>
     <div v-if="!loading">
@@ -132,9 +144,27 @@ export default {
         :key="item.id"
         :is-check-item="true"
         :is-checked="isSelected(item)"
+        :is-check-centered="true"
         @click="$emit('change', item)"
       >
-        {{ item[itemsDisplayValue] }}
+        <div class="gl-display-flex gl-align-items-center">
+          <gl-avatar
+            :src="item.avatar_url"
+            :entity-id="item.id"
+            :entity-name="item[name]"
+            shape="rect"
+            :size="32"
+          />
+          <div class="gl-display-flex gl-flex-direction-column">
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span data-testid="item-title" v-html="highlightedItemName(item[name])">{{
+              item[name]
+            }}</span>
+            <span class="gl-font-sm gl-text-gray-700" data-testid="item-namespace">{{
+              truncateNamespace(item[fullName])
+            }}</span>
+          </div>
+        </div>
       </gl-dropdown-item>
     </div>
     <div v-if="loading" class="gl-mx-4 gl-mt-3">

app/assets/javascripts/search/topbar/constants.js

@@ -9,13 +9,13 @@ export const ANY_OPTION = Object.freeze({
 export const GROUP_DATA = {
   headerText: __('Filter results by group'),
   queryParam: 'group_id',
-  selectedDisplayValue: 'name',
-  itemsDisplayValue: 'full_name',
+  name: 'name',
+  fullName: 'full_name',
 };
 
 export const PROJECT_DATA = {
   headerText: __('Filter results by project'),
   queryParam: 'project_id',
-  selectedDisplayValue: 'name_with_namespace',
-  itemsDisplayValue: 'name_with_namespace',
+  name: 'name',
+  fullName: 'name_with_namespace',
 };

app/assets/stylesheets/pages/search.scss

@@ -295,6 +295,16 @@ input[type='checkbox']:hover {
   @include str-truncated(10em);
 }
 
+.global-search-dropdown-menu {
+  width: 100% !important;
+  max-width: 400px;
+
+  @include media-breakpoint-up(md) {
+    // This is larger than the container so width: 100% doesn't work.
+    width: 400px !important;
+  }
+}
+
 // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
 /* stylelint-disable property-no-vendor-prefix */
 input[type='search']::-webkit-search-decoration,

spec/features/search/user_searches_for_code_spec.rb

@@ -32,7 +32,7 @@ RSpec.describe 'User searches for code' do
         wait_for_requests
 
         page.within('[data-testid="project-filter"]') do
-          click_on(project.full_name)
+          click_on(project.name)
         end
       end
 

spec/features/search/user_searches_for_issues_spec.rb

@@ -90,7 +90,7 @@ RSpec.describe 'User searches for issues', :js do
         wait_for_requests
 
         page.within('[data-testid="project-filter"]') do
-          click_on(project.full_name)
+          click_on(project.name)
         end
 
         search_for_issue(issue1.title)

spec/features/search/user_searches_for_merge_requests_spec.rb

@@ -55,7 +55,7 @@ RSpec.describe 'User searches for merge requests', :js do
       wait_for_requests
 
       page.within('[data-testid="project-filter"]') do
-        click_on(project.full_name)
+        click_on(project.name)
       end
 
       search_for_mr(merge_request1.title)

spec/features/search/user_searches_for_milestones_spec.rb

@@ -35,7 +35,7 @@ RSpec.describe 'User searches for milestones', :js do
       wait_for_requests
 
       page.within('[data-testid="project-filter"]') do
-        click_on(project.full_name)
+        click_on(project.name)
       end
 
       fill_in('dashboard_search', with: milestone1.title)

spec/features/search/user_searches_for_wiki_pages_spec.rb

@@ -23,7 +23,7 @@ RSpec.describe 'User searches for wiki pages', :js do
       wait_for_requests
 
       page.within('[data-testid="project-filter"]') do
-        click_on(project.full_name)
+        click_on(project.name)
       end
 
       fill_in('dashboard_search', with: search_term)

spec/features/search/user_uses_search_filters_spec.rb

@@ -33,10 +33,10 @@ RSpec.describe 'User uses search filters', :js do
       wait_for_requests
 
       page.within('[data-testid="project-filter"]') do
-        click_on(group_project.full_name)
+        click_on(group_project.name)
       end
 
-      expect(find('[data-testid="project-filter"]')).to have_content(group_project.full_name)
+      expect(find('[data-testid="project-filter"]')).to have_content(group_project.name)
     end
 
     context 'when the group filter is set' do
@@ -65,10 +65,10 @@ RSpec.describe 'User uses search filters', :js do
       wait_for_requests
 
       page.within('[data-testid="project-filter"]') do
-        click_on(project.full_name)
+        click_on(project.name)
       end
 
-      expect(find('[data-testid="project-filter"]')).to have_content(project.full_name)
+      expect(find('[data-testid="project-filter"]')).to have_content(project.name)
     end
 
     context 'when the project filter is set' do

spec/frontend/search/mock_data.js

@@ -2,47 +2,49 @@ export const MOCK_QUERY = {
   scope: 'issues',
   state: 'all',
   confidential: null,
-  group_id: 'test_1',
+  group_id: 1,
 };
 
 export const MOCK_GROUP = {
   name: 'test group',
-  full_name: 'full name test group',
-  id: 'test_1',
+  full_name: 'full name / test group',
+  id: 1,
 };
 
 export const MOCK_GROUPS = [
   {
+    avatar_url: null,
     name: 'test group',
-    full_name: 'full name test group',
-    id: 'test_1',
+    full_name: 'full name / test group',
+    id: 1,
   },
   {
+    avatar_url: 'https://avatar.com',
     name: 'test group 2',
-    full_name: 'full name test group 2',
-    id: 'test_2',
+    full_name: 'full name / test group 2',
+    id: 2,
   },
 ];
 
 export const MOCK_PROJECT = {
   name: 'test project',
   namespace: MOCK_GROUP,
-  nameWithNamespace: 'test group test project',
-  id: 'test_1',
+  nameWithNamespace: 'test group / test project',
+  id: 1,
 };
 
 export const MOCK_PROJECTS = [
   {
     name: 'test project',
     namespace: MOCK_GROUP,
-    name_with_namespace: 'test group test project',
-    id: 'test_1',
+    name_with_namespace: 'test group / test project',
+    id: 1,
   },
   {
     name: 'test project 2',
     namespace: MOCK_GROUP,
-    name_with_namespace: 'test group test project 2',
-    id: 'test_2',
+    name_with_namespace: 'test group / test project 2',
+    id: 2,
   },
 ];
 

spec/frontend/search/topbar/components/searchable_dropdown_spec.js

-import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui';
-import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlSearchBoxByType,
+  GlSkeletonLoader,
+  GlAvatar,
+} from '@gitlab/ui';
+import { shallowMount, mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { MOCK_GROUPS, MOCK_GROUP, MOCK_QUERY } from 'jest/search/mock_data';
+import { truncateNamespace } from '~/lib/utils/text_utility';
 import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue';
 import { ANY_OPTION, GROUP_DATA } from '~/search/topbar/constants';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Global Search Searchable Dropdown', () => {
   let wrapper;
 
   const defaultProps = {
     headerText: GROUP_DATA.headerText,
-    selectedDisplayValue: GROUP_DATA.selectedDisplayValue,
-    itemsDisplayValue: GROUP_DATA.itemsDisplayValue,
+    name: GROUP_DATA.name,
+    fullName: GROUP_DATA.fullName,
     loading: false,
     selectedItem: ANY_OPTION,
     items: [],
@@ -28,14 +36,15 @@ describe('Global Search Searchable Dropdown', () => {
       },
     });
 
-    wrapper = mountFn(SearchableDropdown, {
-      localVue,
-      store,
-      propsData: {
-        ...defaultProps,
-        ...props,
-      },
-    });
+    wrapper = extendedWrapper(
+      mountFn(SearchableDropdown, {
+        store,
+        propsData: {
+          ...defaultProps,
+          ...props,
+        },
+      }),
+    );
   };
 
   afterEach(() => {
@@ -47,11 +56,18 @@ describe('Global Search Searchable Dropdown', () => {
   const findGlDropdownSearch = () => findGlDropdown().find(GlSearchBoxByType);
   const findDropdownText = () => findGlDropdown().find('.dropdown-toggle-text');
   const findDropdownItems = () => findGlDropdown().findAll(GlDropdownItem);
-  const findDropdownItemsText = () => findDropdownItems().wrappers.map((w) => w.text());
+  const findDropdownItemTitles = () => wrapper.findAllByTestId('item-title');
+  const findDropdownItemNamespaces = () => wrapper.findAllByTestId('item-namespace');
+  const findDropdownAvatars = () => wrapper.findAllComponents(GlAvatar);
   const findAnyDropdownItem = () => findDropdownItems().at(0);
   const findFirstGroupDropdownItem = () => findDropdownItems().at(1);
   const findLoader = () => wrapper.find(GlSkeletonLoader);
 
+  const findDropdownItemTitlesText = () => findDropdownItemTitles().wrappers.map((w) => w.text());
+  const findDropdownItemNamespacesText = () =>
+    findDropdownItemNamespaces().wrappers.map((w) => w.text());
+  const findDropdownAvatarUrls = () => findDropdownAvatars().wrappers.map((w) => w.props('src'));
+
   describe('template', () => {
     beforeEach(() => {
       createComponent();
@@ -93,9 +109,19 @@ describe('Global Search Searchable Dropdown', () => {
           expect(findLoader().exists()).toBe(false);
         });
 
-        it('renders an instance for each namespace', () => {
-          const resultsIncludeAny = ['Any'].concat(MOCK_GROUPS.map((n) => n.full_name));
-          expect(findDropdownItemsText()).toStrictEqual(resultsIncludeAny);
+        it('renders titles correctly including Any', () => {
+          const resultsIncludeAny = ['Any'].concat(MOCK_GROUPS.map((n) => n[GROUP_DATA.name]));
+          expect(findDropdownItemTitlesText()).toStrictEqual(resultsIncludeAny);
+        });
+
+        it('renders namespaces truncated correctly', () => {
+          const namespaces = MOCK_GROUPS.map((n) => truncateNamespace(n[GROUP_DATA.fullName]));
+          expect(findDropdownItemNamespacesText()).toStrictEqual(namespaces);
+        });
+
+        it('renders GlAvatar for each item', () => {
+          const avatars = MOCK_GROUPS.map((n) => n.avatar_url);
+          expect(findDropdownAvatarUrls()).toStrictEqual(avatars);
         });
       });
 
@@ -109,7 +135,7 @@ describe('Global Search Searchable Dropdown', () => {
         });
 
         it('renders only Any in dropdown', () => {
-          expect(findDropdownItemsText()).toStrictEqual(['Any']);
+          expect(findDropdownItemTitlesText()).toStrictEqual(['Any']);
         });
       });
 
@@ -140,8 +166,8 @@ describe('Global Search Searchable Dropdown', () => {
           createComponent({}, { selectedItem: MOCK_GROUP }, mount);
         });
 
-        it('sets dropdown text to the selectedItem selectedDisplayValue', () => {
-          expect(findDropdownText().text()).toBe(MOCK_GROUP[GROUP_DATA.selectedDisplayValue]);
+        it('sets dropdown text to the selectedItem name', () => {
+          expect(findDropdownText().text()).toBe(MOCK_GROUP[GROUP_DATA.name]);
         });
       });
     });