diff --git a/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue b/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue
index ad5bfeb0ef389627d3970075bc22e43fd429aedd..0d21b397c5df293ab2f6fa6ea3eb730cccd9ead7 100644
--- a/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue
+++ b/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue
@@ -5,7 +5,7 @@ import { getTimeago } from '~/lib/utils/datetime_utility';
 import { setUrlFragment, mergeUrlParams } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import EnvironmentPicker from './environment_picker.vue';
-import NetworkPolicyDrawer from './network_policy_drawer.vue';
+import NetworkPolicyDrawer from './policy_drawer/network_policy_drawer.vue';
 
 export default {
   components: {
@@ -200,6 +200,7 @@ export default {
       :policy="selectedPolicy"
       :edit-policy-path="editPolicyPath"
       data-testid="policyDrawer"
+      @close="deselectPolicy"
     />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/threat_monitoring/components/network_policy_drawer.vue b/ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/network_policy_drawer.vue
similarity index 78%
rename from ee/app/assets/javascripts/threat_monitoring/components/network_policy_drawer.vue
rename to ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/network_policy_drawer.vue
index 6d1c3581911ca43404758741624d1b573aede1b3..a107e6b02306e4720b3e91568918b8c12c41295c 100644
--- a/ee/app/assets/javascripts/threat_monitoring/components/network_policy_drawer.vue
+++ b/ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/network_policy_drawer.vue
@@ -1,16 +1,16 @@
 <script>
 import { GlButton, GlDrawer } from '@gitlab/ui';
-import { getContentWrapperHeight } from '../utils';
-import { CiliumNetworkPolicyKind } from './policy_editor/constants';
-import PolicyDrawer from './policy_editor/policy_drawer.vue';
+import { getContentWrapperHeight } from '../../utils';
+import { CiliumNetworkPolicyKind } from '../policy_editor/constants';
+import ContainerRuntimePolicy from '../policy_editor/container_runtime_policy.vue';
 
 export default {
   components: {
     GlButton,
     GlDrawer,
     NetworkPolicyEditor: () =>
-      import(/* webpackChunkName: 'network_policy_editor' */ './network_policy_editor.vue'),
-    PolicyDrawer,
+      import(/* webpackChunkName: 'network_policy_editor' */ '../network_policy_editor.vue'),
+    ContainerRuntimePolicy,
   },
   props: {
     policy: {
@@ -25,7 +25,7 @@ export default {
     },
   },
   computed: {
-    isCiliumPolicy() {
+    isContainerRuntimePolicy() {
       return this.policy ? this.policy.manifest.includes(CiliumNetworkPolicyKind) : false;
     },
   },
@@ -59,7 +59,7 @@ export default {
       </div>
     </template>
     <div v-if="policy">
-      <policy-drawer v-if="isCiliumPolicy" :value="policy.manifest" />
+      <container-runtime-policy v-if="isContainerRuntimePolicy" :value="policy.manifest" />
 
       <div v-else>
         <h5>{{ s__('NetworkPolicies|Policy definition') }}</h5>
diff --git a/ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_drawer.vue b/ee/app/assets/javascripts/threat_monitoring/components/policy_editor/container_runtime_policy.vue
similarity index 100%
rename from ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_drawer.vue
rename to ee/app/assets/javascripts/threat_monitoring/components/policy_editor/container_runtime_policy.vue
diff --git a/ee/spec/frontend/threat_monitoring/components/__snapshots__/network_policy_list_spec.js.snap b/ee/spec/frontend/threat_monitoring/components/__snapshots__/network_policy_list_spec.js.snap
index bda5cfcdd17b3e67da75bae31f1df311f4420bea..d5b49d14b631a9a2f8f4e4d9d958cf5e2f39a5d9 100644
--- a/ee/spec/frontend/threat_monitoring/components/__snapshots__/network_policy_list_spec.js.snap
+++ b/ee/spec/frontend/threat_monitoring/components/__snapshots__/network_policy_list_spec.js.snap
@@ -6,10 +6,10 @@ exports[`NetworkPolicyList component renders policies table 1`] = `
 <table
   aria-busy="false"
   aria-colcount="3"
-  aria-describedby="__BVID__208__caption_"
+  aria-describedby="__BVID__181__caption_"
   aria-multiselectable="false"
   class="table b-table gl-table table-hover b-table-stacked-md b-table-selectable b-table-select-single"
-  id="__BVID__208"
+  id="__BVID__181"
   role="table"
 >
   <!---->
diff --git a/ee/spec/frontend/threat_monitoring/components/network_policy_list_spec.js b/ee/spec/frontend/threat_monitoring/components/network_policy_list_spec.js
index 83b1e180c9a437e15ed13aea37ee8fc274c11e51..4c89402fb858b55edba008e3e140b798719ab98e 100644
--- a/ee/spec/frontend/threat_monitoring/components/network_policy_list_spec.js
+++ b/ee/spec/frontend/threat_monitoring/components/network_policy_list_spec.js
@@ -1,6 +1,5 @@
 import { GlTable, GlDrawer } from '@gitlab/ui';
 import NetworkPolicyList from 'ee/threat_monitoring/components/network_policy_list.vue';
-import PolicyDrawer from 'ee/threat_monitoring/components/policy_editor/policy_drawer.vue';
 import createStore from 'ee/threat_monitoring/store';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -59,10 +58,6 @@ describe('NetworkPolicyList component', () => {
     expect(button.exists()).toBe(true);
   });
 
-  it('does not render the new policy drawer', () => {
-    expect(wrapper.find(PolicyDrawer).exists()).toBe(false);
-  });
-
   it('fetches policies', () => {
     expect(store.dispatch).toHaveBeenCalledWith('networkPolicies/fetchPolicies', -1);
   });
diff --git a/ee/spec/frontend/threat_monitoring/components/network_policy_drawer_spec.js b/ee/spec/frontend/threat_monitoring/components/policy_drawer/network_policy_drawer_spec.js
similarity index 81%
rename from ee/spec/frontend/threat_monitoring/components/network_policy_drawer_spec.js
rename to ee/spec/frontend/threat_monitoring/components/policy_drawer/network_policy_drawer_spec.js
index ce51d7699e135b59f4d314d38fae3e03ed8cce03..cf4f903d5e223e4a3baa72a9473de5124611f0c5 100644
--- a/ee/spec/frontend/threat_monitoring/components/network_policy_drawer_spec.js
+++ b/ee/spec/frontend/threat_monitoring/components/policy_drawer/network_policy_drawer_spec.js
@@ -1,7 +1,7 @@
-import NetworkPolicyDrawer from 'ee/threat_monitoring/components/network_policy_drawer.vue';
-import PolicyDrawer from 'ee/threat_monitoring/components/policy_editor/policy_drawer.vue';
+import NetworkPolicyDrawer from 'ee/threat_monitoring/components/policy_drawer/network_policy_drawer.vue';
+import ContainerRuntimePolicy from 'ee/threat_monitoring/components/policy_editor/container_runtime_policy.vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import { mockPoliciesResponse, mockCiliumPolicy } from '../mocks/mock_data';
+import { mockPoliciesResponse, mockCiliumPolicy } from '../../mocks/mock_data';
 
 const [mockGenericPolicy] = mockPoliciesResponse;
 
@@ -22,7 +22,7 @@ describe('NetworkPolicyDrawer component', () => {
   // Finders
   const findEditButton = () => wrapper.findByTestId('edit-button');
   const findPolicyEditor = () => wrapper.findByTestId('policyEditor');
-  const findPolicyDrawer = () => wrapper.find(PolicyDrawer);
+  const findCiliumPolicy = () => wrapper.findComponent(ContainerRuntimePolicy);
 
   // Shared assertions
   const itRendersEditButton = () => {
@@ -75,8 +75,8 @@ describe('NetworkPolicyDrawer component', () => {
       });
     });
 
-    it('renders the new policy drawer', () => {
-      expect(findPolicyDrawer().exists()).toBe(true);
+    it('renders the container runtime component', () => {
+      expect(findCiliumPolicy().exists()).toBe(true);
     });
 
     itRendersEditButton();
diff --git a/ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_drawer_spec.js.snap b/ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/container_runtime_policy_spec.js.snap
similarity index 84%
rename from ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_drawer_spec.js.snap
rename to ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/container_runtime_policy_spec.js.snap
index 2752e1a4d72a3cbdabd5a5dee147583a12e7828c..befb8e7c1f2463ec06e56aa6ce8115a58ae708e3 100644
--- a/ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_drawer_spec.js.snap
+++ b/ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/container_runtime_policy_spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PolicyDrawer component supported YAML renders policy preview tabs 1`] = `
+exports[`ContainerRuntimePolicy component supported YAML renders policy preview tabs 1`] = `
 <div>
   <h5
     class="gl-mt-3"
@@ -54,7 +54,7 @@ spec:
 </div>
 `;
 
-exports[`PolicyDrawer component unsupported YAML renders policy preview tabs 1`] = `
+exports[`ContainerRuntimePolicy component unsupported YAML renders policy preview tabs 1`] = `
 <div>
   <h5
     class="gl-mt-3"
diff --git a/ee/spec/frontend/threat_monitoring/components/policy_editor/policy_drawer_spec.js b/ee/spec/frontend/threat_monitoring/components/policy_editor/container_runtime_policy_spec.js
similarity index 90%
rename from ee/spec/frontend/threat_monitoring/components/policy_editor/policy_drawer_spec.js
rename to ee/spec/frontend/threat_monitoring/components/policy_editor/container_runtime_policy_spec.js
index 36c2d5382d159c6b5ba71b62263c3a19794dfd8d..6631229290c5644870fbed630f9105ce7044b0fc 100644
--- a/ee/spec/frontend/threat_monitoring/components/policy_editor/policy_drawer_spec.js
+++ b/ee/spec/frontend/threat_monitoring/components/policy_editor/container_runtime_policy_spec.js
@@ -1,9 +1,9 @@
+import ContainerRuntimePolicy from 'ee/threat_monitoring/components/policy_editor/container_runtime_policy.vue';
 import toYaml from 'ee/threat_monitoring/components/policy_editor/lib/to_yaml';
-import PolicyDrawer from 'ee/threat_monitoring/components/policy_editor/policy_drawer.vue';
 import PolicyPreview from 'ee/threat_monitoring/components/policy_editor/policy_preview.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
-describe('PolicyDrawer component', () => {
+describe('ContainerRuntimePolicy component', () => {
   let wrapper;
   const policy = {
     name: 'test-policy',
@@ -17,7 +17,7 @@ describe('PolicyDrawer component', () => {
   const findDescription = () => wrapper.findByTestId('description');
 
   const factory = ({ propsData } = {}) => {
-    wrapper = shallowMountExtended(PolicyDrawer, {
+    wrapper = shallowMountExtended(ContainerRuntimePolicy, {
       propsData: {
         ...propsData,
       },