Move and rename a few files, cleanup tests

- Renamed PolicyDrawer component to ContainerRuntimePolicy
- Moved NetworkPolicyDrawer to its own sub-directory
- Slightly refactored the specs to make descriptions more meaningful
  and to use findComponent where appropriate

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>

ee/app/assets/javascripts/threat_monitoring/components/network_policy_drawer.vue → ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/network_policy_drawer.vue

 <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>

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"
 >
   <!---->

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

 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);
   });

ee/spec/frontend/threat_monitoring/components/network_policy_drawer_spec.js → ee/spec/frontend/threat_monitoring/components/policy_drawer/network_policy_drawer_spec.js

-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();

ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_drawer_spec.js.snap → ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/container_runtime_policy_spec.js.snap

 // 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"

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_drawer_spec.js → ee/spec/frontend/threat_monitoring/components/policy_editor/container_runtime_policy_spec.js

+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,
       },