Add alert for autodevops policies to the Policy editor

This commit add a new alert for policies managed by Auto DevOps
pipelines. This alert is only visible if at least one Auto DevOps
policy is present

ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlTable, GlEmptyState, GlDrawer, GlButton } from '@gitlab/ui';
+import { GlTable, GlEmptyState, GlDrawer, GlButton, GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import { setUrlFragment } from '~/lib/utils/url_utility';
@@ -13,6 +13,9 @@ export default {
     GlEmptyState,
     GlDrawer,
     GlButton,
+    GlAlert,
+    GlSprintf,
+    GlLink,
     EnvironmentPicker,
     NetworkPolicyEditor,
   },
@@ -42,6 +45,9 @@ export default {
     hasPolicyChanges() {
       return this.hasSelectedPolicy && this.selectedPolicy.manifest !== this.initialManifest;
     },
+    hasAutoDevopsPolicy() {
+      return this.policies.some(policy => policy.isAutodevops);
+    },
   },
   methods: {
     ...mapActions('networkPolicies', ['updatePolicy']),
@@ -88,7 +94,10 @@ export default {
     },
   ],
   emptyStateDescription: s__(
-    `NetworkPolicies|Policies are a specification of how groups of pods are allowed to communicate with each other network endpoints.`,
+    `NetworkPolicies|Policies are a specification of how groups of pods are allowed to communicate with each other's network endpoints.`,
+  ),
+  autodevopsNoticeDescription: s__(
+    `NetworkPolicies|If you are using Auto DevOps, your %{monospacedStart}auto-deploy-values.yaml%{monospacedEnd} file will not be updated if you change a policy in this section. Auto DevOps users should make changes by following the %{linkStart}Container Network Policy documentation%{linkEnd}.`,
   ),
   headerHeight: process.env.NODE_ENV === 'development' ? '75px' : '40px',
 };
@@ -96,6 +105,24 @@ export default {
 
 <template>
   <div>
+    <div class="mb-2">
+      <gl-alert
+        v-if="hasAutoDevopsPolicy"
+        data-testid="autodevopsAlert"
+        variant="info"
+        :dismissible="false"
+      >
+        <gl-sprintf :message="$options.autodevopsNoticeDescription">
+          <template #monospaced="{ content }">
+            <span class="monospace">{{ content }}</span>
+          </template>
+          <template #link="{ content }">
+            <gl-link :href="documentationFullPath">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
+    </div>
+
     <div class="pt-3 px-3 bg-gray-light">
       <div class="row">
         <environment-picker ref="environmentsPicker" />

ee/spec/frontend/threat_monitoring/components/__snapshots__/network_policy_list_spec.js.snap

@@ -24,7 +24,7 @@ exports[`NetworkPolicyList component given there is a default environment with n
        
       <p>
         
-          Policies are a specification of how groups of pods are allowed to communicate with each other network endpoints.
+          Policies are a specification of how groups of pods are allowed to communicate with each other's network endpoints.
         
       </p>
        

ee/spec/frontend/threat_monitoring/components/network_policy_list_spec.js

@@ -36,6 +36,7 @@ describe('NetworkPolicyList component', () => {
   const findPolicyEditor = () => wrapper.find({ ref: 'policyEditor' });
   const findApplyButton = () => wrapper.find({ ref: 'applyButton' });
   const findCancelButton = () => wrapper.find({ ref: 'cancelButton' });
+  const findAutodevopsAlert = () => wrapper.find('[data-testid="autodevopsAlert"]');
 
   beforeEach(() => {
     factory({});
@@ -72,6 +73,10 @@ describe('NetworkPolicyList component', () => {
     });
   });
 
+  it('does not render autodevops alert', () => {
+    expect(findAutodevopsAlert().exists()).toBe(false);
+  });
+
   describe('given there is a selected policy', () => {
     beforeEach(() => {
       factory({
@@ -147,4 +152,19 @@ describe('NetworkPolicyList component', () => {
       expect(findTableEmptyState().element).toMatchSnapshot();
     });
   });
+
+  describe('given autodevops selected policy', () => {
+    beforeEach(() => {
+      const policies = mockPoliciesResponse;
+      policies[0].isAutodevops = true;
+      factory({
+        state: { policies },
+        data: () => ({ selectedPolicyName: 'policy' }),
+      });
+    });
+
+    it('renders autodevops alert', () => {
+      expect(findAutodevopsAlert().exists()).toBe(true);
+    });
+  });
 });

locale/gitlab.pot

@@ -14238,6 +14238,9 @@ msgstr ""
 msgid "NetworkPolicies|Environment does not have deployment platform"
 msgstr ""
 
+msgid "NetworkPolicies|If you are using Auto DevOps, your %{monospacedStart}auto-deploy-values.yaml%{monospacedEnd} file will not be updated if you change a policy in this section. Auto DevOps users should make changes by following the %{linkStart}Container Network Policy documentation%{linkEnd}."
+msgstr ""
+
 msgid "NetworkPolicies|Invalid or empty policy"
 msgstr ""
 
@@ -14253,7 +14256,7 @@ msgstr ""
 msgid "NetworkPolicies|No policies detected"
 msgstr ""
 
-msgid "NetworkPolicies|Policies are a specification of how groups of pods are allowed to communicate with each other network endpoints."
+msgid "NetworkPolicies|Policies are a specification of how groups of pods are allowed to communicate with each other's network endpoints."
 msgstr ""
 
 msgid "NetworkPolicies|Policy %{policyName} was successfully changed"