Skip to content

G
gitlab-ce
Commit a7ae8b4d authored by Alexander Turinske's avatar Alexander Turinske
Browse files
Options

Clean up policy editor refactor MR 

- remove snapshot test in favor of explicit
  tests
- update styling
parent c81e65ff
Show whitespace changes
Inline Side-by-side
Showing with 37 additions and 241 deletions
ee/app/assets/javascripts/threat_monitoring/components/network_policy_editor.vue
View file @ a7ae8b4d
......@@ -20,7 +20,6 @@ export default {
editorOptions() {
return {
lineNumbers: 'off',
minimap: { enabled: false },
folding: false,
// Investigate the necessity of `glyphMargin` with #326746
glyphMargin: false,
......
ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_editor.vue
View file @ a7ae8b4d
......@@ -239,8 +239,10 @@ export default {
<environment-picker />
</div>
<div class="gl-mb-5 gl-border-2 gl-border-solid gl-border-gray-50">
<gl-form-group class="gl-p-5 gl-mb-0 gl-bg-gray-50">
<div class="gl-mb-5 gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base">
<gl-form-group
class="gl-px-5 gl-py-3 gl-mb-0 gl-bg-gray-10 gl-border-b-solid gl-border-b-gray-100 gl-border-b-1"
>
<gl-segmented-control
data-testid="editor-mode"
:options="$options.editorModes"
......@@ -249,7 +251,7 @@ export default {
/>
</gl-form-group>
<div class="gl-display-flex gl-sm-flex-direction-column">
<section class="gl-w-full gl-p-5 gl-flex-fill-3 policy-table-left">
<section class="gl-w-full gl-p-5 gl-flex-fill-4 policy-table-left">
<div v-if="shouldShowRuleEditor" data-testid="rule-editor">
<gl-alert v-if="hasParsingError" data-testid="parsing-alert" :dismissible="false">
{{ $options.i18n.PARSING_ERROR_MESSAGE }}
......@@ -281,7 +283,7 @@ export default {
<template #disabled>
<div
class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-50 gl-rounded-base gl-p-6"
class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-p-6"
></div>
</template>
......@@ -300,7 +302,7 @@ export default {
/>
<div
class="gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-50 gl-mb-5"
class="gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-mb-5"
>
<gl-button
variant="link"
......@@ -325,7 +327,7 @@ export default {
<template #disabled>
<div
class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-50 gl-rounded-base gl-p-6"
class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-p-6"
></div>
</template>
......@@ -344,7 +346,7 @@ export default {
<section
v-if="shouldShowRuleEditor"
class="gl-w-30p gl-p-5 gl-border-l-gray-50 gl-border-l-1 gl-border-l-solid gl-flex-fill-2"
class="gl-w-30p gl-p-5 gl-border-l-gray-100 gl-border-l-1 gl-border-l-solid gl-flex-fill-2"
>
<dim-disable-container data-testid="policy-preview-container" :disabled="hasParsingError">
<template #title>
......@@ -352,10 +354,7 @@ export default {
</template>
<template #disabled>
<policy-preview
:policy-yaml="s__('NetworkPolicies|Unable to parse policy')"
policy-description=""
/>
<policy-preview :policy-yaml="s__('NetworkPolicies|Unable to parse policy')" />
</template>
<policy-preview :policy-yaml="policyYaml" :policy-description="humanizedPolicy" />
......
ee/app/assets/stylesheets/pages/threat_management.scss
View file @ a7ae8b4d
......@@ -11,5 +11,5 @@
}
.policy-editor .policy-table-left {
flex: 3;
flex: 4;
}
ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_editor_spec.js.snap deleted 100644 → 0
View file @ c81e65ff
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
<section
class="policy-editor"
>
<header
class="gl-pb-5"
>
<h3>
Policy description
</h3>
</header>
<div
class="gl-display-flex"
>
<gl-form-group-stub
label="Policy type"
label-for="policyType"
>
<gl-form-select-stub
disabled=""
id="policyType"
options="[object Object]"
value="networkPolicy"
/>
</gl-form-group-stub>
<environment-picker-stub />
</div>
<div
class="gl-mb-5 gl-border-2 gl-border-solid gl-border-gray-50"
>
<gl-form-group-stub
class="gl-p-5 gl-mb-0 gl-bg-gray-50"
>
<gl-segmented-control-stub
checked="rule"
data-testid="editor-mode"
options="[object Object],[object Object]"
/>
</gl-form-group-stub>
<div
class="gl-display-flex gl-sm-flex-direction-column"
>
<section
class="gl-w-full gl-p-5 gl-flex-fill-3 policy-table-left"
>
<div
data-testid="rule-editor"
>
<!---->
<gl-form-group-stub
label="Name"
label-for="policyName"
>
<gl-form-input-stub
id="policyName"
value=""
/>
</gl-form-group-stub>
<gl-form-group-stub
label="Description"
label-for="policyDescription"
>
<gl-form-textarea-stub
id="policyDescription"
noresize="true"
value=""
/>
</gl-form-group-stub>
<gl-form-group-stub
data-testid="policy-enable"
>
<gl-toggle-stub
label="Policy status"
labelposition="top"
/>
</gl-form-group-stub>
<dim-disable-container-stub
data-testid="rule-builder-container"
>
<policy-rule-builder-stub
class="gl-mb-4"
endpointlabels=""
endpointmatchmode="any"
rule="[object Object]"
/>
<div
class="gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-50 gl-mb-5"
>
<gl-button-stub
buttontextclasses=""
category="primary"
data-testid="add-rule"
icon=""
size="medium"
variant="link"
>
New rule
</gl-button-stub>
</div>
</dim-disable-container-stub>
<dim-disable-container-stub
data-testid="policy-action-container"
>
<policy-action-picker-stub />
<policy-alert-picker-stub />
</dim-disable-container-stub>
</div>
<!---->
</section>
<section
class="gl-w-30p gl-p-5 gl-border-l-gray-50 gl-border-l-1 gl-border-l-solid gl-flex-fill-2"
>
<dim-disable-container-stub
data-testid="policy-preview-container"
>
<policy-preview-stub
initialtab="0"
policydescription="Allow all inbound traffic to <strong>all</strong> pods from <strong>all</strong> pods on <strong>any</strong> port"
policyyaml="apiVersion: cilium.io/v2
kind: CiliumNetworkPolicy
metadata:
name: ''
labels:
app.gitlab.com/proj: '21'
spec:
endpointSelector:
matchLabels:
network-policy.gitlab.com/disabled_by: gitlab
ingress:
- fromEndpoints:
- matchLabels: {}
"
/>
</dim-disable-container-stub>
</section>
</div>
</div>
<div>
<gl-button-stub
buttontextclasses=""
category="primary"
data-testid="save-policy"
icon=""
size="medium"
type="submit"
variant="success"
>
Create policy
</gl-button-stub>
<!---->
<gl-button-stub
buttontextclasses=""
category="secondary"
href="/threat-monitoring"
icon=""
size="medium"
variant="default"
>
Cancel
</gl-button-stub>
</div>
<gl-modal-stub
actioncancel="[object Object]"
actionsecondary="[object Object]"
dismisslabel="Close"
modalclass=""
modalid="delete-modal"
size="md"
title="Delete policy: "
titletag="h4"
>
Are you sure you want to delete this policy? This action cannot be undone.
</gl-modal-stub>
</section>
`;
ee/spec/frontend/threat_monitoring/components/policy_editor/policy_editor_spec.js
View file @ a7ae8b4d
......@@ -72,11 +72,11 @@ spec:
};
const findRuleEditor = () => wrapper.findByTestId('rule-editor');
const findPreview = () => wrapper.find(PolicyPreview);
const findPreview = () => wrapper.findComponent(PolicyPreview);
const findAddRuleButton = () => wrapper.findByTestId('add-rule');
const findYAMLParsingAlert = () => wrapper.findByTestId('parsing-alert');
const findNetworkPolicyEditor = () => wrapper.findByTestId('network-policy-editor');
const findPolicyAlertPicker = () => wrapper.find(PolicyAlertPicker);
const findPolicyAlertPicker = () => wrapper.findComponent(PolicyAlertPicker);
const findPolicyDescription = () => wrapper.find("[id='policyDescription']");
const findPolicyEnableContainer = () => wrapper.findByTestId('policy-enable');
const findPolicyName = () => wrapper.find("[id='policyName']");
......@@ -103,12 +103,10 @@ spec:
wrapper = null;
});
it('renders the policy editor layout', () => {
expect(wrapper.find('section').element).toMatchSnapshot();
});
it('renders toggle with label', () => {
expect(wrapper.findComponent(GlToggle).props('label')).toBe(PolicyEditorApp.i18n.toggleLabel);
const policyEnableToggle = findPolicyEnableContainer().findComponent(GlToggle);
expect(policyEnableToggle.exists()).toBe(true);
expect(policyEnableToggle.props('label')).toBe(PolicyEditorApp.i18n.toggleLabel);
});
it('renders a default rule with label', () => {
......@@ -119,20 +117,19 @@ spec:
});
});
it('renders the policy alert picker', () => {
expect(findPolicyAlertPicker().exists()).toBe(true);
});
it('does not render yaml editor', () => {
expect(findNetworkPolicyEditor().exists()).toBe(false);
});
it('does not render parsing error alert', () => {
expect(findYAMLParsingAlert().exists()).toBe(false);
});
it('does not render delete button', () => {
expect(findDeletePolicy().exists()).toBe(false);
it.each`
component | status | findComponent | state
${'policy alert picker'} | ${'does display'} | ${findPolicyAlertPicker} | ${true}
${'editor mode toggle'} | ${'does display'} | ${findEditorModeToggle} | ${true}
${'policy name input'} | ${'does display'} | ${findPolicyName} | ${true}
${'rule editor'} | ${'does display'} | ${findRuleEditor} | ${true}
${'add rule button'} | ${'does display'} | ${findAddRuleButton} | ${true}
${'policy preview'} | ${'does display'} | ${findPreview} | ${true}
${'yaml editor'} | ${'does not display'} | ${findNetworkPolicyEditor} | ${false}
${'parsing error alert'} | ${'does not display'} | ${findYAMLParsingAlert} | ${false}
${'delete button'} | ${'does not display'} | ${findDeletePolicy} | ${false}
`('$status the $component', async ({ findComponent, state }) => {
expect(findComponent().exists()).toBe(state);
});
describe('given .yaml editor mode is enabled', () => {
......@@ -144,13 +141,13 @@ spec:
});
});
it('does not render rule editor', () => {
expect(findRuleEditor().exists()).toBe(false);
});
it('renders yaml editor', () => {
const editor = findNetworkPolicyEditor();
expect(editor.exists()).toBe(true);
it.each`
component | status | findComponent | state
${'editor mode toggle'} | ${'does display'} | ${findEditorModeToggle} | ${true}
${'rule editor'} | ${'does not display'} | ${findRuleEditor} | ${false}
${'yaml editor'} | ${'does display'} | ${findNetworkPolicyEditor} | ${true}
`('$status the $component', async ({ findComponent, state }) => {
expect(findComponent().exists()).toBe(state);
});
it('updates policy on yaml editor value change', async () => {
......@@ -416,7 +413,7 @@ spec:
});
it('removes policy and redirects to a threat monitoring path on secondary modal button click', async () => {
wrapper.find(GlModal).vm.$emit('secondary');
wrapper.findComponent(GlModal).vm.$emit('secondary');
await wrapper.vm.$nextTick();
expect(store.dispatch).toHaveBeenCalledWith('networkPolicies/deletePolicy', {
......
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