2 files changed, 73 insertions, 7 deletions
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index 15a00c11ee6..d5caff1660a 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -3,18 +3,18 @@
  */
 import { isEqual, isFunction, omitBy } from 'lodash';
 import Visibility from 'visibilityjs';
-import EnvironmentsStore from '../stores/environments_store';
-import Poll from '../../lib/utils/poll';
+import { deprecatedCreateFlash as Flash } from '../../flash';
 import { getParameterByName } from '../../lib/utils/common_utils';
+import Poll from '../../lib/utils/poll';
 import { s__ } from '../../locale';
-import { deprecatedCreateFlash as Flash } from '../../flash';
+import tabs from '../../vue_shared/components/navigation_tabs.vue';
+import tablePagination from '../../vue_shared/components/pagination/table_pagination.vue';
+import container from '../components/container.vue';
+import environmentTable from '../components/environments_table.vue';
 import eventHub from '../event_hub';
 
 import EnvironmentsService from '../services/environments_service';
-import tablePagination from '../../vue_shared/components/pagination/table_pagination.vue';
-import environmentTable from '../components/environments_table.vue';
-import tabs from '../../vue_shared/components/navigation_tabs.vue';
-import container from '../components/container.vue';
+import EnvironmentsStore from '../stores/environments_store';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js b/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js
new file mode 100644
index 00000000000..b62fe196a6f
--- /dev/null
+++ b/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js
@@ -0,0 +1,66 @@
+/**
+ * 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;
+    },
+  },
+};