Commit f42183fd authored by Denys Mishunov's avatar Denys Mishunov Committed by Alexander Turinske

Switching the custom editor to Source Editor

Instead of a custom Monaco implementation we
switch to the unified Source Editor
parent f7648c58
---
title: 'Policy Editor: switching the custom editor to Source Editor'
merge_request: 57508
author:
type: changed
<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,38 @@ 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,
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: {
notifyAboutUpdates(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="notifyAboutUpdates"
/>
</template>
......@@ -365,15 +365,13 @@ export default {
>
{{ s__('NetworkPolicies|YAML editor') }}
</h5>
<div class="gl-p-4">
<network-policy-editor
data-testid="network-policy-editor"
:value="yamlEditorValue"
:height="400"
:read-only="false"
@input="loadYaml"
/>
</div>
<network-policy-editor
data-testid="network-policy-editor"
:value="yamlEditorValue"
:height="400"
:read-only="false"
@input="loadYaml"
/>
</div>
</div>
</div>
......
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;
......@@ -10,6 +11,9 @@ describe('NetworkPolicyEditor component', () => {
value: 'foo',
...propsData,
},
stubs: {
EditorLite,
},
});
};
......@@ -23,22 +27,19 @@ describe('NetworkPolicyEditor component', () => {
});
it('renders container element', () => {
expect(wrapper.find({ ref: 'editor' }).exists()).toBe(true);
expect(wrapper.findComponent(EditorLite).exists()).toBe(true);
});
it('initializes monaco editor with yaml language and provided value', () => {
const {
vm: { editor },
} = wrapper;
expect(editor).not.toBe(null);
const editor = wrapper.findComponent(EditorLite).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 = wrapper.findComponent(EditorLite);
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']);
});
});
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