Skip to content

G
gitlab-ce
Commit b4d54551 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas Committed by Enrique Alcántara
Browse files
Options

Implement merge function for GraphQL cache 

This changes the immer's produce function to use
a `merge` function instead
parent 8323c37a
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 141 deletions
app/assets/javascripts/jobs/components/table/constants.js
View file @ b4d54551
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 0 → 100644
View file @ b4d54551
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
View file @ b4d54551
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
View file @ b4d54551
......@@ -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
View file @ b4d54551
<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 0 → 100644
View file @ b4d54551
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
View file @ b4d54551
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('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 },
},
describe('when infinite scrolling is triggered', () => {
beforeEach(() => {
triggerInfiniteScroll();
});
await waitForPromises();
expect(findPrevious().exists()).toBe(true);
expect(findNext().exists()).toBe(true);
expect(findNext().classes('disabled')).toBe(true);
});
it('should disable the previous page button on the first page', async () => {
createComponent({
handler: jest.fn().mockResolvedValue(mockJobsQueryResponseFirstPage),
mountFn: mount,
data: {
pagination: {
currentPage: 1,
},
},
it('does not display a skeleton loader', () => {
expect(findSkeletonLoader().exists()).toBe(false);
});
await waitForPromises();
it('handles infinite scrolling by calling fetch more', async () => {
await waitForPromises();
expect(findPrevious().exists()).toBe(true);
expect(findPrevious().classes('disabled')).toBe(true);
expect(findNext().exists()).toBe(true);
expect(successHandler).toHaveBeenCalledWith({
after: 'eyJpZCI6IjIzMTcifQ',
fullPath: 'gitlab-org/gitlab',
});
});
});
});
......
spec/frontend/jobs/mock_data.js
View file @ b4d54551
......@@ -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',
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7