Merge branch 'jivanvl-change-pagination-type-jobs-table' into 'master'

Change pagination type on jobs table

See merge request gitlab-org/gitlab!80516

app/assets/javascripts/jobs/components/table/constants.js

 import { s__, __ } from '~/locale';
 import { DEFAULT_TH_CLASSES } from '~/lib/utils/constants';
 
-export const GRAPHQL_PAGE_SIZE = 30;
-
-export const initialPaginationState = {
-  currentPage: 1,
-  prevPageCursor: '',
-  nextPageCursor: '',
-  first: GRAPHQL_PAGE_SIZE,
-  last: null,
-};
-
 /* Error constants */
 export const POST_FAILURE = 'post_failure';
 export const DEFAULT = 'default';

app/assets/javascripts/jobs/components/table/graphql/cache_config.js

+import { isEqual } from 'lodash';
+
+export default {
+  typePolicies: {
+    Project: {
+      fields: {
+        jobs: {
+          keyArgs: false,
+        },
+      },
+    },
+    CiJobConnection: {
+      merge(existing = {}, incoming, { args = {} }) {
+        let nodes;
+
+        if (Object.keys(existing).length !== 0 && isEqual(existing?.statuses, args?.statuses)) {
+          nodes = [...existing.nodes, ...incoming.nodes];
+        } else {
+          nodes = [...incoming.nodes];
+        }
+
+        return {
+          nodes,
+          statuses: Array.isArray(args.statuses) ? [...args.statuses] : args.statuses,
+        };
+      },
+    },
+  },
+};

app/assets/javascripts/jobs/components/table/graphql/queries/get_jobs.query.graphql

-query getJobs(
-  $fullPath: ID!
-  $first: Int
-  $last: Int
-  $after: String
-  $before: String
-  $statuses: [CiJobStatus!]
-) {
+query getJobs($fullPath: ID!, $after: String, $statuses: [CiJobStatus!]) {
   project(fullPath: $fullPath) {
     id
-    jobs(after: $after, before: $before, first: $first, last: $last, statuses: $statuses) {
+    __typename
+    jobs(after: $after, first: 30, statuses: $statuses) {
       pageInfo {
         endCursor
         hasNextPage
         hasPreviousPage
         startCursor
+        __typename
       }
       nodes {
+        __typename
         artifacts {
           nodes {
             downloadPath
             fileType
+            __typename
           }
         }
         allowFailure

app/assets/javascripts/jobs/components/table/index.js

@@ -4,12 +4,18 @@ import VueApollo from 'vue-apollo';
 import JobsTableApp from '~/jobs/components/table/jobs_table_app.vue';
 import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import cacheConfig from './graphql/cache_config';
 
 Vue.use(VueApollo);
 Vue.use(GlToast);
 
 const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
+  defaultClient: createDefaultClient(
+    {},
+    {
+      cacheConfig,
+    },
+  ),
 });
 
 export default (containerId = 'js-jobs-table') => {

app/assets/javascripts/jobs/components/table/jobs_table_app.vue

 <script>
-import { GlAlert, GlPagination, GlSkeletonLoader } from '@gitlab/ui';
+import { GlAlert, GlSkeletonLoader, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { GRAPHQL_PAGE_SIZE, initialPaginationState } from './constants';
 import eventHub from './event_hub';
 import GetJobs from './graphql/queries/get_jobs.query.graphql';
 import JobsTable from './jobs_table.vue';
@@ -11,14 +10,16 @@ import JobsTableTabs from './jobs_table_tabs.vue';
 export default {
   i18n: {
     errorMsg: __('There was an error fetching the jobs for your project.'),
+    loadingAriaLabel: __('Loading'),
   },
   components: {
     GlAlert,
-    GlPagination,
     GlSkeletonLoader,
     JobsTable,
     JobsTableEmptyState,
     JobsTableTabs,
+    GlIntersectionObserver,
+    GlLoadingIcon,
   },
   inject: {
     fullPath: {
@@ -31,10 +32,6 @@ export default {
       variables() {
         return {
           fullPath: this.fullPath,
-          first: this.pagination.first,
-          last: this.pagination.last,
-          after: this.pagination.nextPageCursor,
-          before: this.pagination.prevPageCursor,
         };
       },
       update(data) {
@@ -57,7 +54,7 @@ export default {
       hasError: false,
       isAlertDismissed: false,
       scope: null,
-      pagination: initialPaginationState,
+      firstLoad: true,
     };
   },
   computed: {
@@ -67,14 +64,8 @@ export default {
     showEmptyState() {
       return this.jobs.list.length === 0 && !this.scope;
     },
-    prevPage() {
-      return Math.max(this.pagination.currentPage - 1, 0);
-    },
-    nextPage() {
-      return this.jobs.pageInfo?.hasNextPage ? this.pagination.currentPage + 1 : null;
-    },
-    showPaginationControls() {
-      return Boolean(this.prevPage || this.nextPage) && !this.$apollo.loading;
+    hasNextPage() {
+      return this.jobs?.pageInfo?.hasNextPage;
     },
   },
   mounted() {
@@ -88,26 +79,22 @@ export default {
       this.$apollo.queries.jobs.refetch({ statuses: this.scope });
     },
     fetchJobsByStatus(scope) {
+      this.firstLoad = true;
+
       this.scope = scope;
 
       this.$apollo.queries.jobs.refetch({ statuses: scope });
     },
-    handlePageChange(page) {
-      const { startCursor, endCursor } = this.jobs.pageInfo;
+    fetchMoreJobs() {
+      this.firstLoad = false;
 
-      if (page > this.pagination.currentPage) {
-        this.pagination = {
-          ...initialPaginationState,
-          nextPageCursor: endCursor,
-          currentPage: page,
-        };
-      } else {
-        this.pagination = {
-          last: GRAPHQL_PAGE_SIZE,
-          first: null,
-          prevPageCursor: startCursor,
-          currentPage: page,
-        };
+      if (!this.$apollo.queries.jobs.loading) {
+        this.$apollo.queries.jobs.fetchMore({
+          variables: {
+            fullPath: this.fullPath,
+            after: this.jobs?.pageInfo?.endCursor,
+          },
+        });
       }
     },
   },
@@ -128,7 +115,7 @@ export default {
 
     <jobs-table-tabs @fetchJobsByStatus="fetchJobsByStatus" />
 
-    <div v-if="$apollo.loading" class="gl-mt-5">
+    <div v-if="$apollo.loading && firstLoad" class="gl-mt-5">
       <gl-skeleton-loader :width="1248" :height="73">
         <circle cx="748.031" cy="37.7193" r="15.0307" />
         <circle cx="787.241" cy="37.7193" r="15.0307" />
@@ -149,14 +136,12 @@ export default {
 
     <jobs-table v-else :jobs="jobs.list" />
 
-    <gl-pagination
-      v-if="showPaginationControls"
-      :value="pagination.currentPage"
-      :prev-page="prevPage"
-      :next-page="nextPage"
-      align="center"
-      class="gl-mt-3"
-      @input="handlePageChange"
+    <gl-intersection-observer v-if="hasNextPage" @appear="fetchMoreJobs">
+      <gl-loading-icon
+        v-if="$apollo.loading"
+        size="md"
+        :aria-label="$options.i18n.loadingAriaLabel"
       />
+    </gl-intersection-observer>
   </div>
 </template>

spec/frontend/jobs/components/table/graphql/cache_config_spec.js

+import cacheConfig from '~/jobs/components/table/graphql/cache_config';
+import {
+  CIJobConnectionExistingCache,
+  CIJobConnectionIncomingCache,
+  CIJobConnectionIncomingCacheRunningStatus,
+} from '../../../mock_data';
+
+const firstLoadArgs = { first: 3, statuses: 'PENDING' };
+const runningArgs = { first: 3, statuses: 'RUNNING' };
+
+describe('jobs/components/table/graphql/cache_config', () => {
+  describe('when fetching data with the same statuses', () => {
+    it('should contain cache nodes and a status when merging caches on first load', () => {
+      const res = cacheConfig.typePolicies.CiJobConnection.merge({}, CIJobConnectionIncomingCache, {
+        args: firstLoadArgs,
+      });
+
+      expect(res.nodes).toHaveLength(CIJobConnectionIncomingCache.nodes.length);
+      expect(res.statuses).toBe('PENDING');
+    });
+
+    it('should add to existing caches when merging caches after first load', () => {
+      const res = cacheConfig.typePolicies.CiJobConnection.merge(
+        CIJobConnectionExistingCache,
+        CIJobConnectionIncomingCache,
+        {
+          args: firstLoadArgs,
+        },
+      );
+
+      expect(res.nodes).toHaveLength(
+        CIJobConnectionIncomingCache.nodes.length + CIJobConnectionExistingCache.nodes.length,
+      );
+    });
+  });
+
+  describe('when fetching data with different statuses', () => {
+    it('should reset cache when a cache already exists', () => {
+      const res = cacheConfig.typePolicies.CiJobConnection.merge(
+        CIJobConnectionExistingCache,
+        CIJobConnectionIncomingCacheRunningStatus,
+        {
+          args: runningArgs,
+        },
+      );
+
+      expect(res.nodes).not.toEqual(CIJobConnectionExistingCache.nodes);
+      expect(res.nodes).toHaveLength(CIJobConnectionIncomingCacheRunningStatus.nodes.length);
+    });
+  });
+});

spec/frontend/jobs/components/table/job_table_app_spec.js

-import { GlSkeletonLoader, GlAlert, GlEmptyState, GlPagination } from '@gitlab/ui';
+import { GlSkeletonLoader, GlAlert, GlEmptyState, GlIntersectionObserver } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
@@ -8,12 +8,7 @@ import getJobsQuery from '~/jobs/components/table/graphql/queries/get_jobs.query
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
 import JobsTableApp from '~/jobs/components/table/jobs_table_app.vue';
 import JobsTableTabs from '~/jobs/components/table/jobs_table_tabs.vue';
-import {
-  mockJobsQueryResponse,
-  mockJobsQueryEmptyResponse,
-  mockJobsQueryResponseLastPage,
-  mockJobsQueryResponseFirstPage,
-} from '../../mock_data';
+import { mockJobsQueryResponse, mockJobsQueryEmptyResponse } from '../../mock_data';
 
 const projectPath = 'gitlab-org/gitlab';
 Vue.use(VueApollo);
@@ -30,10 +25,9 @@ describe('Job table app', () => {
   const findTabs = () => wrapper.findComponent(JobsTableTabs);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
-  const findPagination = () => wrapper.findComponent(GlPagination);
 
-  const findPrevious = () => findPagination().findAll('.page-item').at(0);
-  const findNext = () => findPagination().findAll('.page-item').at(1);
+  const triggerInfiniteScroll = () =>
+    wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
 
   const createMockApolloProvider = (handler) => {
     const requestHandlers = [[getJobsQuery, handler]];
@@ -53,7 +47,7 @@ describe('Job table app', () => {
         };
       },
       provide: {
-        projectPath,
+        fullPath: projectPath,
       },
       apolloProvider: createMockApolloProvider(handler),
     });
@@ -69,7 +63,6 @@ describe('Job table app', () => {
 
       expect(findSkeletonLoader().exists()).toBe(true);
       expect(findTable().exists()).toBe(false);
-      expect(findPagination().exists()).toBe(false);
     });
   });
 
@@ -83,7 +76,6 @@ describe('Job table app', () => {
     it('should display the jobs table with data', () => {
       expect(findTable().exists()).toBe(true);
       expect(findSkeletonLoader().exists()).toBe(false);
-      expect(findPagination().exists()).toBe(true);
     });
 
     it('should refetch jobs query on fetchJobsByStatus event', async () => {
@@ -95,41 +87,24 @@ describe('Job table app', () => {
 
       expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(1);
     });
+
+    describe('when infinite scrolling is triggered', () => {
+      beforeEach(() => {
+        triggerInfiniteScroll();
       });
 
-  describe('pagination', () => {
-    it('should disable the next page button on the last page', async () => {
-      createComponent({
-        handler: jest.fn().mockResolvedValue(mockJobsQueryResponseLastPage),
-        mountFn: mount,
-        data: {
-          pagination: { currentPage: 3 },
-        },
+      it('does not display a skeleton loader', () => {
+        expect(findSkeletonLoader().exists()).toBe(false);
       });
 
+      it('handles infinite scrolling by calling fetch more', async () => {
         await waitForPromises();
 
-      expect(findPrevious().exists()).toBe(true);
-      expect(findNext().exists()).toBe(true);
-      expect(findNext().classes('disabled')).toBe(true);
+        expect(successHandler).toHaveBeenCalledWith({
+          after: 'eyJpZCI6IjIzMTcifQ',
+          fullPath: 'gitlab-org/gitlab',
         });
-
-    it('should disable the previous page button on the first page', async () => {
-      createComponent({
-        handler: jest.fn().mockResolvedValue(mockJobsQueryResponseFirstPage),
-        mountFn: mount,
-        data: {
-          pagination: {
-            currentPage: 1,
-          },
-        },
       });
-
-      await waitForPromises();
-
-      expect(findPrevious().exists()).toBe(true);
-      expect(findPrevious().classes('disabled')).toBe(true);
-      expect(findNext().exists()).toBe(true);
     });
   });
 

spec/frontend/jobs/mock_data.js

@@ -1579,44 +1579,6 @@ export const mockJobsQueryResponse = {
   },
 };
 
-export const mockJobsQueryResponseLastPage = {
-  data: {
-    project: {
-      id: '1',
-      jobs: {
-        ...mockJobsQueryResponse.data.project.jobs,
-        pageInfo: {
-          endCursor: 'eyJpZCI6IjIzMTcifQ',
-          hasNextPage: false,
-          hasPreviousPage: true,
-          startCursor: 'eyJpZCI6IjIzMzYifQ',
-          __typename: 'PageInfo',
-        },
-      },
-      __typename: 'Project',
-    },
-  },
-};
-
-export const mockJobsQueryResponseFirstPage = {
-  data: {
-    project: {
-      id: '1',
-      jobs: {
-        ...mockJobsQueryResponse.data.project.jobs,
-        pageInfo: {
-          endCursor: 'eyJpZCI6IjIzMTcifQ',
-          hasNextPage: true,
-          hasPreviousPage: false,
-          startCursor: 'eyJpZCI6IjIzMzYifQ',
-          __typename: 'PageInfo',
-        },
-      },
-      __typename: 'Project',
-    },
-  },
-};
-
 export const mockJobsQueryEmptyResponse = {
   data: {
     project: {
@@ -1910,3 +1872,44 @@ export const cannotPlayScheduledJob = {
     __typename: 'JobPermissions',
   },
 };
+
+export const CIJobConnectionIncomingCache = {
+  __typename: 'CiJobConnection',
+  pageInfo: {
+    __typename: 'PageInfo',
+    endCursor: 'eyJpZCI6IjIwNTEifQ',
+    hasNextPage: true,
+    hasPreviousPage: false,
+    startCursor: 'eyJpZCI6IjIxNzMifQ',
+  },
+  nodes: [
+    { __ref: 'CiJob:gid://gitlab/Ci::Build/2057' },
+    { __ref: 'CiJob:gid://gitlab/Ci::Build/2056' },
+    { __ref: 'CiJob:gid://gitlab/Ci::Build/2051' },
+  ],
+};
+
+export const CIJobConnectionIncomingCacheRunningStatus = {
+  __typename: 'CiJobConnection',
+  pageInfo: {
+    __typename: 'PageInfo',
+    endCursor: 'eyJpZCI6IjIwNTEifQ',
+    hasNextPage: true,
+    hasPreviousPage: false,
+    startCursor: 'eyJpZCI6IjIxNzMifQ',
+  },
+  nodes: [
+    { __ref: 'CiJob:gid://gitlab/Ci::Build/2000' },
+    { __ref: 'CiJob:gid://gitlab/Ci::Build/2001' },
+    { __ref: 'CiJob:gid://gitlab/Ci::Build/2002' },
+  ],
+};
+
+export const CIJobConnectionExistingCache = {
+  nodes: [
+    { __ref: 'CiJob:gid://gitlab/Ci::Build/2057' },
+    { __ref: 'CiJob:gid://gitlab/Ci::Build/2056' },
+    { __ref: 'CiJob:gid://gitlab/Ci::Build/2051' },
+  ],
+  statuses: 'PENDING',
+};