Replace token values for default milestones in issue boards

app/assets/javascripts/boards/components/issue_board_filtered_search.vue

@@ -6,6 +6,7 @@ import issueBoardFilters from '~/boards/issue_board_filters';
 import { TYPE_USER } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
+import { DEFAULT_MILESTONES_GRAPHQL } from '~/vue_shared/components/filtered_search_bar/constants';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
 import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
@@ -63,17 +64,17 @@ export default {
 
       return [
         {
-          icon: 'labels',
-          title: label,
-          type: 'label_name',
+          icon: 'user',
+          title: assignee,
+          type: 'assignee_username',
           operators: [
             { value: '=', description: is },
             { value: '!=', description: isNot },
           ],
-          token: LabelToken,
-          unique: false,
-          symbol: '~',
-          fetchLabels,
+          token: AuthorToken,
+          unique: true,
+          fetchAuthors,
+          preloadedAuthors: this.preloadedAuthors(),
         },
         {
           icon: 'pencil',
@@ -90,17 +91,27 @@ export default {
           preloadedAuthors: this.preloadedAuthors(),
         },
         {
-          icon: 'user',
-          title: assignee,
-          type: 'assignee_username',
+          icon: 'labels',
+          title: label,
+          type: 'label_name',
           operators: [
             { value: '=', description: is },
             { value: '!=', description: isNot },
           ],
-          token: AuthorToken,
+          token: LabelToken,
+          unique: false,
+          symbol: '~',
+          fetchLabels,
+        },
+        {
+          type: 'milestone_title',
+          title: milestone,
+          icon: 'clock',
+          symbol: '%',
+          token: MilestoneToken,
           unique: true,
-          fetchAuthors,
-          preloadedAuthors: this.preloadedAuthors(),
+          defaultMilestones: DEFAULT_MILESTONES_GRAPHQL,
+          fetchMilestones: this.fetchMilestones,
         },
         {
           icon: 'issues',
@@ -114,16 +125,6 @@ export default {
             { icon: 'issue-type-incident', value: types.INCIDENT, title: incident },
           ],
         },
-        {
-          type: 'milestone_title',
-          title: milestone,
-          icon: 'clock',
-          symbol: '%',
-          token: MilestoneToken,
-          unique: true,
-          defaultMilestones: [], // todo: https://gitlab.com/gitlab-org/gitlab/-/issues/337044#note_640010094
-          fetchMilestones: this.fetchMilestones,
-        },
         {
           type: 'weight',
           title: weight,

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

@@ -20,8 +20,12 @@ export const OPERATOR_IS_ONLY = [{ value: OPERATOR_IS, description: OPERATOR_IS_
 export const OPERATOR_IS_NOT_ONLY = [{ value: OPERATOR_IS_NOT, description: OPERATOR_IS_NOT_TEXT }];
 export const OPERATOR_IS_AND_IS_NOT = [...OPERATOR_IS_ONLY, ...OPERATOR_IS_NOT_ONLY];
 
-export const DEFAULT_LABEL_NONE = { value: FILTER_NONE, text: __(FILTER_NONE) };
-export const DEFAULT_LABEL_ANY = { value: FILTER_ANY, text: __(FILTER_ANY) };
+export const DEFAULT_LABEL_NONE = {
+  value: FILTER_NONE,
+  text: __(FILTER_NONE),
+  title: __(FILTER_NONE),
+};
+export const DEFAULT_LABEL_ANY = { value: FILTER_ANY, text: __(FILTER_ANY), title: __(FILTER_ANY) };
 export const DEFAULT_NONE_ANY = [DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY];
 
 export const DEFAULT_ITERATIONS = DEFAULT_NONE_ANY.concat([
@@ -29,10 +33,17 @@ export const DEFAULT_ITERATIONS = DEFAULT_NONE_ANY.concat([
 ]);
 
 export const DEFAULT_MILESTONES = DEFAULT_NONE_ANY.concat([
-  { value: FILTER_UPCOMING, text: __(FILTER_UPCOMING) },
-  { value: FILTER_STARTED, text: __(FILTER_STARTED) },
+  { value: FILTER_UPCOMING, text: __(FILTER_UPCOMING), title: __(FILTER_UPCOMING) },
+  { value: FILTER_STARTED, text: __(FILTER_STARTED), title: __(FILTER_STARTED) },
 ]);
 
+export const DEFAULT_MILESTONES_GRAPHQL = [
+  { value: 'any', text: __(FILTER_ANY), title: __(FILTER_ANY) },
+  { value: 'none', text: __(FILTER_NONE), title: __(FILTER_NONE) },
+  { value: '#upcoming', text: __(FILTER_UPCOMING), title: __(FILTER_UPCOMING) },
+  { value: '#started', text: __(FILTER_STARTED), title: __(FILTER_STARTED) },
+];
+
 export const SortDirection = {
   descending: 'descending',
   ascending: 'ascending',

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

@@ -39,8 +39,16 @@ export default {
   },
   methods: {
     getActiveMilestone(milestones, data) {
-      return milestones.find(
+      /* We need to check default milestones against the value not the
+       * title because there is a discrepancy between the value graphql
+       * accepts and the title.
+       * https://gitlab.com/gitlab-org/gitlab/-/issues/337687#note_648058797
+       */
+
+      return (
+        milestones.find(
           (milestone) => milestone.title.toLowerCase() === stripQuotes(data).toLowerCase(),
+        ) || this.defaultMilestones.find(({ value }) => value === data)
       );
     },
     fetchMilestones(searchTerm) {

spec/frontend/boards/mock_data.js

@@ -7,6 +7,7 @@ import '~/boards/models/list';
 import { ListType } from '~/boards/constants';
 import boardsStore from '~/boards/stores/boards_store';
 import { __ } from '~/locale';
+import { DEFAULT_MILESTONES_GRAPHQL } from '~/vue_shared/components/filtered_search_bar/constants';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
 import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
@@ -547,17 +548,17 @@ export const mockMoveData = {
 
 export const mockTokens = (fetchLabels, fetchAuthors, fetchMilestones) => [
   {
-    icon: 'labels',
-    title: __('Label'),
-    type: 'label_name',
+    icon: 'user',
+    title: __('Assignee'),
+    type: 'assignee_username',
     operators: [
       { value: '=', description: 'is' },
       { value: '!=', description: 'is not' },
     ],
-    token: LabelToken,
-    unique: false,
-    symbol: '~',
-    fetchLabels,
+    token: AuthorToken,
+    unique: true,
+    fetchAuthors,
+    preloadedAuthors: [],
   },
   {
     icon: 'pencil',
@@ -574,17 +575,27 @@ export const mockTokens = (fetchLabels, fetchAuthors, fetchMilestones) => [
     preloadedAuthors: [],
   },
   {
-    icon: 'user',
-    title: __('Assignee'),
-    type: 'assignee_username',
+    icon: 'labels',
+    title: __('Label'),
+    type: 'label_name',
     operators: [
       { value: '=', description: 'is' },
       { value: '!=', description: 'is not' },
     ],
-    token: AuthorToken,
+    token: LabelToken,
+    unique: false,
+    symbol: '~',
+    fetchLabels,
+  },
+  {
+    icon: 'clock',
+    title: __('Milestone'),
+    symbol: '%',
+    type: 'milestone_title',
+    token: MilestoneToken,
     unique: true,
-    fetchAuthors,
-    preloadedAuthors: [],
+    defaultMilestones: DEFAULT_MILESTONES_GRAPHQL,
+    fetchMilestones,
   },
   {
     icon: 'issues',
@@ -598,16 +609,6 @@ export const mockTokens = (fetchLabels, fetchAuthors, fetchMilestones) => [
       { icon: 'issue-type-incident', value: 'INCIDENT', title: 'Incident' },
     ],
   },
-  {
-    icon: 'clock',
-    title: __('Milestone'),
-    symbol: '%',
-    type: 'milestone_title',
-    token: MilestoneToken,
-    unique: true,
-    defaultMilestones: [],
-    fetchMilestones,
-  },
   {
     icon: 'weight',
     title: __('Weight'),

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

@@ -11,7 +11,10 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { sortMilestonesByDueDate } from '~/milestones/milestone_utils';
 
-import { DEFAULT_MILESTONES } from '~/vue_shared/components/filtered_search_bar/constants';
+import {
+  DEFAULT_MILESTONES,
+  DEFAULT_MILESTONES_GRAPHQL,
+} from '~/vue_shared/components/filtered_search_bar/constants';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
 
 import { mockMilestoneToken, mockMilestones, mockRegularMilestone } from '../mock_data';
@@ -191,5 +194,22 @@ describe('MilestoneToken', () => {
         expect(suggestions.at(index).text()).toBe(milestone.text);
       });
     });
+
+    describe('when getActiveMilestones is called and milestones is empty', () => {
+      beforeEach(() => {
+        wrapper = createComponent({
+          active: true,
+          config: { ...mockMilestoneToken, defaultMilestones: DEFAULT_MILESTONES_GRAPHQL },
+        });
+      });
+
+      it('finds the correct value from the activeToken', () => {
+        DEFAULT_MILESTONES_GRAPHQL.forEach(({ value, title }) => {
+          const activeToken = wrapper.vm.getActiveMilestone([], value);
+
+          expect(activeToken.title).toEqual(title);
+        });
+      });
+    });
   });
 });