Implement pagination size selection

* allow 20,50,100 items size selection

app/assets/javascripts/import_entities/import_groups/components/import_table.vue

 <script>
 import {
   GlEmptyState,
+  GlDropdown,
+  GlDropdownItem,
   GlIcon,
   GlLink,
   GlLoadingIcon,
   GlSearchBoxByClick,
   GlSprintf,
 } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
 import importGroupMutation from '../graphql/mutations/import_group.mutation.graphql';
 import setNewNameMutation from '../graphql/mutations/set_new_name.mutation.graphql';
@@ -19,6 +21,8 @@ import ImportTableRow from './import_table_row.vue';
 export default {
   components: {
     GlEmptyState,
+    GlDropdown,
+    GlDropdownItem,
     GlIcon,
     GlLink,
     GlLoadingIcon,
@@ -43,6 +47,7 @@ export default {
     return {
       filter: '',
       page: 1,
+      perPage: 20,
     };
   },
 
@@ -50,13 +55,17 @@ export default {
     bulkImportSourceGroups: {
       query: bulkImportSourceGroupsQuery,
       variables() {
-        return { page: this.page, filter: this.filter };
+        return { page: this.page, filter: this.filter, perPage: this.perPage };
       },
     },
     availableNamespaces: availableNamespacesQuery,
   },
 
   computed: {
+    humanizedTotal() {
+      return this.paginationInfo.total >= 1000 ? __('1000+') : this.paginationInfo.total;
+    },
+
     hasGroups() {
       return this.bulkImportSourceGroups?.nodes?.length > 0;
     },
@@ -117,14 +126,20 @@ export default {
         variables: { sourceGroupId },
       });
     },
+
+    setPageSize(size) {
+      this.perPage = size;
+    },
   },
+
+  PAGE_SIZES: [20, 50, 100],
 };
 </script>
 
 <template>
   <div>
     <div
-      class="gl-py-5 gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1 gl-display-flex gl-align-items-center"
+      class="gl-py-5 gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1 gl-display-flex"
     >
       <span>
         <gl-sprintf v-if="!$apollo.loading && hasGroups" :message="statusMessage">
@@ -161,7 +176,7 @@ export default {
         :title="s__('BulkImport|You have no groups to import')"
         :description="s__('Check your source instance permissions.')"
       />
-      <div v-else class="gl-display-flex gl-flex-direction-column gl-align-items-center">
+      <template v-else>
         <table class="gl-w-full">
           <thead class="gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1">
             <th class="gl-py-4 import-jobs-from-col">{{ s__('BulkImport|From source group') }}</th>
@@ -183,12 +198,50 @@ export default {
             </template>
           </tbody>
         </table>
-        <pagination-links
-          :change="setPage"
-          :page-info="bulkImportSourceGroups.pageInfo"
-          class="gl-mt-3"
-        />
-      </div>
+        <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" 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>
+      </template>
     </template>
   </div>
 </template>

locale/gitlab.pot

@@ -430,6 +430,9 @@ msgid_plural "%{count} issues selected"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{count} items per page"
+msgstr ""
+
 msgid "%{count} merge request selected"
 msgid_plural "%{count} merge requests selected"
 msgstr[0] ""
@@ -1193,6 +1196,9 @@ msgstr ""
 msgid "10-19 contributions"
 msgstr ""
 
+msgid "1000+"
+msgstr ""
+
 msgid "1st contribution!"
 msgstr ""
 
@@ -5128,6 +5134,9 @@ msgstr ""
 msgid "BulkImport|No parent"
 msgstr ""
 
+msgid "BulkImport|Showing %{start}-%{end} of %{total}"
+msgstr ""
+
 msgid "BulkImport|Showing %{start}-%{end} of %{total} from %{link}"
 msgstr ""
 

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

-import { GlEmptyState, GlLoadingIcon, GlSearchBoxByClick, GlSprintf } from '@gitlab/ui';
+import {
+  GlEmptyState,
+  GlLoadingIcon,
+  GlSearchBoxByClick,
+  GlSprintf,
+  GlDropdown,
+  GlDropdownItem,
+} from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
 import { STATUSES } from '~/import_entities/constants';
 import ImportTable from '~/import_entities/import_groups/components/import_table.vue';
@@ -16,10 +24,15 @@ import { availableNamespacesFixture, generateFakeEntry } from '../graphql/fixtur
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
+const GlDropdownStub = stubComponent(GlDropdown, {
+  template: '<div><h1 ref="text"><slot name="button-content"></slot></h1><slot></slot></div>',
+});
+
 describe('import table', () => {
   let wrapper;
   let apolloProvider;
 
+  const SOURCE_URL = 'https://demo.host';
   const FAKE_GROUP = generateFakeEntry({ id: 1, status: STATUSES.NONE });
   const FAKE_GROUPS = [
     generateFakeEntry({ id: 1, status: STATUSES.NONE }),
@@ -27,6 +40,9 @@ describe('import table', () => {
   ];
   const FAKE_PAGE_INFO = { page: 1, perPage: 20, total: 40, totalPages: 2 };
 
+  const findPaginationDropdown = () => wrapper.findComponent(GlDropdown);
+  const findPaginationDropdownText = () => findPaginationDropdown().find({ ref: 'text' }).text();
+
   const createComponent = ({ bulkImportSourceGroups }) => {
     apolloProvider = createMockApollo([], {
       Query: {
@@ -42,11 +58,12 @@ describe('import table', () => {
 
     wrapper = shallowMount(ImportTable, {
       propsData: {
-        sourceUrl: 'https://demo.host',
         groupPathRegex: /.*/,
+        sourceUrl: SOURCE_URL,
       },
       stubs: {
         GlSprintf,
+        GlDropdown: GlDropdownStub,
       },
       localVue,
       apolloProvider,
@@ -152,6 +169,20 @@ describe('import table', () => {
       expect(wrapper.find(PaginationLinks).props().pageInfo).toStrictEqual(FAKE_PAGE_INFO);
     });
 
+    it('renders pagination dropdown', () => {
+      expect(findPaginationDropdown().exists()).toBe(true);
+    });
+
+    it('updates page size when selected in Dropdown', async () => {
+      const otherOption = wrapper.findAllComponents(GlDropdownItem).at(1);
+      expect(otherOption.text()).toMatchInterpolatedText('50 items per page');
+
+      otherOption.vm.$emit('click');
+      await waitForPromises();
+
+      expect(findPaginationDropdownText()).toMatchInterpolatedText('50 items per page');
+    });
+
     it('updates page when page change is requested', async () => {
       const REQUESTED_PAGE = 2;
       wrapper.find(PaginationLinks).props().change(REQUESTED_PAGE);
@@ -179,7 +210,7 @@ describe('import table', () => {
       wrapper.find(PaginationLinks).props().change(REQUESTED_PAGE);
       await waitForPromises();
 
-      expect(wrapper.text()).toContain('Showing 21-21 of 38');
+      expect(wrapper.text()).toContain('Showing 21-21 of 38 groups from');
     });
   });
 
@@ -225,7 +256,7 @@ describe('import table', () => {
       findFilterInput().vm.$emit('submit', FILTER_VALUE);
       await waitForPromises();
 
-      expect(wrapper.text()).toContain('Showing 1-1 of 40 groups matching filter "foo"');
+      expect(wrapper.text()).toContain('Showing 1-1 of 40 groups matching filter "foo" from');
     });
 
     it('properly resets filter in graphql query when search box is cleared', async () => {