AutoDevOps enabled alert on security Config Page

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

+<script>
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['autoDevopsHelpPagePath'],
+  i18n: {
+    body: s__(
+      'AutoDevopsAlert|Security testing tools enabled with %{linkStart}Auto DevOps%{linkEnd}',
+    ),
+  },
+};
+</script>
+
+<template>
+  <gl-alert variant="success" @dismiss="$emit('dismiss')">
+    <gl-sprintf :message="$options.i18n.body">
+      <template #link="{ content }">
+        <gl-link :href="autoDevopsHelpPagePath">
+          {{ content }}
+        </gl-link>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>

app/assets/javascripts/security_configuration/components/constants.js

@@ -305,3 +305,6 @@ export const featureToMutationMap = {
     }),
   },
 };
+
+export const AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY =
+  'security_configuration_auto_devops_enabled_dismissed_projects';

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

 <script>
 import { GlTab, GlTabs, GlSprintf, GlLink } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
 import AutoDevOpsAlert from './auto_dev_ops_alert.vue';
+import AutoDevOpsEnabledAlert from './auto_dev_ops_enabled_alert.vue';
+import { AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY } from './constants';
 import FeatureCard from './feature_card.vue';
 import SectionLayout from './section_layout.vue';
 import UpgradeBanner from './upgrade_banner.vue';
@@ -25,16 +28,19 @@ export const i18n = {
 export default {
   i18n,
   components: {
-    GlTab,
+    AutoDevOpsAlert,
+    AutoDevOpsEnabledAlert,
+    FeatureCard,
     GlLink,
-    GlTabs,
     GlSprintf,
-    FeatureCard,
+    GlTab,
+    GlTabs,
+    LocalStorageSync,
     SectionLayout,
     UpgradeBanner,
-    AutoDevOpsAlert,
     UserCalloutDismisser,
   },
+  inject: ['projectPath'],
   props: {
     augmentedSecurityFeatures: {
       type: Array,
@@ -70,6 +76,11 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      autoDevopsEnabledAlertDismissedProjects: [],
+    };
+  },
   computed: {
     canUpgrade() {
       return [...this.augmentedSecurityFeatures, ...this.augmentedComplianceFeatures].some(
@@ -82,12 +93,32 @@ export default {
     shouldShowDevopsAlert() {
       return !this.autoDevopsEnabled && !this.gitlabCiPresent && this.canEnableAutoDevops;
     },
+    shouldShowAutoDevopsEnabledAlert() {
+      return (
+        this.autoDevopsEnabled &&
+        !this.autoDevopsEnabledAlertDismissedProjects.includes(this.projectPath)
+      );
+    },
+  },
+  methods: {
+    dismissAutoDevopsEnabledAlert() {
+      const dismissedProjects = new Set(this.autoDevopsEnabledAlertDismissedProjects);
+      dismissedProjects.add(this.projectPath);
+      this.autoDevopsEnabledAlertDismissedProjects = Array.from(dismissedProjects);
+    },
   },
+  autoDevopsEnabledAlertStorageKey: AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
 };
 </script>
 
 <template>
   <article>
+    <local-storage-sync
+      v-model="autoDevopsEnabledAlertDismissedProjects"
+      :storage-key="$options.autoDevopsEnabledAlertStorageKey"
+      as-json
+    />
+
     <user-callout-dismisser
       v-if="shouldShowDevopsAlert"
       feature-name="security_configuration_devops_alert"
@@ -105,8 +136,14 @@ export default {
       </template>
     </user-callout-dismisser>
 
-    <gl-tabs content-class="gl-pt-6">
+    <gl-tabs content-class="gl-pt-0">
       <gl-tab data-testid="security-testing-tab" :title="$options.i18n.securityTesting">
+        <auto-dev-ops-enabled-alert
+          v-if="shouldShowAutoDevopsEnabledAlert"
+          class="gl-mt-3"
+          @dismiss="dismissAutoDevopsEnabledAlert"
+        />
+
         <section-layout :heading="$options.i18n.securityTesting">
           <template #description>
             <p>

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

@@ -11,7 +11,7 @@ export default {
 </script>
 
 <template>
-  <div class="row gl-line-height-20">
+  <div class="row gl-line-height-20 gl-pt-6">
     <div class="col-lg-4">
       <h2 class="gl-font-size-h2 gl-mt-0">{{ heading }}</h2>
       <slot name="description"></slot>

locale/gitlab.pot

@@ -4769,6 +4769,9 @@ msgstr ""
 msgid "AutoDevOps|The Auto DevOps pipeline has been enabled and will be used if no alternative CI configuration file is found."
 msgstr ""
 
+msgid "AutoDevopsAlert|Security testing tools enabled with %{linkStart}Auto DevOps%{linkEnd}"
+msgstr ""
+
 msgid "AutoRemediation| 1 Merge Request"
 msgstr ""
 

spec/frontend/security_configuration/components/auto_dev_ops_enabled_alert_spec.js

+import { GlAlert } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import AutoDevopsEnabledAlert from '~/security_configuration/components/auto_dev_ops_enabled_alert.vue';
+
+const autoDevopsHelpPagePath = '/autoDevopsHelpPagePath';
+
+describe('AutoDevopsEnabledAlert component', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = mount(AutoDevopsEnabledAlert, {
+      provide: {
+        autoDevopsHelpPagePath,
+      },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains correct body text', () => {
+    expect(wrapper.text()).toMatchInterpolatedText(AutoDevopsEnabledAlert.i18n.body);
+  });
+
+  it('renders the link correctly', () => {
+    const link = wrapper.find('a[href]');
+
+    expect(link.attributes('href')).toBe(autoDevopsHelpPagePath);
+    expect(link.text()).toBe('Auto DevOps');
+  });
+
+  it('bubbles up dismiss events from the GlAlert', () => {
+    expect(wrapper.emitted('dismiss')).toBe(undefined);
+
+    findAlert().vm.$emit('dismiss');
+
+    expect(wrapper.emitted('dismiss')).toEqual([[]]);
+  });
+});

spec/frontend/security_configuration/components/redesigned_app_spec.js

 import { GlTab } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
+import stubChildren from 'helpers/stub_children';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import AutoDevopsAlert from '~/security_configuration/components/auto_dev_ops_alert.vue';
+import AutoDevopsEnabledAlert from '~/security_configuration/components/auto_dev_ops_enabled_alert.vue';
 import {
   SAST_NAME,
   SAST_SHORT_NAME,
@@ -12,6 +15,7 @@ import {
   LICENSE_COMPLIANCE_NAME,
   LICENSE_COMPLIANCE_DESCRIPTION,
   LICENSE_COMPLIANCE_HELP_PATH,
+  AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
 } from '~/security_configuration/components/constants';
 import FeatureCard from '~/security_configuration/components/feature_card.vue';
 
@@ -28,6 +32,9 @@ const upgradePath = '/upgrade';
 const autoDevopsHelpPagePath = '/autoDevopsHelpPagePath';
 const autoDevopsPath = '/autoDevopsPath';
 const gitlabCiHistoryPath = 'test/historyPath';
+const projectPath = 'namespace/project';
+
+useLocalStorageSpy();
 
 describe('redesigned App component', () => {
   let wrapper;
@@ -43,8 +50,14 @@ describe('redesigned App component', () => {
           upgradePath,
           autoDevopsHelpPagePath,
           autoDevopsPath,
+          projectPath,
         },
         stubs: {
+          ...stubChildren(RedesignedSecurityConfigurationApp),
+          GlLink: false,
+          GlSprintf: false,
+          LocalStorageSync: false,
+          SectionLayout: false,
           UserCalloutDismisser: makeMockUserCalloutDismisser({
             dismiss: userCalloutDismissSpy,
             shouldShowCallout,
@@ -83,6 +96,7 @@ describe('redesigned App component', () => {
     });
   const findUpgradeBanner = () => wrapper.findComponent(UpgradeBanner);
   const findAutoDevopsAlert = () => wrapper.findComponent(AutoDevopsAlert);
+  const findAutoDevopsEnabledAlert = () => wrapper.findComponent(AutoDevopsEnabledAlert);
 
   const securityFeaturesMock = [
     {
@@ -161,7 +175,7 @@ describe('redesigned App component', () => {
     });
   });
 
-  describe('autoDevOpsAlert', () => {
+  describe('Auto DevOps hint alert', () => {
     describe('given the right props', () => {
       beforeEach(() => {
         createComponent({
@@ -199,6 +213,76 @@ describe('redesigned App component', () => {
     });
   });
 
+  describe('Auto DevOps enabled alert', () => {
+    describe.each`
+      context                                        | autoDevopsEnabled | localStorageValue | shouldRender
+      ${'enabled'}                                   | ${true}           | ${null}           | ${true}
+      ${'enabled, alert dismissed on other project'} | ${true}           | ${['foo/bar']}    | ${true}
+      ${'enabled, alert dismissed on this project'}  | ${true}           | ${[projectPath]}  | ${false}
+      ${'not enabled'}                               | ${false}          | ${null}           | ${false}
+    `('given Auto DevOps is $context', ({ autoDevopsEnabled, localStorageValue, shouldRender }) => {
+      beforeEach(() => {
+        if (localStorageValue !== null) {
+          window.localStorage.setItem(
+            AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
+            JSON.stringify(localStorageValue),
+          );
+        }
+
+        createComponent({
+          augmentedSecurityFeatures: securityFeaturesMock,
+          augmentedComplianceFeatures: complianceFeaturesMock,
+          autoDevopsEnabled,
+        });
+      });
+
+      it(shouldRender ? 'renders' : 'does not render', () => {
+        expect(findAutoDevopsEnabledAlert().exists()).toBe(shouldRender);
+      });
+    });
+
+    describe('dismissing', () => {
+      describe.each`
+        dismissedProjects | expectedWrittenValue
+        ${null}           | ${[projectPath]}
+        ${[]}             | ${[projectPath]}
+        ${['foo/bar']}    | ${['foo/bar', projectPath]}
+        ${[projectPath]}  | ${[projectPath]}
+      `(
+        'given dismissed projects $dismissedProjects',
+        ({ dismissedProjects, expectedWrittenValue }) => {
+          beforeEach(() => {
+            if (dismissedProjects !== null) {
+              window.localStorage.setItem(
+                AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
+                JSON.stringify(dismissedProjects),
+              );
+            }
+
+            createComponent({
+              augmentedSecurityFeatures: securityFeaturesMock,
+              augmentedComplianceFeatures: complianceFeaturesMock,
+              autoDevopsEnabled: true,
+            });
+
+            findAutoDevopsEnabledAlert().vm.$emit('dismiss');
+          });
+
+          it('adds current project to localStorage value', () => {
+            expect(window.localStorage.setItem).toHaveBeenLastCalledWith(
+              AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
+              JSON.stringify(expectedWrittenValue),
+            );
+          });
+
+          it('hides the alert', () => {
+            expect(findAutoDevopsEnabledAlert().exists()).toBe(false);
+          });
+        },
+      );
+    });
+  });
+
   describe('upgrade banner', () => {
     const makeAvailable = (available) => (feature) => ({ ...feature, available });