Merge branch 'ss/fix-pagiation-issuables-list' into 'master'

Pagination when total items is not in the header response

See merge request gitlab-org/gitlab!36116

app/assets/javascripts/issuables_list/components/issuables_list_app.vue

@@ -118,6 +118,29 @@ export default {
     baseUrl() {
       return window.location.href.replace(/(\?.*)?(#.*)?$/, '');
     },
+    paginationNext() {
+      return this.page + 1;
+    },
+    paginationPrev() {
+      return this.page - 1;
+    },
+    paginationProps() {
+      const paginationProps = { value: this.page };
+
+      if (this.totalItems) {
+        return {
+          ...paginationProps,
+          perPage: this.itemsPerPage,
+          totalItems: this.totalItems,
+        };
+      }
+
+      return {
+        ...paginationProps,
+        prevPage: this.paginationPrev,
+        nextPage: this.paginationNext,
+      };
+    },
   },
   watch: {
     selection() {
@@ -272,11 +295,8 @@ export default {
     </ul>
     <div class="mt-3">
       <gl-pagination
-        v-if="totalItems"
-        :value="page"
-        :per-page="itemsPerPage"
-        :total-items="totalItems"
-        class="justify-content-center"
+        v-bind="paginationProps"
+        class="gl-justify-content-center"
         @input="onPaginate"
       />
     </div>

spec/frontend/issuables_list/components/issuables_list_app_spec.js

@@ -454,6 +454,7 @@ describe('Issuables list component', () => {
   describe('when paginates', () => {
     const newPage = 3;
 
+    describe('when total-items is defined in response headers', () => {
       beforeEach(() => {
         window.history.pushState = jest.fn();
         setupApiMock(() => [
@@ -493,4 +494,33 @@ describe('Issuables list component', () => {
         );
       });
     });
+
+    describe('when total-items is not defined in the headers', () => {
+      const page = 2;
+      const prevPage = page - 1;
+      const nextPage = page + 1;
+
+      beforeEach(() => {
+        setupApiMock(() => [
+          200,
+          MOCK_ISSUES.slice(0, PAGE_SIZE),
+          {
+            'x-page': page,
+          },
+        ]);
+
+        factory();
+
+        return waitForPromises();
+      });
+
+      it('finds the correct props applied to GlPagination', () => {
+        expect(wrapper.find(GlPagination).props()).toMatchObject({
+          nextPage,
+          prevPage,
+          value: page,
+        });
+      });
+    });
+  });
 });