Commit 8ada13ae authored by Miguel Rincon's avatar Miguel Rincon

Merge branch 'threat-monitoring-policy-editor-source-editor' into 'master'

Policy Editor: switching the custom editor to Source Editor

See merge request gitlab-org/gitlab!57508
parents daa6dab5 350fd251
<script>
import { editor as monacoEditor } from 'monaco-editor';
import EditorLite from '~/vue_shared/components/editor_lite.vue';
export default {
components: {
EditorLite,
},
props: {
value: {
type: String,
......@@ -12,56 +15,35 @@ export default {
required: false,
default: true,
},
height: {
type: Number,
required: false,
default: 300,
},
},
data() {
return { editor: null };
},
watch: {
value(val) {
if (val === this.editor.getValue()) return;
this.editor.setValue(val);
},
},
beforeDestroy() {
this.editor.dispose();
},
mounted() {
if (!this.editor) {
this.setupEditor();
}
},
methods: {
setupEditor() {
this.editor = monacoEditor.create(this.$refs.editor, {
value: this.value,
language: 'yaml',
computed: {
editorOptions() {
return {
lineNumbers: 'off',
minimap: { enabled: false },
folding: false,
// Investigate the necessity of `glyphMargin` with #326746
glyphMargin: false,
renderIndentGuides: false,
renderWhitespace: 'boundary',
renderLineHighlight: 'none',
glyphMargin: false,
lineDecorationsWidth: 0,
lineNumbersMinChars: 0,
occurrencesHighlight: false,
hideCursorInOverviewRuler: true,
overviewRulerBorder: false,
readOnly: this.readOnly,
});
this.editor.onDidChangeModelContent(() => {
this.$emit('input', this.editor.getValue());
});
};
},
},
methods: {
onInput(val) {
this.$emit('input', val);
},
},
};
</script>
<template>
<div ref="editor" class="gl-overflow-hidden" :style="{ height: `${height}px` }"></div>
<editor-lite :value="value" file-name="*.yaml" :editor-options="editorOptions" @input="onInput" />
</template>
......@@ -369,7 +369,6 @@ export default {
<network-policy-editor
data-testid="network-policy-editor"
:value="yamlEditorValue"
:height="400"
:read-only="false"
@input="loadYaml"
/>
......
---
title: 'Policy Editor: switching the custom editor to Source Editor'
merge_request: 57508
author:
type: changed
import { shallowMount } from '@vue/test-utils';
import NetworkPolicyEditor from 'ee/threat_monitoring/components/network_policy_editor.vue';
import EditorLite from '~/vue_shared/components/editor_lite.vue';
describe('NetworkPolicyEditor component', () => {
let wrapper;
const findEditor = () => wrapper.findComponent(EditorLite);
const factory = ({ propsData } = {}) => {
wrapper = shallowMount(NetworkPolicyEditor, {
propsData: {
value: 'foo',
...propsData,
},
stubs: {
EditorLite,
},
});
};
......@@ -23,22 +29,20 @@ describe('NetworkPolicyEditor component', () => {
});
it('renders container element', () => {
expect(wrapper.find({ ref: 'editor' }).exists()).toBe(true);
expect(findEditor().exists()).toBe(true);
});
it('initializes monaco editor with yaml language and provided value', () => {
const {
vm: { editor },
} = wrapper;
expect(editor).not.toBe(null);
const editorComponent = findEditor();
expect(editorComponent.props('value')).toBe('foo');
const editor = editorComponent.vm.getEditor();
expect(editor.getModel().getModeId()).toBe('yaml');
expect(editor.getValue()).toBe('foo');
});
it('emits input event on file changes', () => {
wrapper.vm.editor.setValue('bar');
it("emits input event on editor's input", async () => {
const editor = findEditor();
editor.vm.$emit('input');
await wrapper.vm.$nextTick();
expect(wrapper.emitted().input).toBeTruthy();
expect(wrapper.emitted().input.length).toBe(1);
expect(wrapper.emitted().input[0]).toEqual(['bar']);
});
});
......@@ -24,7 +24,6 @@ exports[`PolicyEditorApp component given .yaml editor mode is enabled renders ya
>
<networkpolicyeditor-stub
data-testid="network-policy-editor"
height="400"
value=""
/>
</div>
......
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