Setup layout for the threat monitoring policy editor

This commit adds a page layout for the threat monitoring policy editor
per mocks and adds several boilerplate components for this
page. Layout is tested against a snapshot.

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

-<script>
-export default {
-  name: 'PolicyEditor',
-};
-</script>
-
-<template>
-  <section>
-    <header class="my-3">
-      <h2 class="h3 mb-1">
-        {{ s__('NetworkPolicies|Policy description') }}
-      </h2>
-    </header>
-  </section>
-</template>

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

+export const EditorModeRule = 'rule';
+export const EditorModeYAML = 'yaml';

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

+<script>
+export default {};
+</script>
+
+<template>
+  <div class="gl-bg-gray-100 p-2"></div>
+</template>

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

+<script>
+import {
+  GlFormGroup,
+  GlFormSelect,
+  GlFormInput,
+  GlFormTextarea,
+  GlToggle,
+  GlSegmentedControl,
+  GlLink,
+  GlButton,
+} from '@gitlab/ui';
+import { s__ } from '~/locale';
+import EnvironmentPicker from '../environment_picker.vue';
+import NetworkPolicyEditor from '../network_policy_editor.vue';
+import PolicyRuleBuilder from './policy_rule_builder.vue';
+import PolicyPreview from './policy_preview.vue';
+import PolicyActionPicker from './policy_action_picker.vue';
+import { EditorModeRule, EditorModeYAML } from './constants';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormSelect,
+    GlFormInput,
+    GlFormTextarea,
+    GlToggle,
+    GlSegmentedControl,
+    GlLink,
+    GlButton,
+    EnvironmentPicker,
+    NetworkPolicyEditor,
+    PolicyRuleBuilder,
+    PolicyPreview,
+    PolicyActionPicker,
+  },
+  data() {
+    return { editorMode: EditorModeRule };
+  },
+  computed: {
+    shouldShowRuleEditor() {
+      return this.editorMode === EditorModeRule;
+    },
+    shouldShowYamlEditor() {
+      return this.editorMode === EditorModeYAML;
+    },
+  },
+  policyTypes: [{ value: 'networkPolicy', text: s__('NetworkPolicies|Network Policy') }],
+  editorModes: [
+    { value: EditorModeRule, text: s__('NetworkPolicies|Rule mode') },
+    { value: EditorModeYAML, text: s__('NetworkPolicies|.yaml mode') },
+  ],
+};
+</script>
+
+<template>
+  <section>
+    <header class="my-3">
+      <h2 class="h3 mb-1">
+        {{ s__('NetworkPolicies|Policy description') }}
+      </h2>
+    </header>
+
+    <div class="row">
+      <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
+        <gl-form-group :label="s__('NetworkPolicies|Policy type')" label-for="policyType">
+          <gl-form-select
+            id="policyType"
+            value="networkPolicy"
+            :options="$options.policyTypes"
+            disabled
+          />
+        </gl-form-group>
+      </div>
+      <div class="col-sm-6 col-md-6 col-lg-5 col-xl-4">
+        <gl-form-group :label="s__('NetworkPolicies|Name')" label-for="policyName">
+          <gl-form-input id="policyName" />
+        </gl-form-group>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-12 col-md-10 col-lg-8 col-xl-6">
+        <gl-form-group :label="s__('NetworkPolicies|Description')" label-for="policyDescription">
+          <gl-form-textarea id="policyDescription" />
+        </gl-form-group>
+      </div>
+    </div>
+    <div class="row">
+      <environment-picker />
+    </div>
+    <div class="row">
+      <div class="col-md-auto">
+        <gl-form-group :label="s__('NetworkPolicies|Policy status')" label-for="policyStatus">
+          <gl-toggle id="policyStatus" />
+        </gl-form-group>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-auto">
+        <gl-form-group :label="s__('NetworkPolicies|Editor mode')" label-for="editorMode">
+          <gl-segmented-control v-model="editorMode" :options="$options.editorModes" />
+        </gl-form-group>
+      </div>
+    </div>
+    <hr />
+    <div v-if="shouldShowRuleEditor" class="row" data-testid="rule-editor">
+      <div class="col-sm-12 col-md-6 col-lg-7 col-xl-8">
+        <h4>{{ s__('NetworkPolicies|Rules') }}</h4>
+        <policy-rule-builder />
+
+        <div class="gl-my-2 gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100">
+          <gl-link href="#">{{ s__('Network Policy|New rule') }}</gl-link>
+        </div>
+
+        <h4>{{ s__('NetworkPolicies|Actions') }}</h4>
+        <policy-action-picker />
+      </div>
+      <div class="col-sm-12 col-md-6 col-lg-5 col-xl-4">
+        <h5>{{ s__('NetworkPolicies|Policy preview') }}</h5>
+        <policy-preview />
+      </div>
+    </div>
+    <div v-if="shouldShowYamlEditor" class="row" data-testid="yaml-editor">
+      <div class="col-sm-12 col-md-12 col-lg-10 col-xl-8">
+        <div class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100">
+          <h5 class="gl-m-0 gl-p-3 gl-bg-gray-10 gl-border-b-gray-100">
+            {{ s__('NetworkPolicies|YAML editor') }}
+          </h5>
+          <network-policy-editor id="yamlEditor" value="" />
+        </div>
+      </div>
+    </div>
+    <hr />
+    <div class="row">
+      <div class="col-md-auto">
+        <gl-button type="submit" category="primary" variant="success">{{
+          s__('NetworkPolicies|Create policy')
+        }}</gl-button>
+        <gl-button category="secondary" variant="default">{{ __('Cancel') }}</gl-button>
+      </div>
+    </div>
+  </section>
+</template>

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

+<script>
+export default {};
+</script>
+
+<template>
+  <div class="gl-bg-gray-100 p-9"></div>
+</template>

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

+<script>
+export default {};
+</script>
+
+<template>
+  <div class="gl-bg-gray-100 p-7"></div>
+</template>

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

 import Vue from 'vue';
-import PolicyEditorApp from './components/policy_editor/app.vue';
+import PolicyEditorApp from './components/policy_editor/policy_editor.vue';
 import createStore from './store';
 
 export default () => {

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PolicyEditorApp component given .yaml editor mode is enabled renders yaml editor 1`] = `
+<div
+  class="row"
+  data-testid="yaml-editor"
+>
+  <div
+    class="col-sm-12 col-md-12 col-lg-10 col-xl-8"
+  >
+    <div
+      class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100"
+    >
+      <h5
+        class="gl-m-0 gl-p-3 gl-bg-gray-10 gl-border-b-gray-100"
+      >
+        
+          YAML editor
+        
+      </h5>
+       
+      <network-policy-editor-stub
+        id="yamlEditor"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PolicyEditorApp component renders the policy editor layout 1`] = `
+<section>
+  <header
+    class="my-3"
+  >
+    <h2
+      class="h3 mb-1"
+    >
+      
+      Policy description
+    
+    </h2>
+  </header>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-sm-6 col-md-4 col-lg-3 col-xl-2"
+    >
+      <gl-form-group-stub
+        label="Policy type"
+        label-for="policyType"
+      >
+        <gl-form-select-stub
+          disabled=""
+          id="policyType"
+          options="[object Object]"
+          value="networkPolicy"
+        />
+      </gl-form-group-stub>
+    </div>
+     
+    <div
+      class="col-sm-6 col-md-6 col-lg-5 col-xl-4"
+    >
+      <gl-form-group-stub
+        label="Name"
+        label-for="policyName"
+      >
+        <gl-form-input-stub
+          id="policyName"
+        />
+      </gl-form-group-stub>
+    </div>
+  </div>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-sm-12 col-md-10 col-lg-8 col-xl-6"
+    >
+      <gl-form-group-stub
+        label="Description"
+        label-for="policyDescription"
+      >
+        <gl-form-textarea-stub
+          id="policyDescription"
+          noresize="true"
+          value=""
+        />
+      </gl-form-group-stub>
+    </div>
+  </div>
+   
+  <div
+    class="row"
+  >
+    <environment-picker-stub />
+  </div>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-md-auto"
+    >
+      <gl-form-group-stub
+        label="Policy status"
+        label-for="policyStatus"
+      >
+        <gl-toggle-stub
+          id="policyStatus"
+          labelposition="top"
+        />
+      </gl-form-group-stub>
+    </div>
+  </div>
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-md-auto"
+    >
+      <gl-form-group-stub
+        label="Editor mode"
+        label-for="editorMode"
+      >
+        <gl-segmented-control-stub
+          checked="rule"
+          options="[object Object],[object Object]"
+        />
+      </gl-form-group-stub>
+    </div>
+  </div>
+   
+  <hr />
+   
+  <div
+    class="row"
+    data-testid="rule-editor"
+  >
+    <div
+      class="col-sm-12 col-md-6 col-lg-7 col-xl-8"
+    >
+      <h4>
+        Rules
+      </h4>
+       
+      <policy-rule-builder-stub />
+       
+      <div
+        class="gl-my-2 gl-p-3 gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100"
+      >
+        <gl-link-stub
+          href="#"
+        >
+          New rule
+        </gl-link-stub>
+      </div>
+       
+      <h4>
+        Actions
+      </h4>
+       
+      <policy-action-picker-stub />
+    </div>
+     
+    <div
+      class="col-sm-12 col-md-6 col-lg-5 col-xl-4"
+    >
+      <h5>
+        Policy preview
+      </h5>
+       
+      <policy-preview-stub />
+    </div>
+  </div>
+   
+  <!---->
+   
+  <hr />
+   
+  <div
+    class="row"
+  >
+    <div
+      class="col-md-auto"
+    >
+      <gl-button-stub
+        category="primary"
+        icon=""
+        size="medium"
+        type="submit"
+        variant="success"
+      >
+        Create policy
+      </gl-button-stub>
+       
+      <gl-button-stub
+        category="secondary"
+        icon=""
+        size="medium"
+        variant="default"
+      >
+        Cancel
+      </gl-button-stub>
+    </div>
+  </div>
+</section>
+`;

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

 import { shallowMount } from '@vue/test-utils';
-import PolicyEditorApp from 'ee/threat_monitoring/components/policy_editor/app.vue';
+import PolicyEditorApp from 'ee/threat_monitoring/components/policy_editor/policy_editor.vue';
 import createStore from 'ee/threat_monitoring/store';
 
 describe('PolicyEditorApp component', () => {
   let store;
   let wrapper;
 
-  const factory = ({ propsData, state, options } = {}) => {
+  const factory = ({ propsData, state, data } = {}) => {
     store = createStore();
     Object.assign(store.state.threatMonitoring, {
       ...state,
@@ -17,17 +17,47 @@ describe('PolicyEditorApp component', () => {
         ...propsData,
       },
       store,
-      ...options,
+      data,
     });
   };
 
+  const findRuleEditor = () => wrapper.find('[data-testid="rule-editor"]');
+  const findYamlEditor = () => wrapper.find('[data-testid="yaml-editor"]');
+
+  beforeEach(() => {
+    factory({});
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  it('renders the header title', () => {
-    factory({});
-    expect(wrapper.find('header').exists()).toBe(true);
+  it('renders the policy editor layout', () => {
+    expect(wrapper.find('section').element).toMatchSnapshot();
+  });
+
+  it('does not render yaml editor', () => {
+    expect(findYamlEditor().exists()).toBe(false);
+  });
+
+  describe('given .yaml editor mode is enabled', () => {
+    beforeEach(() => {
+      factory({
+        data: () => ({
+          editorMode: 'yaml',
+        }),
+      });
+    });
+
+    it('does not render rule editor', () => {
+      expect(findRuleEditor().exists()).toBe(false);
+    });
+
+    it('renders yaml editor', () => {
+      const editor = findYamlEditor();
+      expect(editor.exists()).toBe(true);
+      expect(editor.element).toMatchSnapshot();
+    });
   });
 });

locale/gitlab.pot

@@ -15501,12 +15501,30 @@ msgstr ""
 msgid "Network"
 msgstr ""
 
+msgid "Network Policy|New rule"
+msgstr ""
+
+msgid "NetworkPolicies|.yaml mode"
+msgstr ""
+
+msgid "NetworkPolicies|Actions"
+msgstr ""
+
 msgid "NetworkPolicies|Choose whether to enforce this policy."
 msgstr ""
 
+msgid "NetworkPolicies|Create policy"
+msgstr ""
+
 msgid "NetworkPolicies|Define this policy's location, conditions and actions."
 msgstr ""
 
+msgid "NetworkPolicies|Description"
+msgstr ""
+
+msgid "NetworkPolicies|Editor mode"
+msgstr ""
+
 msgid "NetworkPolicies|Enforcement status"
 msgstr ""
 
@@ -15528,6 +15546,9 @@ msgstr ""
 msgid "NetworkPolicies|Name"
 msgstr ""
 
+msgid "NetworkPolicies|Network Policy"
+msgstr ""
+
 msgid "NetworkPolicies|New policy"
 msgstr ""
 
@@ -15549,6 +15570,21 @@ msgstr ""
 msgid "NetworkPolicies|Policy editor"
 msgstr ""
 
+msgid "NetworkPolicies|Policy preview"
+msgstr ""
+
+msgid "NetworkPolicies|Policy status"
+msgstr ""
+
+msgid "NetworkPolicies|Policy type"
+msgstr ""
+
+msgid "NetworkPolicies|Rule mode"
+msgstr ""
+
+msgid "NetworkPolicies|Rules"
+msgstr ""
+
 msgid "NetworkPolicies|Something went wrong, failed to update policy"
 msgstr ""
 
@@ -15558,6 +15594,9 @@ msgstr ""
 msgid "NetworkPolicies|Status"
 msgstr ""
 
+msgid "NetworkPolicies|YAML editor"
+msgstr ""
+
 msgid "Never"
 msgstr ""