Update policy drawer status section

- add icon for enabled and css styling
- update wording when not enabled
- update tests

Changelog: other

EE: true

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/base_policy.vue

 <script>
-import { s__ } from '~/locale';
+import { ENABLED_LABEL, NOT_ENABLED_LABEL } from './constants';
 
 export default {
   props: {
@@ -11,9 +11,7 @@ export default {
   },
   computed: {
     statusLabel() {
-      return this.policy?.enabled
-        ? s__('SecurityOrchestration|Enabled')
-        : s__('SecurityOrchestration|Disabled');
+      return this.policy?.enabled ? ENABLED_LABEL : NOT_ENABLED_LABEL;
     },
   },
 };

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/constants.js

+import { s__ } from '~/locale';
+
+export const ENABLED_LABEL = s__('SecurityOrchestration|Enabled');
+
+export const NOT_ENABLED_LABEL = s__('SecurityOrchestration|Not enabled');

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/scan_execution_policy.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlIcon, GlLink } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import {
   fromYaml,
@@ -20,6 +20,7 @@ export default {
     viewResults: s__('SecurityOrchestration|view results'),
   },
   components: {
+    GlIcon,
     GlLink,
     BasePolicy,
     PolicyInfoRow,
@@ -71,7 +72,12 @@ export default {
         </policy-info-row>
 
         <policy-info-row :label="$options.i18n.status">
-          {{ statusLabel }}
+          <div v-if="policy.enabled" class="gl-text-green-500" data-testid="enabled-status-text">
+            <gl-icon name="check-circle-filled" class="gl-mr-3" />{{ statusLabel }}
+          </div>
+          <div v-else class="gl-text-gray-500" data-testid="not-enabled-status-text">
+            {{ statusLabel }}
+          </div>
         </policy-info-row>
 
         <policy-info-row

ee/spec/frontend/threat_monitoring/components/policy_drawer/__snapshots__/cilium_network_policy_spec.js.snap

@@ -35,7 +35,7 @@ exports[`CiliumNetworkPolicy component supported YAML renders policy preview 1`]
     <policy-info-row-stub
       label="Status"
     >
-      Disabled
+      Not enabled
     </policy-info-row-stub>
      
     <!---->

ee/spec/frontend/threat_monitoring/components/policy_drawer/base_policy_spec.js

 import BasePolicy from 'ee/threat_monitoring/components/policy_drawer/base_policy.vue';
+import {
+  ENABLED_LABEL,
+  NOT_ENABLED_LABEL,
+} from 'ee/threat_monitoring/components/policy_drawer/constants';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('BasePolicy component', () => {
@@ -30,9 +34,9 @@ describe('BasePolicy component', () => {
   });
 
   it.each`
-    description   | enabled  | expectedLabel
-    ${'enabled'}  | ${true}  | ${'Enabled'}
-    ${'disabled'} | ${false} | ${'Disabled'}
+    description          | enabled  | expectedLabel
+    ${ENABLED_LABEL}     | ${true}  | ${ENABLED_LABEL}
+    ${NOT_ENABLED_LABEL} | ${false} | ${NOT_ENABLED_LABEL}
   `('renders the status label when policy is $description', ({ enabled, expectedLabel }) => {
     factory({
       policy: {

ee/spec/frontend/threat_monitoring/components/policy_drawer/scan_execution_policy_spec.js

@@ -13,6 +13,8 @@ describe('ScanExecutionPolicy component', () => {
   const findDescription = () => wrapper.findByTestId('policy-description');
   const findLatestScan = () => wrapper.findByTestId('policy-latest-scan');
   const findRules = () => wrapper.findByTestId('policy-rules');
+  const findEnabledText = () => wrapper.findByTestId('enabled-status-text');
+  const findNotEnabledText = () => wrapper.findByTestId('not-enabled-status-text');
 
   const factory = ({ propsData } = {}) => {
     wrapper = shallowMountExtended(ScanExecutionPolicy, {
@@ -33,11 +35,12 @@ describe('ScanExecutionPolicy component', () => {
     });
 
     it.each`
-      component        | finder             | text
-      ${'actions'}     | ${findActions}     | ${''}
-      ${'rules'}       | ${findRules}       | ${''}
-      ${'description'} | ${findDescription} | ${'This policy enforces pipeline configuration to have a job with DAST scan'}
-      ${'latest scan'} | ${findLatestScan}  | ${''}
+      component         | finder             | text
+      ${'actions'}      | ${findActions}     | ${''}
+      ${'rules'}        | ${findRules}       | ${''}
+      ${'description'}  | ${findDescription} | ${'This policy enforces pipeline configuration to have a job with DAST scan'}
+      ${'latest scan'}  | ${findLatestScan}  | ${''}
+      ${'enabled text'} | ${findEnabledText} | ${''}
     `('does render the policy $component', ({ finder, text }) => {
       const component = finder();
       expect(component.exists()).toBe(true);
@@ -47,6 +50,16 @@ describe('ScanExecutionPolicy component', () => {
     });
   });
 
+  describe('not enabled policy', () => {
+    beforeEach(() => {
+      factory({ propsData: { policy: { ...mockScanExecutionPolicy, enabled: false } } });
+    });
+
+    it('does render the policy not enabled text', () => {
+      expect(findNotEnabledText().exists()).toBe(true);
+    });
+  });
+
   describe('empty policy', () => {
     beforeEach(() => {
       factory({

locale/gitlab.pot

@@ -31974,9 +31974,6 @@ msgstr ""
 msgid "SecurityOrchestration|Description"
 msgstr ""
 
-msgid "SecurityOrchestration|Disabled"
-msgstr ""
-
 msgid "SecurityOrchestration|Edit policy"
 msgstr ""
 
@@ -32010,6 +32007,9 @@ msgstr ""
 msgid "SecurityOrchestration|No rules defined - policy will not run."
 msgstr ""
 
+msgid "SecurityOrchestration|Not enabled"
+msgstr ""
+
 msgid "SecurityOrchestration|Only owners can update Security Policy Project"
 msgstr ""