Implement creation flow in policy editor

This commit implements policy editor integration with an API endpoint
through the existing vuex action.

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

@@ -3,6 +3,8 @@ export const EditorModeYAML = 'yaml';
 
 export const RuleTypeNetwork = 'network';
 
+export const RuleActionTypeAllow = 'allow';
+
 export const RuleDirectionInbound = 'ingress';
 export const RuleDirectionOutbound = 'egress';
 

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

 <script>
-export default {};
+import { GlForm, GlFormSelect, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { RuleActionTypeAllow } from './constants';
+
+export default {
+  components: {
+    GlForm,
+    GlFormSelect,
+    GlSprintf,
+  },
+  data() {
+    return { actionType: RuleActionTypeAllow };
+  },
+  actionTypes: [{ value: RuleActionTypeAllow, text: s__('NetworkPolicies|Allow') }],
+};
 </script>
 
 <template>
-  <div class="gl-bg-gray-100 p-2"></div>
+  <div
+    class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-px-5 gl-pt-5"
+  >
+    <gl-form inline>
+      <gl-sprintf
+        :message="
+          s__(
+            'NetworkPolicies|%{labelStart}Then%{labelEnd} %{action} %{spanStart}the network traffic.%{spanEnd}',
+          )
+        "
+      >
+        <template #label="{ content }">
+          <label for="actionType" class="text-uppercase gl-font-lg gl-mr-4 gl-mb-5!">{{
+            content
+          }}</label>
+        </template>
+
+        <template #action>
+          <gl-form-select
+            id="actionType"
+            class="gl-mr-4 gl-mb-5!"
+            :value="actionType"
+            :options="$options.actionTypes"
+          />
+        </template>
+
+        <template #span="{ content }">
+          <span class="gl-mb-5">{{ content }}</span>
+        </template>
+      </gl-sprintf>
+    </gl-form>
+  </div>
 </template>

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

 <script>
-import { mapActions } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import {
   GlFormGroup,
   GlFormSelect,
@@ -11,6 +11,7 @@ import {
   GlAlert,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { redirectTo } from '~/lib/utils/url_utility';
 import EnvironmentPicker from '../environment_picker.vue';
 import NetworkPolicyEditor from '../network_policy_editor.vue';
 import PolicyRuleBuilder from './policy_rule_builder.vue';
@@ -43,6 +44,12 @@ export default {
     PolicyPreview,
     PolicyActionPicker,
   },
+  props: {
+    threatMonitoringPath: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       editorMode: EditorModeRule,
@@ -65,6 +72,8 @@ export default {
     policyYaml() {
       return toYaml(this.policy);
     },
+    ...mapState('threatMonitoring', ['currentEnvironmentId']),
+    ...mapState('networkPolicies', ['errorUpdatingPolicy']),
     shouldShowRuleEditor() {
       return this.editorMode === EditorModeRule;
     },
@@ -80,6 +89,7 @@ export default {
   },
   methods: {
     ...mapActions('threatMonitoring', ['fetchEnvironments']),
+    ...mapActions('networkPolicies', ['createPolicy']),
     addRule() {
       this.policy.rules.push(buildRule(RuleTypeEndpoint));
     },
@@ -110,6 +120,15 @@ export default {
 
       this.editorMode = mode;
     },
+    savePolicy() {
+      const policy = { manifest: toYaml(this.policy) };
+      return this.createPolicy({
+        environmentId: this.currentEnvironmentId,
+        policy,
+      }).then(() => {
+        if (!this.errorUpdatingPolicy) redirectTo(this.threatMonitoringPath);
+      });
+    },
   },
   policyTypes: [{ value: 'networkPolicy', text: s__('NetworkPolicies|Network Policy') }],
   editorModes: [
@@ -197,7 +216,7 @@ export default {
           @endpoint-labels-change="updateEndpointLabels"
         />
 
-        <div class="gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100">
+        <div class="gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-mb-5">
           <gl-button
             variant="link"
             category="primary"
@@ -209,6 +228,7 @@ export default {
         </div>
 
         <h4>{{ s__('NetworkPolicies|Actions') }}</h4>
+        <p>{{ s__('NetworkPolicies|Traffic that does not match any rule will be blocked.') }}</p>
         <policy-action-picker />
       </div>
       <div class="col-sm-12 col-md-6 col-lg-5 col-xl-4">
@@ -238,10 +258,17 @@ export default {
     <hr />
     <div class="row">
       <div class="col-md-auto">
-        <gl-button type="submit" category="primary" variant="success">{{
-          s__('NetworkPolicies|Create policy')
+        <gl-button
+          type="submit"
+          category="primary"
+          variant="success"
+          data-testid="create-policy"
+          @click="savePolicy"
+          >{{ s__('NetworkPolicies|Create policy') }}</gl-button
+        >
+        <gl-button category="secondary" variant="default" :href="threatMonitoringPath">{{
+          __('Cancel')
         }}</gl-button>
-        <gl-button category="secondary" variant="default">{{ __('Cancel') }}</gl-button>
       </div>
     </div>
   </section>

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

@@ -133,7 +133,7 @@ export default {
   <div
     class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base px-3 pt-3"
   >
-    <gl-form inline>
+    <gl-form inline @submit.prevent>
       <gl-sprintf :message="sprintfTemplate">
         <template #ifLabel="{ content }">
           <label for="ruleType" class="text-uppercase gl-font-lg gl-mr-4 gl-mb-5!">{{

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

@@ -4,7 +4,7 @@ import createStore from './store';
 
 export default () => {
   const el = document.querySelector('#js-policy-builder-app');
-  const { environmentsEndpoint, networkPoliciesEndpoint } = el.dataset;
+  const { environmentsEndpoint, networkPoliciesEndpoint, threatMonitoringPath } = el.dataset;
 
   const store = createStore();
   store.dispatch('threatMonitoring/setEndpoints', {
@@ -18,7 +18,9 @@ export default () => {
     el,
     store,
     render(createElement) {
-      return createElement(PolicyEditorApp, {});
+      return createElement(PolicyEditorApp, {
+        props: { threatMonitoringPath },
+      });
     },
   });
 };

ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/mutations.js

@@ -12,6 +12,7 @@ export default {
     state.environments = payload;
     state.isLoadingEnvironments = false;
     state.errorLoadingEnvironments = false;
+    if (payload.length > 0) state.currentEnvironmentId = payload[0].id;
   },
   [types.RECEIVE_ENVIRONMENTS_ERROR](state) {
     state.isLoadingEnvironments = false;

ee/app/views/projects/threat_monitoring/new.html.haml

@@ -4,4 +4,5 @@
 
 #js-policy-builder-app{ data: { network_policies_endpoint: project_security_network_policies_path(@project),
   environments_endpoint: project_environments_path(@project),
+  threat_monitoring_path: project_threat_monitoring_path(@project),
 } }

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PolicyActionPicker component renders policy action picker 1`] = `
+<div
+  class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-px-5 gl-pt-5"
+>
+  <gl-form-stub
+    inline=""
+  >
+    <gl-sprintf-stub
+      message="%{labelStart}Then%{labelEnd} %{action} %{spanStart}the network traffic.%{spanEnd}"
+    />
+  </gl-form-stub>
+</div>
+`;

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

@@ -158,7 +158,7 @@ exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
       </h4>
         
       <div
-        class="gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100"
+        class="gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-mb-5"
       >
         <gl-button-stub
           category="primary"
@@ -175,6 +175,10 @@ exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
         Actions
       </h4>
        
+      <p>
+        Traffic that does not match any rule will be blocked.
+      </p>
+       
       <policy-action-picker-stub />
     </div>
      
@@ -212,6 +216,7 @@ spec:
     >
       <gl-button-stub
         category="primary"
+        data-testid="create-policy"
         icon=""
         size="medium"
         type="submit"
@@ -222,6 +227,7 @@ spec:
        
       <gl-button-stub
         category="secondary"
+        href="/threat-monitoring"
         icon=""
         size="medium"
         variant="default"

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

+import { shallowMount } from '@vue/test-utils';
+import PolicyActionPicker from 'ee/threat_monitoring/components/policy_editor/policy_action_picker.vue';
+
+describe('PolicyActionPicker component', () => {
+  let wrapper;
+
+  const factory = ({ propsData } = {}) => {
+    wrapper = shallowMount(PolicyActionPicker, {
+      propsData: {
+        ...propsData,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    factory();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders policy action picker', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

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

@@ -12,6 +12,10 @@ import {
   EndpointMatchModeLabel,
 } from 'ee/threat_monitoring/components/policy_editor/constants';
 import fromYaml from 'ee/threat_monitoring/components/policy_editor/lib/from_yaml';
+import toYaml from 'ee/threat_monitoring/components/policy_editor/lib/to_yaml';
+import { redirectTo } from '~/lib/utils/url_utility';
+
+jest.mock('~/lib/utils/url_utility');
 
 describe('PolicyEditorApp component', () => {
   let store;
@@ -22,9 +26,15 @@ describe('PolicyEditorApp component', () => {
     Object.assign(store.state.threatMonitoring, {
       ...state,
     });
+    Object.assign(store.state.networkPolicies, {
+      ...state,
+    });
+
+    jest.spyOn(store, 'dispatch').mockImplementation(() => Promise.resolve());
 
     wrapper = shallowMount(PolicyEditorApp, {
       propsData: {
+        threatMonitoringPath: '/threat-monitoring',
         ...propsData,
       },
       store,
@@ -45,7 +55,6 @@ describe('PolicyEditorApp component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('renders the policy editor layout', () => {
@@ -188,4 +197,32 @@ spec:
       expect(findAddRuleButton().props('disabled')).toBe(true);
     });
   });
+
+  it('creates policy and redirects to a threat monitoring path', async () => {
+    wrapper.find("[data-testid='create-policy']").vm.$emit('click');
+
+    await wrapper.vm.$nextTick();
+    expect(store.dispatch).toHaveBeenCalledWith('networkPolicies/createPolicy', {
+      environmentId: -1,
+      policy: { manifest: toYaml(wrapper.vm.policy) },
+    });
+    expect(redirectTo).toHaveBeenCalledWith('/threat-monitoring');
+  });
+
+  describe('given there is a createPolicy error', () => {
+    beforeEach(() => {
+      factory({
+        state: {
+          errorUpdatingPolicy: true,
+        },
+      });
+    });
+
+    it('it does not redirect', async () => {
+      wrapper.find("[data-testid='create-policy']").vm.$emit('click');
+
+      await wrapper.vm.$nextTick();
+      expect(redirectTo).not.toHaveBeenCalledWith('/threat-monitoring');
+    });
+  });
 });

ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/mutations_spec.js

@@ -48,6 +48,10 @@ describe('Threat Monitoring mutations', () => {
     it('sets errorLoadingEnvironments to false', () => {
       expect(state.errorLoadingEnvironments).toBe(false);
     });
+
+    it('sets currentEnvironmentId to 1', () => {
+      expect(state.currentEnvironmentId).toEqual(1);
+    });
   });
 
   describe(types.RECEIVE_ENVIRONMENTS_ERROR, () => {

locale/gitlab.pot

@@ -16167,6 +16167,9 @@ msgstr ""
 msgid "NetworkPolicies|%{ifLabelStart}if%{ifLabelEnd} %{ruleType} %{isLabelStart}is%{isLabelEnd} %{ruleDirection} %{ruleSelector} %{directionLabelStart}and is outbound to a%{directionLabelEnd} %{rule} %{portsLabelStart}on%{portsLabelEnd} %{ports}"
 msgstr ""
 
+msgid "NetworkPolicies|%{labelStart}Then%{labelEnd} %{action} %{spanStart}the network traffic.%{spanEnd}"
+msgstr ""
+
 msgid "NetworkPolicies|%{number} selected"
 msgstr ""
 
@@ -16188,6 +16191,9 @@ msgstr ""
 msgid "NetworkPolicies|All selected"
 msgstr ""
 
+msgid "NetworkPolicies|Allow"
+msgstr ""
+
 msgid "NetworkPolicies|Allow all inbound traffic to %{selector} from %{ruleSelector} on %{ports}"
 msgstr ""
 
@@ -16296,6 +16302,9 @@ msgstr ""
 msgid "NetworkPolicies|Status"
 msgstr ""
 
+msgid "NetworkPolicies|Traffic that does not match any rule will be blocked."
+msgstr ""
+
 msgid "NetworkPolicies|YAML editor"
 msgstr ""