Merge branch 'kp-fix-duplicate-token-keys' into 'master'

Fix bugs around Filtered Search Bar

See merge request gitlab-org/gitlab!39452

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

@@ -121,7 +121,9 @@ export default {
         : __('Sort direction: Descending');
     },
     filteredRecentSearches() {
-      return this.recentSearches.filter(item => typeof item !== 'string');
+      return this.recentSearchesStorageKey
+        ? this.recentSearches.filter(item => typeof item !== 'string')
+        : undefined;
     },
   },
   watch: {
@@ -280,7 +282,7 @@ export default {
       <template #history-item="{ historyItem }">
         <template v-for="(token, index) in historyItem">
           <span v-if="typeof token === 'string'" :key="index" class="gl-px-1">"{{ token }}"</span>
-          <span v-else :key="`${token.type}-${token.value.data}`" class="gl-px-1">
+          <span v-else :key="`${index}-${token.type}-${token.value.data}`" class="gl-px-1">
             <span v-if="tokenTitles[token.type]"
               >{{ tokenTitles[token.type] }} :{{ token.value.operator }}</span
             >

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

@@ -130,6 +130,16 @@ describe('FilteredSearchBarRoot', () => {
         expect(wrapper.vm.filteredRecentSearches).toHaveLength(1);
         expect(wrapper.vm.filteredRecentSearches[0]).toEqual({ foo: 'bar' });
       });
+
+      it('returns undefined when recentSearchesStorageKey prop is not set on component', async () => {
+        wrapper.setProps({
+          recentSearchesStorageKey: '',
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.filteredRecentSearches).not.toBeDefined();
+      });
     });
   });