Update policy drawer to include tabs

- add yaml tab
- update network drawer design
- update tests

Changelog: changed

EE: true

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/cilium_network_policy.vue

@@ -3,7 +3,7 @@ import { GlIntersperse } from '@gitlab/ui';
 import { n__, s__ } from '~/locale';
 import { removeUnnecessaryDashes } from '../../utils';
 import { fromYaml, humanizeNetworkPolicy } from '../policy_editor/network_policy/lib';
-import PolicyPreview from '../policy_editor/policy_preview.vue';
+import PolicyPreviewHuman from '../policy_editor/policy_preview_human.vue';
 import BasePolicy from './base_policy.vue';
 import PolicyInfoRow from './policy_info_row.vue';
 
@@ -12,11 +12,12 @@ export default {
     description: s__('SecurityOrchestration|Description'),
     network: s__('NetworkPolicies|Network'),
     status: s__('SecurityOrchestration|Status'),
+    summary: s__('SecurityOrchestration|Summary'),
   },
   components: {
     GlIntersperse,
     BasePolicy,
-    PolicyPreview,
+    PolicyPreviewHuman,
     PolicyInfoRow,
   },
   props: {
@@ -58,6 +59,10 @@ export default {
     <template #type>{{ $options.i18n.network }}</template>
 
     <template #default="{ statusLabel }">
+      <policy-info-row :label="$options.i18n.summary">
+        <policy-preview-human :policy-description="humanizedPolicy" content-class="" />
+      </policy-info-row>
+
       <div v-if="parsedYaml">
         <policy-info-row
           v-if="parsedYaml.description"
@@ -81,13 +86,6 @@ export default {
           </gl-intersperse>
         </policy-info-row>
       </div>
-
-      <policy-preview
-        class="gl-mt-4"
-        :initial-tab="initialTab"
-        :policy-yaml="policyYaml"
-        :policy-description="humanizedPolicy"
-      />
     </template>
   </base-policy>
 </template>

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

 <script>
-import { GlButton, GlDrawer } from '@gitlab/ui';
+import { GlButton, GlDrawer, GlTabs, GlTab } from '@gitlab/ui';
 import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
 import { getContentWrapperHeight, removeUnnecessaryDashes } from '../../utils';
 import { POLICIES_LIST_CONTAINER_CLASS, POLICY_TYPE_COMPONENT_OPTIONS } from '../constants';
@@ -17,6 +17,8 @@ export default {
   components: {
     GlButton,
     GlDrawer,
+    GlTab,
+    GlTabs,
     PolicyYamlEditor: () =>
       import(/* webpackChunkName: 'policy_yaml_editor' */ '../policy_yaml_editor.vue'),
     CiliumNetworkPolicy,
@@ -70,7 +72,7 @@ export default {
     v-on="$listeners"
   >
     <template v-if="policy" #title>
-      <h3 class="gl-my-0">{{ policy.name }}</h3>
+      <h3 class="gl-my-0 gl-mr-3">{{ policy.name }}</h3>
     </template>
     <template v-if="policy" #header>
       <gl-button
@@ -82,15 +84,24 @@ export default {
         >{{ s__('NetworkPolicies|Edit policy') }}</gl-button
       >
     </template>
-    <div v-if="policy">
-      <component :is="policyComponent" v-if="policyComponent" :policy="policy" />
-      <div v-else>
-        <h5>{{ s__('NetworkPolicies|Policy definition') }}</h5>
-        <p>
-          {{ s__("NetworkPolicies|Define this policy's location, conditions and actions.") }}
-        </p>
-        <policy-yaml-editor :value="policyYaml" data-testid="policy-yaml-editor" />
-      </div>
-    </div>
+    <gl-tabs v-if="policy" class="gl-p-0!" justified content-class="gl-py-0" lazy>
+      <gl-tab title="Details" class="gl-mt-5 gl-ml-6 gl-mr-3">
+        <component :is="policyComponent" v-if="policyComponent" :policy="policy" />
+        <div v-else>
+          <h5>{{ s__('NetworkPolicies|Policy definition') }}</h5>
+          <p>
+            {{ s__("NetworkPolicies|Define this policy's location, conditions and actions.") }}
+          </p>
+          <policy-yaml-editor :value="policyYaml" data-testid="default-policy-yaml-editor" />
+        </div>
+      </gl-tab>
+      <gl-tab v-if="policyComponent" title="Yaml">
+        <policy-yaml-editor
+          class="gl-h-100vh"
+          :value="policyYaml"
+          data-testid="policy-yaml-editor-tab-content"
+        />
+      </gl-tab>
+    </gl-tabs>
   </gl-drawer>
 </template>

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_preview.vue

-<script>
-import { GlTabs, GlTab } from '@gitlab/ui';
-import { PARSING_ERROR_MESSAGE } from './constants';
-import PolicyPreviewHuman from './policy_preview_human.vue';
-
-export default {
-  i18n: {
-    PARSING_ERROR_MESSAGE,
-  },
-  components: {
-    GlTabs,
-    GlTab,
-    PolicyPreviewHuman,
-  },
-  props: {
-    policyYaml: {
-      type: String,
-      required: true,
-    },
-    policyDescription: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    initialTab: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-  },
-  data() {
-    return { selectedTab: this.initialTab };
-  },
-};
-</script>
-
-<template>
-  <gl-tabs v-model="selectedTab" content-class="gl-pt-0">
-    <gl-tab :title="s__('NetworkPolicies|Rule')">
-      <policy-preview-human
-        :class="{
-          'gl-border-t-none! gl-rounded-top-left-none gl-rounded-top-right-none': Boolean(
-            policyDescription,
-          ),
-        }"
-        :policy-description="policyDescription"
-      />
-    </gl-tab>
-    <gl-tab :title="s__('NetworkPolicies|.yaml')">
-      <pre class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-border-t-none"
-        >{{ policyYaml }}
-      </pre>
-    </gl-tab>
-  </gl-tabs>
-</template>

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_preview_human.vue

@@ -18,6 +18,11 @@ export default {
       required: false,
       default: '',
     },
+    contentClass: {
+      type: String,
+      required: false,
+      default: 'gl-bg-gray-10 gl-py-3 gl-px-4',
+    },
   },
   safeHtmlConfig: { ALLOWED_TAGS: ['strong', 'br'] },
 };
@@ -27,7 +32,7 @@ export default {
   <div
     v-if="policyDescription"
     v-safe-html:[$options.safeHtmlConfig]="policyDescription"
-    class="gl-bg-gray-10 gl-py-3 gl-px-4"
+    :class="contentClass"
   ></div>
   <div v-else>
     <gl-alert variant="info" :dismissible="false">

ee/spec/frontend/threat_monitoring/components/policy_drawer/__snapshots__/cilium_network_policy_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CiliumNetworkPolicy component supported YAML renders policy preview tabs 1`] = `
+exports[`CiliumNetworkPolicy component supported YAML renders policy preview 1`] = `
 <div>
   <h5
     class="gl-mt-3"
@@ -14,6 +14,15 @@ exports[`CiliumNetworkPolicy component supported YAML renders policy preview tab
     Network
   </p>
    
+  <policy-info-row-stub
+    label="Summary"
+  >
+    <policy-preview-human-stub
+      contentclass=""
+      policydescription="Deny all traffic"
+    />
+  </policy-info-row-stub>
+   
   <div>
     <policy-info-row-stub
       data-testid="description"
@@ -32,26 +41,10 @@ exports[`CiliumNetworkPolicy component supported YAML renders policy preview tab
      
     <!---->
   </div>
-   
-  <policy-preview-stub
-    class="gl-mt-4"
-    initialtab="0"
-    policydescription="Deny all traffic"
-    policyyaml="apiVersion: cilium.io/v2
-kind: CiliumNetworkPolicy
-description: test description
-metadata:
-  name: test-policy
-spec:
-  endpointSelector:
-    matchLabels:
-      network-policy.gitlab.com/disabled_by: gitlab
-"
-  />
 </div>
 `;
 
-exports[`CiliumNetworkPolicy component unsupported YAML renders policy preview tabs 1`] = `
+exports[`CiliumNetworkPolicy component unsupported YAML renders policy preview 1`] = `
 <div>
   <h5
     class="gl-mt-3"
@@ -65,12 +58,14 @@ exports[`CiliumNetworkPolicy component unsupported YAML renders policy preview t
     Network
   </p>
    
-  <!---->
+  <policy-info-row-stub
+    label="Summary"
+  >
+    <policy-preview-human-stub
+      contentclass=""
+    />
+  </policy-info-row-stub>
    
-  <policy-preview-stub
-    class="gl-mt-4"
-    initialtab="1"
-    policyyaml="unsupportedPrimaryKey: test"
-  />
+  <!---->
 </div>
 `;

ee/spec/frontend/threat_monitoring/components/policy_drawer/cilium_network_policy_spec.js

@@ -2,7 +2,7 @@ import { GlIntersperse } from '@gitlab/ui';
 import BasePolicy from 'ee/threat_monitoring/components/policy_drawer/base_policy.vue';
 import CiliumNetworkPolicy from 'ee/threat_monitoring/components/policy_drawer/cilium_network_policy.vue';
 import { toYaml } from 'ee/threat_monitoring/components/policy_editor/network_policy/lib';
-import PolicyPreview from 'ee/threat_monitoring/components/policy_editor/policy_preview.vue';
+import PolicyPreviewHuman from 'ee/threat_monitoring/components/policy_editor/policy_preview_human.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('CiliumNetworkPolicy component', () => {
@@ -15,7 +15,7 @@ describe('CiliumNetworkPolicy component', () => {
   });
   const unsupportedYaml = 'unsupportedPrimaryKey: test';
 
-  const findPolicyPreview = () => wrapper.findComponent(PolicyPreview);
+  const findPolicyPreview = () => wrapper.findComponent(PolicyPreviewHuman);
   const findDescription = () => wrapper.findByTestId('description');
   const findEnvironments = () => wrapper.findByTestId('environments');
 
@@ -40,7 +40,7 @@ describe('CiliumNetworkPolicy component', () => {
       factory({ propsData: { policy: { yaml: supportedYaml } } });
     });
 
-    it('renders policy preview tabs', () => {
+    it('renders policy preview', () => {
       expect(wrapper.find('div').element).toMatchSnapshot();
     });
 
@@ -50,11 +50,9 @@ describe('CiliumNetworkPolicy component', () => {
     });
 
     it('does render the policy preview', () => {
-      expect(findPolicyPreview().exists()).toBe(true);
       expect(findPolicyPreview().props()).toStrictEqual({
-        initialTab: 0,
+        contentClass: '',
         policyDescription: 'Deny all traffic',
-        policyYaml: supportedYaml,
       });
     });
   });
@@ -64,7 +62,7 @@ describe('CiliumNetworkPolicy component', () => {
       factory({ propsData: { policy: { yaml: unsupportedYaml } } });
     });
 
-    it('renders policy preview tabs', () => {
+    it('renders policy preview', () => {
       expect(wrapper.find('div').element).toMatchSnapshot();
     });
 
@@ -75,9 +73,8 @@ describe('CiliumNetworkPolicy component', () => {
     it('does render the policy preview', () => {
       expect(findPolicyPreview().exists()).toBe(true);
       expect(findPolicyPreview().props()).toStrictEqual({
-        initialTab: 1,
+        contentClass: '',
         policyDescription: null,
-        policyYaml: unsupportedYaml,
       });
     });
   });

ee/spec/frontend/threat_monitoring/components/policy_drawer/policy_drawer_spec.js

+import { GlButton, GlDrawer, GlTabs, GlTab } from '@gitlab/ui';
 import { POLICY_TYPE_COMPONENT_OPTIONS } from 'ee/threat_monitoring/components/constants';
 import CiliumNetworkPolicy from 'ee/threat_monitoring/components/policy_drawer/cilium_network_policy.vue';
 import PolicyDrawer from 'ee/threat_monitoring/components/policy_drawer/policy_drawer.vue';
 import ScanExecutionPolicy from 'ee/threat_monitoring/components/policy_drawer/scan_execution_policy.vue';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import {
   mockNetworkPoliciesResponse,
   mockCiliumPolicy,
@@ -14,22 +15,24 @@ const [mockGenericPolicy] = mockNetworkPoliciesResponse;
 describe('PolicyDrawer component', () => {
   let wrapper;
 
-  const factory = ({ propsData } = {}) => {
-    wrapper = mountExtended(PolicyDrawer, {
+  const factory = ({ mountFn = shallowMountExtended, propsData, stubs = {} } = {}) => {
+    wrapper = mountFn(PolicyDrawer, {
       propsData: {
         editPolicyPath: '/policies/policy/edit?environment_id=-1',
         open: true,
         ...propsData,
       },
-      stubs: { PolicyYamlEditor: true },
+      stubs: { PolicyYamlEditor: true, ...stubs },
     });
   };
 
   // Finders
   const findEditButton = () => wrapper.findByTestId('edit-button');
-  const findPolicyEditor = () => wrapper.findByTestId('policy-yaml-editor');
+  const findAllTabs = () => wrapper.findAllComponents(GlTab);
   const findCiliumNetworkPolicy = () => wrapper.findComponent(CiliumNetworkPolicy);
   const findScanExecutionPolicy = () => wrapper.findComponent(ScanExecutionPolicy);
+  const findDefaultPolicyEditor = () => wrapper.findByTestId('default-policy-yaml-editor');
+  const findTabPolicyEditor = () => wrapper.findByTestId('policy-yaml-editor-tab-content');
 
   // Shared assertions
   const itRendersEditButton = () => {
@@ -47,7 +50,7 @@ describe('PolicyDrawer component', () => {
 
   describe('by default', () => {
     beforeEach(() => {
-      factory();
+      factory({ stubs: { GlDrawer } });
     });
 
     it('does not render edit button', () => {
@@ -58,6 +61,7 @@ describe('PolicyDrawer component', () => {
   describe('given a generic network policy', () => {
     beforeEach(() => {
       factory({
+        mountFn: mountExtended,
         propsData: {
           policy: mockGenericPolicy,
         },
@@ -65,9 +69,7 @@ describe('PolicyDrawer component', () => {
     });
 
     it('renders network policy editor with manifest', () => {
-      const policyEditor = findPolicyEditor();
-      expect(policyEditor.exists()).toBe(true);
-      expect(policyEditor.attributes('value')).toBe(mockGenericPolicy.yaml);
+      expect(findDefaultPolicyEditor().attributes('value')).toBe(mockGenericPolicy.yaml);
     });
 
     itRendersEditButton();
@@ -84,6 +86,11 @@ describe('PolicyDrawer component', () => {
           policy: mock,
           policyType,
         },
+        stubs: {
+          GlButton,
+          GlDrawer,
+          GlTabs,
+        },
       });
     });
 
@@ -91,6 +98,14 @@ describe('PolicyDrawer component', () => {
       expect(finder().exists()).toBe(true);
     });
 
+    it('renders the tabs', () => {
+      expect(findAllTabs()).toHaveLength(2);
+    });
+
+    it('renders the policy editor', () => {
+      expect(findTabPolicyEditor().attributes('value')).toBe(mock.yaml);
+    });
+
     itRendersEditButton();
   });
 });

ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_preview_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PolicyPreview component with policy description renders policy preview tabs 1`] = `
-<gl-tabs-stub
-  contentclass="gl-pt-0"
-  queryparamname="tab"
-  theme="indigo"
-  value="0"
->
-  <gl-tab-stub
-    title="Rule"
-    titlelinkclass=""
-  >
-    <policy-preview-human-stub
-      class="gl-border-t-none! gl-rounded-top-left-none gl-rounded-top-right-none"
-      policydescription="<strong>bar</strong><br><div>test</div><script></script>"
-    />
-  </gl-tab-stub>
-   
-  <gl-tab-stub
-    title=".yaml"
-    titlelinkclass=""
-  >
-    <pre
-      class="gl-bg-white gl-rounded-top-left-none gl-rounded-top-right-none gl-border-t-none"
-    >
-      foo
-    
-    </pre>
-  </gl-tab-stub>
-</gl-tabs-stub>
-`;

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_preview_spec.js

-import { GlTabs } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import PolicyPreviewHuman from 'ee/threat_monitoring/components/policy_editor/policy_preview_human.vue';
-import PolicyPreview from 'ee/threat_monitoring/components/policy_editor/policy_preview.vue';
-
-describe('PolicyPreview component', () => {
-  let wrapper;
-
-  const findTabs = () => wrapper.findComponent(GlTabs);
-  const findPolicyPreviewHuman = () => wrapper.findComponent(PolicyPreviewHuman);
-
-  const factory = ({ propsData } = {}) => {
-    wrapper = shallowMount(PolicyPreview, {
-      propsData: {
-        ...propsData,
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('with policy description', () => {
-    const policyDescription = '<strong>bar</strong><br><div>test</div><script></script>';
-
-    beforeEach(() => {
-      factory({
-        propsData: {
-          policyYaml: 'foo',
-          policyDescription,
-        },
-      });
-    });
-
-    it('renders policy preview tabs', () => {
-      expect(findTabs().element).toMatchSnapshot();
-    });
-
-    it('renders the policy preview human', () => {
-      expect(findPolicyPreviewHuman().props('policyDescription')).toBe(policyDescription);
-    });
-
-    it('renders the first tab', () => {
-      expect(findTabs().attributes().value).toEqual('0');
-    });
-
-    describe('initial tab', () => {
-      it('selects initial tab', () => {
-        factory({
-          propsData: {
-            policyYaml: 'foo',
-            policyDescription: 'bar',
-            initialTab: 1,
-          },
-        });
-        expect(findTabs().attributes().value).toEqual('1');
-      });
-    });
-  });
-
-  describe('without policy description', () => {
-    beforeEach(() => {
-      factory({
-        propsData: {
-          policyYaml: 'foo',
-        },
-      });
-    });
-  });
-});

locale/gitlab.pot

@@ -23593,9 +23593,6 @@ msgstr ""
 msgid "NetworkPolicies|%{strongOpen}any%{strongClose} port"
 msgstr ""
 
-msgid "NetworkPolicies|.yaml"
-msgstr ""
-
 msgid "NetworkPolicies|.yaml mode"
 msgstr ""
 
@@ -23674,9 +23671,6 @@ msgstr ""
 msgid "NetworkPolicies|Policy definition"
 msgstr ""
 
-msgid "NetworkPolicies|Rule"
-msgstr ""
-
 msgid "NetworkPolicies|Rule mode"
 msgstr ""
 
@@ -31915,6 +31909,9 @@ msgstr ""
 msgid "SecurityOrchestration|Status"
 msgstr ""
 
+msgid "SecurityOrchestration|Summary"
+msgstr ""
+
 msgid "SecurityOrchestration|The %{scanners} %{severities} in an open merge request targeting %{branches}."
 msgstr ""