Fix rendering of history items in members filter bar

Display token option title instead of the value

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -286,6 +286,7 @@ export default {
     handleFilterSubmit() {
       const filterTokens = uniqueTokens(this.filterValue);
       this.filterValue = filterTokens;
+
       if (this.recentSearchesStorageKey) {
         this.recentSearchesPromise
           .then(() => {
@@ -302,6 +303,17 @@ export default {
       this.blurSearchInput();
       this.$emit('onFilter', this.removeQuotesEnclosure(filterTokens));
     },
+    historyTokenOptionTitle(historyToken) {
+      const tokenOption = this.tokens
+        .find(token => token.type === historyToken.type)
+        ?.options?.find(option => option.value === historyToken.value.data);
+
+      if (!tokenOption?.title) {
+        return historyToken.value.data;
+      }
+
+      return tokenOption.title;
+    },
   },
 };
 </script>
@@ -333,7 +345,7 @@ export default {
             <span v-if="tokenTitles[token.type]"
               >{{ tokenTitles[token.type] }} :{{ token.value.operator }}</span
             >
-            <strong>{{ tokenSymbols[token.type] }}{{ token.value.data }}</strong>
+            <strong>{{ tokenSymbols[token.type] }}{{ historyTokenOptionTitle(token) }}</strong>
           </span>
         </template>
       </template>

spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js

@@ -17,11 +17,14 @@ import RecentSearchesService from '~/filtered_search/services/recent_searches_se
 
 import {
   mockAvailableTokens,
+  mockMembershipToken,
+  mockMembershipTokenOptionsWithoutTitles,
   mockSortOptions,
   mockHistoryItems,
   tokenValueAuthor,
   tokenValueLabel,
   tokenValueMilestone,
+  tokenValueMembership,
 } from './mock_data';
 
 jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', () => ({
@@ -412,6 +415,42 @@ describe('FilteredSearchBarRoot', () => {
       wrapperFullMount.destroy();
     });
 
+    describe('when token options have `title` attribute defined', () => {
+      it('renders search history items using the provided `title` attribute', async () => {
+        const wrapperFullMount = createComponent({
+          sortOptions: mockSortOptions,
+          tokens: [mockMembershipToken],
+          shallow: false,
+        });
+
+        wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
+
+        await wrapperFullMount.vm.$nextTick();
+
+        expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := Direct');
+
+        wrapperFullMount.destroy();
+      });
+    });
+
+    describe('when token options have do not have `title` attribute defined', () => {
+      it('renders search history items using the provided `value` attribute', async () => {
+        const wrapperFullMount = createComponent({
+          sortOptions: mockSortOptions,
+          tokens: [mockMembershipTokenOptionsWithoutTitles],
+          shallow: false,
+        });
+
+        wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
+
+        await wrapperFullMount.vm.$nextTick();
+
+        expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := exclude');
+
+        wrapperFullMount.destroy();
+      });
+    });
+
     it('renders sort dropdown component', () => {
       expect(wrapper.find(GlButtonGroup).exists()).toBe(true);
       expect(wrapper.find(GlDropdown).exists()).toBe(true);

spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js

+import { GlFilteredSearchToken } from '@gitlab/ui';
 import { mockLabels } from 'jest/vue_shared/components/sidebar/labels_select_vue/mock_data';
 import Api from '~/api';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
@@ -102,6 +103,21 @@ export const mockMilestoneToken = {
   fetchMilestones: () => Promise.resolve({ data: mockMilestones }),
 };
 
+export const mockMembershipToken = {
+  type: 'with_inherited_permissions',
+  icon: 'group',
+  title: 'Membership',
+  token: GlFilteredSearchToken,
+  unique: true,
+  operators: [{ value: '=', description: 'is' }],
+  options: [{ value: 'exclude', title: 'Direct' }, { value: 'only', title: 'Inherited' }],
+};
+
+export const mockMembershipTokenOptionsWithoutTitles = {
+  ...mockMembershipToken,
+  options: [{ value: 'exclude' }, { value: 'only' }],
+};
+
 export const mockAvailableTokens = [mockAuthorToken, mockLabelToken, mockMilestoneToken];
 
 export const tokenValueAuthor = {
@@ -128,6 +144,14 @@ export const tokenValueMilestone = {
   },
 };
 
+export const tokenValueMembership = {
+  type: 'with_inherited_permissions',
+  value: {
+    operator: '=',
+    data: 'exclude',
+  },
+};
+
 export const tokenValuePlain = {
   type: 'filtered-search-term',
   value: { data: 'foo' },