Merge branch 'remove-keyset-pagination-check' into 'master'

Removes conditional logic in gl-keyset-pagination within registry

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/126727



Merged-by: Alexander Turinske <aturinske@gitlab.com>
Approved-by: Tan Le <tle@gitlab.com>
Approved-by: Alexander Turinske <aturinske@gitlab.com>
Co-authored-by: Rahul Chanila <rchanila@gitlab.com>

app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue

@@ -28,11 +28,6 @@ export default {
       required: false,
     },
   },
-  computed: {
-    showPagination() {
-      return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage;
-    },
-  },
 };
 </script>
 
@@ -48,9 +43,7 @@ export default {
     />
     <div class="gl-display-flex gl-justify-content-center">
       <gl-keyset-pagination
-        v-if="showPagination"
-        :has-next-page="pageInfo.hasNextPage"
-        :has-previous-page="pageInfo.hasPreviousPage"
+        v-bind="pageInfo"
         class="gl-mt-3"
         @prev="$emit('prev-page')"
         @next="$emit('next-page')"

app/assets/javascripts/packages_and_registries/dependency_proxy/components/manifests_list.vue

@@ -37,11 +37,6 @@ export default {
   i18n: {
     listTitle: s__('DependencyProxy|Image list'),
   },
-  computed: {
-    showPagination() {
-      return this.pagination.hasNextPage || this.pagination.hasPreviousPage;
-    },
-  },
 };
 </script>
 
@@ -68,7 +63,6 @@ export default {
       </div>
       <div class="gl-display-flex gl-justify-content-center">
         <gl-keyset-pagination
-          v-if="showPagination"
           v-bind="pagination"
           class="gl-mt-3"
           @prev="$emit('prev-page')"

app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue

@@ -178,10 +178,6 @@ export default {
         first: GRAPHQL_PACKAGE_FILES_PAGE_SIZE,
       };
     },
-    showPagination() {
-      const { hasPreviousPage, hasNextPage } = this.pageInfo;
-      return hasPreviousPage || hasNextPage;
-    },
     tracking() {
       return {
         category: packageTypeToTrackCategory(this.packageType),
@@ -490,7 +486,6 @@ export default {
       </gl-table>
       <div class="gl-display-flex gl-justify-content-center">
         <gl-keyset-pagination
-          v-if="showPagination"
           :disabled="isLoading"
           v-bind="pageInfo"
           :prev-text="$options.i18n.prev"

app/assets/javascripts/packages_and_registries/shared/components/registry_list.vue

@@ -47,9 +47,6 @@ export default {
     };
   },
   computed: {
-    showPagination() {
-      return this.pagination.hasPreviousPage || this.pagination.hasNextPage;
-    },
     disableDeleteButton() {
       return this.isLoading || this.selectedItems.length === 0;
     },
@@ -131,7 +128,6 @@ export default {
 
     <div class="gl-display-flex gl-justify-content-center">
       <gl-keyset-pagination
-        v-if="showPagination"
         v-bind="pagination"
         class="gl-mt-3"
         @prev="$emit('prev-page')"

spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import Component from '~/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue';
 import ImageListRow from '~/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue';
 
-import { imagesListResponse, pageInfo as defaultPageInfo } from '../../mock_data';
+import { imagesListResponse, pageInfo } from '../../mock_data';
 
 describe('Image List', () => {
   let wrapper;
@@ -11,6 +11,8 @@ describe('Image List', () => {
   const findRow = () => wrapper.findAllComponents(ImageListRow);
   const findPagination = () => wrapper.findComponent(GlKeysetPagination);
 
+  const { __typename, ...defaultPageInfo } = pageInfo;
+
   const mountComponent = (props) => {
     wrapper = shallowMount(Component, {
       propsData: {
@@ -45,25 +47,9 @@ describe('Image List', () => {
     it('exists', () => {
       mountComponent();
 
-      expect(findPagination().exists()).toBe(true);
+      expect(findPagination().props()).toMatchObject({ ...defaultPageInfo });
     });
 
-    it.each`
-      hasNextPage | hasPreviousPage | isVisible
-      ${true}     | ${true}         | ${true}
-      ${true}     | ${false}        | ${true}
-      ${false}    | ${true}         | ${true}
-    `(
-      'when hasNextPage is $hasNextPage and hasPreviousPage is $hasPreviousPage: is $isVisible that the component is visible',
-      ({ hasNextPage, hasPreviousPage, isVisible }) => {
-        mountComponent({ pageInfo: { ...defaultPageInfo, hasNextPage, hasPreviousPage } });
-
-        expect(findPagination().exists()).toBe(isVisible);
-        expect(findPagination().props('hasPreviousPage')).toBe(hasPreviousPage);
-        expect(findPagination().props('hasNextPage')).toBe(hasNextPage);
-      },
-    );
-
     it('emits "prev-page" when the user clicks the back page button', () => {
       mountComponent();
 

spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js

@@ -40,7 +40,7 @@ export const pageInfo = {
   hasPreviousPage: true,
   startCursor: 'eyJpZCI6IjI2In0',
   endCursor: 'eyJpZCI6IjgifQ',
-  __typename: 'ContainerRepositoryConnection',
+  __typename: 'PageInfo',
 };
 
 export const graphQLImageListMock = {

spec/frontend/packages_and_registries/dependency_proxy/components/manifest_list_spec.js

@@ -91,12 +91,6 @@ describe('Manifests List', () => {
   });
 
   describe('pagination', () => {
-    it('is hidden when there is no next or prev pages', () => {
-      createComponent({ ...defaultProps, pagination: {} });
-
-      expect(findPagination().exists()).toBe(false);
-    });
-
     it('has the correct props', () => {
       createComponent();
 

spec/frontend/packages_and_registries/package_registry/components/details/package_files_spec.js

@@ -176,22 +176,6 @@ describe('Package Files', () => {
         disabled: false,
       });
     });
-
-    it('hides pagination when only one page', async () => {
-      createComponent({
-        resolver: jest.fn().mockResolvedValue(
-          packageFilesQuery({
-            extendPagination: {
-              hasNextPage: false,
-              hasPreviousPage: false,
-            },
-          }),
-        ),
-      });
-      await waitForPromises();
-
-      expect(findPagination().exists()).toBe(false);
-    });
   });
 
   describe('link', () => {

spec/frontend/packages_and_registries/shared/components/registry_list_spec.js

@@ -185,7 +185,7 @@ describe('Registry List', () => {
       pagination = { hasPreviousPage: false, hasNextPage: true };
     });
 
-    it('has a pagination', () => {
+    it('has pagination', () => {
       mountComponent({
         propsData: { ...defaultPropsData, pagination },
       });
@@ -193,24 +193,6 @@ describe('Registry List', () => {
       expect(findPagination().props()).toMatchObject(pagination);
     });
 
-    it.each`
-      hasPreviousPage | hasNextPage | visible
-      ${true}         | ${true}     | ${true}
-      ${true}         | ${false}    | ${true}
-      ${false}        | ${true}     | ${true}
-      ${false}        | ${false}    | ${false}
-    `(
-      'when hasPreviousPage is $hasPreviousPage and hasNextPage is $hasNextPage is $visible that the pagination is shown',
-      ({ hasPreviousPage, hasNextPage, visible }) => {
-        pagination = { hasPreviousPage, hasNextPage };
-        mountComponent({
-          propsData: { ...defaultPropsData, pagination },
-        });
-
-        expect(findPagination().exists()).toBe(visible);
-      },
-    );
-
     it('pagination emits the correct events', () => {
       mountComponent({
         propsData: { ...defaultPropsData, pagination },