Merge branch '450705-policies-policy-type-follow-up' into 'master'

Refactor editor wrapper selected policy property

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/184149



Merged-by: Artur Fedorov <afedorov@gitlab.com>
Approved-by: Alexander Turinske <aturinske@gitlab.com>
Reviewed-by: Alexander Turinske <aturinske@gitlab.com>

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

@@ -52,6 +52,9 @@ export default {
       [POLICY_TYPE_COMPONENT_OPTIONS.pipelineExecution.value]: s__(
         'SecurityOrchestration|New pipeline execution policy',
       ),
+      [POLICY_TYPE_COMPONENT_OPTIONS.vulnerabilityManagement.value]: s__(
+        'SecurityOrchestration|New vulnerability management policy',
+      ),
       default: s__('SecurityOrchestration|New policy'),
     },
     editTitles: {
@@ -64,6 +67,9 @@ export default {
       [POLICY_TYPE_COMPONENT_OPTIONS.pipelineExecution.value]: s__(
         'SecurityOrchestration|Edit pipeline execution policy',
       ),
+      [POLICY_TYPE_COMPONENT_OPTIONS.vulnerabilityManagement.value]: s__(
+        'SecurityOrchestration|Edit vulnerability management policy',
+      ),
       default: s__('SecurityOrchestration|Edit policy'),
     },
   },
@@ -73,6 +79,6 @@ export default {
   <div>
     <page-heading :heading="title" />
     <policy-type-selector v-if="!selectedPolicy" />
-    <editor-wrapper v-else :selected-policy-type="selectedPolicy.value" />
+    <editor-wrapper v-else :selected-policy="selectedPolicy" />
   </div>
 </template>

ee/app/assets/javascripts/security_orchestration/components/policy_editor/editor_wrapper.vue

@@ -62,9 +62,9 @@ export default {
     namespacePath: { default: '' },
   },
   props: {
-    // This is the `value` field of the POLICY_TYPE_COMPONENT_OPTIONS
-    selectedPolicyType: {
-      type: String,
+    // This is the POLICY_TYPE_COMPONENT_OPTIONS object for the policy type
+    selectedPolicy: {
+      type: Object,
       required: true,
     },
   },
@@ -84,10 +84,10 @@ export default {
   },
   computed: {
     policyUrlParameter() {
-      const selectedPolicy = Object.values(POLICY_TYPE_COMPONENT_OPTIONS).find(
-        ({ value }) => value === this.selectedPolicyType,
+      return (
+        this.selectedPolicy?.urlParameter ||
+        POLICY_TYPE_COMPONENT_OPTIONS.scanExecution.urlParameter
       );
-      return selectedPolicy?.urlParameter || '';
     },
     isEditing() {
       return Boolean(this.existingPolicy);
@@ -98,14 +98,8 @@ export default {
     originalName() {
       return this.existingPolicy?.name;
     },
-    policyTypes() {
-      return Object.values(POLICY_TYPE_COMPONENT_OPTIONS);
-    },
     policyOptions() {
-      return (
-        this.policyTypes.find(({ value }) => value === this.selectedPolicyType) ||
-        POLICY_TYPE_COMPONENT_OPTIONS.scanExecution
-      );
+      return this.selectedPolicy || POLICY_TYPE_COMPONENT_OPTIONS.scanExecution;
     },
     shouldAllowPolicyTypeSelection() {
       return !this.existingPolicy;

ee/spec/frontend/security_orchestration/components/policy_editor/app_spec.js

@@ -34,16 +34,20 @@ describe('App component', () => {
       factory({ provide: { existingPolicy: { id: 'policy-id', value: 'approval' } } });
       expect(findPolicySelection().exists()).toBe(false);
       expect(findPolicyEditor().exists()).toBe(true);
+      expect(findPolicyEditor().props('selectedPolicy')).toEqual(
+        POLICY_TYPE_COMPONENT_OPTIONS.legacyApproval,
+      );
     });
   });
 
   describe('page title', () => {
     describe.each`
-      value                  | titleSuffix
-      ${'approval'}          | ${'merge request approval policy'}
-      ${'scanExecution'}     | ${'scan execution policy'}
-      ${'pipelineExecution'} | ${'pipeline execution policy'}
-    `('$titleSuffix', ({ titleSuffix, value }) => {
+      value                        | titleSuffix                          | expectedPolicy
+      ${'approval'}                | ${'merge request approval policy'}   | ${POLICY_TYPE_COMPONENT_OPTIONS.legacyApproval}
+      ${'scanExecution'}           | ${'scan execution policy'}           | ${POLICY_TYPE_COMPONENT_OPTIONS.scanExecution}
+      ${'pipelineExecution'}       | ${'pipeline execution policy'}       | ${POLICY_TYPE_COMPONENT_OPTIONS.pipelineExecution}
+      ${'vulnerabilityManagement'} | ${'vulnerability management policy'} | ${POLICY_TYPE_COMPONENT_OPTIONS.vulnerabilityManagement}
+    `('$titleSuffix', ({ titleSuffix, value, expectedPolicy }) => {
       beforeEach(() => {
         jest
           .spyOn(urlUtils, 'getParameterByName')
@@ -53,11 +57,13 @@ describe('App component', () => {
       it('displays for a new policy', () => {
         factory();
         expect(findTitle()).toBe(`New ${titleSuffix}`);
+        expect(findPolicyEditor().props('selectedPolicy')).toEqual(expectedPolicy);
       });
 
       it('displays for an existing policy', () => {
         factory({ provide: { existingPolicy: { id: 'policy-id', value } } });
         expect(findTitle()).toBe(`Edit ${titleSuffix}`);
+        expect(findPolicyEditor().props('selectedPolicy')).toEqual(expectedPolicy);
       });
     });
 
@@ -69,11 +75,13 @@ describe('App component', () => {
       it('displays for a new policy', () => {
         factory();
         expect(findTitle()).toBe('New policy');
+        expect(findPolicyEditor().exists()).toBe(false);
       });
 
       it('displays for an existing policy', () => {
         factory({ provide: { existingPolicy: { id: 'policy-id', value: 'scanResult' } } });
         expect(findTitle()).toBe('Edit policy');
+        expect(findPolicyEditor().exists()).toBe(false);
       });
     });
   });

ee/spec/frontend/security_orchestration/components/policy_editor/editor_wrapper_spec.js

@@ -79,7 +79,7 @@ describe('EditorWrapper component', () => {
   } = {}) => {
     wrapper = shallowMountExtended(EditorWrapper, {
       propsData: {
-        selectedPolicyType: 'container',
+        selectedPolicy: POLICY_TYPE_COMPONENT_OPTIONS.scanExecution,
         ...propsData,
       },
       provide: {
@@ -126,15 +126,15 @@ describe('EditorWrapper component', () => {
       });
 
       it.each`
-        policyTypeId                                                   | findComponent                              | selectedPolicyType
-        ${POLICY_TYPE_COMPONENT_OPTIONS.pipelineExecution.value}       | ${findPipelineExecutionPolicyEditor}       | ${POLICY_TYPE_COMPONENT_OPTIONS.pipelineExecution.urlParameter}
-        ${POLICY_TYPE_COMPONENT_OPTIONS.scanExecution.value}           | ${findScanExecutionPolicyEditor}           | ${POLICY_TYPE_COMPONENT_OPTIONS.scanExecution.urlParameter}
-        ${POLICY_TYPE_COMPONENT_OPTIONS.approval.value}                | ${findScanResultPolicyEditor}              | ${POLICY_TYPE_COMPONENT_OPTIONS.approval.urlParameter}
-        ${POLICY_TYPE_COMPONENT_OPTIONS.vulnerabilityManagement.value} | ${findVulnerabilityManagementPolicyEditor} | ${POLICY_TYPE_COMPONENT_OPTIONS.vulnerabilityManagement.urlParameter}
+        policyType                                               | findComponent                              | selectedPolicyType
+        ${POLICY_TYPE_COMPONENT_OPTIONS.pipelineExecution}       | ${findPipelineExecutionPolicyEditor}       | ${POLICY_TYPE_COMPONENT_OPTIONS.pipelineExecution.urlParameter}
+        ${POLICY_TYPE_COMPONENT_OPTIONS.scanExecution}           | ${findScanExecutionPolicyEditor}           | ${POLICY_TYPE_COMPONENT_OPTIONS.scanExecution.urlParameter}
+        ${POLICY_TYPE_COMPONENT_OPTIONS.approval}                | ${findScanResultPolicyEditor}              | ${POLICY_TYPE_COMPONENT_OPTIONS.approval.urlParameter}
+        ${POLICY_TYPE_COMPONENT_OPTIONS.vulnerabilityManagement} | ${findVulnerabilityManagementPolicyEditor} | ${POLICY_TYPE_COMPONENT_OPTIONS.vulnerabilityManagement.urlParameter}
       `(
         'renders the policy editor of type $policyType when selected',
-        ({ findComponent, policyTypeId, selectedPolicyType }) => {
-          factory({ propsData: { selectedPolicyType: policyTypeId } });
+        ({ findComponent, policyType, selectedPolicyType }) => {
+          factory({ propsData: { selectedPolicy: policyType } });
           const component = findComponent();
           expect(component.exists()).toBe(true);
           expect(component.props('isEditing')).toBe(false);

locale/gitlab.pot

@@ -52893,6 +52893,9 @@ msgstr ""
 msgid "SecurityOrchestration|Edit scan execution policy"
 msgstr ""
+msgid "SecurityOrchestration|Edit vulnerability management policy"
+msgstr ""
+
 msgid "SecurityOrchestration|Empty policy name"
 msgstr ""