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

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

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

@@ -369,7 +369,6 @@ export default {
             <network-policy-editor
               data-testid="network-policy-editor"
               :value="yamlEditorValue"
-              :height="400"
               :read-only="false"
               @input="loadYaml"
             />

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

ee/spec/frontend/threat_monitoring/components/policy_editor/__snapshots__/policy_editor_spec.js.snap

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