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 { ...@@ -20,7 +20,6 @@ export default {
editorOptions() { editorOptions() {
return { return {
lineNumbers: 'off', lineNumbers: 'off',
minimap: { enabled: false },
folding: false, folding: false,
// Investigate the necessity of `glyphMargin` with #326746 // Investigate the necessity of `glyphMargin` with #326746
glyphMargin: false, glyphMargin: false,
......
ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_editor.vue
View file @ a7ae8b4d
...@@ -239,8 +239,10 @@ export default { ...@@ -239,8 +239,10 @@ export default {
<environment-picker /> <environment-picker />
</div> </div>
<div class="gl-mb-5 gl-border-2 gl-border-solid gl-border-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-p-5 gl-mb-0 gl-bg-gray-50"> <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 <gl-segmented-control
data-testid="editor-mode" data-testid="editor-mode"
:options="$options.editorModes" :options="$options.editorModes"
...@@ -249,7 +251,7 @@ export default { ...@@ -249,7 +251,7 @@ export default {
/> />
</gl-form-group> </gl-form-group>
<div class="gl-display-flex gl-sm-flex-direction-column"> <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"> <div v-if="shouldShowRuleEditor" data-testid="rule-editor">
<gl-alert v-if="hasParsingError" data-testid="parsing-alert" :dismissible="false"> <gl-alert v-if="hasParsingError" data-testid="parsing-alert" :dismissible="false">
{{ $options.i18n.PARSING_ERROR_MESSAGE }} {{ $options.i18n.PARSING_ERROR_MESSAGE }}
...@@ -281,7 +283,7 @@ export default { ...@@ -281,7 +283,7 @@ export default {
<template #disabled> <template #disabled>
<div <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> ></div>
</template> </template>
...@@ -300,7 +302,7 @@ export default { ...@@ -300,7 +302,7 @@ export default {
/> />
<div <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 <gl-button
variant="link" variant="link"
...@@ -325,7 +327,7 @@ export default { ...@@ -325,7 +327,7 @@ export default {
<template #disabled> <template #disabled>
<div <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> ></div>
</template> </template>
...@@ -344,7 +346,7 @@ export default { ...@@ -344,7 +346,7 @@ export default {
<section <section
v-if="shouldShowRuleEditor" 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"> <dim-disable-container data-testid="policy-preview-container" :disabled="hasParsingError">
<template #title> <template #title>
...@@ -352,10 +354,7 @@ export default { ...@@ -352,10 +354,7 @@ export default {
</template> </template>
<template #disabled> <template #disabled>
<policy-preview <policy-preview :policy-yaml="s__('NetworkPolicies|Unable to parse policy')" />
:policy-yaml="s__('NetworkPolicies|Unable to parse policy')"
policy-description=""
/>
</template> </template>
<policy-preview :policy-yaml="policyYaml" :policy-description="humanizedPolicy" /> <policy-preview :policy-yaml="policyYaml" :policy-description="humanizedPolicy" />
......
ee/app/assets/stylesheets/pages/threat_management.scss
View file @ a7ae8b4d
...@@ -11,5 +11,5 @@ ...@@ -11,5 +11,5 @@
} }
.policy-editor .policy-table-left { .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: ...@@ -72,11 +72,11 @@ spec:
}; };
const findRuleEditor = () => wrapper.findByTestId('rule-editor'); const findRuleEditor = () => wrapper.findByTestId('rule-editor');
const findPreview = () => wrapper.find(PolicyPreview); const findPreview = () => wrapper.findComponent(PolicyPreview);
const findAddRuleButton = () => wrapper.findByTestId('add-rule'); const findAddRuleButton = () => wrapper.findByTestId('add-rule');
const findYAMLParsingAlert = () => wrapper.findByTestId('parsing-alert'); const findYAMLParsingAlert = () => wrapper.findByTestId('parsing-alert');
const findNetworkPolicyEditor = () => wrapper.findByTestId('network-policy-editor'); const findNetworkPolicyEditor = () => wrapper.findByTestId('network-policy-editor');
const findPolicyAlertPicker = () => wrapper.find(PolicyAlertPicker); const findPolicyAlertPicker = () => wrapper.findComponent(PolicyAlertPicker);
const findPolicyDescription = () => wrapper.find("[id='policyDescription']"); const findPolicyDescription = () => wrapper.find("[id='policyDescription']");
const findPolicyEnableContainer = () => wrapper.findByTestId('policy-enable'); const findPolicyEnableContainer = () => wrapper.findByTestId('policy-enable');
const findPolicyName = () => wrapper.find("[id='policyName']"); const findPolicyName = () => wrapper.find("[id='policyName']");
...@@ -103,12 +103,10 @@ spec: ...@@ -103,12 +103,10 @@ spec:
wrapper = null; wrapper = null;
}); });
it('renders the policy editor layout', () => {
expect(wrapper.find('section').element).toMatchSnapshot();
});
it('renders toggle with label', () => { 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', () => { it('renders a default rule with label', () => {
...@@ -119,20 +117,19 @@ spec: ...@@ -119,20 +117,19 @@ spec:
}); });
}); });
it('renders the policy alert picker', () => { it.each`
expect(findPolicyAlertPicker().exists()).toBe(true); component | status | findComponent | state
}); ${'policy alert picker'} | ${'does display'} | ${findPolicyAlertPicker} | ${true}
${'editor mode toggle'} | ${'does display'} | ${findEditorModeToggle} | ${true}
it('does not render yaml editor', () => { ${'policy name input'} | ${'does display'} | ${findPolicyName} | ${true}
expect(findNetworkPolicyEditor().exists()).toBe(false); ${'rule editor'} | ${'does display'} | ${findRuleEditor} | ${true}
}); ${'add rule button'} | ${'does display'} | ${findAddRuleButton} | ${true}
${'policy preview'} | ${'does display'} | ${findPreview} | ${true}
it('does not render parsing error alert', () => { ${'yaml editor'} | ${'does not display'} | ${findNetworkPolicyEditor} | ${false}
expect(findYAMLParsingAlert().exists()).toBe(false); ${'parsing error alert'} | ${'does not display'} | ${findYAMLParsingAlert} | ${false}
}); ${'delete button'} | ${'does not display'} | ${findDeletePolicy} | ${false}
`('$status the $component', async ({ findComponent, state }) => {
it('does not render delete button', () => { expect(findComponent().exists()).toBe(state);
expect(findDeletePolicy().exists()).toBe(false);
}); });
describe('given .yaml editor mode is enabled', () => { describe('given .yaml editor mode is enabled', () => {
...@@ -144,13 +141,13 @@ spec: ...@@ -144,13 +141,13 @@ spec:
}); });
}); });
it('does not render rule editor', () => { it.each`
expect(findRuleEditor().exists()).toBe(false); component | status | findComponent | state
}); ${'editor mode toggle'} | ${'does display'} | ${findEditorModeToggle} | ${true}
${'rule editor'} | ${'does not display'} | ${findRuleEditor} | ${false}
it('renders yaml editor', () => { ${'yaml editor'} | ${'does display'} | ${findNetworkPolicyEditor} | ${true}
const editor = findNetworkPolicyEditor(); `('$status the $component', async ({ findComponent, state }) => {
expect(editor.exists()).toBe(true); expect(findComponent().exists()).toBe(state);
}); });
it('updates policy on yaml editor value change', async () => { it('updates policy on yaml editor value change', async () => {
...@@ -416,7 +413,7 @@ spec: ...@@ -416,7 +413,7 @@ spec:
}); });
it('removes policy and redirects to a threat monitoring path on secondary modal button click', async () => { 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(); await wrapper.vm.$nextTick();
expect(store.dispatch).toHaveBeenCalledWith('networkPolicies/deletePolicy', { 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