Update status column in Threat Monitoring

* Move the status column to the left.
* Use checkmark icon for enabled state, empty cell for disabled state.
* Remove status column label and adjust width.

Changelog: changed
EE: true

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

 <script>
-import { GlTable, GlEmptyState, GlButton, GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import {
+  GlTable,
+  GlEmptyState,
+  GlButton,
+  GlAlert,
+  GlSprintf,
+  GlLink,
+  GlIcon,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import { PREDEFINED_NETWORK_POLICIES } from 'ee/threat_monitoring/constants';
 import createFlash from '~/flash';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import { setUrlFragment, mergeUrlParams } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import networkPoliciesQuery from '../graphql/queries/network_policies.query.graphql';
 import scanExecutionPoliciesQuery from '../graphql/queries/scan_execution_policies.query.graphql';
 import EnvironmentPicker from './environment_picker.vue';
@@ -29,9 +38,13 @@ export default {
     GlAlert,
     GlSprintf,
     GlLink,
+    GlIcon,
     EnvironmentPicker,
     PolicyDrawer,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: ['projectPath'],
   props: {
     documentationPath: {
@@ -130,22 +143,26 @@ export default {
         label: s__('NetworkPolicies|Namespace'),
       };
       const fields = [
+        {
+          key: 'status',
+          label: '',
+          thClass: 'gl-w-3',
+          tdAttr: {
+            'data-testid': 'policy-status-cell',
+          },
+        },
         {
           key: 'name',
           label: s__('NetworkPolicies|Name'),
           thClass: 'gl-w-half',
         },
-        {
-          key: 'status',
-          label: s__('NetworkPolicies|Status'),
-        },
         {
           key: 'updatedAt',
           label: s__('NetworkPolicies|Last modified'),
         },
       ];
       // Adds column 'namespace' only while 'all environments' option is selected
-      if (this.allEnvironments) fields.splice(1, 0, namespace);
+      if (this.allEnvironments) fields.splice(2, 0, namespace);
 
       return fields;
     },
@@ -170,12 +187,16 @@ export default {
       bTable.clearSelected();
     },
   },
-  emptyStateDescription: s__(
-    `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}.`,
-  ),
+  i18n: {
+    emptyStateDescription: s__(
+      `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}.`,
+    ),
+    statusEnabled: __('Enabled'),
+    statusDisabled: __('Disabled'),
+  },
 };
 </script>
 
@@ -188,7 +209,7 @@ export default {
       :dismissible="false"
       class="gl-mb-3"
     >
-      <gl-sprintf :message="$options.autodevopsNoticeDescription">
+      <gl-sprintf :message="$options.i18n.autodevopsNoticeDescription">
         <template #monospaced="{ content }">
           <span class="gl-font-monospace">{{ content }}</span>
         </template>
@@ -230,7 +251,14 @@ export default {
       @row-selected="presentPolicyDrawer"
     >
       <template #cell(status)="value">
-        {{ value.item.enabled ? __('Enabled') : __('Disabled') }}
+        <gl-icon
+          v-if="value.item.enabled"
+          v-gl-tooltip="$options.i18n.statusEnabled"
+          :aria-label="$options.i18n.statusEnabled"
+          name="check-circle-filled"
+          class="gl-text-green-700"
+        />
+        <span v-else class="gl-sr-only">{{ $options.i18n.statusDisabled }}</span>
       </template>
 
       <template #cell(updatedAt)="value">
@@ -242,7 +270,7 @@ export default {
           <gl-empty-state
             ref="tableEmptyState"
             :title="s__('NetworkPolicies|No policies detected')"
-            :description="$options.emptyStateDescription"
+            :description="$options.i18n.emptyStateDescription"
             :primary-button-link="documentationFullPath"
             :primary-button-text="__('Learn more')"
           />

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

@@ -77,6 +77,7 @@ describe('PolicyList component', () => {
 
   const findEnvironmentsPicker = () => wrapper.find({ ref: 'environmentsPicker' });
   const findPoliciesTable = () => wrapper.findComponent(GlTable);
+  const findPolicyStatusCells = () => wrapper.findAllByTestId('policy-status-cell');
   const findPolicyDrawer = () => wrapper.findByTestId('policyDrawer');
   const findAutodevopsAlert = () => wrapper.findByTestId('autodevopsAlert');
 
@@ -159,14 +160,36 @@ describe('PolicyList component', () => {
     );
   });
 
+  describe('status column', () => {
+    beforeEach(() => {
+      mountWrapper();
+    });
+
+    it('renders a checkmark icon for enabled policies', () => {
+      const icon = findPolicyStatusCells().at(0).find('svg');
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('name')).toBe('check-circle-filled');
+      expect(icon.props('ariaLabel')).toBe('Enabled');
+    });
+
+    it('renders a "Disabled" label for screen readers for disabled policies', () => {
+      const span = findPolicyStatusCells().at(1).find('span');
+
+      expect(span.exists()).toBe(true);
+      expect(span.attributes('class')).toBe('gl-sr-only');
+      expect(span.text()).toBe('Disabled');
+    });
+  });
+
   describe('with allEnvironments enabled', () => {
     beforeEach(() => {
       mountWrapper();
       wrapper.vm.$store.state.threatMonitoring.allEnvironments = true;
     });
 
-    it('renders policies table', () => {
-      const namespaceHeader = findPoliciesTable().findAll('[role="columnheader"]').at(1);
+    it('renders namespace column', () => {
+      const namespaceHeader = findPoliciesTable().findAll('[role="columnheader"]').at(2);
       expect(namespaceHeader.text()).toBe('Namespace');
     });
   });

locale/gitlab.pot

@@ -21602,9 +21602,6 @@ msgstr ""
 msgid "NetworkPolicies|Something went wrong, unable to fetch policies"
 msgstr ""
 
-msgid "NetworkPolicies|Status"
-msgstr ""
-
 msgid "NetworkPolicies|Traffic that does not match any rule will be blocked."
 msgstr ""