Commit fe220095 authored by Phil Hughes's avatar Phil Hughes

Merge branch '342901-add-violation-component-to-compliance-report-app' into 'master'

Add violation component to compliance report app

See merge request gitlab-org/gitlab!76660
parents f5b9811e 7e8b42f5
...@@ -7,6 +7,7 @@ import complianceViolationsQuery from '../graphql/compliance_violations.query.gr ...@@ -7,6 +7,7 @@ import complianceViolationsQuery from '../graphql/compliance_violations.query.gr
import { mapResponse } from '../graphql/mappers'; import { mapResponse } from '../graphql/mappers';
import EmptyState from './empty_state.vue'; import EmptyState from './empty_state.vue';
import MergeCommitsExportButton from './merge_requests/merge_commits_export_button.vue'; import MergeCommitsExportButton from './merge_requests/merge_commits_export_button.vue';
import ViolationReason from './violations/reason.vue';
export default { export default {
name: 'ComplianceReport', name: 'ComplianceReport',
...@@ -16,6 +17,7 @@ export default { ...@@ -16,6 +17,7 @@ export default {
GlLoadingIcon, GlLoadingIcon,
GlTable, GlTable,
MergeCommitsExportButton, MergeCommitsExportButton,
ViolationReason,
}, },
props: { props: {
emptyStateSvgPath: { emptyStateSvgPath: {
...@@ -122,7 +124,11 @@ export default { ...@@ -122,7 +124,11 @@ export default {
head-variant="white" head-variant="white"
stacked="lg" stacked="lg"
thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100" thead-class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
/> >
<template #cell(reason)="{ item: { reason, violatingUser } }">
<violation-reason :reason="reason" :user="violatingUser" />
</template>
</gl-table>
<empty-state v-else :image-path="emptyStateSvgPath" /> <empty-state v-else :image-path="emptyStateSvgPath" />
</section> </section>
</template> </template>
...@@ -6,6 +6,7 @@ import * as Sentry from '@sentry/browser'; ...@@ -6,6 +6,7 @@ import * as Sentry from '@sentry/browser';
import ComplianceReport from 'ee/compliance_dashboard/components/report.vue'; import ComplianceReport from 'ee/compliance_dashboard/components/report.vue';
import EmptyState from 'ee/compliance_dashboard/components/empty_state.vue'; import EmptyState from 'ee/compliance_dashboard/components/empty_state.vue';
import MergeCommitsExportButton from 'ee/compliance_dashboard/components/merge_requests/merge_commits_export_button.vue'; import MergeCommitsExportButton from 'ee/compliance_dashboard/components/merge_requests/merge_commits_export_button.vue';
import ViolationReason from 'ee/compliance_dashboard/components/violations/reason.vue';
import resolvers from 'ee/compliance_dashboard/graphql/resolvers'; import resolvers from 'ee/compliance_dashboard/graphql/resolvers';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
...@@ -25,6 +26,7 @@ describe('ComplianceReport component', () => { ...@@ -25,6 +26,7 @@ describe('ComplianceReport component', () => {
const findViolationsTable = () => wrapper.findComponent(GlTable); const findViolationsTable = () => wrapper.findComponent(GlTable);
const findEmptyState = () => wrapper.findComponent(EmptyState); const findEmptyState = () => wrapper.findComponent(EmptyState);
const findMergeCommitsExportButton = () => wrapper.findComponent(MergeCommitsExportButton); const findMergeCommitsExportButton = () => wrapper.findComponent(MergeCommitsExportButton);
const findViolationReason = () => wrapper.findComponent(ViolationReason);
const findTableHeaders = () => findViolationsTable().findAll('th'); const findTableHeaders = () => findViolationsTable().findAll('th');
const findTablesFirstRowData = () => const findTablesFirstRowData = () =>
...@@ -110,12 +112,28 @@ describe('ComplianceReport component', () => { ...@@ -110,12 +112,28 @@ describe('ComplianceReport component', () => {
// Note: This should be refactored as each table component is created // Note: This should be refactored as each table component is created
// Severity: https://gitlab.com/gitlab-org/gitlab/-/issues/342900 // Severity: https://gitlab.com/gitlab-org/gitlab/-/issues/342900
// Violation: https://gitlab.com/gitlab-org/gitlab/-/issues/342901
// Merge request and date merged: https://gitlab.com/gitlab-org/gitlab/-/issues/342902 // Merge request and date merged: https://gitlab.com/gitlab-org/gitlab/-/issues/342902
it('has the correct first row data', () => { it('has the correct first row data', () => {
const headerTexts = findTablesFirstRowData().wrappers.map((d) => d.text()); const headerTexts = findTablesFirstRowData().wrappers.map((d) => d.text());
expect(headerTexts).toEqual(['1', '1', expect.anything(), '2021-11-25T11:56:52.215Z']); expect(headerTexts).toEqual([
'1',
'Approved by committer',
expect.anything(),
'2021-11-25T11:56:52.215Z',
]);
});
it('renders the violation reason', () => {
const {
violatingUser: { __typename, ...user },
reason,
} = mockResolver().mergeRequestViolations.nodes[0];
expect(findViolationReason().props()).toMatchObject({
reason,
user,
});
}); });
}); });
......
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