Add alerts to solicit feedback from user

This would add alerts to Dependency List and License Compliance
to solicit feedback from users

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

+<script>
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import { slugifyWithUnderscore } from '~/lib/utils/text_utility';
+
+export default {
+  components: {
+    GlAlert,
+    GlSprintf,
+    GlLink,
+    LocalStorageSync,
+  },
+  props: {
+    featureName: {
+      type: String,
+      required: true,
+    },
+    feedbackLink: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isDismissed: 'false',
+    };
+  },
+  computed: {
+    storageKey() {
+      return `${slugifyWithUnderscore(this.featureName)}_feedback_dismissed`;
+    },
+    showAlert() {
+      return this.isDismissed === 'false';
+    },
+  },
+  methods: {
+    dismissFeedbackAlert() {
+      this.isDismissed = 'true';
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-show="showAlert">
+    <local-storage-sync
+      :value="isDismissed"
+      :storage-key="storageKey"
+      @input="dismissFeedbackAlert"
+    />
+    <gl-alert v-if="showAlert" class="gl-mt-5" @dismiss="dismissFeedbackAlert">
+      <gl-sprintf
+        :message="
+          __(
+            'We’ve been making changes to %{featureName} and we’d love your feedback %{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>
+  </div>
+</template>

ee/app/assets/javascripts/dependencies/components/app.vue

@@ -13,6 +13,7 @@ import DependenciesActions from './dependencies_actions.vue';
 import DependencyListIncompleteAlert from './dependency_list_incomplete_alert.vue';
 import DependencyListJobFailedAlert from './dependency_list_job_failed_alert.vue';
 import PaginatedDependenciesTable from './paginated_dependencies_table.vue';
+import DismissibleFeedbackAlert from '~/vue_shared/components/dismissible_feedback_alert.vue';
 import { DEPENDENCY_LIST_TYPES } from '../store/constants';
 import { REPORT_STATUS } from '../store/modules/list/constants';
 
@@ -29,6 +30,7 @@ export default {
     DependencyListIncompleteAlert,
     DependencyListJobFailedAlert,
     PaginatedDependenciesTable,
+    DismissibleFeedbackAlert,
   },
   props: {
     endpoint: {
@@ -151,6 +153,15 @@ export default {
       @dismiss="dismissJobFailedAlert"
     />
 
+    <!-- 
+      This is a temporary change to solicit feedback from users
+      and shall be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/232618
+    -->
+    <dismissible-feedback-alert
+      feature-name="Dependency List"
+      feedback-link="https://gitlab.com/gitlab-org/gitlab/-/issues/218517/"
+    />
+
     <header class="d-md-flex align-items-end my-3">
       <div class="mr-auto">
         <h2 class="h4 mb-1 mt-0">

ee/app/assets/javascripts/license_compliance/components/app.vue

@@ -15,6 +15,7 @@ import { LICENSE_MANAGEMENT } from 'ee/vue_shared/license_compliance/store/const
 import DetectedLicensesTable from './detected_licenses_table.vue';
 import PipelineInfo from './pipeline_info.vue';
 import LicenseManagement from 'ee/vue_shared/license_compliance/license_management.vue';
+import DismissibleFeedbackAlert from '~/vue_shared/components/dismissible_feedback_alert.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { getLocationHash } from '~/lib/utils/url_utility';
 
@@ -32,6 +33,7 @@ export default {
     GlBadge,
     GlAlert,
     LicenseManagement,
+    DismissibleFeedbackAlert,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -107,7 +109,16 @@ export default {
   />
 
   <div v-else>
-    <gl-alert v-if="hasPolicyViolations" class="mt-2" variant="warning" :dismissible="false">
+    <!-- 
+      This is a temporary change to solicit feedback from users
+      and shall be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/232618
+    -->
+    <dismissible-feedback-alert
+      feature-name="License Compliance"
+      feedback-link="https://gitlab.com/gitlab-org/gitlab/-/issues/218521"
+    />
+
+    <gl-alert v-if="hasPolicyViolations" class="mt-3" variant="warning" :dismissible="false">
       {{
         s__(
           "Licenses|Detected licenses that are out-of-compliance with the project's assigned policies",

ee/changelogs/unreleased/djadmin-solicit-feedback.yml

+---
+title: Solicit feedback for Security Dashboards
+merge_request: 37317
+author:
+type: added

locale/gitlab.pot

@@ -26908,6 +26908,9 @@ msgstr ""
 msgid "Welcome to your Issue Board!"
 msgstr ""
 
+msgid "We’ve been making changes to %{featureName} and we’d love your feedback %{linkStart}in this issue%{linkEnd} to help us improve the experience."
+msgstr ""
+
 msgid "What are you searching for?"
 msgstr ""
 

spec/frontend/vue_shared/components/dismissible_feedback_alert_spec.js

+import { mount, shallowMount } from '@vue/test-utils';
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import Component from '~/vue_shared/components/dismissible_feedback_alert.vue';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+
+describe('Dismissible Feedback Alert', () => {
+  useLocalStorageSpy();
+
+  let wrapper;
+
+  const defaultProps = {
+    featureName: 'Dependency List',
+    feedbackLink: 'https://gitlab.link',
+  };
+
+  const STORAGE_DISMISSAL_KEY = 'dependency_list_feedback_dismissed';
+
+  const createComponent = ({ props, shallow } = {}) => {
+    const mountFn = shallow ? shallowMount : mount;
+
+    wrapper = mountFn(Component, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findAlert = () => wrapper.find(GlAlert);
+  const findLink = () => wrapper.find(GlLink);
+
+  describe('with default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows 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);
+    });
+  });
+
+  describe('dismissible', () => {
+    describe('after dismissal', () => {
+      beforeEach(() => {
+        createComponent({ shallow: false });
+        findAlert().vm.$emit('dismiss');
+      });
+
+      it('hides the alert', () => {
+        expect(findAlert().exists()).toBe(false);
+      });
+
+      it('should remember the dismissal state', () => {
+        expect(localStorage.setItem).toHaveBeenCalledWith(STORAGE_DISMISSAL_KEY, 'true');
+      });
+    });
+
+    describe('already dismissed', () => {
+      it('should not show the alert once dismissed', async () => {
+        localStorage.setItem(STORAGE_DISMISSAL_KEY, 'true');
+        createComponent({ shallow: false });
+        await wrapper.vm.$nextTick();
+
+        expect(findAlert().exists()).toBe(false);
+      });
+    });
+  });
+});