Merge branch...

Merge branch '239468-allow-non-auto-devops-users-to-dismiss-alert-in-security-configuration-page' into 'master'

Make Auto DevOps alert dismissible in Security Configuration page

See merge request gitlab-org/gitlab!40375

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,8 @@ 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 { useLocalStorageSpy } from 'helpers/local_storage_helper';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { generateFeatures } from './helpers';
 
 const propsData = {
@@ -38,6 +40,10 @@ describe('Security Configuration App', () => {
     );
   };
 
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -70,21 +76,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,12 +123,40 @@ describe('Security Configuration App', () => {
               title: 'Auto DevOps',
               primaryButtonText: 'Enable Auto DevOps',
               primaryButtonLink: propsData.autoDevopsPath,
-              dismissible: false,
             });
           });
         }
       },
     );
+
+    describe('dismissing the alert', () => {
+      useLocalStorageSpy();
+
+      beforeEach(() => {
+        createComponent({
+          propsData: {
+            gitlabCiPresent: false,
+            autoDevopsEnabled: false,
+            canEnableAutoDevops: true,
+          },
+          stubs: {
+            LocalStorageSync,
+          },
+        });
+
+        getAlert().vm.$emit('dismiss');
+      });
+
+      it('hides the alert', () => {
+        expect(getAlert().exists()).toBe(false);
+      });
+
+      it('saves dismissal in localStorage', () => {
+        expect(localStorage.setItem.mock.calls).toEqual([
+          [SecurityConfigurationApp.autoDevopsAlertStorageKey, 'true'],
+        ]);
+      });
+    });
   });
 
   describe('features table', () => {

spec/frontend/helpers/local_storage_helper.js

@@ -10,7 +10,7 @@
  */
 const useLocalStorage = fn => {
   const origLocalStorage = window.localStorage;
-  let currentLocalStorage;
+  let currentLocalStorage = origLocalStorage;
 
   Object.defineProperty(window, 'localStorage', {
     get: () => currentLocalStorage,

spec/frontend/helpers/local_storage_helper_spec.js

 import { useLocalStorageSpy } from './local_storage_helper';
 
-useLocalStorageSpy();
+describe('block before helper is installed', () => {
+  it('should leave original localStorage intact', () => {
+    expect(localStorage.getItem).toEqual(expect.any(Function));
+    expect(jest.isMockFunction(localStorage.getItem)).toBe(false);
+  });
+});
 
 describe('localStorage helper', () => {
+  useLocalStorageSpy();
+
   it('mocks localStorage but works exactly like original localStorage', () => {
     localStorage.setItem('test', 'testing');
     localStorage.setItem('test2', 'testing');