Commit 64bc3b13 authored by Mark Florian's avatar Mark Florian Committed by David O'Regan

Fix License Compliance widget button spacing

Use flexbox for laying out the buttons, to avoid whitespace in the
template from affecting visual spacing.

This also replaces the deprecated slot syntax with modern shorthand.

Finally, this removes a snapshot test that wasn't providing any value,
since other tests in the suite make the necessary assertions about the
`Manage licenses` and `View full report` buttons in the `ReportSection`
anyway (which is what was in the snapshot).

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/283889.
parent bf35f604
......@@ -176,25 +176,27 @@ export default {
</gl-link>
</div>
</template>
<div v-if="showActionButtons" slot="action-buttons" class="gl-mr-3">
<a
v-if="licenseManagementSettingsPath"
:class="{ 'gl-mr-3': fullReportPath }"
:href="licenseManagementSettingsPath"
class="btn btn-default btn-sm js-manage-licenses"
data-qa-selector="manage_licenses_button"
>
{{ s__('ciReport|Manage licenses') }}
</a>
<a
v-if="fullReportPath"
:href="fullReportPath"
target="_blank"
class="btn btn-default btn-sm js-full-report"
>
{{ s__('ciReport|View full report') }} <gl-icon :size="16" name="external-link" />
</a>
</div>
<template v-if="showActionButtons" #action-buttons>
<div class="gl-display-flex gl-mr-3">
<a
v-if="licenseManagementSettingsPath"
:class="{ 'gl-mr-3': fullReportPath }"
:href="licenseManagementSettingsPath"
class="btn btn-default btn-sm js-manage-licenses"
data-qa-selector="manage_licenses_button"
>
{{ s__('ciReport|Manage licenses') }}
</a>
<a
v-if="fullReportPath"
:href="fullReportPath"
target="_blank"
class="btn btn-default btn-sm js-full-report"
>
{{ s__('ciReport|View full report') }} <gl-icon :size="16" name="external-link" />
</a>
</div>
</template>
</report-section>
</div>
</template>
---
title: Fix License Compliance widget button spacing
merge_request: 54701
author:
type: other
......@@ -28,49 +28,3 @@ exports[`License Report MR Widget report section report body should render corre
</smart-virtual-list-stub>
`;
exports[`License Report MR Widget report section should render correctly 1`] = `
<report-section-stub
class="license-report-widget mr-report"
component="LicenseIssueBody"
data-qa-selector="license_report_widget"
errortext="FOO"
hasissues="true"
loadingtext="FOO"
neutralissues="[object Object]"
popoveroptions="[object Object]"
resolvedissues=""
showreportsectionstatusicon="true"
status="SUCCESS"
successtext=""
unresolvedissues=""
>
<div
class="gl-mr-3"
>
<a
class="btn btn-default btn-sm js-manage-licenses gl-mr-3"
data-qa-selector="manage_licenses_button"
href="http://test.host/lm_settings"
>
Manage licenses
</a>
<a
class="btn btn-default btn-sm js-full-report"
href="http://test.host/path/to/the/full/report"
target="_blank"
>
View full report
<gl-icon-stub
name="external-link"
size="16"
/>
</a>
</div>
</report-section-stub>
`;
......@@ -68,7 +68,7 @@ describe('License Report MR Widget', () => {
getters = defaultGetters,
state = defaultState,
actions = defaultActions,
stubs = {},
stubs = { ReportSection },
} = {}) => {
const store = new Vuex.Store({
modules: {
......@@ -185,21 +185,6 @@ describe('License Report MR Widget', () => {
});
describe('report section', () => {
it('should render correctly', () => {
const mockReportGroups = [generateReportGroup()];
mountComponent({
getters: {
...defaultGetters,
licenseReportGroups() {
return mockReportGroups;
},
},
});
expect(wrapper.find(ReportSection).element).toMatchSnapshot();
});
describe('report body', () => {
it('should render correctly', () => {
const mockReportGroups = [generateReportGroup()];
......@@ -211,7 +196,6 @@ describe('License Report MR Widget', () => {
return mockReportGroups;
},
},
stubs: { ReportSection },
});
expect(wrapper.find({ ref: 'reportSectionBody' }).element).toMatchSnapshot();
......@@ -234,7 +218,6 @@ describe('License Report MR Widget', () => {
return mockReportGroups;
},
},
stubs: { ReportSection },
});
expect(wrapper.findAll({ ref: 'reportHeading' })).toHaveLength(
......@@ -259,7 +242,6 @@ describe('License Report MR Widget', () => {
return mockReportGroups;
},
},
stubs: { ReportSection },
});
expect(findAllReportItems()).toHaveLength(numberOfLicenses);
......@@ -280,7 +262,6 @@ describe('License Report MR Widget', () => {
return mockReportGroups;
},
},
stubs: { ReportSection },
});
const allReportItems = findAllReportItems();
......@@ -360,9 +341,7 @@ describe('License Report MR Widget', () => {
const findSecurityApprovalHelpLink = () => wrapper.find('.js-security-approval-help-link');
it('does not show a link to security approval help page if report does not contain blacklisted licenses', () => {
mountComponent({
stubs: { ReportSection },
});
mountComponent();
expect(findSecurityApprovalHelpLink().exists()).toBe(false);
});
......@@ -376,7 +355,6 @@ describe('License Report MR Widget', () => {
};
mountComponent({
getters,
stubs: { ReportSection },
});
const securityApprovalHelpLink = findSecurityApprovalHelpLink();
......
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