diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 0cf5bd0cec3d59b8cdb03785675538e16421bcdd..7ed754b714aad79d18859f0970b1fd589437ea90 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -3,7 +3,6 @@ import {
GlLoadingIcon,
GlBadge,
GlButton,
- GlLabel,
GlPopover,
GlLink,
GlTooltipDirective,
@@ -33,7 +32,6 @@ export default {
GlBadge,
GlButton,
GlLoadingIcon,
- GlLabel,
GlPopover,
GlLink,
UserAccessRoleBadge,
@@ -42,6 +40,8 @@ export default {
ItemStats,
ProjectAvatar,
VisibilityIcon,
+ FrameworkBadge: () =>
+ import('ee_component/compliance_dashboard/components/shared/framework_badge.vue'),
},
inject: {
currentGroupVisibility: {
@@ -244,11 +244,10 @@ export default {
<user-access-role-badge v-if="group.permission" size="sm" class="gl-mr-2">
{{ group.permission }}
</user-access-role-badge>
- <gl-label
+ <framework-badge
v-if="hasComplianceFramework"
- :title="complianceFramework.name"
- :background-color="complianceFramework.color"
- :description="complianceFramework.description"
+ :framework="complianceFramework"
+ :show-edit="false"
size="sm"
/>
</div>
diff --git a/app/assets/javascripts/groups/store/groups_store.js b/app/assets/javascripts/groups/store/groups_store.js
index 8dd559f4eda2c681ef8732974acc444620070c68..dc9e4828cdb8cc2a99690ec41a5b3044ba3266fc 100644
--- a/app/assets/javascripts/groups/store/groups_store.js
+++ b/app/assets/javascripts/groups/store/groups_store.js
@@ -1,5 +1,6 @@
import { isEmpty } from 'lodash';
import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
import { getGroupItemMicrodata } from './utils';
export default class GroupsStore {
@@ -107,6 +108,10 @@ export default class GroupsStore {
if (!isEmpty(rawGroupItem.compliance_management_framework)) {
groupItem.complianceFramework = {
+ id: convertToGraphQLId(
+ 'ComplianceManagement::Framework',
+ rawGroupItem.compliance_management_framework.id,
+ ),
name: rawGroupItem.compliance_management_framework.name,
color: rawGroupItem.compliance_management_framework.color,
description: rawGroupItem.compliance_management_framework.description,
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/frameworks_table.vue b/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/frameworks_table.vue
index 36ef95590d82167fba6d7f4988fcea13a32d88ce..f51902a751cef4266b156380c128c4325a003fb2 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/frameworks_table.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/frameworks_table.vue
@@ -3,7 +3,7 @@ import Vue from 'vue';
import { GlButton, GlLoadingIcon, GlSearchBoxByClick, GlTable, GlToast, GlLink } from '@gitlab/ui';
import { __, s__ } from '~/locale';
import FrameworkBadge from '../shared/framework_badge.vue';
-import { ROUTE_EDIT_FRAMEWORK, ROUTE_NEW_FRAMEWORK } from '../../constants';
+import { ROUTE_NEW_FRAMEWORK } from '../../constants';
import FrameworkInfoDrawer from './framework_info_drawer.vue';
Vue.use(GlToast);
@@ -57,9 +57,6 @@ export default {
closeDrawer() {
this.selectedFramework = null;
},
- editComplianceFramework(framework) {
- this.$router.push({ name: ROUTE_EDIT_FRAMEWORK, params: { id: framework.id } });
- },
isLastItem(index, arr) {
return index >= arr.length - 1;
},
@@ -126,7 +123,7 @@ export default {
@row-clicked="toggleDrawer"
>
<template #cell(frameworkName)="{ item }">
- <framework-badge :framework="item" @edit="editComplianceFramework(item)" />
+ <framework-badge :framework="item" />
</template>
<template
#cell(associatedProjects)="{
@@ -161,7 +158,6 @@ export default {
:show-drawer="showDrawer"
:framework="selectedFramework"
@close="closeDrawer"
- @edit="editComplianceFramework"
/>
</section>
</template>
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/projects_report/projects_table.vue b/ee/app/assets/javascripts/compliance_dashboard/components/projects_report/projects_table.vue
index 69f894add80bb2a31e16542862767ec11fbbfbb6..e7c036900e6900b21c105f21d4c1993abd8ee95c 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/projects_report/projects_table.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/projects_report/projects_table.vue
@@ -196,11 +196,6 @@ export default {
this.$refs.createModal.hide();
},
- editComplianceFramework(framework) {
- this.frameworkSelectedForEdit = framework;
- this.$refs.editModal.show();
- },
-
resetEditModal() {
this.frameworkSelectedForEdit = null;
this.$refs.editModal.hide();
@@ -347,7 +342,6 @@ export default {
:key="framework.id"
closeable
:framework="framework"
- @edit="editComplianceFramework(framework)"
@close="
applySingleItemOperation({
projectId: id,
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/shared/framework_badge.vue b/ee/app/assets/javascripts/compliance_dashboard/components/shared/framework_badge.vue
index aa5505bd91bd24b7cbf745967d8fef08ba04d3fb..c15c145a302460390629b20a4f816c2a058bcae5 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/shared/framework_badge.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/shared/framework_badge.vue
@@ -2,7 +2,11 @@
import { GlButton, GlLabel, GlPopover } from '@gitlab/ui';
import { s__ } from '~/locale';
-import { FRAMEWORK_BADGE_SIZE_MD, FRAMEWORK_BADGE_SIZES } from '../../constants';
+import {
+ FRAMEWORK_BADGE_SIZE_MD,
+ FRAMEWORK_BADGE_SIZES,
+ ROUTE_EDIT_FRAMEWORK,
+} from '../../constants';
export default {
name: 'ComplianceFrameworkBadge',
@@ -32,15 +36,23 @@ export default {
required: false,
default: false,
},
+ showEdit: {
+ type: Boolean,
+ required: false,
+ default: true,
+ },
},
computed: {
showDefaultBadge() {
return this.showDefault && this.framework.default;
},
frameworkName() {
- return this.showDefaultBadge
- ? `${this.framework.name} (${this.$options.i18n.default})`
- : this.framework.name;
+ const maxLength = 30;
+ const name =
+ this.framework?.name?.length > maxLength
+ ? `${this.framework.name.substring(0, maxLength)}...`
+ : this.framework.name;
+ return this.showDefaultBadge ? `${name} (${this.$options.i18n.default})` : name;
},
frameworkTestId() {
return this.showDefaultBadge
@@ -50,8 +62,7 @@ export default {
},
methods: {
editFromPopover() {
- this.$refs.popover.$emit('close');
- this.$emit('edit');
+ this.$router.push({ name: ROUTE_EDIT_FRAMEWORK, params: { id: this.framework.id } });
},
},
i18n: {
@@ -63,10 +74,12 @@ export default {
<template>
<div ref="badge">
<gl-popover ref="popover" :target="() => $refs.label">
+ <h5 v-if="framework.name" class="gl-text-left">{{ framework.name }}</h5>
<p v-if="framework.description" class="gl-text-left">{{ framework.description }}</p>
- <div class="gl-text-left">
+ <div v-if="showEdit" class="gl-text-left">
<gl-button
category="tertiary"
+ size="small"
variant="confirm"
class="gl-font-sm"
@click="editFromPopover"
@@ -82,6 +95,7 @@ export default {
:title="frameworkName"
:size="size"
:show-close-button="closeable"
+ class="gl-md-max-w-26"
@close="$emit('close')"
/>
</span>
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue
index ed9fdd7ae5f9a518bbf5eb89374a4bf812346d70..1dc31f3f3e4583bb5f00826c8148812d077024c9 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/base_table.vue
@@ -1,9 +1,10 @@
<script>
-import { GlAlert, GlTable, GlIcon, GlLink, GlBadge, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlTable, GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui';
import { formatDate } from '~/lib/utils/datetime_utility';
import { s__ } from '~/locale';
import * as Sentry from '~/sentry/sentry_browser_wrapper';
import getProjectComplianceStandardsAdherence from 'ee/compliance_dashboard/graphql/compliance_standards_adherence.query.graphql';
+import FrameworkBadge from '../shared/framework_badge.vue';
import Pagination from '../shared/pagination.vue';
import { GRAPHQL_PAGE_SIZE } from '../../constants';
import {
@@ -22,10 +23,10 @@ export default {
GlTable,
GlIcon,
GlLink,
- GlBadge,
GlLoadingIcon,
FixSuggestionsSidebar,
Pagination,
+ FrameworkBadge,
},
props: {
groupPath: {
@@ -292,7 +293,7 @@ export default {
class="gl-label"
:title="framework.name"
>
- <gl-badge size="sm" class="gl-mt-3 gl-label-text"> {{ framework.name }}</gl-badge>
+ <framework-badge :framework="framework" size="sm" />
</div>
</template>
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue
index cba479edab182a4a399410dafbb9b32be1a174f3..45767a7043237c0218ae528d08472ac97bd78865 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/standards_adherence_report/fix_suggestions_sidebar.vue
@@ -1,9 +1,10 @@
<script>
-import { GlDrawer, GlIcon, GlBadge, GlButton, GlLink } from '@gitlab/ui';
+import { GlDrawer, GlIcon, GlButton, GlLink } from '@gitlab/ui';
import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
import { joinPaths } from '~/lib/utils/url_utility';
import { helpPagePath } from '~/helpers/help_page_helper';
+import FrameworkBadge from 'ee/compliance_dashboard/components/shared/framework_badge.vue';
import {
FAIL_STATUS,
STANDARDS_ADHERENCE_CHECK_DESCRIPTIONS,
@@ -20,9 +21,9 @@ export default {
components: {
GlDrawer,
GlIcon,
- GlBadge,
GlButton,
GlLink,
+ FrameworkBadge,
},
props: {
groupPath: {
@@ -96,7 +97,7 @@ export default {
<gl-link class="gl-mx-3" :href="project.webUrl"> {{ project.name }} </gl-link>
<span v-for="framework in project.complianceFrameworks.nodes" :key="framework.id">
- <gl-badge size="sm" class="gl-mt-3"> {{ framework.name }}</gl-badge>
+ <framework-badge :framework="framework" size="sm" :show-edit="false" />
</span>
</div>
</div>
diff --git a/ee/app/assets/javascripts/groups/settings/compliance_frameworks/utils.js b/ee/app/assets/javascripts/groups/settings/compliance_frameworks/utils.js
index 6f88add8e249e3709c9ab522204f7babf3d37391..b2f49c242e4da39252d9f0fac6032456274fe978 100644
--- a/ee/app/assets/javascripts/groups/settings/compliance_frameworks/utils.js
+++ b/ee/app/assets/javascripts/groups/settings/compliance_frameworks/utils.js
@@ -13,7 +13,7 @@ export const injectIdIntoEditPath = (path, id) => {
};
export const initialiseFormData = () => ({
- name: null,
+ name: '',
description: null,
pipelineConfigurationFullPath: null,
color: null,
diff --git a/ee/spec/frontend/compliance_dashboard/components/frameworks_report/frameworks_table_spec.js b/ee/spec/frontend/compliance_dashboard/components/frameworks_report/frameworks_table_spec.js
index 88956c8b18c066cff585d1c59df5f769bbb5c0a7..b161b3291b9748dfe6ce95fe4ecda74601c56701 100644
--- a/ee/spec/frontend/compliance_dashboard/components/frameworks_report/frameworks_table_spec.js
+++ b/ee/spec/frontend/compliance_dashboard/components/frameworks_report/frameworks_table_spec.js
@@ -7,9 +7,8 @@ import { stubComponent } from 'helpers/stub_component';
import { createComplianceFrameworksReportResponse } from 'ee_jest/compliance_dashboard/mock_data';
import FrameworksTable from 'ee/compliance_dashboard/components/frameworks_report/frameworks_table.vue';
-import FrameworkBadge from 'ee/compliance_dashboard/components/shared/framework_badge.vue';
import FrameworkInfoDrawer from 'ee/compliance_dashboard/components/frameworks_report/framework_info_drawer.vue';
-import { ROUTE_NEW_FRAMEWORK, ROUTE_EDIT_FRAMEWORK } from 'ee/compliance_dashboard/constants';
+import { ROUTE_NEW_FRAMEWORK } from 'ee/compliance_dashboard/constants';
Vue.use(VueApollo);
@@ -153,21 +152,6 @@ describe('FrameworksTable component', () => {
);
});
- describe('when edit framework requested from framework badge', () => {
- beforeEach(() => {
- findTableRow(rowCheckIndex).findComponent(FrameworkBadge).vm.$emit('edit');
- });
-
- it('opens edit route with correct props', () => {
- expect(routerPushMock).toHaveBeenCalledWith({
- name: ROUTE_EDIT_FRAMEWORK,
- params: {
- id: frameworks[rowCheckIndex].id,
- },
- });
- });
- });
-
describe('Sidebar', () => {
describe('closing the sidebar', () => {
it('has the correct props when closed', async () => {
diff --git a/ee/spec/frontend/compliance_dashboard/components/projects_report/projects_table_spec.js b/ee/spec/frontend/compliance_dashboard/components/projects_report/projects_table_spec.js
index 27fae5df7d2785f3c4b8aa9f3fd0c9bf4284a61d..6b95c21d5ebb7417278d54e55a9fbded7c5cacbd 100644
--- a/ee/spec/frontend/compliance_dashboard/components/projects_report/projects_table_spec.js
+++ b/ee/spec/frontend/compliance_dashboard/components/projects_report/projects_table_spec.js
@@ -2,7 +2,6 @@ import { GlFormCheckbox, GlLabel, GlLoadingIcon, GlTable, GlModal } from '@gitla
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import CreateForm from 'ee/groups/settings/compliance_frameworks/components/create_form.vue';
-import EditForm from 'ee/groups/settings/compliance_frameworks/components/edit_form.vue';
import waitForPromises from 'helpers/wait_for_promises';
import createMockApollo from 'helpers/mock_apollo_helper';
import { stubComponent } from 'helpers/stub_component';
@@ -13,7 +12,6 @@ import {
createComplianceFrameworksResponse,
createProjectSetComplianceFrameworkResponse,
} from 'ee_jest/compliance_dashboard/mock_data';
-import FrameworkBadge from 'ee/compliance_dashboard/components/shared/framework_badge.vue';
import FrameworkSelectionBox from 'ee/compliance_dashboard/components/projects_report/framework_selection_box.vue';
import ProjectsTable from 'ee/compliance_dashboard/components/projects_report/projects_table.vue';
import SelectionOperations from 'ee/compliance_dashboard/components/projects_report/selection_operations.vue';
@@ -49,7 +47,6 @@ describe('ProjectsTable component', () => {
wrapper.findAllComponents(GlModal).wrappers.find((w) => w.props('modalId') === modalId);
const findCreateModal = () => findModalByModalId('create-framework-form-modal');
- const findEditModal = () => findModalByModalId('edit-framework-form-modal');
const findSelectAllCheckbox = () =>
findTable().findAll('th > div').at(0).findComponent(GlFormCheckbox);
@@ -335,35 +332,6 @@ describe('ProjectsTable component', () => {
});
});
- describe('when edit framework requested from framework badge', () => {
- beforeEach(() => {
- findTableRowData(ROW_WITH_FRAMEWORK_IDX)
- .at(COMPLIANCE_FRAMEWORK_COLUMN_IDX)
- .findComponent(FrameworkBadge)
- .vm.$emit('edit');
- });
-
- it('opens edit modal with correct props', () => {
- expect(findEditModal().findComponent(EditForm).props('id')).toEqual(
- projects[ROW_WITH_FRAMEWORK_IDX].complianceFrameworks[0].id,
- );
-
- expect(GlModalStub.methods.show).toHaveBeenCalled();
- });
-
- it('closes modal on cancel', () => {
- findEditModal().findComponent(EditForm).vm.$emit('cancel');
-
- expect(GlModalStub.methods.hide).toHaveBeenCalled();
- });
-
- it('closes modal on success', () => {
- findEditModal().findComponent(EditForm).vm.$emit('success');
-
- expect(GlModalStub.methods.hide).toHaveBeenCalled();
- });
- });
-
describe('when add framework selection is made', () => {
const NEW_FRAMEWORK_ID = 'new-framework-id';
diff --git a/ee/spec/frontend/compliance_dashboard/components/shared/framework_badge_spec.js b/ee/spec/frontend/compliance_dashboard/components/shared/framework_badge_spec.js
index 16bba6c8dc710ca2e72d03c2be813ed50d97174a..8c0184ea4c00ff0935580ec18d3ffc0a0048f143 100644
--- a/ee/spec/frontend/compliance_dashboard/components/shared/framework_badge_spec.js
+++ b/ee/spec/frontend/compliance_dashboard/components/shared/framework_badge_spec.js
@@ -3,20 +3,26 @@ import { shallowMount } from '@vue/test-utils';
import FrameworkBadge from 'ee/compliance_dashboard/components/shared/framework_badge.vue';
+import { ROUTE_EDIT_FRAMEWORK } from 'ee/compliance_dashboard/constants';
import { complianceFramework } from '../../mock_data';
describe('FrameworkBadge component', () => {
let wrapper;
+ let routerPushMock;
const findLabel = () => wrapper.findComponent(GlLabel);
const findTooltip = () => wrapper.findComponent(GlPopover);
const findEditButton = () => wrapper.findComponent(GlPopover).findComponent(GlButton);
const createComponent = (props = {}) => {
+ routerPushMock = jest.fn();
return shallowMount(FrameworkBadge, {
propsData: {
...props,
},
+ mocks: {
+ $router: { push: routerPushMock },
+ },
});
};
@@ -31,7 +37,12 @@ describe('FrameworkBadge component', () => {
wrapper = createComponent({ framework: complianceFramework });
await findEditButton().vm.$emit('click', new MouseEvent('click'));
- expect(wrapper.emitted('edit')).toHaveLength(1);
+ expect(routerPushMock).toHaveBeenCalledWith({
+ name: ROUTE_EDIT_FRAMEWORK,
+ params: {
+ id: complianceFramework.id,
+ },
+ });
});
it('renders the framework label', () => {
@@ -50,6 +61,18 @@ describe('FrameworkBadge component', () => {
expect(findLabel().props('title')).toEqual(`${complianceFramework.name} (default)`);
});
+ it('renders the truncated text when the framework name is long', () => {
+ wrapper = createComponent({
+ framework: {
+ ...complianceFramework,
+ name: 'A really long standard regulation name that will not fit in one line',
+ default: false,
+ },
+ });
+
+ expect(findLabel().props('title')).toEqual('A really long standard regulat...');
+ });
+
it('does not render the default addition when the framework is default but component is configured to hide the badge', () => {
wrapper = createComponent({
framework: { ...complianceFramework, default: true },
diff --git a/ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/base_table_spec.js b/ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/base_table_spec.js
index 1f56af0cb75d61ca5ecdcd11565abccbd2e74392..30b074cffd79c1fff0a331e2fd6acc91701f85c5 100644
--- a/ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/base_table_spec.js
+++ b/ee/spec/frontend/compliance_dashboard/components/standards_adherence_report/base_table_spec.js
@@ -167,16 +167,19 @@ describe('AdherencesBaseTable component', () => {
describe('when check is `PREVENT_APPROVAL_BY_MERGE_REQUEST_AUTHOR`', () => {
it('renders the table row properly', () => {
- const rowText = findFirstTableRowData().wrappers.map((e) => e.text());
-
- expect(rowText).toStrictEqual([
- 'Success',
- 'Example Project',
- 'Prevent authors as approvers',
- 'GitLab',
- 'Jul 1, 2023',
- 'View details',
- ]);
+ const [
+ rowStatus,
+ rowProject,
+ rowCheck,
+ rowStandard,
+ rowDate,
+ ] = findFirstTableRowData().wrappers.map((e) => e.text());
+
+ expect(rowStatus).toContain('Success');
+ expect(rowProject).toContain('Example Project');
+ expect(rowCheck).toContain('Prevent authors as approvers');
+ expect(rowStandard).toContain('GitLab');
+ expect(rowDate).toContain('Jul 1, 2023');
});
});
@@ -195,16 +198,19 @@ describe('AdherencesBaseTable component', () => {
});
it('renders the table row properly', () => {
- const rowText = findFirstTableRowData().wrappers.map((e) => e.text());
-
- expect(rowText).toStrictEqual([
- 'Success',
- 'Example Project',
- 'Prevent committers as approvers',
- 'GitLab',
- 'Jul 1, 2023',
- 'View details',
- ]);
+ const [
+ rowStatus,
+ rowProject,
+ rowCheck,
+ rowStandard,
+ rowDate,
+ ] = findFirstTableRowData().wrappers.map((e) => e.text());
+
+ expect(rowStatus).toContain('Success');
+ expect(rowProject).toContain('Example Project');
+ expect(rowCheck).toContain('Prevent committers as approvers');
+ expect(rowStandard).toContain('GitLab');
+ expect(rowDate).toContain('Jul 1, 2023');
});
});
@@ -221,16 +227,19 @@ describe('AdherencesBaseTable component', () => {
});
it('renders the table row properly', () => {
- const rowText = findFirstTableRowData().wrappers.map((e) => e.text());
-
- expect(rowText).toStrictEqual([
- 'Success',
- 'Example Project',
- 'At least two approvals',
- 'GitLab',
- 'Jul 1, 2023',
- 'View details',
- ]);
+ const [
+ rowStatus,
+ rowProject,
+ rowCheck,
+ rowStandard,
+ rowDate,
+ ] = findFirstTableRowData().wrappers.map((e) => e.text());
+
+ expect(rowStatus).toContain('Success');
+ expect(rowProject).toContain('Example Project');
+ expect(rowCheck).toContain('At least two approvals');
+ expect(rowStandard).toContain('GitLab');
+ expect(rowDate).toContain('Jul 1, 2023');
});
});
diff --git a/ee/spec/frontend/compliance_dashboard/mock_data.js b/ee/spec/frontend/compliance_dashboard/mock_data.js
index 4b5c892ef539df8c43ea6c1992c585df30c3651b..0e70d36014a7cf41b00a9498ed839f40ea45ea05 100644
--- a/ee/spec/frontend/compliance_dashboard/mock_data.js
+++ b/ee/spec/frontend/compliance_dashboard/mock_data.js
@@ -47,14 +47,16 @@ export const createComplianceAdherence = (id, checkName) => ({
name: 'Example Project',
webUrl: 'example.com/groups/example-group/example-project',
complianceFrameworks: {
- nodes: {
- id: 'gid://gitlab/ComplianceManagement::Framework/1',
- name: 'Example Framework',
- description: 'asds',
- color: '#0000ff',
- __typename: 'ComplianceFramework',
- default: true,
- },
+ nodes: [
+ {
+ id: 'gid://gitlab/ComplianceManagement::Framework/1',
+ name: 'Example Framework',
+ description: 'asds',
+ color: '#0000ff',
+ __typename: 'ComplianceFramework',
+ default: true,
+ },
+ ],
},
},
});
diff --git a/ee/spec/frontend/groups/components/group_item_spec.js b/ee/spec/frontend/groups/components/group_item_spec.js
index 77e03a1ab6d3497464bb9c029b604cf57510ee63..373732ed25ea84a70df7a62e2363a675eee02ae9 100644
--- a/ee/spec/frontend/groups/components/group_item_spec.js
+++ b/ee/spec/frontend/groups/components/group_item_spec.js
@@ -1,5 +1,5 @@
import { shallowMount } from '@vue/test-utils';
-import { GlLabel } from '@gitlab/ui';
+import FrameworkBadge from 'ee_else_ce/compliance_dashboard/components/shared/framework_badge.vue';
import waitForPromises from 'helpers/wait_for_promises';
import GroupFolder from '~/groups/components/group_folder.vue';
import GroupItem from 'jh_else_ce/groups/components/group_item.vue';
@@ -21,26 +21,25 @@ const createComponent = (props = {}) => {
describe('GroupItemComponent', () => {
let wrapper;
- const findComplianceFrameworkLabel = () => wrapper.findComponent(GlLabel);
+ const findComplianceFrameworkBadge = () => wrapper.findComponent(FrameworkBadge);
describe('Compliance framework label', () => {
it('does not render if the item does not have a compliance framework', async () => {
wrapper = createComponent({ group: mockChildren[0] });
await waitForPromises();
- expect(findComplianceFrameworkLabel().exists()).toBe(false);
+ expect(findComplianceFrameworkBadge().exists()).toBe(false);
});
it('renders if the item has a compliance framework', async () => {
- const { color, description, name } = mockChildren[1].complianceFramework;
-
wrapper = createComponent({ group: mockChildren[1] });
await waitForPromises();
- expect(findComplianceFrameworkLabel().props()).toMatchObject({
- backgroundColor: color,
- description,
- title: name,
+ expect(findComplianceFrameworkBadge().exists()).toBe(true);
+
+ expect(findComplianceFrameworkBadge().props()).toMatchObject({
+ framework: mockChildren[1].complianceFramework,
+ showEdit: false,
size: 'sm',
});
});
diff --git a/ee/spec/frontend/groups/mock_data.js b/ee/spec/frontend/groups/mock_data.js
index d4b30e6b096ed0201b423c655331e7e01e43d149..9017756a65e7f46e9b9569fb5e6120a830449f50 100644
--- a/ee/spec/frontend/groups/mock_data.js
+++ b/ee/spec/frontend/groups/mock_data.js
@@ -76,6 +76,7 @@ export const mockChildren = [
isBeingRemoved: false,
updatedAt: '2017-04-09T18:40:39.101Z',
complianceFramework: {
+ id: 'gid://gitlab/ComplianceManagement::Framework/1',
name: 'GDPR',
description: 'General Data Protection Regulation',
color: '#009966',
diff --git a/ee/spec/frontend/groups/settings/compliance_frameworks/utils_spec.js b/ee/spec/frontend/groups/settings/compliance_frameworks/utils_spec.js
index aeb46af98b14b78cd51b7b6aded18873ead3f1e9..f90a42b8fc8b36215c3962a8c7220d4d759f329b 100644
--- a/ee/spec/frontend/groups/settings/compliance_frameworks/utils_spec.js
+++ b/ee/spec/frontend/groups/settings/compliance_frameworks/utils_spec.js
@@ -38,7 +38,7 @@ describe('Utils', () => {
describe('initialiseFormData', () => {
it('returns the initial form data object', () => {
expect(Utils.initialiseFormData()).toStrictEqual({
- name: null,
+ name: '',
description: null,
pipelineConfigurationFullPath: null,
color: null,
diff --git a/ee/spec/frontend/groups/store/groups_store_spec.js b/ee/spec/frontend/groups/store/groups_store_spec.js
index bcfe11bad5f85ba60481857a9d9118381ed6a56c..860da2e73c76ec26726ae7fed29790e86abf22f0 100644
--- a/ee/spec/frontend/groups/store/groups_store_spec.js
+++ b/ee/spec/frontend/groups/store/groups_store_spec.js
@@ -1,4 +1,5 @@
import GroupsStore from '~/groups/store/groups_store';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
import { mockRawChildren } from '../mock_data';
describe('ee/ProjectsStore', () => {
@@ -15,6 +16,10 @@ describe('ee/ProjectsStore', () => {
const updatedGroupItem = store.formatGroupItem(mockRawChildren[1]);
expect(updatedGroupItem.complianceFramework).toStrictEqual({
+ id: convertToGraphQLId(
+ 'ComplianceManagement::Framework',
+ mockRawChildren[1].compliance_management_framework.id,
+ ),
name: mockRawChildren[1].compliance_management_framework.name,
color: mockRawChildren[1].compliance_management_framework.color,
description: mockRawChildren[1].compliance_management_framework.description,