Asyncronously import network policy editor comp

- the network policy editor component contains
  a heavy library called monaco
- async load the component to improve performance

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

@@ -14,7 +14,6 @@ import { getTimeago } from '~/lib/utils/datetime_utility';
 import { setUrlFragment, mergeUrlParams } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import EnvironmentPicker from './environment_picker.vue';
-import NetworkPolicyEditor from './network_policy_editor.vue';
 import { CiliumNetworkPolicyKind } from './policy_editor/constants';
 import PolicyDrawer from './policy_editor/policy_drawer.vue';
 
@@ -32,7 +31,8 @@ export default {
     GlLink,
     GlToggle,
     EnvironmentPicker,
-    NetworkPolicyEditor,
+    NetworkPolicyEditor: () =>
+      import(/* webpackChunkName: 'network_policy_editor' */ './network_policy_editor.vue'),
     PolicyDrawer,
   },
   props: {

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

@@ -16,7 +16,6 @@ import { redirectTo } from '~/lib/utils/url_utility';
 import { s__, __, sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import EnvironmentPicker from '../environment_picker.vue';
-import NetworkPolicyEditor from '../network_policy_editor.vue';
 import {
   EditorModeRule,
   EditorModeYAML,
@@ -49,7 +48,8 @@ export default {
     GlAlert,
     GlModal,
     EnvironmentPicker,
-    NetworkPolicyEditor,
+    NetworkPolicyEditor: () =>
+      import(/* webpackChunkName: 'network_policy_editor' */ '../network_policy_editor.vue'),
     PolicyRuleBuilder,
     PolicyPreview,
     PolicyActionPicker,
@@ -367,6 +367,7 @@ export default {
           </h5>
           <div class="gl-p-4">
             <network-policy-editor
+              data-testid="network-policy-editor"
               :value="yamlEditorValue"
               :height="400"
               :read-only="false"

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

@@ -32,6 +32,7 @@ describe('NetworkPolicyList component', () => {
       data,
       store,
       provide,
+      stubs: { NetworkPolicyEditor: true },
     });
   };
 
@@ -171,7 +172,7 @@ spec:
     it('renders network policy editor with manifest', () => {
       const policyEditor = findPolicyEditor();
       expect(policyEditor.exists()).toBe(true);
-      expect(policyEditor.props('value')).toBe(mockData[0].manifest);
+      expect(policyEditor.attributes('value')).toBe(mockData[0].manifest);
     });
 
     it('renders network policy toggle', () => {

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

@@ -22,7 +22,8 @@ exports[`PolicyEditorApp component given .yaml editor mode is enabled renders ya
       <div
         class="gl-p-4"
       >
-        <network-policy-editor-stub
+        <networkpolicyeditor-stub
+          data-testid="network-policy-editor"
           height="400"
           value=""
         />

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

 import { GlModal, GlToggle } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import NetworkPolicyEditor from 'ee/threat_monitoring/components/network_policy_editor.vue';
 import {
   RuleDirectionInbound,
   PortMatchModeAny,
@@ -66,6 +65,7 @@ spec:
       },
       store,
       data,
+      stubs: { NetworkPolicyEditor: true },
     });
   };
 
@@ -74,7 +74,7 @@ spec:
   const findPreview = () => wrapper.find(PolicyPreview);
   const findAddRuleButton = () => wrapper.find('[data-testid="add-rule"]');
   const findYAMLParsingAlert = () => wrapper.find('[data-testid="parsing-alert"]');
-  const findNetworkPolicyEditor = () => wrapper.find(NetworkPolicyEditor);
+  const findNetworkPolicyEditor = () => wrapper.find('[data-testid="network-policy-editor"]');
   const findPolicyAlertPicker = () => wrapper.find(PolicyAlertPicker);
   const findPolicyName = () => wrapper.find("[id='policyName']");
   const findSavePolicy = () => wrapper.find("[data-testid='save-policy']");
@@ -259,7 +259,7 @@ spec:
 
     const editor = findNetworkPolicyEditor();
     expect(editor.exists()).toBe(true);
-    expect(fromYaml(editor.props('value'))).toMatchObject({
+    expect(fromYaml(editor.attributes('value'))).toMatchObject({
       name: 'test-policy',
     });
   });
@@ -296,7 +296,7 @@ spec:
 
       const editor = findNetworkPolicyEditor();
       expect(editor.exists()).toBe(true);
-      expect(editor.props('value')).toEqual('');
+      expect(editor.attributes('value')).toEqual('');
     });
   });