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 { ...@@ -46,14 +46,21 @@ export default {
return { return {
sastConfigurationEntities: [], sastConfigurationEntities: [],
hasLoadingError: false, hasLoadingError: false,
showFeedbackAlert: true,
}; };
}, },
methods: { methods: {
dismissFeedbackAlert() {
this.showFeedbackAlert = false;
},
onError() { onError() {
this.hasLoadingError = true; this.hasLoadingError = true;
}, },
}, },
i18n: { 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__( helpText: s__(
`SecurityConfiguration|Customize common SAST settings to suit your `SecurityConfiguration|Customize common SAST settings to suit your
requirements. Configuration changes made here override those provided by requirements. Configuration changes made here override those provided by
...@@ -65,11 +72,25 @@ export default { ...@@ -65,11 +72,25 @@ export default {
refresh the page, or try again later.`, refresh the page, or try again later.`,
), ),
}, },
feedbackIssue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/225991',
}; };
</script> </script>
<template> <template>
<article> <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"> <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
<h2 class="h4"> <h2 class="h4">
{{ s__('SecurityConfiguration|SAST Configuration') }} {{ s__('SecurityConfiguration|SAST Configuration') }}
...@@ -85,9 +106,13 @@ export default { ...@@ -85,9 +106,13 @@ export default {
<gl-loading-icon v-if="$apollo.loading" size="lg" /> <gl-loading-icon v-if="$apollo.loading" size="lg" />
<gl-alert v-else-if="hasLoadingError" variant="danger" :dismissible="false">{{ <gl-alert
$options.i18n.loadingErrorText v-else-if="hasLoadingError"
}}</gl-alert> variant="danger"
:dismissible="false"
data-testid="error-alert"
>{{ $options.i18n.loadingErrorText }}</gl-alert
>
<configuration-form v-else :entities="sastConfigurationEntities" /> <configuration-form v-else :entities="sastConfigurationEntities" />
</article> </article>
......
---
title: Add feedback call to action in SAST Configuration
merge_request: 40363
author:
type: added
import { shallowMount } from '@vue/test-utils'; 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 SASTConfigurationApp from 'ee/security_configuration/sast/components/app.vue';
import ConfigurationForm from 'ee/security_configuration/sast/components/configuration_form.vue'; import ConfigurationForm from 'ee/security_configuration/sast/components/configuration_form.vue';
import { makeEntities } from './helpers'; import { makeEntities } from './helpers';
...@@ -41,13 +41,45 @@ describe('SAST Configuration App', () => { ...@@ -41,13 +41,45 @@ describe('SAST Configuration App', () => {
const findLink = (container = wrapper) => container.find(GlLink); const findLink = (container = wrapper) => container.find(GlLink);
const findConfigurationForm = () => wrapper.find(ConfigurationForm); const findConfigurationForm = () => wrapper.find(ConfigurationForm);
const findLoadingIcon = () => wrapper.find(GlLoadingIcon); 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(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
wrapper = null; 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', () => { describe('header', () => {
beforeEach(() => { beforeEach(() => {
createComponent({ createComponent({
......
...@@ -3328,6 +3328,9 @@ msgstr "" ...@@ -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." 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 "" 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} ):" msgid "AsanaService|%{user} pushed to branch %{branch} of %{project_name} ( %{commit_url} ):"
msgstr "" 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