Skip to content

G
gitlab-ce
Commit 58b89ffb authored by Olena Horal-Koretska's avatar Olena Horal-Koretska
Browse files
Options

Merge branch '341932-update-policy-drawer-with-tabs' into 'master' 

Update policy drawer to include tabs

See merge request gitlab-org/gitlab!78608
parents 8888908f 325bb7aa
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 239 deletions
ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/cilium_network_policy.vue
View file @ 58b89ffb
......@@ -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" />
</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
View file @ 58b89ffb
<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>
<h4 class="gl-my-0 gl-mr-3">{{ policy.name }}</h4>
</template>
<template v-if="policy" #header>
<gl-button
......@@ -82,15 +84,27 @@ 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="policy-yaml-editor-default-component"
/>
</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/network_policy/network_policy_editor.vue
View file @ 58b89ffb
......@@ -328,7 +328,10 @@ export default {
:id="$options.policyPreviewHumanCollapseId"
v-model="isPolicyPreviewHumanVisible"
>
<policy-preview-human :policy-description="humanizedPolicy" />
<policy-preview-human
class="gl-bg-gray-10 gl-py-3 gl-px-4"
:policy-description="humanizedPolicy"
/>
</gl-collapse>
</div>
</template>
......
ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_preview.vue deleted 100644 → 0
View file @ 8888908f
<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
View file @ 58b89ffb
......@@ -24,11 +24,7 @@ export default {
</script>
<template>
<div
v-if="policyDescription"
v-safe-html:[$options.safeHtmlConfig]="policyDescription"
class="gl-bg-gray-10 gl-py-3 gl-px-4"
></div>
<div v-if="policyDescription" v-safe-html:[$options.safeHtmlConfig]="policyDescription"></div>
<div v-else>
<gl-alert variant="info" :dismissible="false">
{{ $options.i18n.PARSING_ERROR_MESSAGE }}
......
ee/spec/frontend/threat_monitoring/components/policy_drawer/__snapshots__/cilium_network_policy_spec.js.snap
View file @ 58b89ffb
// 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,14 @@ exports[`CiliumNetworkPolicy component supported YAML renders policy preview tab
Network
</p>
<policy-info-row-stub
label="Summary"
>
<policy-preview-human-stub
policydescription="Deny all traffic"
/>
</policy-info-row-stub>
<div>
<policy-info-row-stub
data-testid="description"
......@@ -32,26 +40,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 +57,12 @@ exports[`CiliumNetworkPolicy component unsupported YAML renders policy preview t
Network
</p>
<!---->
<policy-info-row-stub
label="Summary"
>
<policy-preview-human-stub />
</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
View file @ 58b89ffb
......@@ -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,12 +50,7 @@ describe('CiliumNetworkPolicy component', () => {
});
it('does render the policy preview', () => {
expect(findPolicyPreview().exists()).toBe(true);
expect(findPolicyPreview().props()).toStrictEqual({
initialTab: 0,
policyDescription: 'Deny all traffic',
policyYaml: supportedYaml,
});
expect(findPolicyPreview().props('policyDescription')).toBe('Deny all traffic');
});
});
......@@ -64,7 +59,7 @@ describe('CiliumNetworkPolicy component', () => {
factory({ propsData: { policy: { yaml: unsupportedYaml } } });
});
it('renders policy preview tabs', () => {
it('renders policy preview', () => {
expect(wrapper.find('div').element).toMatchSnapshot();
});
......@@ -74,11 +69,7 @@ describe('CiliumNetworkPolicy component', () => {
it('does render the policy preview', () => {
expect(findPolicyPreview().exists()).toBe(true);
expect(findPolicyPreview().props()).toStrictEqual({
initialTab: 1,
policyDescription: null,
policyYaml: unsupportedYaml,
});
expect(findPolicyPreview().props('policyDescription')).toBe(null);
});
});
......
ee/spec/frontend/threat_monitoring/components/policy_drawer/policy_drawer_spec.js
View file @ 58b89ffb
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,25 @@ 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 findDefaultComponentPolicyEditor = () =>
wrapper.findByTestId('policy-yaml-editor-default-component');
const findTabPolicyEditor = () => wrapper.findByTestId('policy-yaml-editor-tab-content');
// Shared assertions
const itRendersEditButton = () => {
......@@ -47,7 +51,7 @@ describe('PolicyDrawer component', () => {
describe('by default', () => {
beforeEach(() => {
factory();
factory({ stubs: { GlDrawer } });
});
it('does not render edit button', () => {
......@@ -58,6 +62,7 @@ describe('PolicyDrawer component', () => {
describe('given a generic network policy', () => {
beforeEach(() => {
factory({
mountFn: mountExtended,
propsData: {
policy: mockGenericPolicy,
},
......@@ -65,9 +70,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(findDefaultComponentPolicyEditor().attributes('value')).toBe(mockGenericPolicy.yaml);
});
itRendersEditButton();
......@@ -84,6 +87,11 @@ describe('PolicyDrawer component', () => {
policy: mock,
policyType,
},
stubs: {
GlButton,
GlDrawer,
GlTabs,
},
});
});
......@@ -91,6 +99,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 deleted 100644 → 0
View file @ 8888908f
// 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 deleted 100644 → 0
View file @ 8888908f
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
View file @ 58b89ffb
......@@ -23616,9 +23616,6 @@ msgstr ""
msgid "NetworkPolicies|%{strongOpen}any%{strongClose} port"
msgstr ""
msgid "NetworkPolicies|.yaml"
msgstr ""
msgid "NetworkPolicies|.yaml mode"
msgstr ""
......@@ -23697,9 +23694,6 @@ msgstr ""
msgid "NetworkPolicies|Policy definition"
msgstr ""
msgid "NetworkPolicies|Rule"
msgstr ""
msgid "NetworkPolicies|Rule mode"
msgstr ""
......@@ -31944,6 +31938,9 @@ msgstr ""
msgid "SecurityOrchestration|Status"
msgstr ""
msgid "SecurityOrchestration|Summary"
msgstr ""
msgid "SecurityOrchestration|The %{scanners} %{severities} in an open merge request targeting %{branches}."
msgstr ""
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7