Move api calls to tokens

Move api calls out of filtered
search and into tokens. This
is needed to display url params
values when the component is mounted.

app/assets/javascripts/pipelines/components/pipelines_filtered_search.vue

@@ -3,9 +3,6 @@ import { GlFilteredSearch } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import PipelineTriggerAuthorToken from './tokens/pipeline_trigger_author_token.vue';
 import PipelineBranchNameToken from './tokens/pipeline_branch_name_token.vue';
-import Api from '~/api';
-import createFlash from '~/flash';
-import { FETCH_AUTHOR_ERROR_MESSAGE, FETCH_BRANCH_ERROR_MESSAGE } from '../constants';
 
 export default {
   components: {
@@ -25,12 +22,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      projectUsers: null,
-      projectBranches: null,
-    };
-  },
   computed: {
     tokens() {
       return [
@@ -41,7 +32,6 @@ export default {
           unique: true,
           token: PipelineTriggerAuthorToken,
           operators: [{ value: '=', description: __('is'), default: 'true' }],
-          triggerAuthors: this.projectUsers,
           projectId: this.projectId,
         },
         {
@@ -51,7 +41,6 @@ export default {
           unique: true,
           token: PipelineBranchNameToken,
           operators: [{ value: '=', description: __('is'), default: 'true' }],
-          branches: this.projectBranches,
           projectId: this.projectId,
         },
       ];
@@ -83,25 +72,6 @@ export default {
       return valueArray;
     },
   },
-  created() {
-    Api.projectUsers(this.projectId)
-      .then(users => {
-        this.projectUsers = users;
-      })
-      .catch(err => {
-        createFlash(FETCH_AUTHOR_ERROR_MESSAGE);
-        throw err;
-      });
-
-    Api.branches(this.projectId)
-      .then(({ data }) => {
-        this.projectBranches = data.map(branch => branch.name);
-      })
-      .catch(err => {
-        createFlash(FETCH_BRANCH_ERROR_MESSAGE);
-        throw err;
-      });
-  },
   methods: {
     onSubmit(filters) {
       this.$emit('filterPipelines', filters);

app/assets/javascripts/pipelines/components/tokens/pipeline_branch_name_token.vue

@@ -23,15 +23,18 @@ export default {
   },
   data() {
     return {
-      branches: this.config.branches,
+      branches: null,
       loading: true,
     };
   },
+  created() {
+    this.fetchBranches();
+  },
   methods: {
-    fetchBranchBySearchTerm(searchTerm) {
-      Api.branches(this.config.projectId, searchTerm)
-        .then(res => {
-          this.branches = res.data.map(branch => branch.name);
+    fetchBranches(searchterm) {
+      Api.branches(this.config.projectId, searchterm)
+        .then(({ data }) => {
+          this.branches = data.map(branch => branch.name);
           this.loading = false;
         })
         .catch(err => {
@@ -41,7 +44,7 @@ export default {
         });
     },
     searchBranches: debounce(function debounceSearch({ data }) {
-      this.fetchBranchBySearchTerm(data);
+      this.fetchBranches(data);
     }, FILTER_PIPELINES_SEARCH_DELAY),
   },
 };
@@ -55,7 +58,7 @@ export default {
     @input="searchBranches"
   >
     <template #suggestions>
-      <gl-loading-icon v-if="loading && !value" />
+      <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="(branch, index) in branches"

app/assets/javascripts/pipelines/components/tokens/pipeline_trigger_author_token.vue

@@ -36,7 +36,7 @@ export default {
   },
   data() {
     return {
-      users: this.config.triggerAuthors,
+      users: [],
       loading: true,
     };
   },
@@ -45,16 +45,19 @@ export default {
       return this.value.data.toLowerCase();
     },
     activeUser() {
-      return this.config.triggerAuthors.find(user => {
+      return this.users.find(user => {
         return user.username.toLowerCase() === this.currentValue;
       });
     },
   },
+  created() {
+    this.fetchProjectUsers();
+  },
   methods: {
-    fetchAuthorBySearchTerm(searchTerm) {
+    fetchProjectUsers(searchTerm) {
       Api.projectUsers(this.config.projectId, searchTerm)
-        .then(res => {
-          this.users = res;
+        .then(users => {
+          this.users = users;
           this.loading = false;
         })
         .catch(err => {
@@ -64,7 +67,7 @@ export default {
         });
     },
     searchAuthors: debounce(function debounceSearch({ data }) {
-      this.fetchAuthorBySearchTerm(data);
+      this.fetchProjectUsers(data);
     }, FILTER_PIPELINES_SEARCH_DELAY),
   },
 };
@@ -72,7 +75,6 @@ export default {
 
 <template>
   <gl-filtered-search-token
-    v-if="config.triggerAuthors"
     :config="config"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
@@ -94,7 +96,7 @@ export default {
       }}</gl-filtered-search-suggestion>
       <gl-dropdown-divider />
 
-      <gl-loading-icon v-if="loading && !value" />
+      <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="user in users"

spec/frontend/pipelines/components/pipelines_filtered_search_spec.js

@@ -3,13 +3,7 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import PipelinesFilteredSearch from '~/pipelines/components/pipelines_filtered_search.vue';
-import {
-  users,
-  mockSearch,
-  pipelineWithStages,
-  branches,
-  mockBranchesAfterMap,
-} from '../mock_data';
+import { users, mockSearch, pipelineWithStages, branches } from '../mock_data';
 import { GlFilteredSearch } from '@gitlab/ui';
 
 describe('Pipelines filtered search', () => {
@@ -22,11 +16,12 @@ describe('Pipelines filtered search', () => {
       .props('availableTokens')
       .find(token => token.type === type);
 
-  const createComponent = () => {
+  const createComponent = (params = {}) => {
     wrapper = mount(PipelinesFilteredSearch, {
       propsData: {
         pipelines: [pipelineWithStages],
         projectId: '21',
+        params,
       },
       attachToDocument: true,
     });
@@ -60,7 +55,6 @@ describe('Pipelines filtered search', () => {
       icon: 'user',
       title: 'Trigger author',
       unique: true,
-      triggerAuthors: users,
       projectId: '21',
       operators: [expect.objectContaining({ value: '=' })],
     });
@@ -70,28 +64,51 @@ describe('Pipelines filtered search', () => {
       icon: 'branch',
       title: 'Branch name',
       unique: true,
-      branches: mockBranchesAfterMap,
       projectId: '21',
       operators: [expect.objectContaining({ value: '=' })],
     });
   });
 
-  it('fetches and sets project users', () => {
-    expect(Api.projectUsers).toHaveBeenCalled();
+  it('emits filterPipelines on submit with correct filter', () => {
+    findFilteredSearch().vm.$emit('submit', mockSearch);
 
-    expect(wrapper.vm.projectUsers).toEqual(users);
+    expect(wrapper.emitted('filterPipelines')).toBeTruthy();
+    expect(wrapper.emitted('filterPipelines')[0]).toEqual([mockSearch]);
   });
 
-  it('fetches and sets branches', () => {
-    expect(Api.branches).toHaveBeenCalled();
+  describe('Url query params', () => {
+    const params = {
+      page: '1',
+      ref: 'master',
+      scope: 'all',
+      username: 'deja.green',
+    };
 
-    expect(wrapper.vm.projectBranches).toEqual(mockBranchesAfterMap);
+    beforeEach(() => {
+      createComponent(params);
     });
 
-  it('emits filterPipelines on submit with correct filter', () => {
-    findFilteredSearch().vm.$emit('submit', mockSearch);
+    it('sets default value if url query params', () => {
+      const expectedValueProp = [
+        {
+          type: 'username',
+          value: {
+            data: params.username,
+            operator: '=',
+          },
+        },
+        {
+          type: 'ref',
+          value: {
+            data: params.ref,
+            operator: '=',
+          },
+        },
+        { type: 'filtered-search-term', value: { data: '' } },
+      ];
 
-    expect(wrapper.emitted('filterPipelines')).toBeTruthy();
-    expect(wrapper.emitted('filterPipelines')[0]).toEqual([mockSearch]);
+      expect(findFilteredSearch().props('value')).toEqual(expectedValueProp);
+      expect(findFilteredSearch().props('value')).toHaveLength(expectedValueProp.length);
+    });
   });
 });

spec/frontend/pipelines/pipelines_spec.js

@@ -56,6 +56,7 @@ describe('Pipelines', () => {
       propsData: {
         store: new Store(),
         projectId: '21',
+        params: {},
         ...props,
       },
       methods: {

spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js

+import Api from '~/api';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import PipelineBranchNameToken from '~/pipelines/components/tokens/pipeline_branch_name_token.vue';
-import { branches } from '../mock_data';
+import { branches, mockBranchesAfterMap } from '../mock_data';
 
 describe('Pipeline Branch Name Token', () => {
   let wrapper;
+  let mock;
 
   const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
   const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
@@ -46,10 +50,15 @@ describe('Pipeline Branch Name Token', () => {
   };
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
+    jest.spyOn(Api, 'branches').mockResolvedValue({ data: branches });
+
     createComponent();
   });
 
   afterEach(() => {
+    mock.restore();
     wrapper.destroy();
     wrapper = null;
   });
@@ -58,6 +67,12 @@ describe('Pipeline Branch Name Token', () => {
     expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
   });
 
+  it('fetches and sets project branches', () => {
+    expect(Api.branches).toHaveBeenCalled();
+
+    expect(wrapper.vm.branches).toEqual(mockBranchesAfterMap);
+  });
+
   describe('displays loading icon correctly', () => {
     it('shows loading icon', () => {
       createComponent({ stubs }, { loading: true });

spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js

+import Api from '~/api';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import PipelineTriggerAuthorToken from '~/pipelines/components/tokens/pipeline_trigger_author_token.vue';
@@ -5,6 +8,7 @@ import { users } from '../mock_data';
 
 describe('Pipeline Trigger Author Token', () => {
   let wrapper;
+  let mock;
 
   const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
   const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
@@ -45,10 +49,15 @@ describe('Pipeline Trigger Author Token', () => {
   };
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+
+    jest.spyOn(Api, 'projectUsers').mockResolvedValue(users);
+
     createComponent();
   });
 
   afterEach(() => {
+    mock.restore();
     wrapper.destroy();
     wrapper = null;
   });
@@ -57,6 +66,12 @@ describe('Pipeline Trigger Author Token', () => {
     expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
   });
 
+  it('fetches and sets project users', () => {
+    expect(Api.projectUsers).toHaveBeenCalled();
+
+    expect(wrapper.vm.users).toEqual(users);
+  });
+
   describe('displays loading icon correctly', () => {
     it('shows loading icon', () => {
       createComponent({ stubs }, { loading: true });