Persist Auto DevOps alert dismissal

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

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

 <script>
 import { GlAlert, GlLink, GlSprintf, GlTable } from '@gitlab/ui';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import { s__, __ } from '~/locale';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import AutoFixSettings from './auto_fix_settings.vue';
 import ManageFeature from './manage_feature.vue';
@@ -12,6 +14,7 @@ export default {
     GlSprintf,
     GlTable,
     AutoFixSettings,
+    LocalStorageSync,
     ManageFeature,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -63,6 +66,9 @@ export default {
       required: true,
     },
   },
+  data: () => ({
+    autoDevopsAlertDismissed: 'false',
+  }),
   computed: {
     devopsMessage() {
       return this.autoDevopsEnabled
@@ -100,7 +106,12 @@ export default {
       ];
     },
     shouldShowAutoDevopsAlert() {
-      return Boolean(!this.autoDevopsEnabled && !this.gitlabCiPresent && this.canEnableAutoDevops);
+      return Boolean(
+        !parseBoolean(this.autoDevopsAlertDismissed) &&
+          !this.autoDevopsEnabled &&
+          !this.gitlabCiPresent &&
+          this.canEnableAutoDevops,
+      );
     },
   },
   methods: {
@@ -113,10 +124,14 @@ export default {
 
       return s__('SecurityConfiguration|Not enabled');
     },
+    dismissAutoDevopsAlert() {
+      this.autoDevopsAlertDismissed = 'true';
+    },
   },
   autoDevopsAlertMessage: s__(`
     SecurityConfiguration|You can quickly enable all security scanning tools by
     enabling %{linkStart}Auto DevOps%{linkEnd}.`),
+  autoDevopsAlertStorageKey: 'security_configuration_auto_devops_dismissed',
 };
 </script>
 
@@ -134,13 +149,18 @@ export default {
       </p>
     </header>
 
+    <local-storage-sync
+      v-model="autoDevopsAlertDismissed"
+      :storage-key="$options.autoDevopsAlertStorageKey"
+    />
+
     <gl-alert
       v-if="shouldShowAutoDevopsAlert"
       :title="__('Auto DevOps')"
       :primary-button-text="__('Enable Auto DevOps')"
       :primary-button-link="autoDevopsPath"
-      :dismissible="false"
       class="gl-mb-5"
+      @dismiss="dismissAutoDevopsAlert"
     >
       <gl-sprintf :message="$options.autoDevopsAlertMessage">
         <template #link="{ content }">

ee/changelogs/unreleased/239468-allow-non-auto-devops-users-to-dismiss-alert-in-security-config.yml

+---
+title: Make Auto DevOps alert in Security Configuration dismissible
+merge_request: 40375
+author:
+type: added

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

@@ -4,6 +4,7 @@ import { GlAlert, GlLink } from '@gitlab/ui';
 import SecurityConfigurationApp from 'ee/security_configuration/components/app.vue';
 import ManageFeature from 'ee/security_configuration/components/manage_feature.vue';
 import stubChildren from 'helpers/stub_children';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { generateFeatures } from './helpers';
 
 const propsData = {
@@ -38,6 +39,10 @@ describe('Security Configuration App', () => {
     );
   };
 
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -70,21 +75,29 @@ describe('Security Configuration App', () => {
 
   describe('Auto DevOps alert', () => {
     describe.each`
-      gitlabCiPresent | autoDevopsEnabled | canEnableAutoDevops | shouldShowAlert
-      ${false}        | ${false}          | ${true}             | ${true}
-      ${true}         | ${false}          | ${true}             | ${false}
-      ${false}        | ${true}           | ${true}             | ${false}
-      ${false}        | ${false}          | ${false}            | ${false}
+      gitlabCiPresent | autoDevopsEnabled | canEnableAutoDevops | dismissed | shouldShowAlert
+      ${false}        | ${false}          | ${true}             | ${false}  | ${true}
+      ${false}        | ${false}          | ${true}             | ${true}   | ${false}
+      ${true}         | ${false}          | ${true}             | ${false}  | ${false}
+      ${false}        | ${true}           | ${true}             | ${false}  | ${false}
+      ${false}        | ${false}          | ${false}            | ${false}  | ${false}
     `(
-      'given gitlabCiPresent is $gitlabCiPresent, autoDevopsEnabled is $autoDevopsEnabled, canEnableAutoDevops is $canEnableAutoDevops',
-      ({ gitlabCiPresent, autoDevopsEnabled, canEnableAutoDevops, shouldShowAlert }) => {
+      'given gitlabCiPresent is $gitlabCiPresent, autoDevopsEnabled is $autoDevopsEnabled, dismissed is $dismissed, canEnableAutoDevops is $canEnableAutoDevops',
+      ({ gitlabCiPresent, autoDevopsEnabled, canEnableAutoDevops, dismissed, shouldShowAlert }) => {
         beforeEach(() => {
+          if (dismissed) {
+            localStorage.setItem(SecurityConfigurationApp.autoDevopsAlertStorageKey, 'true');
+          }
+
           createComponent({
             propsData: {
               gitlabCiPresent,
               autoDevopsEnabled,
               canEnableAutoDevops,
             },
+            stubs: {
+              LocalStorageSync,
+            },
           });
         });
 
@@ -109,7 +122,6 @@ describe('Security Configuration App', () => {
               title: 'Auto DevOps',
               primaryButtonText: 'Enable Auto DevOps',
               primaryButtonLink: propsData.autoDevopsPath,
-              dismissible: false,
             });
           });
         }