Sort filtered search tokens

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

@@ -2,6 +2,7 @@
 import { GlFilteredSearchToken } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import { mapActions } from 'vuex';
+import { orderBy } from 'lodash';
 import BoardFilteredSearch from 'ee_else_ce/boards/components/board_filtered_search.vue';
 import { BoardType } from '~/boards/constants';
 import axios from '~/lib/utils/axios_utils';
@@ -79,7 +80,7 @@ export default {
         this.boardType,
       );
 
-      return [
+      const tokens = [
         {
           icon: 'user',
           title: assignee,
@@ -189,6 +190,8 @@ export default {
           },
         },
       ];
+
+      return orderBy(tokens, ['title']);
     },
     tokens() {
       return this.tokensCE;

app/assets/javascripts/issues_list/components/issues_list_app.vue

@@ -10,6 +10,7 @@ import {
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import { orderBy } from 'lodash';
 import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql';
 import getIssuesCountsQuery from 'ee_else_ce/issues_list/queries/get_issues_counts.query.graphql';
 import IssueCardTimeInfo from 'ee_else_ce/issues_list/components/issue_card_time_info.vue';
@@ -405,7 +406,7 @@ export default {
 
       tokens.sort((a, b) => a.title.localeCompare(b.title));
 
-      return tokens;
+      return orderBy(tokens, ['title']);
     },
     showPaginationControls() {
       return this.issues.length > 0 && (this.pageInfo.hasNextPage || this.pageInfo.hasPreviousPage);

ee/app/assets/javascripts/boards/components/epic_filtered_search.vue

 <script>
+import { orderBy } from 'lodash';
 import BoardFilteredSearch from 'ee/boards/components/board_filtered_search.vue';
 import issueBoardFilter from '~/boards/issue_board_filters';
 import { TYPE_USER } from '~/graphql_shared/constants';
@@ -34,7 +35,7 @@ export default {
       );
 
       const { label, author } = this.$options.i18n;
-      return [
+      const tokens = [
         {
           icon: 'labels',
           title: label,
@@ -58,6 +59,8 @@ export default {
           preloadedAuthors: this.preloadedAuthors(),
         },
       ];
+
+      return orderBy(tokens, ['title']);
     },
   },
   methods: {

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

@@ -3,6 +3,7 @@
 // extends a valid Vue single file component.
 /* eslint-disable @gitlab/no-runtime-template-compiler */
 import { mapActions } from 'vuex';
+import { orderBy } from 'lodash';
 import IssueBoardFilteredSearchFoss from '~/boards/components/issue_board_filtered_search.vue';
 import { BoardType } from '~/boards/constants';
 import { __ } from '~/locale';
@@ -33,7 +34,7 @@ export default {
     tokens() {
       const { epic, iteration, weight } = this.$options.i18n;
 
-      return [
+      const tokens = [
         ...this.tokensCE,
         {
           type: 'epic',
@@ -67,6 +68,8 @@ export default {
           unique: true,
         },
       ];
+
+      return orderBy(tokens, ['title']);
     },
   },
   methods: {

ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js

 import { GlFilteredSearchToken } from '@gitlab/ui';
-
+import { orderBy } from 'lodash';
 import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
@@ -183,7 +183,7 @@ export default {
         });
       }
 
-      return tokens;
+      return orderBy(tokens, ['title']);
     },
     getFilteredSearchValue() {
       const {

ee/spec/frontend/boards/components/epic_filtered_search_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { orderBy } from 'lodash';
 import EpicFilteredSearch from 'ee/boards/components/epic_filtered_search.vue';
 import BoardFilteredSearch from 'ee/boards/components/board_filtered_search.vue';
 import issueBoardFilters from '~/boards/issue_board_filters';
@@ -72,7 +73,9 @@ describe('EpicFilteredSearch', () => {
           ],
         },
       ];
-      expect(wrapper.find(BoardFilteredSearch).props('tokens').toString()).toBe(tokens.toString());
+      expect(wrapper.find(BoardFilteredSearch).props('tokens').toString()).toBe(
+        orderBy(tokens, ['title']).toString(),
+      );
     });
   });
 });

ee/spec/frontend/boards/components/issue_board_filtered_search_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { orderBy } from 'lodash';
 import BoardFilteredSearch from 'ee/boards/components/board_filtered_search.vue';
 import IssueBoardFilteredSpec from 'ee/boards/components/issue_board_filtered_search.vue';
 import issueBoardFilters from '~/boards/issue_board_filters';
@@ -55,7 +56,7 @@ describe('IssueBoardFilter', () => {
         wrapper.vm.fetchIterations,
       );
 
-      expect(wrapper.find(BoardFilteredSearch).props('tokens')).toEqual(tokens);
+      expect(wrapper.find(BoardFilteredSearch).props('tokens')).toEqual(orderBy(tokens, ['title']));
     });
   });
 });

ee/spec/frontend/roadmap/components/roadmap_filters_spec.js

@@ -197,10 +197,10 @@ describe('RoadmapFilters', () => {
       it('includes `Author`, `Milestone`, `Confidential`, `Epic` and `Label` tokens when user is not logged in', () => {
         expect(filteredSearchBar.props('tokens')).toEqual([
           mockAuthorTokenConfig,
-          mockLabelTokenConfig,
-          mockMilestoneTokenConfig,
           mockConfidentialTokenConfig,
           mockEpicTokenConfig,
+          mockLabelTokenConfig,
+          mockMilestoneTokenConfig,
         ]);
       });
 
@@ -310,10 +310,10 @@ describe('RoadmapFilters', () => {
                 },
               ],
             },
-            mockLabelTokenConfig,
-            mockMilestoneTokenConfig,
             mockConfidentialTokenConfig,
             mockEpicTokenConfig,
+            mockLabelTokenConfig,
+            mockMilestoneTokenConfig,
             mockReactionEmojiTokenConfig,
           ]);
         });

spec/frontend/boards/components/issue_board_filtered_search_spec.js

+import { orderBy } from 'lodash';
 import { shallowMount } from '@vue/test-utils';
 import BoardFilteredSearch from 'ee_else_ce/boards/components/board_filtered_search.vue';
 import IssueBoardFilteredSpec from '~/boards/components/issue_board_filtered_search.vue';
@@ -62,7 +63,7 @@ describe('IssueBoardFilter', () => {
           isSignedIn,
         );
 
-        expect(findBoardsFilteredSearch().props('tokens')).toEqual(tokens);
+        expect(findBoardsFilteredSearch().props('tokens')).toEqual(orderBy(tokens, ['title']));
       },
     );
   });