Merge branch '273787-generalize-policy-editor' into 'master'

Refactor network policy editor to be more generic

See merge request gitlab-org/gitlab!63341

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/cilium_network_policy.vue

 <script>
 import { __ } from '~/locale';
-import fromYaml, { removeUnnecessaryDashes } from '../policy_editor/lib/from_yaml';
-import humanizeNetworkPolicy from '../policy_editor/lib/humanize';
+import {
+  fromYaml,
+  humanizeNetworkPolicy,
+  removeUnnecessaryDashes,
+} from '../policy_editor/network_policy/lib';
 import PolicyPreview from '../policy_editor/policy_preview.vue';
 
 export default {

ee/app/assets/javascripts/threat_monitoring/components/policy_drawer/network_policy_drawer.vue

 <script>
 import { GlButton, GlDrawer } from '@gitlab/ui';
 import { getContentWrapperHeight } from '../../utils';
-import { CiliumNetworkPolicyKind } from '../policy_editor/constants';
+import { CiliumNetworkPolicyKind } from '../policy_editor/network_policy/lib';
 import CiliumNetworkPolicy from './cilium_network_policy.vue';
 
 export default {
   components: {
     GlButton,
     GlDrawer,
-    NetworkPolicyEditor: () =>
-      import(/* webpackChunkName: 'network_policy_editor' */ '../network_policy_editor.vue'),
+    PolicyYamlEditor: () =>
+      import(/* webpackChunkName: 'policy_yaml_editor' */ '../policy_yaml_editor.vue'),
     CiliumNetworkPolicy,
   },
   props: {
@@ -70,9 +70,9 @@ export default {
           {{ s__("NetworkPolicies|Define this policy's location, conditions and actions.") }}
         </p>
         <div class="gl-p-3 gl-bg-gray-50">
-          <network-policy-editor
+          <policy-yaml-editor
             :value="policy.manifest"
-            data-testid="policyEditor"
+            data-testid="policy-yaml-editor"
             class="network-policy-editor"
           />
         </div>

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/constants.js

@@ -3,41 +3,14 @@ import { s__ } from '~/locale';
 export const EditorModeRule = 'rule';
 export const EditorModeYAML = 'yaml';
 
-export const RuleTypeNetwork = 'network';
-
-export const RuleActionTypeAllow = 'allow';
-
-export const RuleDirectionInbound = 'ingress';
-export const RuleDirectionOutbound = 'egress';
-
-export const EndpointMatchModeAny = 'any';
-export const EndpointMatchModeLabel = 'label';
-
-export const RuleTypeEndpoint = 'NetworkPolicyRuleEndpoint';
-export const RuleTypeEntity = 'NetworkPolicyRuleEntity';
-export const RuleTypeCIDR = 'NetworkPolicyRuleCIDR';
-export const RuleTypeFQDN = 'NetworkPolicyRuleFQDN';
-
-export const EntityTypes = {
-  ALL: 'all',
-  HOST: 'host',
-  REMOTE_NODE: 'remote-node',
-  CLUSTER: 'cluster',
-  INIT: 'init',
-  HEALTH: 'health',
-  UNMANAGED: 'unmanaged',
-  WORLD: 'world',
-};
-
-export const PortMatchModeAny = 'any';
-export const PortMatchModePortProtocol = 'port/protocol';
-
-export const DisabledByLabel = 'network-policy.gitlab.com/disabled_by';
-
-export const CiliumNetworkPolicyKind = 'CiliumNetworkPolicy';
-
-export const ProjectIdLabel = 'app.gitlab.com/proj';
-
 export const PARSING_ERROR_MESSAGE = s__(
   'NetworkPolicies|Rule mode is unavailable for this policy. In some cases, we cannot parse the YAML file back into the rules editor.',
 );
+
+export const POLICY_TYPES = {
+  networkPolicy: {
+    value: 'networkPolicy',
+    text: s__('NetworkPolicies|Network Policy'),
+    component: 'network-policy-editor',
+  },
+};

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/lib/constants.js

+export const RuleTypeNetwork = 'network';
+
+export const RuleActionTypeAllow = 'allow';
+
+export const RuleDirectionInbound = 'ingress';
+export const RuleDirectionOutbound = 'egress';
+
+export const EndpointMatchModeAny = 'any';
+export const EndpointMatchModeLabel = 'label';
+
+export const RuleTypeEndpoint = 'NetworkPolicyRuleEndpoint';
+export const RuleTypeEntity = 'NetworkPolicyRuleEntity';
+export const RuleTypeCIDR = 'NetworkPolicyRuleCIDR';
+export const RuleTypeFQDN = 'NetworkPolicyRuleFQDN';
+
+export const CiliumNetworkPolicyKind = 'CiliumNetworkPolicy';
+
+export const EntityTypes = {
+  ALL: 'all',
+  HOST: 'host',
+  REMOTE_NODE: 'remote-node',
+  CLUSTER: 'cluster',
+  INIT: 'init',
+  HEALTH: 'health',
+  UNMANAGED: 'unmanaged',
+  WORLD: 'world',
+};
+
+export const PortMatchModeAny = 'any';
+export const PortMatchModePortProtocol = 'port/protocol';
+
+export const DisabledByLabel = 'network-policy.gitlab.com/disabled_by';
+
+export const ProjectIdLabel = 'app.gitlab.com/proj';

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/lib/from_yaml.js → ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/lib/from_yaml.js

@@ -11,7 +11,7 @@ import {
   RuleTypeEntity,
   RuleTypeCIDR,
   RuleTypeFQDN,
-} from '../constants';
+} from './constants';
 import { buildRule } from './rules';
 
 /*

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/lib/humanize.js → ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/lib/humanize.js

@@ -6,7 +6,7 @@ import {
   RuleTypeEntity,
   RuleTypeCIDR,
   RuleTypeFQDN,
-} from '../constants';
+} from './constants';
 import { portSelectors, labelSelector, splitItems } from './utils';
 
 const strongArgs = { strongOpen: '<strong>', strongClose: '</strong>' };

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/lib/index.js

+import { EndpointMatchModeAny } from './constants';
+
+export * from './constants';
+export { default as fromYaml, removeUnnecessaryDashes } from './from_yaml';
+export { default as humanizeNetworkPolicy } from './humanize';
+export { buildRule } from './rules';
+export { default as toYaml } from './to_yaml';
+
+export const DEFAULT_NETWORK_POLICY = {
+  name: '',
+  description: '',
+  isEnabled: false,
+  endpointMatchMode: EndpointMatchModeAny,
+  endpointLabels: '',
+  annotations: '',
+  labels: '',
+};

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/lib/rules.js → ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/lib/rules.js

@@ -5,7 +5,7 @@ import {
   RuleTypeFQDN,
   RuleDirectionInbound,
   PortMatchModeAny,
-} from '../constants';
+} from './constants';
 import { portSelectors, labelSelector, splitItems } from './utils';
 
 /*

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/lib/to_yaml.js → ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/lib/to_yaml.js

 import { safeDump } from 'js-yaml';
-import { EndpointMatchModeAny, DisabledByLabel, CiliumNetworkPolicyKind } from '../constants';
+import { EndpointMatchModeAny, DisabledByLabel, CiliumNetworkPolicyKind } from './constants';
 import { ruleSpec } from './rules';
 import { labelSelector } from './utils';
 

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/lib/utils.js → ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/lib/utils.js

-import { PortMatchModeAny } from '../constants';
+import { PortMatchModeAny } from './constants';
 
 /*
  Convert space separated list of labels into a kubernetes selector.

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_rule_builder.vue → ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/policy_rule_builder.vue

@@ -13,7 +13,7 @@ import {
   RuleTypeFQDN,
   PortMatchModeAny,
   PortMatchModePortProtocol,
-} from './constants';
+} from './lib';
 import PolicyRuleCIDR from './policy_rule_cidr.vue';
 import PolicyRuleEndpoint from './policy_rule_endpoint.vue';
 import PolicyRuleEntity from './policy_rule_entity.vue';

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_rule_entity.vue → ee/app/assets/javascripts/threat_monitoring/components/policy_editor/network_policy/policy_rule_entity.vue

 <script>
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import { EntityTypes } from './constants';
+import { EntityTypes } from './lib';
 
 export default {
   components: {

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

 <script>
 import { GlForm, GlFormSelect, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import { RuleActionTypeAllow } from './constants';
+import { RuleActionTypeAllow } from './network_policy/lib';
 
 export default {
   components: {

ee/spec/frontend/threat_monitoring/components/policy_drawer/cilium_network_policy_spec.js

 import CiliumNetworkPolicy from 'ee/threat_monitoring/components/policy_drawer/cilium_network_policy.vue';
-import toYaml from 'ee/threat_monitoring/components/policy_editor/lib/to_yaml';
+import { toYaml } from 'ee/threat_monitoring/components/policy_editor/network_policy/lib';
 import PolicyPreview from 'ee/threat_monitoring/components/policy_editor/policy_preview.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 

ee/spec/frontend/threat_monitoring/components/policy_drawer/network_policy_drawer_spec.js

@@ -15,13 +15,13 @@ describe('NetworkPolicyDrawer component', () => {
         open: true,
         ...propsData,
       },
-      stubs: { NetworkPolicyEditor: true },
+      stubs: { PolicyYamlEditor: true },
     });
   };
 
   // Finders
   const findEditButton = () => wrapper.findByTestId('edit-button');
-  const findPolicyEditor = () => wrapper.findByTestId('policyEditor');
+  const findPolicyEditor = () => wrapper.findByTestId('policy-yaml-editor');
   const findCiliumNetworkPolicy = () => wrapper.findComponent(CiliumNetworkPolicy);
 
   // Shared assertions

ee/spec/frontend/threat_monitoring/components/policy_editor/lib/from_yaml_spec.js → ee/spec/frontend/threat_monitoring/components/policy_editor/network_policy/lib/from_yaml_spec.js

@@ -10,12 +10,11 @@ import {
   RuleTypeCIDR,
   RuleTypeFQDN,
   EntityTypes,
-} from 'ee/threat_monitoring/components/policy_editor/constants';
-import fromYaml, {
+  fromYaml,
   removeUnnecessaryDashes,
-} from 'ee/threat_monitoring/components/policy_editor/lib/from_yaml';
-import { buildRule } from 'ee/threat_monitoring/components/policy_editor/lib/rules';
-import toYaml from 'ee/threat_monitoring/components/policy_editor/lib/to_yaml';
+  buildRule,
+  toYaml,
+} from 'ee/threat_monitoring/components/policy_editor/network_policy/lib';
 
 describe('fromYaml', () => {
   let policy;

ee/spec/frontend/threat_monitoring/components/policy_editor/lib/humanize_spec.js → ee/spec/frontend/threat_monitoring/components/policy_editor/network_policy/lib/humanize_spec.js

@@ -6,9 +6,9 @@ import {
   RuleTypeEntity,
   RuleTypeCIDR,
   RuleTypeFQDN,
-} from 'ee/threat_monitoring/components/policy_editor/constants';
-import humanizeNetworkPolicy from 'ee/threat_monitoring/components/policy_editor/lib/humanize';
-import { buildRule } from 'ee/threat_monitoring/components/policy_editor/lib/rules';
+  humanizeNetworkPolicy,
+  buildRule,
+} from 'ee/threat_monitoring/components/policy_editor/network_policy/lib';
 
 describe('humanizeNetworkPolicy', () => {
   let policy;

ee/spec/frontend/threat_monitoring/components/policy_editor/lib/rules_spec.js → ee/spec/frontend/threat_monitoring/components/policy_editor/network_policy/lib/rules_spec.js

@@ -8,8 +8,9 @@ import {
   PortMatchModeAny,
   PortMatchModePortProtocol,
   EntityTypes,
-} from 'ee/threat_monitoring/components/policy_editor/constants';
-import { buildRule, ruleSpec } from 'ee/threat_monitoring/components/policy_editor/lib/rules';
+  buildRule,
+} from 'ee/threat_monitoring/components/policy_editor/network_policy/lib';
+import { ruleSpec } from 'ee/threat_monitoring/components/policy_editor/network_policy/lib/rules';
 
 describe('buildRule', () => {
   const oldRule = {

ee/spec/frontend/threat_monitoring/components/policy_editor/lib/to_yaml_spec.js → ee/spec/frontend/threat_monitoring/components/policy_editor/network_policy/lib/to_yaml_spec.js

-import { EndpointMatchModeLabel } from 'ee/threat_monitoring/components/policy_editor/constants';
-import { buildRule } from 'ee/threat_monitoring/components/policy_editor/lib/rules';
-import toYaml from 'ee/threat_monitoring/components/policy_editor/lib/to_yaml';
+import {
+  EndpointMatchModeLabel,
+  buildRule,
+  toYaml,
+} from 'ee/threat_monitoring/components/policy_editor/network_policy/lib';
 
 describe('toYaml', () => {
   let policy;

ee/spec/frontend/threat_monitoring/components/policy_editor/lib/utils_spec.js → ee/spec/frontend/threat_monitoring/components/policy_editor/network_policy/lib/utils_spec.js

 import {
   PortMatchModeAny,
   PortMatchModePortProtocol,
-} from 'ee/threat_monitoring/components/policy_editor/constants';
+} from 'ee/threat_monitoring/components/policy_editor/network_policy/lib';
 import {
   labelSelector,
   portSelectors,
   splitItems,
-} from 'ee/threat_monitoring/components/policy_editor/lib/utils';
+} from 'ee/threat_monitoring/components/policy_editor/network_policy/lib/utils';
 
 describe('labelSelector', () => {
   it('returns selector map', () => {

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_rule_builder_spec.js → ee/spec/frontend/threat_monitoring/components/policy_editor/network_policy/policy_rule_builder_spec.js

@@ -7,13 +7,13 @@ import {
   RuleTypeCIDR,
   RuleTypeFQDN,
   PortMatchModePortProtocol,
-} from 'ee/threat_monitoring/components/policy_editor/constants';
-import { buildRule } from 'ee/threat_monitoring/components/policy_editor/lib/rules';
-import PolicyRuleBuilder from 'ee/threat_monitoring/components/policy_editor/policy_rule_builder.vue';
-import PolicyRuleCIDR from 'ee/threat_monitoring/components/policy_editor/policy_rule_cidr.vue';
-import PolicyRuleEndpoint from 'ee/threat_monitoring/components/policy_editor/policy_rule_endpoint.vue';
-import PolicyRuleEntity from 'ee/threat_monitoring/components/policy_editor/policy_rule_entity.vue';
-import PolicyRuleFQDN from 'ee/threat_monitoring/components/policy_editor/policy_rule_fqdn.vue';
+  buildRule,
+} from 'ee/threat_monitoring/components/policy_editor/network_policy/lib';
+import PolicyRuleBuilder from 'ee/threat_monitoring/components/policy_editor/network_policy/policy_rule_builder.vue';
+import PolicyRuleCIDR from 'ee/threat_monitoring/components/policy_editor/network_policy/policy_rule_cidr.vue';
+import PolicyRuleEndpoint from 'ee/threat_monitoring/components/policy_editor/network_policy/policy_rule_endpoint.vue';
+import PolicyRuleEntity from 'ee/threat_monitoring/components/policy_editor/network_policy/policy_rule_entity.vue';
+import PolicyRuleFQDN from 'ee/threat_monitoring/components/policy_editor/network_policy/policy_rule_fqdn.vue';
 
 describe('PolicyRuleBuilder component', () => {
   let wrapper;

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_rule_entity_spec.js → ee/spec/frontend/threat_monitoring/components/policy_editor/network_policy/policy_rule_entity_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { EntityTypes } from 'ee/threat_monitoring/components/policy_editor/constants';
-import PolicyRuleEntity from 'ee/threat_monitoring/components/policy_editor/policy_rule_entity.vue';
+import { EntityTypes } from 'ee/threat_monitoring/components/policy_editor/network_policy/lib';
+import PolicyRuleEntity from 'ee/threat_monitoring/components/policy_editor/network_policy/policy_rule_entity.vue';
 
 describe('PolicyRuleEntity component', () => {
   let wrapper;

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

 import { shallowMount } from '@vue/test-utils';
-import NetworkPolicyEditor from 'ee/threat_monitoring/components/network_policy_editor.vue';
+import PolicyYamlEditor from 'ee/threat_monitoring/components/policy_yaml_editor.vue';
 import EditorLite from '~/vue_shared/components/editor_lite.vue';
 
-describe('NetworkPolicyEditor component', () => {
+describe('PolicyYamlEditor component', () => {
   let wrapper;
 
   const findEditor = () => wrapper.findComponent(EditorLite);
 
   const factory = ({ propsData } = {}) => {
-    wrapper = shallowMount(NetworkPolicyEditor, {
+    wrapper = shallowMount(PolicyYamlEditor, {
       propsData: {
         value: 'foo',
         ...propsData,