From 442dce052a11600689597da932970e05439cc4a9 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 12 Jun 2019 10:18:37 +0100
Subject: Moves table pagination component

Move the table paginaiton component under the
new pagination folder in vue shared components
and updates all the paths
---
 .../commit/pipelines/pipelines_table.vue           |   2 +-
 .../environments/components/container.vue          |   2 +-
 .../environments/mixins/environments_mixin.js      |   2 +-
 .../javascripts/pipelines/components/pipelines.vue |   2 +-
 .../registry/components/table_registry.vue         |   2 +-
 .../components/pagination/table_pagination.vue     | 159 +++++++++++++++++++++
 .../vue_shared/components/table_pagination.vue     | 159 ---------------------
 .../unreleased/62788-clean-up-pagination.yml       |   5 +
 .../vue_shared/components/table_pagination_spec.js |   2 +-
 9 files changed, 170 insertions(+), 165 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/table_pagination.vue
 create mode 100644 changelogs/unreleased/62788-clean-up-pagination.yml

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 3e01841d563..4890f99e9d1 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -2,7 +2,7 @@
 import PipelinesService from '../../pipelines/services/pipelines_service';
 import PipelineStore from '../../pipelines/stores/pipelines_store';
 import pipelinesMixin from '../../pipelines/mixins/pipelines';
-import TablePagination from '../../vue_shared/components/table_pagination.vue';
+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';
 
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index be80661223c..f8a637138ad 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import TablePagination from '~/vue_shared/components/table_pagination.vue';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import containerMixin from 'ee_else_ce/environments/mixins/container_mixin';
 import EnvironmentTable from '../components/environments_table.vue';
 
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index a5812b173dc..31347d95a25 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -11,7 +11,7 @@ import Flash from '../../flash';
 import eventHub from '../event_hub';
 
 import EnvironmentsService from '../services/environments_service';
-import tablePagination from '../../vue_shared/components/table_pagination.vue';
+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';
diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue
index 9dcea557b32..d730ef41b1a 100644
--- a/app/assets/javascripts/pipelines/components/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines.vue
@@ -4,7 +4,7 @@ import { __, sprintf, s__ } from '../../locale';
 import createFlash from '../../flash';
 import PipelinesService from '../services/pipelines_service';
 import pipelinesMixin from '../mixins/pipelines';
-import TablePagination from '../../vue_shared/components/table_pagination.vue';
+import TablePagination from '../../vue_shared/components/pagination/table_pagination.vue';
 import NavigationTabs from '../../vue_shared/components/navigation_tabs.vue';
 import NavigationControls from './nav_controls.vue';
 import { getParameterByName } from '../../lib/utils/common_utils';
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index 81fe0a48c06..1e4dfe76b26 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -4,7 +4,7 @@ import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { n__ } from '../../locale';
 import createFlash from '../../flash';
 import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
-import TablePagination from '../../vue_shared/components/table_pagination.vue';
+import TablePagination from '../../vue_shared/components/pagination/table_pagination.vue';
 import Icon from '../../vue_shared/components/icon.vue';
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import { errorMessages, errorMessagesTypes } from '../constants';
diff --git a/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue b/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue
new file mode 100644
index 00000000000..1e2d4ffa7e3
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pagination/table_pagination.vue
@@ -0,0 +1,159 @@
+<script>
+import {
+  PAGINATION_UI_BUTTON_LIMIT,
+  UI_LIMIT,
+  SPREAD,
+  PREV,
+  NEXT,
+  FIRST,
+  LAST,
+} from '~/vue_shared/components/pagination/constants';
+
+export default {
+  props: {
+    /**
+        This function will take the information given by the pagination component
+
+        Here is an example `change` method:
+
+        change(pagenum) {
+          gl.utils.visitUrl(`?page=${pagenum}`);
+        },
+      */
+    change: {
+      type: Function,
+      required: true,
+    },
+
+    /**
+        pageInfo will come from the headers of the API call
+        in the `.then` clause of the VueResource API call
+        there should be a function that contructs the pageInfo for this component
+
+        This is an example:
+
+        const pageInfo = headers => ({
+          perPage: +headers['X-Per-Page'],
+          page: +headers['X-Page'],
+          total: +headers['X-Total'],
+          totalPages: +headers['X-Total-Pages'],
+          nextPage: +headers['X-Next-Page'],
+          previousPage: +headers['X-Prev-Page'],
+        });
+      */
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    prev() {
+      return this.pageInfo.previousPage;
+    },
+    next() {
+      return this.pageInfo.nextPage;
+    },
+    getItems() {
+      const { totalPages, nextPage, previousPage, page } = this.pageInfo;
+      const items = [];
+
+      if (page > 1) {
+        items.push({ title: FIRST, first: true });
+      }
+
+      if (previousPage) {
+        items.push({ title: PREV, prev: true });
+      } else {
+        items.push({ title: PREV, disabled: true, prev: true });
+      }
+
+      if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
+
+      if (totalPages) {
+        const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
+        const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, totalPages);
+
+        for (let i = start; i <= end; i += 1) {
+          const isActive = i === page;
+          items.push({ title: i, active: isActive, page: true });
+        }
+
+        if (totalPages - page > PAGINATION_UI_BUTTON_LIMIT) {
+          items.push({ title: SPREAD, separator: true, page: true });
+        }
+      }
+
+      if (nextPage) {
+        items.push({ title: NEXT, next: true });
+      } else {
+        items.push({ title: NEXT, disabled: true, next: true });
+      }
+
+      if (totalPages && totalPages - page >= 1) {
+        items.push({ title: LAST, last: true });
+      }
+
+      return items;
+    },
+    showPagination() {
+      return this.pageInfo.nextPage || this.pageInfo.previousPage;
+    },
+  },
+  methods: {
+    changePage(text, isDisabled) {
+      if (isDisabled) return;
+
+      const { totalPages, nextPage, previousPage } = this.pageInfo;
+
+      switch (text) {
+        case SPREAD:
+          break;
+        case LAST:
+          this.change(totalPages);
+          break;
+        case NEXT:
+          this.change(nextPage);
+          break;
+        case PREV:
+          this.change(previousPage);
+          break;
+        case FIRST:
+          this.change(1);
+          break;
+        default:
+          this.change(Number(text));
+          break;
+      }
+    },
+    hideOnSmallScreen(item) {
+      return !item.first && !item.last && !item.next && !item.prev && !item.active;
+    },
+  },
+};
+</script>
+<template>
+  <div v-if="showPagination" class="gl-pagination prepend-top-default">
+    <ul class="pagination justify-content-center">
+      <li
+        v-for="(item, index) in getItems"
+        :key="index"
+        :class="{
+          page: item.page,
+          'js-previous-button': item.prev,
+          'js-next-button': item.next,
+          'js-last-button': item.last,
+          'js-first-button': item.first,
+          'd-none d-md-block': hideOnSmallScreen(item),
+          separator: item.separator,
+          active: item.active,
+          disabled: item.disabled || item.separator,
+        }"
+        class="page-item"
+      >
+        <button type="button" class="page-link" @click="changePage(item.title, item.disabled)">
+          {{ item.title }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue
deleted file mode 100644
index 1e2d4ffa7e3..00000000000
--- a/app/assets/javascripts/vue_shared/components/table_pagination.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<script>
-import {
-  PAGINATION_UI_BUTTON_LIMIT,
-  UI_LIMIT,
-  SPREAD,
-  PREV,
-  NEXT,
-  FIRST,
-  LAST,
-} from '~/vue_shared/components/pagination/constants';
-
-export default {
-  props: {
-    /**
-        This function will take the information given by the pagination component
-
-        Here is an example `change` method:
-
-        change(pagenum) {
-          gl.utils.visitUrl(`?page=${pagenum}`);
-        },
-      */
-    change: {
-      type: Function,
-      required: true,
-    },
-
-    /**
-        pageInfo will come from the headers of the API call
-        in the `.then` clause of the VueResource API call
-        there should be a function that contructs the pageInfo for this component
-
-        This is an example:
-
-        const pageInfo = headers => ({
-          perPage: +headers['X-Per-Page'],
-          page: +headers['X-Page'],
-          total: +headers['X-Total'],
-          totalPages: +headers['X-Total-Pages'],
-          nextPage: +headers['X-Next-Page'],
-          previousPage: +headers['X-Prev-Page'],
-        });
-      */
-    pageInfo: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    prev() {
-      return this.pageInfo.previousPage;
-    },
-    next() {
-      return this.pageInfo.nextPage;
-    },
-    getItems() {
-      const { totalPages, nextPage, previousPage, page } = this.pageInfo;
-      const items = [];
-
-      if (page > 1) {
-        items.push({ title: FIRST, first: true });
-      }
-
-      if (previousPage) {
-        items.push({ title: PREV, prev: true });
-      } else {
-        items.push({ title: PREV, disabled: true, prev: true });
-      }
-
-      if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
-
-      if (totalPages) {
-        const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
-        const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, totalPages);
-
-        for (let i = start; i <= end; i += 1) {
-          const isActive = i === page;
-          items.push({ title: i, active: isActive, page: true });
-        }
-
-        if (totalPages - page > PAGINATION_UI_BUTTON_LIMIT) {
-          items.push({ title: SPREAD, separator: true, page: true });
-        }
-      }
-
-      if (nextPage) {
-        items.push({ title: NEXT, next: true });
-      } else {
-        items.push({ title: NEXT, disabled: true, next: true });
-      }
-
-      if (totalPages && totalPages - page >= 1) {
-        items.push({ title: LAST, last: true });
-      }
-
-      return items;
-    },
-    showPagination() {
-      return this.pageInfo.nextPage || this.pageInfo.previousPage;
-    },
-  },
-  methods: {
-    changePage(text, isDisabled) {
-      if (isDisabled) return;
-
-      const { totalPages, nextPage, previousPage } = this.pageInfo;
-
-      switch (text) {
-        case SPREAD:
-          break;
-        case LAST:
-          this.change(totalPages);
-          break;
-        case NEXT:
-          this.change(nextPage);
-          break;
-        case PREV:
-          this.change(previousPage);
-          break;
-        case FIRST:
-          this.change(1);
-          break;
-        default:
-          this.change(Number(text));
-          break;
-      }
-    },
-    hideOnSmallScreen(item) {
-      return !item.first && !item.last && !item.next && !item.prev && !item.active;
-    },
-  },
-};
-</script>
-<template>
-  <div v-if="showPagination" class="gl-pagination prepend-top-default">
-    <ul class="pagination justify-content-center">
-      <li
-        v-for="(item, index) in getItems"
-        :key="index"
-        :class="{
-          page: item.page,
-          'js-previous-button': item.prev,
-          'js-next-button': item.next,
-          'js-last-button': item.last,
-          'js-first-button': item.first,
-          'd-none d-md-block': hideOnSmallScreen(item),
-          separator: item.separator,
-          active: item.active,
-          disabled: item.disabled || item.separator,
-        }"
-        class="page-item"
-      >
-        <button type="button" class="page-link" @click="changePage(item.title, item.disabled)">
-          {{ item.title }}
-        </button>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/changelogs/unreleased/62788-clean-up-pagination.yml b/changelogs/unreleased/62788-clean-up-pagination.yml
new file mode 100644
index 00000000000..05e3a4527b8
--- /dev/null
+++ b/changelogs/unreleased/62788-clean-up-pagination.yml
@@ -0,0 +1,5 @@
+---
+title: Moves the table pagination shared component
+merge_request:
+author:
+type: other
diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js
index 42cd41381dc..42abb4d83f0 100644
--- a/spec/javascripts/vue_shared/components/table_pagination_spec.js
+++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import paginationComp from '~/vue_shared/components/table_pagination.vue';
+import paginationComp from '~/vue_shared/components/pagination/table_pagination.vue';
 
 describe('Pagination component', () => {
   let component;
-- 
cgit v1.2.1