Decouple policy name update from yaml/rule modes

EE: true
Changelog: fixed

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

@@ -12,6 +12,7 @@ import { joinPaths, visitUrl, setUrlFragment } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import {
   EDITOR_MODE_YAML,
+  EDITOR_MODE_RULE,
   SECURITY_POLICY_ACTIONS,
   GRAPHQL_ERROR_MESSAGE,
   PARSING_ERROR_MESSAGE,
@@ -26,6 +27,7 @@ import { DEFAULT_SCAN_RESULT_POLICY, fromYaml, toYaml, buildRule } from './lib';
 export default {
   SECURITY_POLICY_ACTIONS,
   EDITOR_MODE_YAML,
+  EDITOR_MODE_RULE,
   SHARED_FOR_DISABLED:
     'gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base',
   i18n: {
@@ -97,7 +99,7 @@ export default {
         'scan-result-policy-editor',
       ),
       yamlEditorError: null,
-      mode: EDITOR_MODE_YAML,
+      mode: EDITOR_MODE_RULE,
     };
   },
   computed: {
@@ -159,7 +161,7 @@ export default {
         const mergeRequest = await modifyPolicy({
           action,
           assignedPolicyProject,
-          name: this.originalName || fromYaml(this.yamlEditorValue)?.name,
+          name: this.originalName || fromYaml(yamlValue)?.name,
           projectPath: this.projectPath,
           yamlEditorValue: yamlValue,
         });
@@ -215,7 +217,6 @@ export default {
   <policy-editor-layout
     v-if="!disableScanPolicyUpdate"
     :custom-save-button-text="$options.i18n.createMergeRequest"
-    :default-editor-mode="$options.EDITOR_MODE_YAML"
     :is-editing="isEditing"
     :is-removing-policy="isRemovingPolicy"
     :is-updating-policy="isCreatingMR"

ee/spec/frontend/threat_monitoring/components/policy_editor/scan_result_policy/scan_result_policy_editor_spec.js

@@ -18,6 +18,7 @@ import { visitUrl } from '~/lib/utils/url_utility';
 import { modifyPolicy } from 'ee/threat_monitoring/components/policy_editor/utils';
 import {
   SECURITY_POLICY_ACTIONS,
+  EDITOR_MODE_RULE,
   EDITOR_MODE_YAML,
 } from 'ee/threat_monitoring/components/policy_editor/constants';
 import DimDisableContainer from 'ee/threat_monitoring/components/policy_editor/dim_disable_container.vue';
@@ -108,7 +109,8 @@ describe('ScanResultPolicyEditor', () => {
         DEFAULT_SCAN_RESULT_POLICY,
       );
 
-      await findPolicyEditorLayout().vm.$emit('update-yaml', newManifest);
+      findPolicyEditorLayout().vm.$emit('update-yaml', newManifest);
+      await nextTick();
 
       expect(findPolicyEditorLayout().attributes('yamleditorvalue')).toBe(newManifest);
     });
@@ -125,7 +127,8 @@ describe('ScanResultPolicyEditor', () => {
 
       expect(findAlert().exists()).toBe(false);
 
-      await findPolicyEditorLayout().vm.$emit('update-yaml', 'invalid manifest');
+      findPolicyEditorLayout().vm.$emit('update-yaml', 'invalid manifest');
+      await nextTick();
 
       expect(findAlert().exists()).toBe(true);
     });
@@ -133,7 +136,8 @@ describe('ScanResultPolicyEditor', () => {
     it('disables all rule mode related components when the yaml is invalid', async () => {
       await factory();
 
-      await findPolicyEditorLayout().vm.$emit('update-yaml', 'invalid manifest');
+      findPolicyEditorLayout().vm.$emit('update-yaml', 'invalid manifest');
+      await nextTick();
 
       expect(findNameInput().attributes('disabled')).toBe('true');
       expect(findDescriptionTextArea().attributes('disabled')).toBe('true');
@@ -142,10 +146,24 @@ describe('ScanResultPolicyEditor', () => {
       expect(findAllDisabledComponents().at(1).props('disabled')).toBe(true);
     });
 
-    it('defaults to YAML mode', async () => {
+    it('defaults to rule mode', async () => {
       await factory();
 
-      expect(findPolicyEditorLayout().attributes().defaulteditormode).toBe(EDITOR_MODE_YAML);
+      expect(findPolicyEditorLayout().attributes().defaulteditormode).toBe(EDITOR_MODE_RULE);
+    });
+
+    it('uses name from policy rule builder', async () => {
+      const newPolicyName = 'new policy name';
+      await factory();
+      findNameInput().vm.$emit('input', newPolicyName);
+      findPolicyEditorLayout().vm.$emit('save-policy');
+      await waitForPromises();
+
+      expect(modifyPolicy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: newPolicyName,
+        }),
+      );
     });
 
     describe.each`
@@ -157,8 +175,9 @@ describe('ScanResultPolicyEditor', () => {
       it('updates YAML when switching modes', async () => {
         await factory();
 
-        await currentComponent().vm.$emit(event, newValue);
-        await findPolicyEditorLayout().vm.$emit('update-editor-mode', EDITOR_MODE_YAML);
+        currentComponent().vm.$emit(event, newValue);
+        findPolicyEditorLayout().vm.$emit('update-editor-mode', EDITOR_MODE_YAML);
+        await nextTick();
 
         expect(findPolicyEditorLayout().attributes('yamleditorvalue')).toMatch(newValue.toString());
       });
@@ -166,7 +185,8 @@ describe('ScanResultPolicyEditor', () => {
       it('updates the yaml preview', async () => {
         await factory();
 
-        await currentComponent().vm.$emit(event, newValue);
+        currentComponent().vm.$emit(event, newValue);
+        await nextTick();
 
         expect(findYamlPreview().html()).toMatch(newValue.toString());
       });
@@ -209,7 +229,8 @@ describe('ScanResultPolicyEditor', () => {
 
       expect(findAllRuleBuilders().length).toBe(rulesCount);
 
-      await findAddRuleButton().vm.$emit('click');
+      findAddRuleButton().vm.$emit('click');
+      await nextTick();
 
       expect(findAllRuleBuilders()).toHaveLength(rulesCount + 1);
     });
@@ -218,10 +239,11 @@ describe('ScanResultPolicyEditor', () => {
       const limit = 5;
       factory();
       await nextTick();
-      await findAddRuleButton().vm.$emit('click');
-      await findAddRuleButton().vm.$emit('click');
-      await findAddRuleButton().vm.$emit('click');
-      await findAddRuleButton().vm.$emit('click');
+      findAddRuleButton().vm.$emit('click');
+      findAddRuleButton().vm.$emit('click');
+      findAddRuleButton().vm.$emit('click');
+      findAddRuleButton().vm.$emit('click');
+      await nextTick();
 
       expect(findAllRuleBuilders()).toHaveLength(limit);
       expect(findAddRuleButton().exists()).toBe(false);
@@ -238,7 +260,8 @@ describe('ScanResultPolicyEditor', () => {
       };
       factory();
       await nextTick();
-      await findAllRuleBuilders().at(0).vm.$emit('changed', newValue);
+      findAllRuleBuilders().at(0).vm.$emit('changed', newValue);
+      await nextTick();
 
       expect(wrapper.vm.policy.rules[0]).toEqual(newValue);
       expect(findYamlPreview().html()).toMatch('vulnerabilities_allowed: 1');
@@ -251,7 +274,8 @@ describe('ScanResultPolicyEditor', () => {
 
       expect(findAllRuleBuilders()).toHaveLength(initialRuleCount);
 
-      await findAllRuleBuilders().at(0).vm.$emit('remove', 0);
+      findAllRuleBuilders().at(0).vm.$emit('remove', 0);
+      await nextTick();
 
       expect(findAllRuleBuilders()).toHaveLength(initialRuleCount - 1);
     });
@@ -286,7 +310,8 @@ describe('ScanResultPolicyEditor', () => {
       factory();
 
       await nextTick();
-      await findPolicyActionBuilder().vm.$emit('changed', UPDATED_ACTION);
+      findPolicyActionBuilder().vm.$emit('changed', UPDATED_ACTION);
+      await nextTick();
 
       expect(findPolicyActionBuilder().props('initAction')).toEqual(UPDATED_ACTION);
     });