Expand policy editor form actions

- expand it to encompass all of the policy editor page
- update network policy editor to use new layout component
- update scan execution editor to use new layout component

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

@@ -165,16 +165,6 @@ const hasUnsupportedAttribute = (manifest) => {
   return isUnsupported;
 };
 
-/**
- * Removes inital line dashes from a policy YAML that is received from the API, which
- * is not required for the user.
- * @param {String} manifest the policy from the API request
- * @returns {String} the policy without the initial dashes or the initial string
- */
-export const removeUnnecessaryDashes = (manifest) => {
-  return manifest.replace('---\n', '');
-};
-
 /*
   Construct a policy object expected by the policy editor from a yaml manifest.
   Expected yaml structure is defined in the official documentation:

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

 import { EndpointMatchModeAny } from './constants';
 
 export * from './constants';
-// TODO removeUnnecessaryDashes should be generalized
-export { default as fromYaml, removeUnnecessaryDashes } from './from_yaml';
+export { default as fromYaml } from './from_yaml';
 export { default as humanizeNetworkPolicy } from './humanize';
 export { buildRule } from './rules';
 export { default as toYaml } from './to_yaml';

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_editor_form_actions.vue → ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_editor_layout.vue

 <script>
-import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
-import { s__, __, sprintf } from '~/locale';
-import { DELETE_MODAL_CONFIG } from './constants';
+import { GlButton, GlFormGroup, GlModal, GlModalDirective, GlSegmentedControl } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+import { DELETE_MODAL_CONFIG, EDITOR_MODES, EditorModeRule, EditorModeYAML } from './constants';
 
 export default {
   i18n: {
-    createMergeRequest: __('Create merge request'),
     DELETE_MODAL_CONFIG,
   },
   components: {
     GlButton,
+    GlFormGroup,
     GlModal,
+    GlSegmentedControl,
+    PolicyYamlEditor: () =>
+      import(/* webpackChunkName: 'policy_yaml_editor' */ '../policy_yaml_editor.vue'),
   },
   directives: { GlModal: GlModalDirective },
-  inject: {
-    threatMonitoringPath: {
+  inject: ['threatMonitoringPath'],
+  props: {
+    customSaveButtonText: {
       type: String,
+      required: false,
       default: '',
     },
-  },
-  props: {
-    isCreatingMergeRequest: {
-      type: Boolean,
+    defaultEditorMode: {
+      type: String,
       required: false,
-      default: false,
+      default: EditorModeRule,
+    },
+    editorModes: {
+      type: Array,
+      required: false,
+      default: () => EDITOR_MODES,
     },
     isEditing: {
       type: Boolean,
@@ -40,50 +48,87 @@ export default {
       required: false,
       default: '',
     },
-    shouldShowMergeRequestButton: {
-      type: Boolean,
+    yamlEditorValue: {
+      type: String,
       required: false,
-      default: false,
+      default: '',
     },
   },
+  data() {
+    return {
+      selectedEditorMode: this.defaultEditorMode,
+    };
+  },
   computed: {
     deleteModalTitle() {
       return sprintf(s__('NetworkPolicies|Delete policy: %{policy}'), { policy: this.policyName });
     },
     saveButtonText() {
-      // TODO verify
+      if (this.customSaveButtonText) {
+        return this.customSaveButtonText;
+      }
       return this.isEditing
         ? s__('NetworkPolicies|Save changes')
         : s__('NetworkPolicies|Create policy');
     },
+    shouldShowRuleEditor() {
+      return this.selectedEditorMode === EditorModeRule;
+    },
+    shouldShowYamlEditor() {
+      return this.selectedEditorMode === EditorModeYAML;
+    },
   },
   methods: {
-    createMergeRequest() {
-      // TODO emit here
-    },
     removePolicy() {
-      // TODO emit here
+      this.$emit('remove-policy');
     },
     savePolicy() {
-      // TODO emit here
+      this.$emit('save-policy', this.selectedEditorMode);
+    },
+    updateEditorMode(mode) {
+      this.selectedEditorMode = mode;
+      this.$emit('update-editor-mode', mode);
+    },
+    updateYaml() {
+      this.$emit('load-yaml');
     },
   },
 };
 </script>
 
 <template>
-  <div>
-    <gl-button
-      v-if="shouldShowMergeRequestButton"
-      type="submit"
-      variant="success"
-      data-testid="create-merge-request"
-      :loading="isCreatingMergeRequest"
-      @click="createMergeRequest"
-      >{{ $options.i18n.createMergeRequest }}</gl-button
-    >
+  <section>
+    <div class="gl-mb-5 gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base">
+      <gl-form-group
+        class="gl-px-5 gl-py-3 gl-mb-0 gl-bg-gray-10 gl-border-b-solid gl-border-b-gray-100 gl-border-b-1"
+      >
+        <gl-segmented-control
+          data-testid="editor-mode"
+          :options="editorModes"
+          :checked="selectedEditorMode"
+          @input="updateEditorMode"
+        />
+      </gl-form-group>
+      <div class="gl-display-flex gl-sm-flex-direction-column">
+        <section class="gl-w-full gl-p-5 gl-flex-fill-4 policy-table-left">
+          <slot v-if="shouldShowRuleEditor" name="rule-editor" data-testid="rule-editor"></slot>
+          <policy-yaml-editor
+            v-if="shouldShowYamlEditor"
+            data-testid="policy-yaml-editor"
+            :value="yamlEditorValue"
+            :read-only="false"
+            @input="updateYaml"
+          />
+        </section>
+        <section
+          v-if="shouldShowRuleEditor"
+          class="gl-w-30p gl-p-5 gl-border-l-gray-100 gl-border-l-1 gl-border-l-solid gl-flex-fill-2"
+        >
+          <slot name="rule-editor-preview"></slot>
+        </section>
+      </div>
+    </div>
     <gl-button
-      v-else
       type="submit"
       variant="success"
       data-testid="save-policy"
@@ -114,5 +159,5 @@ export default {
         )
       }}
     </gl-modal>
-  </div>
+  </section>
 </template>

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

+import { safeLoad } from 'js-yaml';
+
+/*
+  Construct a policy object expected by the policy editor from a yaml manifest.
+*/
+export const fromYaml = (manifest) => {
+  return safeLoad(manifest, { json: true });
+};

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

+export { fromYaml } from './from_yaml';
+
 export const DEFAULT_SCAN_EXECUTION_POLICY = `type: scan_execution_policy
 name: ''
 description: ''

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

 <script>
-import { GlFormGroup, GlSegmentedControl } from '@gitlab/ui';
+import { __ } from '~/locale';
 import { EDITOR_MODES, EditorModeYAML } from '../constants';
-import PolicyEditorFormActions from '../policy_editor_form_actions.vue';
-import { DEFAULT_SCAN_EXECUTION_POLICY } from './lib';
+import PolicyEditorLayout from '../policy_editor_layout.vue';
+import { DEFAULT_SCAN_EXECUTION_POLICY, fromYaml } from './lib';
 
 export default {
+  DEFAULT_EDITOR_MODE: EditorModeYAML,
   EDITOR_MODES: [EDITOR_MODES[1]],
-  components: {
-    GlFormGroup,
-    GlSegmentedControl,
-    PolicyYamlEditor: () =>
-      import(/* webpackChunkName: 'policy_yaml_editor' */ '../../policy_yaml_editor.vue'),
-    PolicyEditorFormActions,
+  i18n: {
+    createMergeRequest: __('Create merge request'),
   },
-  inject: {
-    threatMonitoringPath: {
-      type: String,
-      default: '',
-    },
-    projectId: {
-      type: String,
-      default: '',
-    },
+  components: {
+    PolicyEditorLayout,
   },
+  inject: ['threatMonitoringPath', 'projectId'],
   props: {
     existingPolicy: {
       type: Object,
@@ -32,8 +23,8 @@ export default {
   },
   data() {
     const policy = this.existingPolicy
-      ? this.existingPolicy.manifest
-      : DEFAULT_SCAN_EXECUTION_POLICY;
+      ? fromYaml(this.existingPolicy.manifest)
+      : fromYaml(DEFAULT_SCAN_EXECUTION_POLICY);
 
     const yamlEditorValue = this.existingPolicy
       ? this.existingPolicy.manifest
@@ -46,32 +37,32 @@ export default {
       policy,
     };
   },
+  computed: {
+    isCreatingMergeRequest() {
+      // TODO track the graphql mutation status after #333163 is closed
+      return false;
+    },
+    isEditing() {
+      return Boolean(this.existingPolicy);
+    },
+  },
+  methods: {
+    createMergeRequest() {
+      // TODO call graphql mutation and redirect to merge request after #333163 is closed
+    },
+  },
 };
 </script>
 
 <template>
-  <section>
-    <div class="gl-mb-5 gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base">
-      <gl-form-group
-        class="gl-px-5 gl-py-3 gl-mb-0 gl-bg-gray-10 gl-border-b-solid gl-border-b-gray-100 gl-border-b-1"
-      >
-        <gl-segmented-control
-          data-testid="editor-mode"
-          :options="$options.EDITOR_MODES"
-          :checked="editorMode"
-        />
-      </gl-form-group>
-      <div class="gl-display-flex gl-sm-flex-direction-column">
-        <section class="gl-w-full gl-p-5 gl-flex-fill-4 policy-table-left">
-          <policy-yaml-editor
-            data-testid="policy-yaml-editor"
-            :value="yamlEditorValue"
-            :read-only="false"
-            @input="loadYaml"
-          />
-        </section>
-      </div>
-    </div>
-    <policy-editor-form-actions :should-show-merge-request-button="true" />
-  </section>
+  <policy-editor-layout
+    :custom-save-button-text="$options.i18n.createMergeRequest"
+    :default-editor-mode="$options.DEFAULT_EDITOR_MODE"
+    :editor-modes="$options.EDITOR_MODES"
+    :is-editing="isEditing"
+    :is-updating-policy="isCreatingMergeRequest"
+    :policy-name="policy.name"
+    :yaml-editor-value="yamlEditorValue"
+    @save-policy="createMergeRequest"
+  />
 </template>

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

+/**
+ * Removes inital line dashes from a policy YAML that is received from the API, which
+ * is not required for the user.
+ * @param {String} manifest the policy from the API request
+ * @returns {String} the policy without the initial dashes or the initial string
+ */
+export const removeUnnecessaryDashes = (manifest) => {
+  return manifest.replace('---\n', '');
+};

ee/config/feature_flags/development/scan_execution_policy_ui.yml

 ---
 name: scan_execution_policy_ui
-introduced_by_url:
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/63585
 rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/273791
 milestone: '14.0'
 type: development