Merge branch 'mrincon-move-mixin-logic' into 'master'

Reduce logic in Pipelines Vue mixin

See merge request gitlab-org/gitlab!53834

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -2,21 +2,24 @@
 import { GlButton, GlLoadingIcon, GlModal, GlLink } from '@gitlab/ui';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import eventHub from '~/pipelines/event_hub';
-import pipelinesMixin from '~/pipelines/mixins/pipelines';
-import PipelinesPaginationApiMixin from '~/pipelines/mixins/pipelines_pagination_api_mixin';
+import PipelinesMixin from '~/pipelines/mixins/pipelines_mixin';
 import PipelinesService from '~/pipelines/services/pipelines_service';
 import PipelineStore from '~/pipelines/stores/pipelines_store';
+import PipelinesTableComponent from '~/pipelines/components/pipelines_list/pipelines_table.vue';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import SvgBlankState from '~/pipelines/components/pipelines_list/blank_state.vue';
 
 export default {
   components: {
-    TablePagination,
     GlButton,
+    GlLink,
     GlLoadingIcon,
     GlModal,
-    GlLink,
+    PipelinesTableComponent,
+    TablePagination,
+    SvgBlankState,
   },
-  mixins: [pipelinesMixin, PipelinesPaginationApiMixin],
+  mixins: [PipelinesMixin],
   props: {
     endpoint: {
       type: String,

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

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { isEqual } from 'lodash';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { getParameterByName } from '~/lib/utils/common_utils';
@@ -7,22 +7,28 @@ 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';
-import PipelinesPaginationApiMixin from '../../mixins/pipelines_pagination_api_mixin';
+import PipelinesMixin from '../../mixins/pipelines_mixin';
 import PipelinesService from '../../services/pipelines_service';
 import { validateParams } from '../../utils';
+import EmptyState from './empty_state.vue';
 import NavigationControls from './nav_controls.vue';
 import PipelinesFilteredSearch from './pipelines_filtered_search.vue';
+import PipelinesTableComponent from './pipelines_table.vue';
+import SvgBlankState from './blank_state.vue';
 
 export default {
   components: {
-    TablePagination,
+    EmptyState,
+    GlIcon,
+    GlLoadingIcon,
     NavigationTabs,
     NavigationControls,
     PipelinesFilteredSearch,
-    GlIcon,
+    PipelinesTableComponent,
+    SvgBlankState,
+    TablePagination,
   },
-  mixins: [pipelinesMixin, PipelinesPaginationApiMixin],
+  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

app/assets/javascripts/pipelines/mixins/pipelines.js → app/assets/javascripts/pipelines/mixins/pipelines_mixin.js

-import { GlLoadingIcon } from '@gitlab/ui';
 import Visibility from 'visibilityjs';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import Poll from '~/lib/utils/poll';
+import { historyPushState, buildUrlWithCurrentLocation } from '~/lib/utils/common_utils';
+import { validateParams } from '~/pipelines/utils';
 import { __ } from '~/locale';
-import SvgBlankState from '../components/pipelines_list/blank_state.vue';
-import EmptyState from '../components/pipelines_list/empty_state.vue';
-import PipelinesTableComponent from '../components/pipelines_list/pipelines_table.vue';
 import { CANCEL_REQUEST } from '../constants';
 import eventHub from '../event_hub';
 
 export default {
-  components: {
-    PipelinesTableComponent,
-    SvgBlankState,
-    EmptyState,
-    GlLoadingIcon,
-  },
   data() {
     return {
       isLoading: false,
@@ -76,6 +68,25 @@ export default {
     this.poll.stop();
   },
   methods: {
+    updateInternalState(parameters) {
+      this.poll.stop();
+
+      const queryString = Object.keys(parameters)
+        .map((parameter) => {
+          const value = parameters[parameter];
+          // update internal state for UI
+          this[parameter] = value;
+          return `${parameter}=${encodeURIComponent(value)}`;
+        })
+        .join('&');
+
+      // update polling parameters
+      this.requestData = parameters;
+
+      historyPushState(buildUrlWithCurrentLocation(`?${queryString}`));
+
+      this.isLoading = true;
+    },
     /**
      * Handles URL and query parameter changes.
      * When the user uses the pagination or the tabs,
@@ -184,5 +195,23 @@ export default {
         })
         .finally(() => this.store.toggleIsRunningPipeline(false));
     },
+    onChangePage(page) {
+      /* URLS parameters are strings, we need to parse to match types */
+      let params = {
+        page: Number(page).toString(),
+      };
+
+      if (this.scope) {
+        params.scope = this.scope;
+      }
+
+      params = this.onChangeWithFilter(params);
+
+      this.updateContent(params);
+    },
+
+    onChangeWithFilter(params) {
+      return { ...params, ...validateParams(this.requestData) };
+    },
   },
 };

app/assets/javascripts/pipelines/mixins/pipelines_pagination_api_mixin.js

-/**
- * API callbacks for pagination and tabs
- *
- * Components need to have `scope`, `page` and `requestData`
- */
-import { validateParams } from '~/pipelines/utils';
-import { historyPushState, buildUrlWithCurrentLocation } from '../../lib/utils/common_utils';
-
-export default {
-  methods: {
-    onChangeTab(scope) {
-      if (this.scope === scope) {
-        return;
-      }
-
-      let params = {
-        scope,
-        page: '1',
-      };
-
-      params = this.onChangeWithFilter(params);
-
-      this.updateContent(params);
-    },
-
-    onChangePage(page) {
-      /* URLS parameters are strings, we need to parse to match types */
-      let params = {
-        page: Number(page).toString(),
-      };
-
-      if (this.scope) {
-        params.scope = this.scope;
-      }
-
-      params = this.onChangeWithFilter(params);
-
-      this.updateContent(params);
-    },
-
-    onChangeWithFilter(params) {
-      return { ...params, ...validateParams(this.requestData) };
-    },
-
-    updateInternalState(parameters) {
-      // stop polling
-      this.poll.stop();
-
-      const queryString = Object.keys(parameters)
-        .map((parameter) => {
-          const value = parameters[parameter];
-          // update internal state for UI
-          this[parameter] = value;
-          return `${parameter}=${encodeURIComponent(value)}`;
-        })
-        .join('&');
-
-      // update polling parameters
-      this.requestData = parameters;
-
-      historyPushState(buildUrlWithCurrentLocation(`?${queryString}`));
-
-      this.isLoading = true;
-    },
-  },
-};