Add feedback alert to SAST Configuration

Addresses https://gitlab.com/gitlab-org/gitlab/-/issues/238224.

ee/app/assets/javascripts/security_configuration/sast/components/app.vue

@@ -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>

ee/changelogs/unreleased/238224-solicit-feedback-from-user-directly-in-ui-sast-configuration-ui.yml

+---
+title: Add feedback call to action in SAST Configuration
+merge_request: 40363
+author:
+type: added

ee/spec/frontend/security_configuration/sast/components/app_spec.js

 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({

locale/gitlab.pot

@@ -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 ""