Fix scan execution policy selection

This cleans up the policy selection handling by directly storing the
selected policy object instead of computing it based on the policy'
name. This fixes a bug where the policy drawer would remain empty when
selecting a scan execution policy as the `selectedPolicy` object was
being computed based on `networkPolicies` only.

This also fixes a bug where editing a network policy would lead to an
error 404. Including the policy kind in the edit URL should resolve the
issue as the backend now expects this parameter to load policy data to
be passed to the frontend.

Changelog: fixed
EE: true

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

@@ -98,9 +98,7 @@ export default {
   },
   data() {
     return {
-      selectedPolicyName: null,
-      initialManifest: null,
-      initialEnforcementStatus: null,
+      selectedPolicy: null,
       networkPolicies: [],
       scanExecutionPolicies: [],
     };
@@ -129,11 +127,7 @@ export default {
       );
     },
     hasSelectedPolicy() {
-      return Boolean(this.selectedPolicyName);
-    },
-    selectedPolicy() {
-      if (!this.hasSelectedPolicy) return null;
-      return this.networkPolicies.find((policy) => policy.name === this.selectedPolicyName);
+      return Boolean(this.selectedPolicy);
     },
     hasAutoDevopsPolicy() {
       return Boolean(this.networkPolicies?.some((policy) => policy.fromAutoDevops));
@@ -141,8 +135,10 @@ export default {
     editPolicyPath() {
       return this.hasSelectedPolicy
         ? mergeUrlParams(
-            { environment_id: this.currentEnvironmentId },
-            this.newPolicyPath.replace('new', `${this.selectedPolicyName}/edit`),
+            !this.selectedPolicy.kind
+              ? { environment_id: this.currentEnvironmentId }
+              : { environment_id: this.currentEnvironmentId, kind: this.selectedPolicy.kind },
+            this.newPolicyPath.replace('new', `${this.selectedPolicy.name}/edit`),
           )
         : '';
     },
@@ -191,12 +187,10 @@ export default {
       if (rows.length === 0) return;
 
       const [selectedPolicy] = rows;
-      this.selectedPolicyName = selectedPolicy?.name;
-      this.initialManifest = selectedPolicy?.yaml;
-      this.initialEnforcementStatus = selectedPolicy?.enabled;
+      this.selectedPolicy = selectedPolicy;
     },
     deselectPolicy() {
-      this.selectedPolicyName = null;
+      this.selectedPolicy = null;
 
       const bTable = this.$refs.policiesTable.$children[0];
       bTable.clearSelected();

ee/app/assets/javascripts/threat_monitoring/graphql/queries/network_policies.query.graphql

@@ -3,6 +3,7 @@ query networkPolicies($fullPath: ID!, $environmentId: EnvironmentID) {
     networkPolicies(environmentId: $environmentId) {
       nodes {
         name
+        kind
         yaml
         enabled
         fromAutoDevops

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

@@ -2,11 +2,13 @@ import { GlTable, GlDrawer } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
+import PolicyDrawer from 'ee/threat_monitoring/components/policy_drawer/policy_drawer.vue';
 import PolicyList from 'ee/threat_monitoring/components/policy_list.vue';
 import networkPoliciesQuery from 'ee/threat_monitoring/graphql/queries/network_policies.query.graphql';
 import scanExecutionPoliciesQuery from 'ee/threat_monitoring/graphql/queries/scan_execution_policies.query.graphql';
 import createStore from 'ee/threat_monitoring/store';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { stubComponent } from 'helpers/stub_component';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { networkPolicies, scanExecutionPolicies } from '../mocks/mock_apollo';
@@ -64,7 +66,12 @@ describe('PolicyList component', () => {
             [scanExecutionPoliciesQuery, requestHandlers.scanExecutionPolicies],
           ]),
           stubs: {
-            PolicyDrawer: GlDrawer,
+            PolicyDrawer: stubComponent(PolicyDrawer, {
+              props: {
+                ...PolicyDrawer.props,
+                ...GlDrawer.props,
+              },
+            }),
           },
           localVue,
         },
@@ -203,16 +210,21 @@ describe('PolicyList component', () => {
     });
   });
 
-  describe('given there is a selected policy', () => {
+  describe.each`
+    description         | policy
+    ${'network'}        | ${mockNetworkPoliciesResponse[0]}
+    ${'scan execution'} | ${mockScanExecutionPoliciesResponse[0]}
+  `('given there is a $description policy selected', ({ policy }) => {
     beforeEach(() => {
       mountShallowWrapper();
-      findPoliciesTable().vm.$emit('row-selected', [mockNetworkPoliciesResponse[0]]);
+      findPoliciesTable().vm.$emit('row-selected', [policy]);
     });
 
     it('renders opened editor drawer', () => {
       const editorDrawer = findPolicyDrawer();
       expect(editorDrawer.exists()).toBe(true);
       expect(editorDrawer.props('open')).toBe(true);
+      expect(editorDrawer.props('policy')).toBe(policy);
     });
   });
 

ee/spec/frontend/threat_monitoring/mocks/mock_data.js

@@ -18,6 +18,7 @@ export const mockEnvironmentsResponse = {
 export const mockNetworkPoliciesResponse = [
   {
     name: 'policy',
+    kind: 'NetworkPolicy',
     yaml: `---
 apiVersion: networking.k8s.io/v1
 kind: NetworkPolicy