1 files changed, 32 insertions, 12 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index ec7c5764be1..48009a9fcb8 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
@@ -1,28 +1,34 @@
 <script>
+import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { isEqual } from 'lodash';
-import { GlIcon } from '@gitlab/ui';
-import { __, s__ } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import PipelinesService from '../../services/pipelines_service';
-import pipelinesMixin from '../../mixins/pipelines';
-import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import { getParameterByName } from '~/lib/utils/common_utils';
+import { __, s__ } from '~/locale';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, FILTER_TAG_IDENTIFIER } from '../../constants';
+import PipelinesMixin from '../../mixins/pipelines_mixin';
+import PipelinesService from '../../services/pipelines_service';
+import { validateParams } from '../../utils';
+import SvgBlankState from './blank_state.vue';
+import EmptyState from './empty_state.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 { validateParams } from '../../utils';
-import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, FILTER_TAG_IDENTIFIER } from '../../constants';
+import PipelinesTableComponent from './pipelines_table.vue';
 
 export default {
   components: {
-    TablePagination,
+    EmptyState,
+    GlIcon,
+    GlLoadingIcon,
     NavigationTabs,
     NavigationControls,
     PipelinesFilteredSearch,
-    GlIcon,
+    PipelinesTableComponent,
+    SvgBlankState,
+    TablePagination,
   },
-  mixins: [pipelinesMixin, CIPaginationMixin],
+  mixins: [PipelinesMixin],
   props: {
     store: {
       type: Object,
@@ -217,6 +223,20 @@ export default {
     this.requestData = { page: this.page, scope: this.scope, ...this.validatedParams };
   },
   methods: {
+    onChangeTab(scope) {
+      if (this.scope === scope) {
+        return;
+      }
+
+      let params = {
+        scope,
+        page: '1',
+      };
+
+      params = this.onChangeWithFilter(params);
+
+      this.updateContent(params);
+    },
     successCallback(resp) {
       // Because we are polling & the user is interacting verify if the response received
       // matches the last request made