diff --git a/ee/app/assets/javascripts/security_dashboard/components/pipeline/report_status_alert.vue b/ee/app/assets/javascripts/security_dashboard/components/pipeline/report_status_alert.vue
index ba5a073dbd12c81310154b456c9f26287ab0cf41..43bb7422dbdc07d60c19091dda3df721b096cc22 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/pipeline/report_status_alert.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/pipeline/report_status_alert.vue
@@ -1,5 +1,5 @@
<script>
-import { GlAlert, GlSprintf, GlButton } from '@gitlab/ui';
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
import { s__ } from '~/locale';
import { DOC_PATH_SECURITY_SCANNER_INTEGRATION_RETENTION_PERIOD } from 'ee/security_dashboard/constants';
@@ -9,7 +9,7 @@ export default {
components: {
GlAlert,
GlSprintf,
- GlButton,
+ GlLink,
},
i18n: {
reportStatusTitle: s__('SecurityReports|Report has expired'),
@@ -27,14 +27,11 @@ export default {
<p class="gl-mt-3">
<gl-sprintf :message="$options.i18n.reportExpiredMessage" data-testid="description">
<template #helpPageLink="{ content }">
- <gl-button
- variant="link"
- icon="external-link"
+ <gl-link
:href="$options.DOC_PATH_SECURITY_SCANNER_INTEGRATION_RETENTION_PERIOD"
target="_blank"
+ >{{ content }}</gl-link
>
- {{ content }}
- </gl-button>
</template>
</gl-sprintf>
</p>
diff --git a/ee/app/assets/javascripts/security_dashboard/components/pipeline/scan_alerts.vue b/ee/app/assets/javascripts/security_dashboard/components/pipeline/scan_alerts.vue
index 8d244993c12f1988f99996f9bcfaa160ad8c583b..daa8b802828fdb018418955326ec0a1e396b291a 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/pipeline/scan_alerts.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/pipeline/scan_alerts.vue
@@ -1,5 +1,5 @@
<script>
-import { GlAccordion, GlAccordionItem, GlAlert, GlButton, GlSprintf } from '@gitlab/ui';
+import { GlAccordion, GlAccordionItem, GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
import { DOC_PATH_SECURITY_SCANNER_INTEGRATION_REPORT } from 'ee/security_dashboard/constants';
export const TYPE_ERRORS = 'errors';
@@ -10,7 +10,7 @@ export default {
GlAccordion,
GlAccordionItem,
GlAlert,
- GlButton,
+ GlLink,
GlSprintf,
},
props: {
@@ -59,14 +59,9 @@ export default {
<p class="gl-mt-3">
<gl-sprintf :message="description" data-testid="description">
<template #helpPageLink="{ content }">
- <gl-button
- variant="link"
- icon="external-link"
- :href="$options.DOC_PATH_SECURITY_SCANNER_INTEGRATION_REPORT"
- target="_blank"
- >
- {{ content }}
- </gl-button>
+ <gl-link :href="$options.DOC_PATH_SECURITY_SCANNER_INTEGRATION_REPORT" target="_blank">{{
+ content
+ }}</gl-link>
</template>
</gl-sprintf>
</p>
diff --git a/ee/spec/frontend/security_dashboard/components/pipeline/__snapshots__/report_status_alert_spec.js.snap b/ee/spec/frontend/security_dashboard/components/pipeline/__snapshots__/report_status_alert_spec.js.snap
index 81d401dafb54b9a9f179da8c352f033553e0afa9..fb72fc5e1523413927ecba04a8374c10b9022437 100644
--- a/ee/spec/frontend/security_dashboard/components/pipeline/__snapshots__/report_status_alert_spec.js.snap
+++ b/ee/spec/frontend/security_dashboard/components/pipeline/__snapshots__/report_status_alert_spec.js.snap
@@ -1,9 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ee/security_dashboard/components/report_status_alert.vue renders the component correctly 1`] = `
-VueWrapper {
- "_emitted": Object {},
- "_emittedByOrder": Array [],
- "isFunctionalComponent": undefined,
-}
+exports[`ee/security_dashboard/components/pipeline/report_status_alert.vue renders the component correctly 1`] = `
+<gl-alert-stub
+ dismisslabel="Dismiss"
+ primarybuttonlink=""
+ primarybuttontext=""
+ secondarybuttonlink=""
+ secondarybuttontext=""
+ showicon="true"
+ title=""
+ variant="info"
+>
+ <strong
+ role="heading"
+ >
+ Report has expired
+ </strong>
+ <p
+ class="gl-mt-3"
+ >
+ The security report for this pipeline has
+ <gl-link-stub
+ href="/help/development/integrations/secure#retention-period-for-vulnerabilities"
+ target="_blank"
+ >
+ expired
+ </gl-link-stub>
+ . Re-run the pipeline to generate a new security report.
+ </p>
+</gl-alert-stub>
`;
diff --git a/ee/spec/frontend/security_dashboard/components/pipeline/report_status_alert_spec.js b/ee/spec/frontend/security_dashboard/components/pipeline/report_status_alert_spec.js
index 58d03d6739070bdd3b0542424c854a8b20fe90c7..f1c6995c207a802ee596ca31befd8b4020cf9a7a 100644
--- a/ee/spec/frontend/security_dashboard/components/pipeline/report_status_alert_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/pipeline/report_status_alert_spec.js
@@ -1,15 +1,15 @@
-import { GlAlert, GlSprintf, GlButton } from '@gitlab/ui';
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import ReportStatusAlert from 'ee/security_dashboard/components/pipeline/report_status_alert.vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { trimText } from 'helpers/text_helper';
import { DOC_PATH_SECURITY_SCANNER_INTEGRATION_RETENTION_PERIOD } from 'ee/security_dashboard/constants';
-describe('ee/security_dashboard/components/report_status_alert.vue', () => {
+describe('ee/security_dashboard/components/pipeline/report_status_alert.vue', () => {
let wrapper;
const findAlert = () => wrapper.findComponent(GlAlert);
- const findHelpPageLink = () => wrapper.findComponent(GlButton);
+ const findHelpPageLink = () => wrapper.findComponent(GlLink);
const findAlertText = () => trimText(findAlert().text());
const createWrapper = () =>
extendedWrapper(
@@ -25,7 +25,7 @@ describe('ee/security_dashboard/components/report_status_alert.vue', () => {
});
it('renders the component correctly', () => {
- expect(wrapper).toMatchSnapshot();
+ expect(wrapper.html()).toMatchSnapshot();
});
it('shows the correct title for the alert', () => {
@@ -34,7 +34,7 @@ describe('ee/security_dashboard/components/report_status_alert.vue', () => {
it('shows the correct description for the alert', () => {
expect(findAlertText()).toContain(
- 'The security report for this pipeline has expired . Re-run the pipeline to generate a new security report.',
+ 'The security report for this pipeline has expired. Re-run the pipeline to generate a new security report.',
);
});
diff --git a/ee/spec/frontend/security_dashboard/components/pipeline/scan_alerts_spec.js b/ee/spec/frontend/security_dashboard/components/pipeline/scan_alerts_spec.js
index fec876f902f9bc53f5908567f61ab056500a3077..d4f3b9f6e4f19bf75d89e193757a24de938ccda6 100644
--- a/ee/spec/frontend/security_dashboard/components/pipeline/scan_alerts_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/pipeline/scan_alerts_spec.js
@@ -1,4 +1,4 @@
-import { GlAccordion, GlAccordionItem, GlAlert, GlButton, GlSprintf } from '@gitlab/ui';
+import { GlAccordion, GlAccordionItem, GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import PipelineScanAlerts from 'ee/security_dashboard/components/pipeline/scan_alerts.vue';
import { trimText } from 'helpers/text_helper';
@@ -24,7 +24,7 @@ const TEST_SCANS_WITH_ERRORS = [
},
];
-describe('ee/security_dashboard/components/pipeline_scan_alerts.vue', () => {
+describe('ee/security_dashboard/components/pipeline/scan_alerts.vue', () => {
let wrapper;
let type = 'errors';
@@ -52,7 +52,7 @@ describe('ee/security_dashboard/components/pipeline_scan_alerts.vue', () => {
findAllAccordionItems().filter((item) => item.props('title') === title);
const findAlert = () => wrapper.findComponent(GlAlert);
const findErrorList = () => wrapper.findByRole('list');
- const findHelpPageLink = () => wrapper.findComponent(GlButton);
+ const findHelpPageLink = () => wrapper.findComponent(GlLink);
beforeEach(() => {
wrapper = createWrapper();