Commit b49c162c authored by Mark Florian's avatar Mark Florian

Add feedback alert to SAST Configuration

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/238224.
parent 666187aa
......@@ -46,14 +46,21 @@ export default {
return {
sastConfigurationEntities: [],
hasLoadingError: false,
showFeedbackAlert: true,
};
},
methods: {
dismissFeedbackAlert() {
this.showFeedbackAlert = false;
},
onError() {
this.hasLoadingError = true;
},
},
i18n: {
feedbackAlertMessage: s__(`
As we continue to build more features for SAST, we'd love your feedback
on the SAST configuration feature in %{linkStart}this issue%{linkEnd}.`),
helpText: s__(
`SecurityConfiguration|Customize common SAST settings to suit your
requirements. Configuration changes made here override those provided by
......@@ -65,11 +72,25 @@ export default {
refresh the page, or try again later.`,
),
},
feedbackIssue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/225991',
};
</script>
<template>
<article>
<gl-alert
v-if="showFeedbackAlert"
data-testid="feedback-alert"
class="gl-mt-4"
@dismiss="dismissFeedbackAlert"
>
<gl-sprintf :message="$options.i18n.feedbackAlertMessage">
<template #link="{ content }">
<gl-link :href="$options.feedbackIssue" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</gl-alert>
<header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
<h2 class="h4">
{{ s__('SecurityConfiguration|SAST Configuration') }}
......@@ -85,9 +106,13 @@ export default {
<gl-loading-icon v-if="$apollo.loading" size="lg" />
<gl-alert v-else-if="hasLoadingError" variant="danger" :dismissible="false">{{
$options.i18n.loadingErrorText
}}</gl-alert>
<gl-alert
v-else-if="hasLoadingError"
variant="danger"
:dismissible="false"
data-testid="error-alert"
>{{ $options.i18n.loadingErrorText }}</gl-alert
>
<configuration-form v-else :entities="sastConfigurationEntities" />
</article>
......
---
title: Add feedback call to action in SAST Configuration
merge_request: 40363
author:
type: added
import { shallowMount } from '@vue/test-utils';
import { GlAlert, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
import { GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
import SASTConfigurationApp from 'ee/security_configuration/sast/components/app.vue';
import ConfigurationForm from 'ee/security_configuration/sast/components/configuration_form.vue';
import { makeEntities } from './helpers';
......@@ -41,13 +41,45 @@ describe('SAST Configuration App', () => {
const findLink = (container = wrapper) => container.find(GlLink);
const findConfigurationForm = () => wrapper.find(ConfigurationForm);
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findErrorAlert = () => wrapper.find(GlAlert);
const findErrorAlert = () => wrapper.find('[data-testid="error-alert"]');
const findFeedbackAlert = () => wrapper.find('[data-testid="feedback-alert"]');
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('feedback alert', () => {
beforeEach(() => {
createComponent({
stubs: { GlSprintf },
});
});
it('should be displayed', () => {
expect(findFeedbackAlert().exists()).toBe(true);
});
it('links to the feedback issue', () => {
const link = findFeedbackAlert().find(GlLink);
expect(link.attributes()).toMatchObject({
href: SASTConfigurationApp.feedbackIssue,
target: '_blank',
});
});
describe('when it is dismissed', () => {
beforeEach(() => {
findFeedbackAlert().vm.$emit('dismiss');
return wrapper.vm.$nextTick();
});
it('should not be displayed', () => {
expect(findFeedbackAlert().exists()).toBe(false);
});
});
});
describe('header', () => {
beforeEach(() => {
createComponent({
......
......@@ -3328,6 +3328,9 @@ msgstr ""
msgid "As U2F devices are only supported by a few browsers, we require that you set up a two-factor authentication app before a U2F device. That way you'll always be able to log in - even when you're using an unsupported browser."
msgstr ""
msgid "As we continue to build more features for SAST, we'd love your feedback on the SAST configuration feature in %{linkStart}this issue%{linkEnd}."
msgstr ""
msgid "AsanaService|%{user} pushed to branch %{branch} of %{project_name} ( %{commit_url} ):"
msgstr ""
......
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