Do minor refactor of filtered tokens

Do some identifier renamings etc to increase readability

app/assets/javascripts/runner/components/search_tokens/tag_token.vue

@@ -28,11 +28,6 @@ export default {
     };
   },
   methods: {
-    fnCurrentTokenValue(data) {
-      // By default, values are transformed with `toLowerCase`
-      // however, runner tags are case sensitive.
-      return data;
-    },
     getTagsOptions(search) {
       // TODO This should be implemented via a GraphQL API
       // The API should
@@ -72,7 +67,6 @@ export default {
     :config="config"
     :suggestions-loading="loading"
     :suggestions="tags"
-    :fn-current-token-value="fnCurrentTokenValue"
     :recent-suggestions-storage-key="config.recentTokenValuesStorageKey"
     @fetch-suggestions="fetchTags"
     v-on="$listeners"

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

@@ -31,19 +31,25 @@ export default {
   data() {
     return {
       authors: this.config.initialAuthors || [],
-      defaultAuthors: this.config.defaultAuthors || [DEFAULT_LABEL_ANY],
-      preloadedAuthors: this.config.preloadedAuthors || [],
       loading: false,
     };
   },
+  computed: {
+    defaultAuthors() {
+      return this.config.defaultAuthors || [DEFAULT_LABEL_ANY];
+    },
+    preloadedAuthors() {
+      return this.config.preloadedAuthors || [];
+    },
+  },
   methods: {
-    getActiveAuthor(authors, currentValue) {
-      return authors.find((author) => author.username.toLowerCase() === currentValue);
+    getActiveAuthor(authors, data) {
+      return authors.find((author) => author.username.toLowerCase() === data.toLowerCase());
     },
     getAvatarUrl(author) {
       return author.avatarUrl || author.avatar_url;
     },
-    fetchAuthorBySearchTerm(searchTerm) {
+    fetchAuthors(searchTerm) {
       this.loading = true;
       const fetchPromise = this.config.fetchPath
         ? this.config.fetchAuthors(this.config.fetchPath, searchTerm)
@@ -76,11 +82,11 @@ export default {
     :active="active"
     :suggestions-loading="loading"
     :suggestions="authors"
-    :fn-active-token-value="getActiveAuthor"
+    :get-active-token-value="getActiveAuthor"
     :default-suggestions="defaultAuthors"
     :preloaded-suggestions="preloadedAuthors"
     :recent-suggestions-storage-key="config.recentSuggestionsStorageKey"
-    @fetch-suggestions="fetchAuthorBySearchTerm"
+    @fetch-suggestions="fetchAuthors"
     v-on="$listeners"
   >
     <template #view="{ viewTokenProps: { inputValue, activeTokenValue } }">
@@ -91,7 +97,7 @@ export default {
         shape="circle"
         class="gl-mr-2"
       />
-      <span>{{ activeTokenValue ? activeTokenValue.name : inputValue }}</span>
+      {{ activeTokenValue ? activeTokenValue.name : inputValue }}
     </template>
     <template #suggestions-list="{ suggestions }">
       <gl-filtered-search-suggestion

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

@@ -42,12 +42,10 @@ export default {
       required: false,
       default: () => [],
     },
-    fnActiveTokenValue: {
+    getActiveTokenValue: {
       type: Function,
       required: false,
-      default: (suggestions, currentTokenValue) => {
-        return suggestions.find(({ value }) => value === currentTokenValue);
-      },
+      default: (suggestions, data) => suggestions.find(({ value }) => value === data),
     },
     defaultSuggestions: {
       type: Array,
@@ -69,11 +67,6 @@ export default {
       required: false,
       default: 'id',
     },
-    fnCurrentTokenValue: {
-      type: Function,
-      required: false,
-      default: null,
-    },
   },
   data() {
     return {
@@ -81,7 +74,6 @@ export default {
       recentSuggestions: this.recentSuggestionsStorageKey
         ? getRecentlyUsedSuggestions(this.recentSuggestionsStorageKey)
         : [],
-      loading: false,
     };
   },
   computed: {
@@ -94,14 +86,8 @@ export default {
     preloadedTokenIds() {
       return this.preloadedSuggestions.map((tokenValue) => tokenValue[this.valueIdentifier]);
     },
-    currentTokenValue() {
-      if (this.fnCurrentTokenValue) {
-        return this.fnCurrentTokenValue(this.value.data);
-      }
-      return this.value.data.toLowerCase();
-    },
     activeTokenValue() {
-      return this.fnActiveTokenValue(this.suggestions, this.currentTokenValue);
+      return this.getActiveTokenValue(this.suggestions, this.value.data);
     },
     /**
      * Return all the suggestions when searchKey is present

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

@@ -33,14 +33,18 @@ export default {
   data() {
     return {
       labels: this.config.initialLabels || [],
-      defaultLabels: this.config.defaultLabels || DEFAULT_LABELS,
       loading: false,
     };
   },
+  computed: {
+    defaultLabels() {
+      return this.config.defaultLabels || DEFAULT_LABELS;
+    },
+  },
   methods: {
-    getActiveLabel(labels, currentValue) {
+    getActiveLabel(labels, data) {
       return labels.find(
-        (label) => this.getLabelName(label).toLowerCase() === stripQuotes(currentValue),
+        (label) => this.getLabelName(label).toLowerCase() === stripQuotes(data).toLowerCase(),
       );
     },
     /**
@@ -68,7 +72,7 @@ export default {
       }
       return {};
     },
-    fetchLabelBySearchTerm(searchTerm) {
+    fetchLabels(searchTerm) {
       this.loading = true;
       this.config
         .fetchLabels(searchTerm)
@@ -98,10 +102,10 @@ export default {
     :active="active"
     :suggestions-loading="loading"
     :suggestions="labels"
-    :fn-active-token-value="getActiveLabel"
+    :get-active-token-value="getActiveLabel"
     :default-suggestions="defaultLabels"
     :recent-suggestions-storage-key="config.recentSuggestionsStorageKey"
-    @fetch-suggestions="fetchLabelBySearchTerm"
+    @fetch-suggestions="fetchLabels"
     v-on="$listeners"
   >
     <template

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

@@ -86,7 +86,7 @@ describe('AuthorToken', () => {
   });
 
   describe('methods', () => {
-    describe('fetchAuthorBySearchTerm', () => {
+    describe('fetchAuthors', () => {
       beforeEach(() => {
         wrapper = createComponent();
       });
@@ -155,7 +155,7 @@ describe('AuthorToken', () => {
       expect(baseTokenEl.exists()).toBe(true);
       expect(baseTokenEl.props()).toMatchObject({
         suggestions: mockAuthors,
-        fnActiveTokenValue: wrapper.vm.getActiveAuthor,
+        getActiveTokenValue: wrapper.vm.getActiveAuthor,
       });
     });
 

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

@@ -53,7 +53,6 @@ const mockProps = {
   suggestionsLoading: false,
   defaultSuggestions: DEFAULT_LABELS,
   recentSuggestionsStorageKey: mockStorageKey,
-  fnCurrentTokenValue: jest.fn(),
 };
 
 function createComponent({
@@ -99,31 +98,20 @@ describe('BaseToken', () => {
   });
 
   describe('computed', () => {
-    describe('currentTokenValue', () => {
-      it('calls `fnCurrentTokenValue` when it is provided', () => {
-        // We're disabling lint to trigger computed prop execution for this test.
-        // eslint-disable-next-line no-unused-vars
-        const { currentTokenValue } = wrapper.vm;
-
-        expect(wrapper.vm.fnCurrentTokenValue).toHaveBeenCalledWith(`"${mockRegularLabel.title}"`);
-      });
-    });
-
     describe('activeTokenValue', () => {
-      it('calls `fnActiveTokenValue` when it is provided', async () => {
-        const mockFnActiveTokenValue = jest.fn();
+      it('calls `getActiveTokenValue` when it is provided', async () => {
+        const mockGetActiveTokenValue = jest.fn();
 
         wrapper.setProps({
-          fnActiveTokenValue: mockFnActiveTokenValue,
-          fnCurrentTokenValue: undefined,
+          getActiveTokenValue: mockGetActiveTokenValue,
         });
 
         await wrapper.vm.$nextTick();
 
-        expect(mockFnActiveTokenValue).toHaveBeenCalledTimes(1);
-        expect(mockFnActiveTokenValue).toHaveBeenCalledWith(
+        expect(mockGetActiveTokenValue).toHaveBeenCalledTimes(1);
+        expect(mockGetActiveTokenValue).toHaveBeenCalledWith(
           mockLabels,
-          `"${mockRegularLabel.title.toLowerCase()}"`,
+          `"${mockRegularLabel.title}"`,
         );
       });
     });

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

@@ -98,11 +98,11 @@ describe('LabelToken', () => {
       });
     });
 
-    describe('fetchLabelBySearchTerm', () => {
+    describe('fetchLabels', () => {
       it('calls `config.fetchLabels` with provided searchTerm param', () => {
         jest.spyOn(wrapper.vm.config, 'fetchLabels');
 
-        wrapper.vm.fetchLabelBySearchTerm('foo');
+        wrapper.vm.fetchLabels('foo');
 
         expect(wrapper.vm.config.fetchLabels).toHaveBeenCalledWith('foo');
       });
@@ -110,7 +110,7 @@ describe('LabelToken', () => {
       it('sets response to `labels` when request is succesful', () => {
         jest.spyOn(wrapper.vm.config, 'fetchLabels').mockResolvedValue(mockLabels);
 
-        wrapper.vm.fetchLabelBySearchTerm('foo');
+        wrapper.vm.fetchLabels('foo');
 
         return waitForPromises().then(() => {
           expect(wrapper.vm.labels).toEqual(mockLabels);
@@ -120,7 +120,7 @@ describe('LabelToken', () => {
       it('calls `createFlash` with flash error message when request fails', () => {
         jest.spyOn(wrapper.vm.config, 'fetchLabels').mockRejectedValue({});
 
-        wrapper.vm.fetchLabelBySearchTerm('foo');
+        wrapper.vm.fetchLabels('foo');
 
         return waitForPromises().then(() => {
           expect(createFlash).toHaveBeenCalledWith({
@@ -132,7 +132,7 @@ describe('LabelToken', () => {
       it('sets `loading` to false when request completes', () => {
         jest.spyOn(wrapper.vm.config, 'fetchLabels').mockRejectedValue({});
 
-        wrapper.vm.fetchLabelBySearchTerm('foo');
+        wrapper.vm.fetchLabels('foo');
 
         return waitForPromises().then(() => {
           expect(wrapper.vm.loading).toBe(false);
@@ -160,7 +160,7 @@ describe('LabelToken', () => {
       expect(baseTokenEl.exists()).toBe(true);
       expect(baseTokenEl.props()).toMatchObject({
         suggestions: mockLabels,
-        fnActiveTokenValue: wrapper.vm.getActiveLabel,
+        getActiveTokenValue: wrapper.vm.getActiveLabel,
       });
     });