Clean up network-policy-editor

- fix styling
- make tests more concise
- move changelog

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

@@ -22,6 +22,7 @@ export default {
         lineNumbers: 'off',
         minimap: { enabled: false },
         folding: false,
+        glyphMargin: false,
         renderIndentGuides: false,
         renderWhitespace: 'boundary',
         renderLineHighlight: 'none',

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

@@ -365,16 +365,17 @@ 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>
         </div>
       </div>
+    </div>
     <hr />
     <div class="row">
       <div class="col-md-auto">

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

@@ -5,6 +5,8 @@ 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: {
@@ -27,17 +29,18 @@ describe('NetworkPolicyEditor component', () => {
   });
 
   it('renders container element', () => {
-    expect(wrapper.findComponent(EditorLite).exists()).toBe(true);
+    expect(findEditor().exists()).toBe(true);
   });
 
   it('initializes monaco editor with yaml language and provided value', () => {
-    const editor = wrapper.findComponent(EditorLite).vm.getEditor();
+    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 editor's input", async () => {
-    const editor = wrapper.findComponent(EditorLite);
+    const editor = findEditor();
     editor.vm.$emit('input');
     await wrapper.vm.$nextTick();
     expect(wrapper.emitted().input).toBeTruthy();

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>