Skip to content

G
gitlab-ce
Commit 02f4d743 authored by mfluharty's avatar mfluharty
Browse files
Options

Undo the old approach 

Remove graphql versions of actions and mutations
Remove specs and mock data for them
parent 5a045d0a
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 379 deletions
ee/app/assets/javascripts/codequality_report/codequality_report.vue
View file @ 02f4d743
<script>
import { mapActions, mapState, mapGetters } from 'vuex';
import { GlPagination, GlSkeletonLoader } from '@gitlab/ui';
import { componentNames } from 'ee/reports/components/issue_body';
import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
import { n__, s__, sprintf } from '~/locale';
import ReportSection from '~/reports/components/report_section.vue';
import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
export default {
components: {
ReportSection,
PaginationLinks,
GlSkeletonLoader,
GlPagination,
},
mixins: [reportsMixin, glFeatureFlagsMixin()],
mixins: [reportsMixin],
componentNames,
computed: {
...mapState(['isLoadingCodequality', 'loadingCodequalityFailed', 'pageInfo']),
...mapGetters(['codequalityIssues', 'codequalityIssueTotal']),
prevPage() {
return Math.max(this.pageInfo.currentPage - 1, 0);
},
nextPage() {
return this.pageInfo?.hasNextPage ? this.pageInfo.currentPage + 1 : null;
},
hasCodequalityIssues() {
return this.codequalityIssueTotal > 0;
},
codequalityText() {
const text = [];
const count = this.codequalityIssueTotal;
const { codequalityIssueTotal } = this;
if (count === 0) {
if (codequalityIssueTotal === 0) {
return s__('ciReport|No code quality issues found');
} else if (count > 0) {
} else if (codequalityIssueTotal > 0) {
return sprintf(s__('ciReport|Found %{issuesWithCount}'), {
issuesWithCount: n__('%d code quality issue', '%d code quality issues', count),
issuesWithCount: n__(
'%d code quality issue',
'%d code quality issues',
codequalityIssueTotal,
),
});
}
......@@ -76,27 +70,13 @@ export default {
:success-text="codequalityText"
:unresolved-issues="codequalityIssues"
:resolved-issues="[]"
:has-issues="hasCodequalityIssues && !isLoadingCodequality"
:has-issues="hasCodequalityIssues"
:component="$options.componentNames.CodequalityIssueBody"
class="codequality-report"
>
<template v-if="hasCodequalityIssues" #sub-heading>{{ $options.i18n.subHeading }}</template>
</report-section>
<div v-if="isLoadingCodequality" class="gl-p-4">
<gl-skeleton-loader :lines="50" />
</div>
<gl-pagination
v-if="glFeatures.graphqlCodeQualityFullReport"
:disabled="isLoadingCodequality"
:value="pageInfo.currentPage"
:prev-page="prevPage"
:next-page="nextPage"
align="center"
class="gl-mt-3"
@input="setPage"
/>
<pagination-links
v-else
:change="setPage"
:page-info="pageInfo"
class="d-flex justify-content-center gl-mt-3"
......
ee/app/assets/javascripts/codequality_report/store/actions.js
View file @ 02f4d743
......@@ -4,30 +4,10 @@ import axios from '~/lib/utils/axios_utils';
import { s__ } from '~/locale';
import { parseCodeclimateMetrics } from '~/reports/codequality_report/store/utils/codequality_parser';
import getCodeQualityViolations from '../graphql/queries/get_code_quality_violations.query.graphql';
import { VIEW_EVENT_NAME } from './constants';
import * as types from './mutation_types';
import { gqClient } from './utils';
export const setPage = ({ state, commit, dispatch }, page) => {
if (gon.features?.graphqlCodeQualityFullReport) {
const { currentPage, startCursor, endCursor } = state.pageInfo;
if (page > currentPage) {
commit(types.SET_PAGE, {
after: endCursor,
currentPage: page,
});
} else {
commit(types.SET_PAGE, {
after: startCursor,
currentPage: page,
});
}
return dispatch('fetchReport');
}
return commit(types.SET_PAGE, { page });
};
export const setPage = ({ commit }, page) => commit(types.SET_PAGE, page);
export const requestReport = ({ commit }) => {
commit(types.REQUEST_REPORT);
......@@ -35,49 +15,24 @@ export const requestReport = ({ commit }) => {
Api.trackRedisHllUserEvent(VIEW_EVENT_NAME);
};
export const receiveReportSuccess = ({ state, commit }, data) => {
if (gon.features?.graphqlCodeQualityFullReport) {
const parsedIssues = parseCodeclimateMetrics(
data.edges.map((edge) => edge.node),
state.blobPath,
);
return commit(types.RECEIVE_REPORT_SUCCESS_GRAPHQL, { data, parsedIssues });
}
const parsedIssues = parseCodeclimateMetrics(data, state.blobPath);
return commit(types.RECEIVE_REPORT_SUCCESS, parsedIssues);
commit(types.RECEIVE_REPORT_SUCCESS, parsedIssues);
};
export const receiveReportError = ({ commit }, error) => commit(types.RECEIVE_REPORT_ERROR, error);
export const fetchReport = async ({ state, dispatch }) => {
try {
dispatch('requestReport');
if (!state.blobPath) throw new Error();
if (gon.features?.graphqlCodeQualityFullReport) {
const { projectPath, pipelineIid, pageInfo } = state;
const variables = {
projectPath,
iid: pipelineIid,
first: pageInfo.first,
after: pageInfo.after,
};
await gqClient
.query({
query: getCodeQualityViolations,
variables,
})
.then(({ data }) => {
dispatch('receiveReportSuccess', data.project?.pipeline?.codeQualityReports);
});
} else {
await axios.get(state.endpoint).then(({ data }) => {
dispatch('receiveReportSuccess', data);
export const fetchReport = ({ state, dispatch }) => {
dispatch('requestReport');
axios
.get(state.endpoint)
.then(({ data }) => {
if (!state.blobPath) throw new Error();
dispatch('receiveReportSuccess', data);
})
.catch((error) => {
dispatch('receiveReportError', error);
createFlash({
message: s__('ciReport|There was an error fetching the codequality report.'),
});
}
} catch (error) {
dispatch('receiveReportError', error);
createFlash({
message: s__('ciReport|There was an error fetching the codequality report.'),
});
}
};
ee/app/assets/javascripts/codequality_report/store/getters.js
View file @ 02f4d743
export const codequalityIssues = (state) => {
if (gon.features?.graphqlCodeQualityFullReport) {
return state.codequalityIssues;
}
const { page, perPage } = state.pageInfo;
const start = (page - 1) * perPage;
return state.allCodequalityIssues.slice(start, start + perPage);
};
export const codequalityIssueTotal = (state) => {
if (gon.features?.graphqlCodeQualityFullReport) {
return state.pageInfo.count;
}
return state.allCodequalityIssues.length;
};
export const codequalityIssueTotal = (state) => state.allCodequalityIssues.length;
ee/app/assets/javascripts/codequality_report/store/mutation_types.js
View file @ 02f4d743
export const SET_PAGE = 'SET_PAGE';
export const REQUEST_REPORT = 'REQUEST_REPORT';
export const RECEIVE_REPORT_SUCCESS_GRAPHQL = 'RECEIVE_REPORT_SUCCESS_GRAPHQL';
export const RECEIVE_REPORT_SUCCESS = 'RECEIVE_REPORT_SUCCESS';
export const RECEIVE_REPORT_ERROR = 'RECEIVE_REPORT_ERROR';
ee/app/assets/javascripts/codequality_report/store/mutations.js
View file @ 02f4d743
......@@ -2,25 +2,16 @@ import { SEVERITY_SORT_ORDER } from './constants';
import * as types from './mutation_types';
export default {
[types.SET_PAGE](state, pageInfo) {
[types.SET_PAGE](state, page) {
Object.assign(state, {
pageInfo: Object.assign(state.pageInfo, pageInfo),
pageInfo: Object.assign(state.pageInfo, {
page,
}),
});
},
[types.REQUEST_REPORT](state) {
Object.assign(state, { isLoadingCodequality: true });
},
[types.RECEIVE_REPORT_SUCCESS_GRAPHQL](state, { data, parsedIssues }) {
Object.assign(state, {
isLoadingCodequality: false,
codequalityIssues: parsedIssues,
loadingCodequalityFailed: false,
pageInfo: Object.assign(state.pageInfo, {
count: data.count,
...data.pageInfo,
}),
});
},
[types.RECEIVE_REPORT_SUCCESS](state, allCodequalityIssues) {
Object.assign(state, {
isLoadingCodequality: false,
......@@ -38,12 +29,10 @@ export default {
Object.assign(state, {
isLoadingCodequality: false,
allCodequalityIssues: [],
codequalityIssues: [],
loadingCodequalityFailed: true,
codeQualityError,
pageInfo: Object.assign(state.pageInfo, {
total: 0,
count: 0,
}),
});
},
......
ee/app/assets/javascripts/codequality_report/store/state.js
View file @ 02f4d743
import { PAGE_SIZE } from './constants';
export default () => ({
projectPath: null,
pipelineIid: null,
endpoint: '',
allCodequalityIssues: [],
codequalityIssues: [],
isLoadingCodequality: false,
loadingCodequalityFailed: false,
codeQualityError: null,
......@@ -13,12 +10,5 @@ export default () => ({
page: 1,
perPage: PAGE_SIZE,
total: 0,
count: 0,
currentPage: 1,
startCursor: '',
endCursor: '',
first: PAGE_SIZE,
after: '',
hasNextPage: false,
},
});
ee/app/assets/javascripts/codequality_report/store/utils.js deleted 100644 → 0
View file @ 5a045d0a
import createGqClient from '~/lib/graphql';
export const gqClient = createGqClient();
ee/spec/frontend/codequality_report/codequality_report_spec.js
View file @ 02f4d743
import { GlPagination, GlSkeletonLoader } from '@gitlab/ui';
import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
import { mount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import CodequalityReportApp from 'ee/codequality_report/codequality_report.vue';
import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
......@@ -39,9 +38,7 @@ describe('Codequality report app', () => {
const findStatus = () => wrapper.find('.js-code-text');
const findSuccessIcon = () => wrapper.find('.js-ci-status-icon-success');
const findWarningIcon = () => wrapper.find('.js-ci-status-icon-warning');
const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
const findOldPagination = () => wrapper.findComponent(PaginationLinks);
const findPagination = () => wrapper.findComponent(GlPagination);
const findPagination = () => wrapper.findComponent(PaginationLinks);
afterEach(() => {
wrapper.destroy();
......@@ -54,7 +51,6 @@ describe('Codequality report app', () => {
it('shows a loading state', () => {
expect(findStatus().text()).toBe('Loading Code Quality report');
expect(findSkeletonLoader().exists()).toBe(true);
});
});
......@@ -93,40 +89,8 @@ describe('Codequality report app', () => {
'/root/test-codequality/blob/feature-branch/ee/spec/features/admin/geo/admin_geo_projects_spec.rb#L152',
);
});
});
describe('with graphql feature flag disabled', () => {
beforeEach(() => {
createComponent(
{},
parsedIssues,
{
graphqlCodeQualityFullReport: false,
},
shallowMount,
);
});
it('renders the old pagination component', () => {
expect(findOldPagination().exists()).toBe(true);
expect(findPagination().exists()).toBe(false);
});
});
describe('with graphql feature flag enabled', () => {
beforeEach(() => {
createComponent(
{},
parsedIssues,
{
graphqlCodeQualityFullReport: true,
},
shallowMount,
);
});
it('renders the pagination component', () => {
expect(findOldPagination().exists()).toBe(false);
expect(findPagination().exists()).toBe(true);
});
});
......
ee/spec/frontend/codequality_report/mock_data.js
View file @ 02f4d743
......@@ -180,53 +180,3 @@ export const parsedIssues = [
'/root/test-codequality/blob/feature-branch/ee/spec/finders/geo/lfs_object_registry_finder_spec.rb#L512',
},
];
export const mockGraphqlResponse = {
data: {
project: {
pipeline: {
codeQualityReports: {
count: 3,
edges: [
{
node: {
line: 33,
description:
'Function `addToImport` has 54 lines of code (exceeds 25 allowed). Consider refactoring.',
path: 'app/assets/javascripts/importer_status.js',
fingerprint: 'f5c4a1a17a8903f8c6dd885142d0e5a7',
severity: 'MAJOR',
},
},
{
node: {
line: 170,
description: 'Avoid too many `return` statements within this function.',
path: 'app/assets/javascripts/ide/stores/utils.js',
fingerprint: '75e7e39f5b8ea0aadff2470a9b44ca68',
severity: 'MINOR',
},
},
{
node: {
line: 44,
description: 'Similar blocks of code found in 3 locations. Consider refactoring.',
path: 'ee/spec/features/projects/feature_flags/user_sees_feature_flag_list_spec.rb',
fingerprint: '99c054a8b1a7270b193b0a03a6c69cfc',
severity: 'INFO',
},
},
],
},
},
},
},
};
export const mockGraphqlPagination = {
hasNextPage: true,
hasPreviousPage: true,
startCursor: 'abc123',
endCursor: 'abc124',
page: 1,
};
ee/spec/frontend/codequality_report/store/actions_spec.js
View file @ 02f4d743
import MockAdapter from 'axios-mock-adapter';
import getCodeQualityViolations from 'ee/codequality_report/graphql/queries/get_code_quality_violations.query.graphql';
import * as actions from 'ee/codequality_report/store/actions';
import { VIEW_EVENT_NAME } from 'ee/codequality_report/store/constants';
import * as types from 'ee/codequality_report/store/mutation_types';
import initialState from 'ee/codequality_report/store/state';
import { gqClient } from 'ee/codequality_report/store/utils';
import { TEST_HOST } from 'helpers/test_constants';
import testAction from 'helpers/vuex_action_helper';
import Api from '~/api';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import {
unparsedIssues,
parsedIssues,
mockGraphqlResponse,
mockGraphqlPagination,
} from '../mock_data';
import { unparsedIssues, parsedIssues } from '../mock_data';
jest.mock('~/api.js');
jest.mock('~/flash');
......@@ -41,60 +34,16 @@ describe('Codequality report actions', () => {
});
describe('setPage', () => {
it('sets the page number with feature flag disabled', (done) => {
it('sets the page number', (done) => {
return testAction(
actions.setPage,
12,
state,
[{ type: types.SET_PAGE, payload: { page: 12 } }],
[{ type: types.SET_PAGE, payload: 12 }],
[],
done,
);
});
describe('with the feature flag enabled', () => {
let mockPageInfo;
beforeEach(() => {
window.gon = { features: { graphqlCodeQualityFullReport: true } };
mockPageInfo = {
...mockGraphqlPagination,
currentPage: 11,
};
});
it('sets the next page number', (done) => {
return testAction(
actions.setPage,
12,
{ ...state, pageInfo: mockPageInfo },
[
{
type: types.SET_PAGE,
payload: { after: mockGraphqlPagination.endCursor, currentPage: 12 },
},
],
[{ type: 'fetchReport' }],
done,
);
});
it('sets the previous page number', (done) => {
return testAction(
actions.setPage,
10,
{ ...state, pageInfo: mockPageInfo },
[
{
type: types.SET_PAGE,
payload: { after: mockGraphqlPagination.startCursor, currentPage: 10 },
},
],
[{ type: 'fetchReport' }],
done,
);
});
});
});
describe('requestReport', () => {
......@@ -110,7 +59,7 @@ describe('Codequality report actions', () => {
});
describe('receiveReportSuccess', () => {
it('parses the list of issues from the report with feature flag disabled', (done) => {
it('parses the list of issues from the report', (done) => {
return testAction(
actions.receiveReportSuccess,
unparsedIssues,
......@@ -120,25 +69,6 @@ describe('Codequality report actions', () => {
done,
);
});
it('parses the list of issues from the report with feature flag enabled', (done) => {
window.gon = { features: { graphqlCodeQualityFullReport: true } };
const data = {
edges: unparsedIssues.map((issue) => {
return { node: issue };
}),
};
return testAction(
actions.receiveReportSuccess,
data,
{ blobPath: '/root/test-codequality/blob/feature-branch', ...state },
[{ type: types.RECEIVE_REPORT_SUCCESS_GRAPHQL, payload: { data, parsedIssues } }],
[],
done,
);
});
});
describe('receiveReportError', () => {
......@@ -155,83 +85,19 @@ describe('Codequality report actions', () => {
});
describe('fetchReport', () => {
describe('with graphql feature flag disabled', () => {
beforeEach(() => {
mock.onGet(endpoint).replyOnce(200, unparsedIssues);
});
it('fetches the report', (done) => {
return testAction(
actions.fetchReport,
null,
{ blobPath: 'blah', ...state },
[],
[{ type: 'requestReport' }, { type: 'receiveReportSuccess', payload: unparsedIssues }],
done,
);
});
it('shows a flash message when there is an error', (done) => {
testAction(
actions.fetchReport,
'error',
state,
[],
[{ type: 'requestReport' }, { type: 'receiveReportError', payload: expect.any(Error) }],
() => {
expect(createFlash).toHaveBeenCalledWith({
message: 'There was an error fetching the codequality report.',
});
done();
},
);
});
it('shows an error when blob path is missing', (done) => {
testAction(
actions.fetchReport,
null,
state,
[],
[{ type: 'requestReport' }, { type: 'receiveReportError', payload: expect.any(Error) }],
() => {
expect(createFlash).toHaveBeenCalledWith({
message: 'There was an error fetching the codequality report.',
});
done();
},
);
});
beforeEach(() => {
mock.onGet(endpoint).replyOnce(200, unparsedIssues);
});
describe('with graphql feature flag enabled', () => {
beforeEach(() => {
jest.spyOn(gqClient, 'query').mockResolvedValue(mockGraphqlResponse);
state.paginationData = mockGraphqlPagination;
window.gon = { features: { graphqlCodeQualityFullReport: true } };
});
it('fetches the report', () => {
return testAction(
actions.fetchReport,
null,
{ blobPath: 'blah', ...state },
[],
[
{ type: 'requestReport' },
{
type: 'receiveReportSuccess',
payload: mockGraphqlResponse.data.project.pipeline.codeQualityReports,
},
],
() => {
expect(gqClient.query).toHaveBeenCalledWith({
query: getCodeQualityViolations,
variables: { after: '', first: 25, iid: null, projectPath: null },
});
},
);
});
it('fetches the report', (done) => {
return testAction(
actions.fetchReport,
null,
{ blobPath: 'blah', ...state },
[],
[{ type: 'requestReport' }, { type: 'receiveReportSuccess', payload: unparsedIssues }],
done,
);
});
it('shows a flash message when there is an error', (done) => {
......
ee/spec/frontend/codequality_report/store/mutations_spec.js
View file @ 02f4d743
......@@ -15,7 +15,7 @@ describe('Codequality report mutations', () => {
describe('set page', () => {
it('should set page', () => {
mutations[types.SET_PAGE](state, { page: 4 });
mutations[types.SET_PAGE](state, 4);
expect(state.pageInfo.page).toBe(4);
});
});
......@@ -27,17 +27,7 @@ describe('Codequality report mutations', () => {
});
});
describe('receive report success with graphql', () => {
it('should set issue info and clear the loading flag', () => {
mutations[types.RECEIVE_REPORT_SUCCESS_GRAPHQL](state, { data: { count: 42 }, parsedIssues });
expect(state.isLoadingCodequality).toBe(false);
expect(state.codequalityIssues).toBe(parsedIssues);
expect(state.pageInfo.count).toBe(42);
});
});
describe('receive report success without graphql', () => {
describe('receive report success', () => {
it('should set issue info and clear the loading flag', () => {
mutations[types.RECEIVE_REPORT_SUCCESS](state, parsedIssues);
......@@ -72,10 +62,8 @@ describe('Codequality report mutations', () => {
expect(state.isLoadingCodequality).toBe(false);
expect(state.loadingCodequalityFailed).toBe(true);
expect(state.allCodequalityIssues).toEqual([]);
expect(state.codequalityIssues).toEqual([]);
expect(state.codeQualityError).toEqual(new Error());
expect(state.pageInfo.total).toBe(0);
expect(state.pageInfo.count).toBe(0);
});
});
});
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