1 files changed, 20 insertions, 4 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index fc93635bdb5..dbf29b0c29c 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -10,7 +10,8 @@ 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 { validateParams } from '../utils';
+import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, FILTER_TAG_IDENTIFIER } from '../constants';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
@@ -86,6 +87,10 @@ export default {
       type: String,
       required: true,
     },
+    params: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
@@ -220,10 +225,13 @@ export default {
     canFilterPipelines() {
       return this.glFeatures.filterPipelinesSearch;
     },
+    validatedParams() {
+      return validateParams(this.params);
+    },
   },
   created() {
     this.service = new PipelinesService(this.endpoint);
-    this.requestData = { page: this.page, scope: this.scope };
+    this.requestData = { page: this.page, scope: this.scope, ...this.validatedParams };
   },
   methods: {
     successCallback(resp) {
@@ -258,10 +266,18 @@ export default {
       filters.forEach(filter => {
         // do not add Any for username query param, so we
         // can fetch all trigger authors
-        if (filter.type && filter.value.data !== ANY_TRIGGER_AUTHOR) {
+        if (
+          filter.type &&
+          filter.value.data !== ANY_TRIGGER_AUTHOR &&
+          filter.type !== FILTER_TAG_IDENTIFIER
+        ) {
           this.requestData[filter.type] = filter.value.data;
         }
 
+        if (filter.type === FILTER_TAG_IDENTIFIER) {
+          this.requestData.ref = filter.value.data;
+        }
+
         if (!filter.type) {
           createFlash(RAW_TEXT_WARNING, 'warning');
         }
@@ -304,8 +320,8 @@ export default {
 
     <pipelines-filtered-search
       v-if="canFilterPipelines"
-      :pipelines="state.pipelines"
       :project-id="projectId"
+      :params="validatedParams"
       @filterPipelines="filterPipelines"
     />