Persist feedback alert for SAST Configuration

This should not show feedback alert again upon
dismissible until local storage gets cleared.

Changelog: fixed
EE: true

app/assets/javascripts/vue_shared/components/dismissible_feedback_alert.vue

 <script>
-import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAlert } from '@gitlab/ui';
 import { slugifyWithUnderscore } from '~/lib/utils/text_utility';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
 export default {
   components: {
     GlAlert,
-    GlSprintf,
-    GlLink,
     LocalStorageSync,
   },
   props: {
@@ -15,10 +13,6 @@ export default {
       type: String,
       required: true,
     },
-    feedbackLink: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -44,19 +38,8 @@ export default {
 <template>
   <div v-show="showAlert">
     <local-storage-sync v-model="isDismissed" :storage-key="storageKey" as-json />
-    <gl-alert v-if="showAlert" class="gl-mt-5" @dismiss="dismissFeedbackAlert">
-      <gl-sprintf
-        :message="
-          __(
-            'Please share your feedback about %{featureName} %{linkStart}in this issue%{linkEnd} to help us improve the experience.',
-          )
-        "
-      >
-        <template #featureName>{{ featureName }}</template>
-        <template #link="{ content }">
-          <gl-link :href="feedbackLink" target="_blank">{{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
+    <gl-alert v-if="showAlert" @dismiss="dismissFeedbackAlert">
+      <slot></slot>
     </gl-alert>
   </div>
 </template>

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

-<script>
-import { GlAlert } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlAlert,
-  },
-  data() {
-    return { isAlertDismissed: false };
-  },
-  computed: {
-    showPageAlert() {
-      return Boolean(this.$slots.alert) && !this.isAlertDismissed;
-    },
-  },
-};
-</script>
-
 <template>
   <article>
-    <gl-alert
-      v-if="showPageAlert"
-      data-testid="configuration-page-alert"
-      class="gl-mt-4"
-      @dismiss="isAlertDismissed = true"
-    >
-      <slot name="alert"></slot
-    ></gl-alert>
-
+    <slot name="alert"></slot>
     <header class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid">
       <h4>
         <slot name="heading"></slot>
@@ -35,7 +9,6 @@ export default {
         <slot name="description"></slot>
       </p>
     </header>
-
     <slot></slot>
   </article>
 </template>

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

 <script>
 import { GlAlert, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import DismissibleFeedbackAlert from '~/vue_shared/components/dismissible_feedback_alert.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ConfigurationPageLayout from '../../components/configuration_page_layout.vue';
 import sastCiConfigurationQuery from '../graphql/sast_ci_configuration.query.graphql';
@@ -10,6 +11,7 @@ export default {
   components: {
     ConfigurationForm,
     ConfigurationPageLayout,
+    DismissibleFeedbackAlert,
     GlAlert,
     GlLink,
     GlLoadingIcon,
@@ -80,11 +82,17 @@ export default {
 <template>
   <configuration-page-layout>
     <template #alert>
-      <gl-sprintf :message="$options.i18n.feedbackAlertMessage">
-        <template #link="{ content }">
-          <gl-link :href="$options.feedbackIssue" target="_blank">{{ content }}</gl-link>
-        </template>
-      </gl-sprintf>
+      <dismissible-feedback-alert
+        feature-name="sast"
+        class="gl-mt-4"
+        data-testid="configuration-page-alert"
+      >
+        <gl-sprintf :message="$options.i18n.feedbackAlertMessage">
+          <template #link="{ content }">
+            <gl-link :href="$options.feedbackIssue" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </dismissible-feedback-alert>
     </template>
 
     <template #heading> {{ s__('SecurityConfiguration|SAST Configuration') }} </template>

ee/spec/frontend/security_configuration/components/__snapshots__/configuration_page_layout_spec.js.snap

@@ -2,21 +2,7 @@
 
 exports[`Security Configuration Page Layout component matches the snapshot 1`] = `
 <article>
-  <gl-alert-stub
-    class="gl-mt-4"
-    data-testid="configuration-page-alert"
-    dismissible="true"
-    dismisslabel="Dismiss"
-    primarybuttonlink=""
-    primarybuttontext=""
-    secondarybuttonlink=""
-    secondarybuttontext=""
-    title=""
-    variant="info"
-  >
-    Page alert
-  </gl-alert-stub>
-   
+  Page alert 
   <header
     class="gl-my-5 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid"
   >

ee/spec/frontend/security_configuration/components/configuration_page_layout_spec.js

@@ -5,21 +5,17 @@ describe('Security Configuration Page Layout component', () => {
   let wrapper;
 
   const createComponent = (options = {}) => {
-    const { slots = {} } = options;
     wrapper = shallowMountExtended(ConfigurationPageLayout, {
       slots: {
         alert: 'Page alert',
         heading: 'Page title',
         description: 'Scanner description',
         default: '<div>form</div>',
-        ...slots,
       },
       ...options,
     });
   };
 
-  const findPageAlert = () => wrapper.findByTestId('configuration-page-alert');
-
   afterEach(() => {
     wrapper.destroy();
   });
@@ -28,29 +24,4 @@ describe('Security Configuration Page Layout component', () => {
     createComponent();
     expect(wrapper.element).toMatchSnapshot();
   });
-
-  describe('page level alert', () => {
-    it('should render correctly', () => {
-      createComponent();
-      expect(findPageAlert().exists()).toBe(true);
-    });
-
-    it('should be disabled when slot is not present', () => {
-      createComponent({
-        slots: {
-          alert: '',
-        },
-      });
-      expect(findPageAlert().exists()).toBe(false);
-    });
-
-    it('should be disabled after dismissal', async () => {
-      createComponent();
-
-      findPageAlert().vm.$emit('dismiss');
-      await wrapper.vm.$nextTick();
-
-      expect(findPageAlert().exists()).toBe(false);
-    });
-  });
 });

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

@@ -75,17 +75,6 @@ describe('SAST Configuration App', () => {
         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', () => {

locale/gitlab.pot

@@ -25348,9 +25348,6 @@ msgstr ""
 msgid "Please set a new password before proceeding."
 msgstr ""
 
-msgid "Please share your feedback about %{featureName} %{linkStart}in this issue%{linkEnd} to help us improve the experience."
-msgstr ""
-
 msgid "Please solve the captcha"
 msgstr ""
 

spec/frontend/vue_shared/components/dismissible_feedback_alert_spec.js

-import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import Component from '~/vue_shared/components/dismissible_feedback_alert.vue';
@@ -8,20 +8,13 @@ describe('Dismissible Feedback Alert', () => {
 
   let wrapper;
 
-  const defaultProps = {
-    featureName: 'Dependency List',
-    feedbackLink: 'https://gitlab.link',
-  };
-
+  const featureName = 'Dependency List';
   const STORAGE_DISMISSAL_KEY = 'dependency_list_feedback_dismissed';
 
-  const createComponent = ({ props, shallow } = {}) => {
-    const mountFn = shallow ? shallowMount : mount;
-
+  const createComponent = ({ mountFn = shallowMount } = {}) => {
     wrapper = mountFn(Component, {
       propsData: {
-        ...defaultProps,
-        ...props,
+        featureName,
       },
       stubs: {
         GlSprintf,
@@ -34,8 +27,8 @@ describe('Dismissible Feedback Alert', () => {
     wrapper = null;
   });
 
-  const findAlert = () => wrapper.find(GlAlert);
-  const findLink = () => wrapper.find(GlLink);
+  const createFullComponent = () => createComponent({ mountFn: mount });
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   describe('with default', () => {
     beforeEach(() => {
@@ -46,17 +39,6 @@ describe('Dismissible Feedback Alert', () => {
       expect(findAlert().exists()).toBe(true);
     });
 
-    it('contains feature name', () => {
-      expect(findAlert().text()).toContain(defaultProps.featureName);
-    });
-
-    it('contains provided link', () => {
-      const link = findLink();
-
-      expect(link.attributes('href')).toBe(defaultProps.feedbackLink);
-      expect(link.attributes('target')).toBe('_blank');
-    });
-
     it('should have the storage key set', () => {
       expect(wrapper.vm.storageKey).toBe(STORAGE_DISMISSAL_KEY);
     });
@@ -65,7 +47,7 @@ describe('Dismissible Feedback Alert', () => {
   describe('dismissible', () => {
     describe('after dismissal', () => {
       beforeEach(() => {
-        createComponent({ shallow: false });
+        createFullComponent();
         findAlert().vm.$emit('dismiss');
       });
 
@@ -81,7 +63,7 @@ describe('Dismissible Feedback Alert', () => {
     describe('already dismissed', () => {
       it('should not show the alert once dismissed', async () => {
         localStorage.setItem(STORAGE_DISMISSAL_KEY, 'true');
-        createComponent({ shallow: false });
+        createFullComponent();
         await wrapper.vm.$nextTick();
 
         expect(findAlert().exists()).toBe(false);