Move network policy drawer to standalone component

Moved the network policy drawer's implementation out of the
network policy list component into its own component.

ee/app/assets/javascripts/threat_monitoring/components/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';
+
+export default {
+  components: {
+    GlButton,
+    GlDrawer,
+    NetworkPolicyEditor: () =>
+      import(/* webpackChunkName: 'network_policy_editor' */ './network_policy_editor.vue'),
+    PolicyDrawer,
+  },
+  props: {
+    policy: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    editPolicyPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    isCiliumPolicy() {
+      return this.policy ? this.policy.manifest.includes(CiliumNetworkPolicyKind) : false;
+    },
+  },
+  methods: {
+    getDrawerHeaderHeight() {
+      return getContentWrapperHeight('.js-threat-monitoring-container-wrapper');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-drawer
+    :z-index="252"
+    :header-height="getDrawerHeaderHeight()"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template v-if="policy" #header>
+      <div>
+        <h3 class="gl-mb-5 gl-mt-0">{{ policy.name }}</h3>
+        <div>
+          <gl-button
+            data-testid="edit-button"
+            category="primary"
+            variant="info"
+            :href="editPolicyPath"
+            >{{ s__('NetworkPolicies|Edit policy') }}</gl-button
+          >
+        </div>
+      </div>
+    </template>
+    <div v-if="policy">
+      <policy-drawer v-if="isCiliumPolicy" :value="policy.manifest" />
+
+      <div v-else>
+        <h5>{{ s__('NetworkPolicies|Policy definition') }}</h5>
+        <p>
+          {{ s__("NetworkPolicies|Define this policy's location, conditions and actions.") }}
+        </p>
+        <div class="gl-p-3 gl-bg-gray-50">
+          <network-policy-editor
+            :value="policy.manifest"
+            data-testid="policyEditor"
+            class="network-policy-editor"
+          />
+        </div>
+      </div>
+    </div>
+  </gl-drawer>
+</template>

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

 <script>
-import { GlTable, GlEmptyState, GlDrawer, GlButton, GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlTable, GlEmptyState, GlButton, GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import { setUrlFragment, mergeUrlParams } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
-import { getContentWrapperHeight } from '../utils';
 import EnvironmentPicker from './environment_picker.vue';
-import { CiliumNetworkPolicyKind } from './policy_editor/constants';
-import PolicyDrawer from './policy_editor/policy_drawer.vue';
+import NetworkPolicyDrawer from './network_policy_drawer.vue';
 
 export default {
   components: {
     GlTable,
     GlEmptyState,
-    GlDrawer,
     GlButton,
     GlAlert,
     GlSprintf,
     GlLink,
     EnvironmentPicker,
-    NetworkPolicyEditor: () =>
-      import(/* webpackChunkName: 'network_policy_editor' */ './network_policy_editor.vue'),
-    PolicyDrawer,
+    NetworkPolicyDrawer,
   },
   props: {
     documentationPath: {
@@ -54,11 +49,6 @@ export default {
     hasAutoDevopsPolicy() {
       return this.policiesWithDefaults.some((policy) => policy.isAutodevops);
     },
-    hasCiliumSelectedPolicy() {
-      return this.hasSelectedPolicy
-        ? this.selectedPolicy.manifest.includes(CiliumNetworkPolicyKind)
-        : false;
-    },
     editPolicyPath() {
       return this.hasSelectedPolicy
         ? mergeUrlParams(
@@ -106,9 +96,6 @@ export default {
   },
   methods: {
     ...mapActions('networkPolicies', ['fetchPolicies', 'createPolicy', 'updatePolicy']),
-    getDrawerHeaderHeight() {
-      return getContentWrapperHeight('.js-threat-monitoring-container-wrapper');
-    },
     getTimeAgoString(creationTimestamp) {
       if (!creationTimestamp) return '';
       return getTimeago().format(creationTimestamp);
@@ -208,44 +195,11 @@ export default {
       </template>
     </gl-table>
 
-    <gl-drawer
-      ref="editorDrawer"
-      :z-index="252"
+    <network-policy-drawer
       :open="hasSelectedPolicy"
-      :header-height="getDrawerHeaderHeight()"
-      @close="deselectPolicy"
-    >
-      <template #header>
-        <div>
-          <h3 class="gl-mb-5 gl-mt-0">{{ selectedPolicy.name }}</h3>
-          <div>
-            <gl-button
-              data-testid="edit-button"
-              category="primary"
-              variant="info"
-              :href="editPolicyPath"
-              >{{ s__('NetworkPolicies|Edit policy') }}</gl-button
-            >
-          </div>
-        </div>
-      </template>
-      <div v-if="hasSelectedPolicy">
-        <policy-drawer v-if="hasCiliumSelectedPolicy" v-model="selectedPolicy.manifest" />
-
-        <div v-else>
-          <h5>{{ s__('NetworkPolicies|Policy definition') }}</h5>
-          <p>
-            {{ s__("NetworkPolicies|Define this policy's location, conditions and actions.") }}
-          </p>
-          <div class="gl-p-3 gl-bg-gray-50">
-            <network-policy-editor
-              ref="policyEditor"
-              v-model="selectedPolicy.manifest"
-              class="network-policy-editor"
+      :policy="selectedPolicy"
+      :edit-policy-path="editPolicyPath"
+      data-testid="policyDrawer"
     />
   </div>
-        </div>
-      </div>
-    </gl-drawer>
-  </div>
 </template>

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__323__caption_"
+  aria-describedby="__BVID__208__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__323"
+  id="__BVID__208"
   role="table"
 >
   <!---->

ee/spec/frontend/threat_monitoring/components/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 { mountExtended } from 'helpers/vue_test_utils_helper';
+import { mockPoliciesResponse, mockCiliumPolicy } from '../mocks/mock_data';
+
+const [mockGenericPolicy] = mockPoliciesResponse;
+
+describe('NetworkPolicyDrawer component', () => {
+  let wrapper;
+
+  const factory = ({ propsData } = {}) => {
+    wrapper = mountExtended(NetworkPolicyDrawer, {
+      propsData: {
+        editPolicyPath: '/policies/policy/edit?environment_id=-1',
+        open: true,
+        ...propsData,
+      },
+      stubs: { NetworkPolicyEditor: true },
+    });
+  };
+
+  // Finders
+  const findEditButton = () => wrapper.findByTestId('edit-button');
+  const findPolicyEditor = () => wrapper.findByTestId('policyEditor');
+  const findPolicyDrawer = () => wrapper.find(PolicyDrawer);
+
+  // Shared assertions
+  const itRendersEditButton = () => {
+    it('renders edit button', () => {
+      const button = findEditButton();
+      expect(button.exists()).toBe(true);
+      expect(button.attributes().href).toBe('/policies/policy/edit?environment_id=-1');
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('by default', () => {
+    beforeEach(() => {
+      factory();
+    });
+
+    it('does not render edit button', () => {
+      expect(findEditButton().exists()).toBe(false);
+    });
+  });
+
+  describe('given a generic network policy', () => {
+    beforeEach(() => {
+      factory({
+        propsData: {
+          policy: mockGenericPolicy,
+        },
+      });
+    });
+
+    it('renders network policy editor with manifest', () => {
+      const policyEditor = findPolicyEditor();
+      expect(policyEditor.exists()).toBe(true);
+      expect(policyEditor.attributes('value')).toBe(mockGenericPolicy.manifest);
+    });
+
+    itRendersEditButton();
+  });
+
+  describe('given a cilium policy', () => {
+    beforeEach(() => {
+      factory({
+        propsData: {
+          policy: mockCiliumPolicy,
+        },
+      });
+    });
+
+    it('renders the new policy drawer', () => {
+      expect(findPolicyDrawer().exists()).toBe(true);
+    });
+
+    itRendersEditButton();
+  });
+});

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

-import { GlTable } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+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';
-import { mockPoliciesResponse } from '../mocks/mock_data';
+import { mockPoliciesResponse, mockCiliumPolicy } from '../mocks/mock_data';
 
 const mockData = mockPoliciesResponse.map((policy) => convertObjectPropsToCamelCase(policy));
 
@@ -22,7 +22,7 @@ describe('NetworkPolicyList component', () => {
 
     jest.spyOn(store, 'dispatch').mockImplementation(() => Promise.resolve());
 
-    wrapper = mount(NetworkPolicyList, {
+    wrapper = mountExtended(NetworkPolicyList, {
       propsData: {
         documentationPath: 'documentation_path',
         newPolicyPath: '/policies/new',
@@ -31,16 +31,15 @@ describe('NetworkPolicyList component', () => {
       data,
       store,
       provide,
-      stubs: { NetworkPolicyEditor: true },
+      stubs: { NetworkPolicyDrawer: GlDrawer },
     });
   };
 
   const findEnvironmentsPicker = () => wrapper.find({ ref: 'environmentsPicker' });
   const findPoliciesTable = () => wrapper.find(GlTable);
   const findTableEmptyState = () => wrapper.find({ ref: 'tableEmptyState' });
-  const findEditorDrawer = () => wrapper.find({ ref: 'editorDrawer' });
-  const findPolicyEditor = () => wrapper.find({ ref: 'policyEditor' });
-  const findAutodevopsAlert = () => wrapper.find('[data-testid="autodevopsAlert"]');
+  const findPolicyDrawer = () => wrapper.findByTestId('policyDrawer');
+  const findAutodevopsAlert = () => wrapper.findByTestId('autodevopsAlert');
 
   beforeEach(() => {
     factory({});
@@ -75,41 +74,18 @@ describe('NetworkPolicyList component', () => {
     expect(store.dispatch).toHaveBeenCalledWith('networkPolicies/fetchPolicies', 2);
   });
 
-  it('does not render edit button', () => {
-    expect(wrapper.find('[data-testid="edit-button"]').exists()).toBe(false);
-  });
-
   describe('given selected policy is a cilium policy', () => {
-    const manifest = `apiVersion: cilium.io/v2
-kind: CiliumNetworkPolicy
-metadata:
-  name: policy
-spec:
-  endpointSelector: {}`;
-
     beforeEach(() => {
       factory({
         data: () => ({ selectedPolicyName: 'policy' }),
         state: {
-          policies: [
-            {
-              name: 'policy',
-              creationTimestamp: new Date(),
-              manifest,
-            },
-          ],
+          policies: [mockCiliumPolicy],
         },
       });
     });
 
     it('renders the new policy drawer', () => {
-      expect(wrapper.find(PolicyDrawer).exists()).toBe(true);
-    });
-
-    it('renders edit button', () => {
-      const button = wrapper.find('[data-testid="edit-button"]');
-      expect(button.exists()).toBe(true);
-      expect(button.attributes().href).toBe('/policies/policy/edit?environment_id=-1');
+      expect(findPolicyDrawer().exists()).toBe(true);
     });
   });
 
@@ -129,7 +105,7 @@ spec:
   });
 
   it('renders closed editor drawer', () => {
-    const editorDrawer = findEditorDrawer();
+    const editorDrawer = findPolicyDrawer();
     expect(editorDrawer.exists()).toBe(true);
     expect(editorDrawer.props('open')).toBe(false);
   });
@@ -138,7 +114,7 @@ spec:
     findPoliciesTable().find('td').trigger('click');
 
     return wrapper.vm.$nextTick().then(() => {
-      const editorDrawer = findEditorDrawer();
+      const editorDrawer = findPolicyDrawer();
       expect(editorDrawer.exists()).toBe(true);
       expect(editorDrawer.props('open')).toBe(true);
     });
@@ -160,16 +136,10 @@ spec:
     });
 
     it('renders opened editor drawer', () => {
-      const editorDrawer = findEditorDrawer();
+      const editorDrawer = findPolicyDrawer();
       expect(editorDrawer.exists()).toBe(true);
       expect(editorDrawer.props('open')).toBe(true);
     });
-
-    it('renders network policy editor with manifest', () => {
-      const policyEditor = findPolicyEditor();
-      expect(policyEditor.exists()).toBe(true);
-      expect(policyEditor.attributes('value')).toBe(mockData[0].manifest);
-    });
   });
 
   describe('given there is a default environment with no data to display', () => {

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

@@ -41,6 +41,17 @@ spec:
   },
 ];
 
+export const mockCiliumPolicy = {
+  name: 'policy',
+  creationTimestamp: new Date(),
+  manifest: `apiVersion: cilium.io/v2
+kind: CiliumNetworkPolicy
+metadata:
+  name: policy
+spec:
+  endpointSelector: {}`,
+};
+
 export const mockNominalHistory = [
   ['2019-12-04T00:00:00.000Z', 56],
   ['2019-12-05T00:00:00.000Z', 2647],