Commit d74aea9c authored by Robert Hunt's avatar Robert Hunt

Merge branch '356485-refactor-detected-licenses' into 'master'

Change license compliance to use warning alert

* Change warning alert to warning count badge

Changelog: changed
EE: true
MR: gitlab-org/gitlab!83831
parents 0249d2a5 e3322297
<script>
import {
GlEmptyState,
GlLoadingIcon,
GlLink,
GlIcon,
GlTab,
GlTabs,
GlBadge,
GlAlert,
} from '@gitlab/ui';
import { GlEmptyState, GlLoadingIcon, GlLink, GlIcon, GlTab, GlTabs, GlBadge } from '@gitlab/ui';
import { mapActions, mapState, mapGetters } from 'vuex';
import LicenseManagement from 'ee/vue_shared/license_compliance/license_management.vue';
import { LICENSE_MANAGEMENT } from 'ee/vue_shared/license_compliance/store/constants';
......@@ -30,7 +21,6 @@ export default {
GlTab,
GlTabs,
GlBadge,
GlAlert,
LicenseManagement,
},
mixins: [glFeatureFlagsMixin()],
......@@ -48,6 +38,9 @@ export default {
hasEmptyState() {
return Boolean(!this.isJobSetUp || this.isJobFailed);
},
pillVariant() {
return this.hasPolicyViolations ? 'warning' : 'muted';
},
licenseCount() {
return this.pageInfo.total;
},
......@@ -103,14 +96,6 @@ export default {
</gl-empty-state>
<div v-else>
<gl-alert v-if="hasPolicyViolations" class="mt-3" variant="warning" :dismissible="false">
{{
s__(
"Licenses|Detected licenses that are out-of-compliance with the project's assigned policies",
)
}}
</gl-alert>
<header class="my-3">
<h2 class="h4 mb-1 gl-display-flex gl-align-items-center">
{{ s__('Licenses|License Compliance') }}
......@@ -131,7 +116,9 @@ export default {
<gl-tab data-testid="licensesTab">
<template #title>
<span data-testid="licensesTabTitle">{{ s__('Licenses|Detected in Project') }}</span>
<gl-badge size="sm" class="gl-tab-counter-badge">{{ licenseCount }}</gl-badge>
<gl-badge size="sm" :variant="pillVariant" class="gl-tab-counter-badge">{{
licenseCount
}}</gl-badge>
</template>
<detected-licenses-table />
......
......@@ -26,7 +26,7 @@ export default {
pipelineText() {
const { path } = this;
const body = s__(
'Licenses|Displays licenses detected in the project, based on the %{linkStart}latest successful%{linkEnd} scan',
"Licenses|Displays licenses detected in the project that are out of compliance with the project's policies, based on the %{linkStart}latest successful%{linkEnd} scan",
);
const linkStart = path
......
......@@ -83,6 +83,7 @@ const createComponent = ({ state, props, options }) => {
};
const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
const findAllGlBadges = () => wrapper.findAllComponents(GlBadge);
describe('Project Licenses', () => {
afterEach(() => {
......@@ -232,85 +233,75 @@ describe('Project Licenses', () => {
},
);
describe('when the tabs are rendered', () => {
const pageInfo = {
total: 1,
};
beforeEach(() => {
createComponent({
state: {
initialized: true,
isLoading: false,
licenses: [
{
name: 'MIT',
classification: LICENSE_APPROVAL_CLASSIFICATION.DENIED,
components: [],
describe.each`
classification | warning
${LICENSE_APPROVAL_CLASSIFICATION.DENIED} | ${true}
${LICENSE_APPROVAL_CLASSIFICATION.ALLOWED} | ${false}
`(
'when the tabs are rendered with a $classification vulnerability',
({ classification, warning }) => {
const pageInfo = {
total: 1,
};
beforeEach(() => {
createComponent({
state: {
initialized: true,
isLoading: false,
licenses: [
{
name: 'MIT',
classification,
components: [],
},
],
reportInfo: {
jobPath: '/',
generatedAt: '',
status: REPORT_STATUS.ok,
},
],
reportInfo: {
jobPath: '/',
generatedAt: '',
status: REPORT_STATUS.ok,
pageInfo,
},
pageInfo,
},
options: {
mount: true,
},
options: {
mount: true,
},
});
});
});
it.each`
givenActiveTab | expectedLocationHash
${'policies'} | ${'#policies'}
${'licenses'} | ${'#licenses'}
`(
'sets the location hash to "$expectedLocationHash" when the "$givenTab" tab is activate',
async ({ givenActiveTab, expectedLocationHash }) => {
findByTestId(`${givenActiveTab}TabTitle`).trigger('click');
await nextTick();
expect(window.location.hash).toBe(expectedLocationHash);
},
);
it('it renders the correct count in "Detected in project" tab', () => {
expect(wrapper.findAllComponents(GlBadge).at(0).text()).toBe(pageInfo.total.toString());
});
it('it renders the correct count in "Policies" tab', () => {
expect(wrapper.findAllComponents(GlBadge).at(1).text()).toBe(
managedLicenses.length.toString(),
it.each`
givenActiveTab | expectedLocationHash
${'policies'} | ${'#policies'}
${'licenses'} | ${'#licenses'}
`(
'sets the location hash to "$expectedLocationHash" when the "$givenTab" tab is activate',
async ({ givenActiveTab, expectedLocationHash }) => {
findByTestId(`${givenActiveTab}TabTitle`).trigger('click');
await nextTick();
expect(window.location.hash).toBe(expectedLocationHash);
},
);
});
it('it renders the correct type of badge styling', () => {
const badges = [
wrapper.findAllComponents(GlBadge).at(0),
wrapper.findAllComponents(GlBadge).at(1),
];
badges.forEach((badge) => expect(badge.classes()).toContain('gl-tab-counter-badge'));
});
});
it('it renders the correct count in "Detected in project" tab', () => {
expect(findAllGlBadges().at(0).text()).toBe(pageInfo.total.toString());
});
describe('when there are policy violations', () => {
beforeEach(() => {
createComponent({
state: {
initialized: true,
licenses: [{ classification: LICENSE_APPROVAL_CLASSIFICATION.DENIED }],
},
it('it renders the correct count in "Policies" tab', () => {
expect(findAllGlBadges().at(1).text()).toBe(managedLicenses.length.toString());
});
});
it('renders a policy violations alert', () => {
expect(wrapper.findComponent(GlAlert).exists()).toBe(true);
expect(wrapper.findComponent(GlAlert).text()).toContain(
"Detected licenses that are out-of-compliance with the project's assigned policies",
);
});
});
it('it renders the correct type of badge styling', () => {
const badges = [findAllGlBadges().at(0), findAllGlBadges().at(1)];
badges.forEach((badge) => expect(badge.classes()).toContain('gl-tab-counter-badge'));
});
it(`it ${
warning ? 'does' : 'does not'
} render the Detected in Project tab with warning pill`, () => {
expect(findAllGlBadges().at(0).find('.badge-warning').exists()).toBe(warning);
});
},
);
});
});
......@@ -22506,10 +22506,7 @@ msgstr ""
msgid "Licenses|Detected in Project"
msgstr ""
msgid "Licenses|Detected licenses that are out-of-compliance with the project's assigned policies"
msgstr ""
msgid "Licenses|Displays licenses detected in the project, based on the %{linkStart}latest successful%{linkEnd} scan"
msgid "Licenses|Displays licenses detected in the project that are out of compliance with the project's policies, based on the %{linkStart}latest successful%{linkEnd} scan"
msgstr ""
msgid "Licenses|Drag your license file here or %{linkStart}click to upload%{linkEnd}."
......
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