Validate query params

Validate query params and
clean up the code. Also updated
a few specs.

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

 <script>
-import { isEqual } from 'lodash';
+import { isEqual, pickBy } from 'lodash';
 import { __, sprintf, s__ } from '../../locale';
 import createFlash from '../../flash';
 import PipelinesService from '../services/pipelines_service';
@@ -10,7 +10,7 @@ import NavigationControls from './nav_controls.vue';
 import { getParameterByName } from '../../lib/utils/common_utils';
 import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 import PipelinesFilteredSearch from './pipelines_filtered_search.vue';
-import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING } from '../constants';
+import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, SUPPORTED_FILTER_PARAMETERS } from '../constants';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
@@ -224,20 +224,15 @@ export default {
     canFilterPipelines() {
       return this.glFeatures.filterPipelinesSearch;
     },
+    validatedParams() {
+      return pickBy(this.params, (val, key) => SUPPORTED_FILTER_PARAMETERS.includes(key) && val);
+    },
   },
   created() {
-    const { username, ref } = this.params;
-
     this.service = new PipelinesService(this.endpoint);
     this.requestData = { page: this.page, scope: this.scope };
 
-    if (username) {
-      this.requestData.username = username;
-    }
-
-    if (ref) {
-      this.requestData.ref = ref;
-    }
+    Object.assign(this.requestData, this.validatedParams);
   },
   methods: {
     successCallback(resp) {
@@ -320,7 +315,7 @@ export default {
       v-if="canFilterPipelines"
       :pipelines="state.pipelines"
       :project-id="projectId"
-      :params="params"
+      :params="validatedParams"
       @filterPipelines="filterPipelines"
     />
 

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

@@ -3,6 +3,7 @@ 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 { map } from 'lodash';
 
 export default {
   components: {
@@ -46,30 +47,10 @@ export default {
       ];
     },
     paramsValue() {
-      const valueArray = [];
-      const { username, ref } = this.params;
-
-      if (username) {
-        valueArray.push({
-          type: 'username',
-          value: {
-            data: username,
-            operator: '=',
-          },
-        });
-      }
-
-      if (ref) {
-        valueArray.push({
-          type: 'ref',
-          value: {
-            data: ref,
-            operator: '=',
-          },
-        });
-      }
-
-      return valueArray;
+      return map(this.params, (val, key) => ({
+        type: key,
+        value: { data: val, operator: '=' },
+      }));
     },
   },
   methods: {

app/assets/javascripts/pipelines/constants.js

@@ -5,6 +5,7 @@ export const PIPELINES_TABLE = 'PIPELINES_TABLE';
 export const LAYOUT_CHANGE_DELAY = 300;
 export const FILTER_PIPELINES_SEARCH_DELAY = 200;
 export const ANY_TRIGGER_AUTHOR = 'Any';
+export const SUPPORTED_FILTER_PARAMETERS = ['username', 'ref'];
 
 export const TestStatus = {
   FAILED: 'failed',

spec/frontend/pipelines/components/pipelines_filtered_search_spec.js

@@ -78,10 +78,8 @@ describe('Pipelines filtered search', () => {
 
   describe('Url query params', () => {
     const params = {
-      page: '1',
-      ref: 'master',
-      scope: 'all',
       username: 'deja.green',
+      ref: 'master',
     };
 
     beforeEach(() => {

spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js

@@ -65,6 +65,7 @@ describe('Pipeline Branch Name Token', () => {
     expect(Api.branches).toHaveBeenCalled();
 
     expect(wrapper.vm.branches).toEqual(mockBranchesAfterMap);
+    expect(findLoadingIcon().exists()).toBe(false);
   });
 
   describe('displays loading icon correctly', () => {

spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js

@@ -64,6 +64,7 @@ describe('Pipeline Trigger Author Token', () => {
     expect(Api.projectUsers).toHaveBeenCalled();
 
     expect(wrapper.vm.users).toEqual(users);
+    expect(findLoadingIcon().exists()).toBe(false);
   });
 
   describe('displays loading icon correctly', () => {