Merge branch '321021-refactor-ci_pagination_api_mixin' into 'master'

Move mixin from shared into separate directories

See merge request gitlab-org/gitlab!53833

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

@@ -6,7 +6,7 @@ import pipelinesMixin from '~/pipelines/mixins/pipelines';
 import eventHub from '~/pipelines/event_hub';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import { getParameterByName } from '~/lib/utils/common_utils';
-import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
+import PipelinesPaginationApiMixin from '~/pipelines/mixins/pipelines_pagination_api_mixin';
 
 export default {
   components: {
@@ -16,7 +16,7 @@ export default {
     GlModal,
     GlLink,
   },
-  mixins: [pipelinesMixin, CIPaginationMixin],
+  mixins: [pipelinesMixin, PipelinesPaginationApiMixin],
   props: {
     endpoint: {
       type: String,

app/assets/javascripts/environments/components/environments_app.vue

@@ -2,9 +2,9 @@
 import { GlBadge, GlButton, GlModalDirective, GlTab, GlTabs } from '@gitlab/ui';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import { s__ } from '~/locale';
-import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
 import eventHub from '../event_hub';
 import environmentsMixin from '../mixins/environments_mixin';
+import EnvironmentsPaginationApiMixin from '../mixins/environments_pagination_api_mixin';
 import emptyState from './empty_state.vue';
 import EnableReviewAppModal from './enable_review_app_modal.vue';
 import StopEnvironmentModal from './stop_environment_modal.vue';
@@ -33,7 +33,7 @@ export default {
   directives: {
     'gl-modal': GlModalDirective,
   },
-  mixins: [CIPaginationMixin, environmentsMixin],
+  mixins: [EnvironmentsPaginationApiMixin, environmentsMixin],
   props: {
     endpoint: {
       type: String,

app/assets/javascripts/environments/folder/environments_folder_view.vue

 <script>
 import { GlBadge, GlTab, GlTabs } from '@gitlab/ui';
 import environmentsMixin from '../mixins/environments_mixin';
-import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
+import EnvironmentsPaginationApiMixin from '../mixins/environments_pagination_api_mixin';
 import StopEnvironmentModal from '../components/stop_environment_modal.vue';
 import DeleteEnvironmentModal from '../components/delete_environment_modal.vue';
 
@@ -14,7 +14,7 @@ export default {
     StopEnvironmentModal,
   },
 
-  mixins: [environmentsMixin, CIPaginationMixin],
+  mixins: [environmentsMixin, EnvironmentsPaginationApiMixin],
 
   props: {
     endpoint: {

app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js → app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js

 /**
  * API callbacks for pagination and tabs
- * shared between Pipelines and Environments table.
  *
  * Components need to have `scope`, `page` and `requestData`
  */

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

@@ -6,7 +6,7 @@ import { deprecatedCreateFlash as createFlash } from '~/flash';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
 import { getParameterByName } from '~/lib/utils/common_utils';
-import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
+import PipelinesPaginationApiMixin from '../../mixins/pipelines_pagination_api_mixin';
 import pipelinesMixin from '../../mixins/pipelines';
 import PipelinesService from '../../services/pipelines_service';
 import { validateParams } from '../../utils';
@@ -22,7 +22,7 @@ export default {
     PipelinesFilteredSearch,
     GlIcon,
   },
-  mixins: [pipelinesMixin, CIPaginationMixin],
+  mixins: [pipelinesMixin, PipelinesPaginationApiMixin],
   props: {
     store: {
       type: Object,

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;
+    },
+  },
+};