Abstract out policy actions into a constant

- so that it can be reused all over the code base

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

@@ -5,3 +5,9 @@ export const DEFAULT_MR_TITLE = s__('SecurityOrchestration|Update scan execution
 export const GRAPHQL_ERROR_MESSAGE = s__(
   'SecurityOrchestration|There was a problem creating the new security policy',
 );
+
+export const SECURITY_POLICY_ACTIONS = {
+  APPEND: 'APPEND',
+  REMOVE: 'REMOVE',
+  REPLACE: 'REPLACE',
+};

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

@@ -2,7 +2,7 @@ import createPolicyProject from 'ee/threat_monitoring/graphql/mutations/create_p
 import createScanExecutionPolicy from 'ee/threat_monitoring/graphql/mutations/create_scan_execution_policy.mutation.graphql';
 import { gqClient } from 'ee/threat_monitoring/utils';
 import createMergeRequestMutation from '~/graphql_shared/mutations/create_merge_request.mutation.graphql';
-import { DEFAULT_MR_TITLE } from './constants';
+import { DEFAULT_MR_TITLE, SECURITY_POLICY_ACTIONS } from './constants';
 
 /**
  * Checks if an error exists and throws it if it does
@@ -67,7 +67,11 @@ const createMergeRequest = async ({ projectPath, sourceBranch, targetBranch }) =
  * @param {Object} payload contains the path to the project and the policy yaml value
  * @returns {Object} contains the branch containing the updated policy file and any errors
  */
-const updatePolicy = async ({ action, projectPath, yamlEditorValue }) => {
+const updatePolicy = async ({
+  action = SECURITY_POLICY_ACTIONS.APPEND,
+  projectPath,
+  yamlEditorValue,
+}) => {
   const {
     data: {
       scanExecutionPolicyCommit: { branch, errors },
@@ -90,7 +94,7 @@ const updatePolicy = async ({ action, projectPath, yamlEditorValue }) => {
  * @returns {Object} contains the currently assigned security policy project and the created merge request
  */
 export const modifyPolicy = async ({
-  action = 'APPEND',
+  action,
   assignedPolicyProject,
   projectPath,
   yamlEditorValue,

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

@@ -10,13 +10,10 @@ import {
   GRAPHQL_ERROR_MESSAGE,
   modifyPolicy,
 } from './lib';
+import { SECURITY_POLICY_ACTIONS } from './lib/constants';
 
 export default {
-  ACTION_FLAGS: {
-    APPEND: 'isCreatingMR',
-    REMOVE: 'isRemovingPolicy',
-    REPLACE: 'isCreatingMR',
-  },
+  SECURITY_POLICY_ACTIONS,
   DEFAULT_EDITOR_MODE: EDITOR_MODE_YAML,
   EDITOR_MODES: [EDITOR_MODES[1]],
   i18n: {
@@ -64,10 +61,14 @@ export default {
       }
     },
     async handleModifyPolicy(act) {
-      const action = act || (this.isEditing ? 'REPLACE' : 'APPEND');
+      const action =
+        act ||
+        (this.isEditing
+          ? this.$options.SECURITY_POLICY_ACTIONS.REPLACE
+          : this.$options.SECURITY_POLICY_ACTIONS.APPEND);
 
       this.$emit('error', '');
-      this[this.$options.ACTION_FLAGS[action]] = true;
+      this.setLoadingFlag(action, true);
 
       try {
         const { mergeRequest, policyProject } = await modifyPolicy({
@@ -80,7 +81,14 @@ export default {
         this.redirectToMergeRequest({ mergeRequest, policyProject });
       } catch (e) {
         this.handleError(e);
-        this[this.$options.ACTION_FLAGS[action]] = false;
+        this.setLoadingFlag(action, false);
+      }
+    },
+    setLoadingFlag(action, val) {
+      if (action === SECURITY_POLICY_ACTIONS.REMOVE) {
+        this.isRemovingPolicy = val;
+      } else {
+        this.isCreatingMR = val;
       }
     },
     redirectToMergeRequest({ mergeRequest, policyProject }) {
@@ -110,7 +118,7 @@ export default {
     :is-updating-policy="isCreatingMR"
     :policy-name="policy.name"
     :yaml-editor-value="yamlEditorValue"
-    @remove-policy="handleModifyPolicy('REMOVE')"
+    @remove-policy="handleModifyPolicy($options.SECURITY_POLICY_ACTIONS.REMOVE)"
     @save-policy="handleModifyPolicy()"
     @update-yaml="updateYaml"
   >

ee/spec/frontend/threat_monitoring/components/policy_editor/scan_execution_policy/scan_execution_policy_editor_spec.js

@@ -4,6 +4,7 @@ import {
   DEFAULT_SCAN_EXECUTION_POLICY,
   modifyPolicy,
 } from 'ee/threat_monitoring/components/policy_editor/scan_execution_policy/lib';
+import { SECURITY_POLICY_ACTIONS } from 'ee/threat_monitoring/components/policy_editor/scan_execution_policy/lib/constants';
 import ScanExecutionPolicyEditor from 'ee/threat_monitoring/components/policy_editor/scan_execution_policy/scan_execution_policy_editor.vue';
 import { DEFAULT_ASSIGNED_POLICY_PROJECT } from 'ee/threat_monitoring/constants';
 import { visitUrl } from '~/lib/utils/url_utility';
@@ -63,9 +64,9 @@ describe('ScanExecutionPolicyEditor', () => {
 
   it.each`
     status                            | action                             | event              | factoryFn
-    ${'to save a new policy'}         | ${'APPEND'}  | ${'save-policy'}   | ${factory}
-    ${'to update an existing policy'} | ${'REPLACE'} | ${'save-policy'}   | ${() => factory({ propsData: { existingPolicy: { manifest: DEFAULT_SCAN_EXECUTION_POLICY } } })}
-    ${'to delete an existing policy'} | ${'REMOVE'}  | ${'remove-policy'} | ${() => factory({ propsData: { existingPolicy: { manifest: DEFAULT_SCAN_EXECUTION_POLICY } } })}
+    ${'to save a new policy'}         | ${SECURITY_POLICY_ACTIONS.APPEND}  | ${'save-policy'}   | ${factory}
+    ${'to update an existing policy'} | ${SECURITY_POLICY_ACTIONS.REPLACE} | ${'save-policy'}   | ${() => factory({ propsData: { existingPolicy: { manifest: DEFAULT_SCAN_EXECUTION_POLICY } } })}
+    ${'to delete an existing policy'} | ${SECURITY_POLICY_ACTIONS.REMOVE}  | ${'remove-policy'} | ${() => factory({ propsData: { existingPolicy: { manifest: DEFAULT_SCAN_EXECUTION_POLICY } } })}
   `(
     'navigates to the new merge request when "modifyPolicy" is emitted $status',
     async ({ action, event, factoryFn }) => {