Move pagination_bar to shared components

* introduce stories
* remove unnneeded props

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>

app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue

@@ -7,7 +7,7 @@ import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { getBulkImportsHistory } from '~/rest_api';
 import ImportStatus from '~/import_entities/components/import_status.vue';
-import PaginationBar from '~/import_entities/components/pagination_bar.vue';
+import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 
 import { DEFAULT_ERROR } from '../utils/error_messages';
@@ -166,7 +166,6 @@ export default {
       </gl-table>
       <pagination-bar
         :page-info="pageInfo"
-        :items-count="historyItems.length"
         class="gl-m-0 gl-mt-3"
         @set-page="paginationConfig.page = $event"
         @set-page-size="paginationConfig.perPage = $event"

app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.stories.js

+/* eslint-disable @gitlab/require-i18n-strings */
+import PaginationBar from './pagination_bar.vue';
+
+export default {
+  component: PaginationBar,
+  title: 'vue_shared/components/pagination_bar/pagination_bar',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { PaginationBar },
+  props: Object.keys(argTypes),
+  template: `<pagination-bar v-bind="$props" v-on="{ 'set-page-size': setPageSize, 'set-page': setPage }" />`,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  pageInfo: {
+    perPage: 20,
+    page: 2,
+    total: 83,
+    totalPages: 5,
+  },
+  pageSizes: [20, 50, 100],
+};
+
+Default.argTypes = {
+  pageInfo: {
+    description: 'Page info object',
+    control: false,
+  },
+  pageSizes: {
+    description: 'Array of possible page sizes',
+    control: false,
+  },
+  itemsCount: {
+    description: 'Total number of items',
+    control: {
+      type: 'number',
+    },
+  },
+
+  // events
+  setPageSize: { action: 'set-page-size' },
+  setPage: { action: 'set-page' },
+};

app/assets/javascripts/import_entities/components/pagination_bar.vue → app/assets/javascripts/vue_shared/components/pagination_bar/pagination_bar.vue

@@ -23,10 +23,6 @@ export default {
       type: Array,
       default: () => DEFAULT_PAGE_SIZES,
     },
-    itemsCount: {
-      required: true,
-      type: Number,
-    },
   },
 
   computed: {
@@ -35,9 +31,10 @@ export default {
     },
 
     paginationInfo() {
-      const { page, perPage } = this.pageInfo;
+      const { page, perPage, totalPages, total } = this.pageInfo;
+      const itemsCount = page === totalPages ? total - (page - 1) * perPage : perPage;
       const start = (page - 1) * perPage + 1;
-      const end = start + this.itemsCount - 1;
+      const end = start + itemsCount - 1;
 
       return { start, end };
     },
@@ -54,7 +51,7 @@ export default {
 <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">
+    <gl-dropdown category="tertiary" class="gl-ml-auto" :aria-label="__('Page size')">
       <template #button-content>
         <span class="gl-font-weight-bold">
           <gl-sprintf :message="__('%{count} items per page')">

spec/frontend/import_entities/import_groups/components/import_table_spec.js

@@ -209,7 +209,12 @@ describe('import table', () => {
       const otherOption = findPaginationDropdown().findAll('li p').at(1);
       expect(otherOption.text()).toMatchInterpolatedText('50 items per page');
 
+      bulkImportSourceGroupsQueryMock.mockResolvedValue({
+        nodes: [FAKE_GROUP],
+        pageInfo: { ...FAKE_PAGE_INFO, perPage: 50 },
+      });
       await otherOption.trigger('click');
+
       await waitForPromises();
 
       expect(findPaginationDropdownText()).toMatchInterpolatedText('50 items per page');

spec/frontend/pages/import/bulk_imports/history/components/bulk_imports_history_app_spec.js

@@ -2,7 +2,7 @@ import { GlEmptyState, GlLoadingIcon, GlTable } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import PaginationBar from '~/import_entities/components/pagination_bar.vue';
+import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
 import BulkImportsHistoryApp from '~/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 

spec/frontend/import_entities/components/pagination_bar_spec.js → spec/frontend/vue_shared/components/pagination_bar/pagination_bar_spec.js

 import { GlPagination, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import PaginationBar from '~/import_entities/components/pagination_bar.vue';
+import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
 
 describe('Pagination bar', () => {
   const DEFAULT_PROPS = {
     pageInfo: {
       total: 50,
-      page: 1,
+      totalPages: 3,
+      page: 3,
       perPage: 20,
     },
-    itemsCount: 17,
   };
   let wrapper;
 
@@ -73,7 +73,7 @@ describe('Pagination bar', () => {
     createComponent();
 
     expect(wrapper.find('[data-testid="information"]').text()).toMatchInterpolatedText(
-      'Showing 1 - 17 of 50',
+      'Showing 41 - 50 of 50',
     );
   });
 
@@ -82,11 +82,12 @@ describe('Pagination bar', () => {
       pageInfo: {
         ...DEFAULT_PROPS.pageInfo,
         total: 1200,
+        page: 2,
       },
     });
 
     expect(wrapper.find('[data-testid="information"]').text()).toMatchInterpolatedText(
-      'Showing 1 - 17 of 1000+',
+      'Showing 21 - 40 of 1000+',
     );
   });
 });