1 files changed, 43 insertions, 1 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index d4f23697e09..fc93635bdb5 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -9,14 +9,18 @@ import NavigationTabs from '../../vue_shared/components/navigation_tabs.vue';
 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 glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
     TablePagination,
     NavigationTabs,
     NavigationControls,
+    PipelinesFilteredSearch,
   },
-  mixins: [pipelinesMixin, CIPaginationMixin],
+  mixins: [pipelinesMixin, CIPaginationMixin, glFeatureFlagsMixin()],
   props: {
     store: {
       type: Object,
@@ -78,6 +82,10 @@ export default {
       required: false,
       default: null,
     },
+    projectId: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -209,6 +217,9 @@ export default {
         },
       ];
     },
+    canFilterPipelines() {
+      return this.glFeatures.filterPipelinesSearch;
+    },
   },
   created() {
     this.service = new PipelinesService(this.endpoint);
@@ -238,6 +249,30 @@ export default {
           createFlash(s__('Pipelines|Something went wrong while cleaning runners cache.'));
         });
     },
+    resetRequestData() {
+      this.requestData = { page: this.page, scope: this.scope };
+    },
+    filterPipelines(filters) {
+      this.resetRequestData();
+
+      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) {
+          this.requestData[filter.type] = filter.value.data;
+        }
+
+        if (!filter.type) {
+          createFlash(RAW_TEXT_WARNING, 'warning');
+        }
+      });
+
+      if (filters.length === 0) {
+        this.resetRequestData();
+      }
+
+      this.updateContent(this.requestData);
+    },
   },
 };
 </script>
@@ -267,6 +302,13 @@ export default {
       />
     </div>
 
+    <pipelines-filtered-search
+      v-if="canFilterPipelines"
+      :pipelines="state.pipelines"
+      :project-id="projectId"
+      @filterPipelines="filterPipelines"
+    />
+
     <div class="content-list pipelines">
       <gl-loading-icon
         v-if="stateToRender === $options.stateMap.loading"