Add latest changes from gitlab-org/gitlab@master

2 files changed, 9 insertions, 139 deletions

diff --git a/app/assets/javascripts/import_entities/components/pagination_bar.vue b/app/assets/javascripts/import_entities/components/pagination_bar.vue
deleted file mode 100644
index 33bd3e08bb1..00000000000
--- a/app/assets/javascripts/import_entities/components/pagination_bar.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script>
-import { GlDropdown, GlDropdownItem, GlIcon, GlSprintf } from '@gitlab/ui';
-import { __ } from '~/locale';
-import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
-
-const DEFAULT_PAGE_SIZES = [20, 50, 100];
-
-export default {
-  components: {
-    PaginationLinks,
-    GlDropdown,
-    GlDropdownItem,
-    GlIcon,
-    GlSprintf,
-  },
-  props: {
-    pageInfo: {
-      required: true,
-      type: Object,
-    },
-    pageSizes: {
-      required: false,
-      type: Array,
-      default: () => DEFAULT_PAGE_SIZES,
-    },
-    itemsCount: {
-      required: true,
-      type: Number,
-    },
-  },
-
-  computed: {
-    humanizedTotal() {
-      return this.pageInfo.total >= 1000 ? __('1000+') : this.pageInfo.total;
-    },
-
-    paginationInfo() {
-      const { page, perPage } = this.pageInfo;
-      const start = (page - 1) * perPage + 1;
-      const end = start + this.itemsCount - 1;
-
-      return { start, end };
-    },
-  },
-
-  methods: {
-    setPage(page) {
-      this.$emit('set-page', page);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="gl-display-flex gl-align-items-center">
-    <pagination-links :change="setPage" :page-info="pageInfo" class="gl-m-0" />
-    <gl-dropdown category="tertiary" class="gl-ml-auto">
-      <template #button-content>
-        <span class="gl-font-weight-bold">
-          <gl-sprintf :message="__('%{count} items per page')">
-            <template #count>
-              {{ pageInfo.perPage }}
-            </template>
-          </gl-sprintf>
-        </span>
-        <gl-icon class="gl-button-icon dropdown-chevron" name="chevron-down" />
-      </template>
-      <gl-dropdown-item v-for="size in pageSizes" :key="size" @click="$emit('set-page-size', size)">
-        <gl-sprintf :message="__('%{count} items per page')">
-          <template #count>
-            {{ size }}
-          </template>
-        </gl-sprintf>
-      </gl-dropdown-item>
-    </gl-dropdown>
-    <div class="gl-ml-2" data-testid="information">
-      <gl-sprintf :message="s__('BulkImport|Showing %{start}-%{end} of %{total}')">
-        <template #start>
-          {{ paginationInfo.start }}
-        </template>
-        <template #end>
-          {{ paginationInfo.end }}
-        </template>
-        <template #total>
-          {{ humanizedTotal }}
-        </template>
-      </gl-sprintf>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
index f2837a7bb44..9125b8a2f44 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue
@@ -2,8 +2,6 @@
 import {
   GlButton,
   GlEmptyState,
-  GlDropdown,
-  GlDropdownItem,
   GlIcon,
   GlLink,
   GlLoadingIcon,
@@ -15,7 +13,7 @@ import {
 import { debounce } from 'lodash';
 import createFlash from '~/flash';
 import { s__, __, n__ } from '~/locale';
-import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
 import { getGroupPathAvailability } from '~/rest_api';
 import axios from '~/lib/utils/axios_utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
@@ -44,8 +42,6 @@ export default {
   components: {
     GlButton,
     GlEmptyState,
-    GlDropdown,
-    GlDropdownItem,
     GlIcon,
     GlLink,
     GlLoadingIcon,
@@ -57,7 +53,7 @@ export default {
     ImportTargetCell,
     ImportStatusCell,
     ImportActionsCell,
-    PaginationLinks,
+    PaginationBar,
   },
 
   props: {
@@ -600,49 +596,13 @@ export default {
             />
           </template>
         </gl-table>
-        <div v-if="hasGroups" class="gl-display-flex gl-mt-3 gl-align-items-center">
-          <pagination-links
-            :change="setPage"
-            :page-info="bulkImportSourceGroups.pageInfo"
-            class="gl-m-0"
-          />
-          <gl-dropdown category="tertiary" :aria-label="__('Page size')" class="gl-ml-auto">
-            <template #button-content>
-              <span class="font-weight-bold">
-                <gl-sprintf :message="__('%{count} items per page')">
-                  <template #count>
-                    {{ perPage }}
-                  </template>
-                </gl-sprintf>
-              </span>
-              <gl-icon class="gl-button-icon dropdown-chevron" name="chevron-down" />
-            </template>
-            <gl-dropdown-item
-              v-for="size in $options.PAGE_SIZES"
-              :key="size"
-              @click="setPageSize(size)"
-            >
-              <gl-sprintf :message="__('%{count} items per page')">
-                <template #count>
-                  {{ size }}
-                </template>
-              </gl-sprintf>
-            </gl-dropdown-item>
-          </gl-dropdown>
-          <div class="gl-ml-2">
-            <gl-sprintf :message="s__('BulkImport|Showing %{start}-%{end} of %{total}')">
-              <template #start>
-                {{ paginationInfo.start }}
-              </template>
-              <template #end>
-                {{ paginationInfo.end }}
-              </template>
-              <template #total>
-                {{ humanizedTotal }}
-              </template>
-            </gl-sprintf>
-          </div>
-        </div>
+        <pagination-bar
+          v-if="hasGroups"
+          :page-info="bulkImportSourceGroups.pageInfo"
+          class="gl-mt-3"
+          @set-page="setPage"
+          @set-page-size="setPageSize"
+        />
       </template>
     </template>
   </div>