Switching the custom editor to Source Editor

Instead of a custom Monaco implementation we
switch to the unified Source Editor

changelogs/unreleased/threat-monitoring-policy-editor-source-editor.yml

+---
+title: 'Policy Editor: switching the custom editor to Source Editor'
+merge_request: 57508
+author:
+type: changed

ee/app/assets/javascripts/threat_monitoring/components/network_policy_editor.vue

 <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>

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_editor.vue

@@ -365,7 +365,6 @@ export default {
           >
             {{ s__('NetworkPolicies|YAML editor') }}
           </h5>
-          <div class="gl-p-4">
           <network-policy-editor
             data-testid="network-policy-editor"
             :value="yamlEditorValue"
@@ -376,7 +375,6 @@ export default {
         </div>
       </div>
     </div>
-    </div>
     <hr />
     <div class="row">
       <div class="col-md-auto">

ee/spec/frontend/threat_monitoring/components/network_policy_editor_spec.js

 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']);
   });
 });