Add space logic to base token

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

@@ -10,7 +10,11 @@ import {
 import { debounce } from 'lodash';
 
 import { DEBOUNCE_DELAY, FILTER_NONE_ANY, OPERATOR_IS_NOT } from '../constants';
-import { getRecentlyUsedSuggestions, setTokenValueToRecentlyUsed } from '../filtered_search_utils';
+import {
+  getRecentlyUsedSuggestions,
+  setTokenValueToRecentlyUsed,
+  stripQuotes,
+} from '../filtered_search_utils';
 
 export default {
   components: {
@@ -163,7 +167,14 @@ export default {
       this.searchKey = data;
 
       if (!this.suggestionsLoading && !this.activeTokenValue) {
-        const search = this.searchTerm ? this.searchTerm : data;
+        let search = this.searchTerm ? this.searchTerm : data;
+
+        if (search.startsWith('"') && search.endsWith('"')) {
+          search = stripQuotes(search);
+        } else if (search.startsWith('"')) {
+          search = search.slice(1, search.length);
+        }
+
         this.$emit('fetch-suggestions', search);
       }
     }, DEBOUNCE_DELAY),

ee/spec/frontend/vue_shared/components/filtered_search_bar/tokens/iteration_token_spec.js

@@ -12,7 +12,7 @@ import { mockIterationToken, mockIterations } from '../mock_data';
 jest.mock('~/flash');
 
 describe('IterationToken', () => {
-  const id = 123;
+  const id = '123';
   let wrapper;
 
   const createComponent = ({

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

@@ -14,7 +14,13 @@ import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_t
 
 import { mockLabelToken } from '../mock_data';
 
-jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils');
+jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', () => ({
+  getRecentlyUsedSuggestions: jest.fn(),
+  setTokenValueToRecentlyUsed: jest.fn(),
+  stripQuotes: jest.requireActual(
+    '~/vue_shared/components/filtered_search_bar/filtered_search_utils',
+  ).stripQuotes,
+}));
 
 const mockStorageKey = 'recent-tokens-label_name';
 
@@ -231,6 +237,7 @@ describe('BaseToken', () => {
             stubs: { Portal: true },
           });
         });
+
         it('emits `fetch-suggestions` event on component after a delay when component emits `input` event', async () => {
           jest.useFakeTimers();
 
@@ -242,6 +249,32 @@ describe('BaseToken', () => {
           expect(wrapperWithNoStubs.emitted('fetch-suggestions')).toBeTruthy();
           expect(wrapperWithNoStubs.emitted('fetch-suggestions')[2]).toEqual(['foo']);
         });
+
+        describe('when search is started with a quote', () => {
+          it('emits `fetch-suggestions` with filtered value', async () => {
+            jest.useFakeTimers();
+
+            wrapperWithNoStubs.find(GlFilteredSearchToken).vm.$emit('input', { data: '"foo' });
+            await wrapperWithNoStubs.vm.$nextTick();
+
+            jest.runAllTimers();
+
+            expect(wrapperWithNoStubs.emitted('fetch-suggestions')[2]).toEqual(['foo']);
+          });
+        });
+
+        describe('when search starts and ends with a quote', () => {
+          it('emits `fetch-suggestions` with filtered value', async () => {
+            jest.useFakeTimers();
+
+            wrapperWithNoStubs.find(GlFilteredSearchToken).vm.$emit('input', { data: '"foo"' });
+            await wrapperWithNoStubs.vm.$nextTick();
+
+            jest.runAllTimers();
+
+            expect(wrapperWithNoStubs.emitted('fetch-suggestions')[2]).toEqual(['foo']);
+          });
+        });
       });
     });
   });

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

@@ -8,7 +8,7 @@ import { mockReleaseToken } from '../mock_data';
 jest.mock('~/flash');
 
 describe('ReleaseToken', () => {
-  const id = 123;
+  const id = '123';
   let wrapper;
 
   const createComponent = ({ config = mockReleaseToken, value = { data: '' } } = {}) =>