Feat(FilteredSearchBar): default suggestion config

Make default suggestions configurable in tokens
so that the user can specify default suggestion
e.g. when they are not supported for authors in
issues

app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js

 /* eslint-disable @gitlab/require-i18n-strings */
 import { __ } from '~/locale';
 
-export const ANY_AUTHOR = 'Any';
-
 const DEFAULT_LABEL_NO_LABEL = { value: 'No label', text: __('No label') };
 export const DEFAULT_LABEL_NONE = { value: 'None', text: __('None') };
 export const DEFAULT_LABEL_ANY = { value: 'Any', text: __('Any') };

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue

@@ -11,10 +11,9 @@ import { debounce } from 'lodash';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '~/locale';
 
-import { ANY_AUTHOR, DEBOUNCE_DELAY } from '../constants';
+import { DEFAULT_LABEL_ANY, DEBOUNCE_DELAY } from '../constants';
 
 export default {
-  anyAuthor: ANY_AUTHOR,
   components: {
     GlFilteredSearchToken,
     GlAvatar,
@@ -35,6 +34,7 @@ export default {
   data() {
     return {
       authors: this.config.initialAuthors || [],
+      defaultAuthors: this.config.defaultAuthors || [DEFAULT_LABEL_ANY],
       loading: true,
     };
   },
@@ -99,10 +99,14 @@ export default {
       <span>{{ activeAuthor ? activeAuthor.name : inputValue }}</span>
     </template>
     <template #suggestions>
-      <gl-filtered-search-suggestion :value="$options.anyAuthor">
-        {{ __('Any') }}
+      <gl-filtered-search-suggestion
+        v-for="author in defaultAuthors"
+        :key="author.value"
+        :value="author.value"
+      >
+        {{ author.text }}
       </gl-filtered-search-suggestion>
-      <gl-deprecated-dropdown-divider />
+      <gl-deprecated-dropdown-divider v-if="defaultAuthors.length" />
       <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue

@@ -112,7 +112,7 @@ export default {
       >
         {{ label.text }}
       </gl-filtered-search-suggestion>
-      <gl-dropdown-divider />
+      <gl-dropdown-divider v-if="defaultLabels.length" />
       <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion v-for="label in labels" :key="label.id" :value="label.title">

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue

@@ -95,7 +95,7 @@ export default {
       >
         {{ milestone.text }}
       </gl-filtered-search-suggestion>
-      <gl-dropdown-divider />
+      <gl-dropdown-divider v-if="defaultMilestones.length" />
       <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion

ee/app/assets/javascripts/requirements/components/requirements_root.vue

@@ -9,7 +9,7 @@ import { updateHistory, setUrlParams } from '~/lib/utils/url_utility';
 
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
-import { ANY_AUTHOR } from '~/vue_shared/components/filtered_search_bar/constants';
+import { DEFAULT_LABEL_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 
 import RequirementsTabs from './requirements_tabs.vue';
 import RequirementsLoading from './requirements_loading.vue';
@@ -472,7 +472,7 @@ export default {
       filters.forEach(filter => {
         if (typeof filter === 'string') {
           textSearch = filter;
-        } else if (filter.value.data !== ANY_AUTHOR) {
+        } else if (filter.value.data !== DEFAULT_LABEL_ANY.value) {
           authors.push(filter.value.data);
         }
       });

spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js

 import { mount } from '@vue/test-utils';
-import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui';
+import {
+  GlFilteredSearchToken,
+  GlFilteredSearchTokenSegment,
+  GlFilteredSearchSuggestion,
+  GlNewDropdownDivider as GlDropdownDivider,
+} from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 
 import { deprecatedCreateFlash as createFlash } from '~/flash';
+import {
+  DEFAULT_LABEL_NONE,
+  DEFAULT_LABEL_ANY,
+} from '~/vue_shared/components/filtered_search_bar/constants';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
 
 import { mockAuthorToken, mockAuthors } from '../mock_data';
 
 jest.mock('~/flash');
-
-const createComponent = ({ config = mockAuthorToken, value = { data: '' }, active = false } = {}) =>
-  mount(AuthorToken, {
+const defaultStubs = {
+  Portal: true,
+  GlFilteredSearchSuggestionList: {
+    template: '<div></div>',
+    methods: {
+      getValue: () => '=',
+    },
+  },
+};
+
+function createComponent(options = {}) {
+  const {
+    config = mockAuthorToken,
+    value = { data: '' },
+    active = false,
+    stubs = defaultStubs,
+  } = options;
+  return mount(AuthorToken, {
     propsData: {
       config,
       value,
@@ -22,16 +46,9 @@ const createComponent = ({ config = mockAuthorToken, value = { data: '' }, activ
       portalName: 'fake target',
       alignSuggestions: function fakeAlignSuggestions() {},
     },
-    stubs: {
-      Portal: true,
-      GlFilteredSearchSuggestionList: {
-        template: '<div></div>',
-        methods: {
-          getValue: () => '=',
-        },
-      },
-    },
+    stubs,
   });
+}
 
 describe('AuthorToken', () => {
   let mock;
@@ -139,5 +156,57 @@ describe('AuthorToken', () => {
         expect(tokenSegments.at(2).text()).toBe(mockAuthors[0].name); // "Administrator"
       });
     });
+
+    it('renders provided defaultAuthors as suggestions', async () => {
+      const defaultAuthors = [DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY];
+      wrapper = createComponent({
+        active: true,
+        config: { ...mockAuthorToken, defaultAuthors },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await wrapper.vm.$nextTick();
+
+      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+
+      expect(suggestions).toHaveLength(defaultAuthors.length);
+      defaultAuthors.forEach((label, index) => {
+        expect(suggestions.at(index).text()).toBe(label.text);
+      });
+    });
+
+    it('does not render divider when no defaultAuthors', async () => {
+      wrapper = createComponent({
+        active: true,
+        config: { ...mockAuthorToken, defaultAuthors: [] },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.contains(GlFilteredSearchSuggestion)).toBe(false);
+      expect(wrapper.contains(GlDropdownDivider)).toBe(false);
+    });
+
+    it('renders `DEFAULT_LABEL_ANY` as default suggestions', async () => {
+      wrapper = createComponent({
+        active: true,
+        config: { ...mockAuthorToken },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await wrapper.vm.$nextTick();
+
+      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+
+      expect(suggestions).toHaveLength(1);
+      expect(suggestions.at(0).text()).toBe(DEFAULT_LABEL_ANY.text);
+    });
   });
 });

spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js

@@ -3,6 +3,7 @@ import {
   GlFilteredSearchToken,
   GlFilteredSearchSuggestion,
   GlFilteredSearchTokenSegment,
+  GlNewDropdownDivider as GlDropdownDivider,
 } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -33,13 +34,14 @@ const defaultStubs = {
   },
 };
 
-const createComponent = ({
+function createComponent(options = {}) {
+  const {
     config = mockLabelToken,
     value = { data: '' },
     active = false,
     stubs = defaultStubs,
-} = {}) =>
-  mount(LabelToken, {
+  } = options;
+  return mount(LabelToken, {
     propsData: {
       config,
       value,
@@ -51,6 +53,7 @@ const createComponent = ({
     },
     stubs,
   });
+}
 
 describe('LabelToken', () => {
   let mock;
@@ -204,6 +207,21 @@ describe('LabelToken', () => {
       });
     });
 
+    it('does not render divider when no defaultLabels', async () => {
+      wrapper = createComponent({
+        active: true,
+        config: { ...mockLabelToken, defaultLabels: [] },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.contains(GlFilteredSearchSuggestion)).toBe(false);
+      expect(wrapper.contains(GlDropdownDivider)).toBe(false);
+    });
+
     it('renders `DEFAULT_LABELS` as default suggestions', async () => {
       wrapper = createComponent({
         active: true,

spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js

@@ -3,6 +3,7 @@ import {
   GlFilteredSearchToken,
   GlFilteredSearchSuggestion,
   GlFilteredSearchTokenSegment,
+  GlNewDropdownDivider as GlDropdownDivider,
 } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -31,13 +32,14 @@ const defaultStubs = {
   },
 };
 
-const createComponent = ({
+function createComponent(options = {}) {
+  const {
     config = mockMilestoneToken,
     value = { data: '' },
     active = false,
     stubs = defaultStubs,
-} = {}) =>
-  mount(MilestoneToken, {
+  } = options;
+  return mount(MilestoneToken, {
     propsData: {
       config,
       value,
@@ -49,6 +51,7 @@ const createComponent = ({
     },
     stubs,
   });
+}
 
 describe('MilestoneToken', () => {
   let mock;
@@ -176,6 +179,21 @@ describe('MilestoneToken', () => {
       });
     });
 
+    it('does not render divider when no defaultMilestones', async () => {
+      wrapper = createComponent({
+        active: true,
+        config: { ...mockMilestoneToken, defaultMilestones: [] },
+        stubs: { Portal: true },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.contains(GlFilteredSearchSuggestion)).toBe(false);
+      expect(wrapper.contains(GlDropdownDivider)).toBe(false);
+    });
+
     it('renders `DEFAULT_MILESTONES` as default suggestions', async () => {
       wrapper = createComponent({
         active: true,