Improvement on scan result policy ux between choosen different scaners

Problem

We support different scanners, depends on the users' choice of the scanner, the following options of drop-downs will change. If the user fills in already some data and switches to a different scanner, the already filled-in data will loose which generates frustration feeling for the users

Example scanner 1	Example scanner 2

Solution

Remember the user's choice on frontend:

For example, if the user chooses "SAST" first and fills in some data in the other dropdowns. Later, they change to "License scanning" by accident, and the following options vary. In this case, if the user switches back to "SAST", we should be able to remember what users have selected.

Implementation

• frontend update the scanner type to have a scan-type selection dropdown
• frontend on type change, save the rule before it is deleted and populate the rule with any previous information saved (see the patch below
  • save the previous rule in policy_rule_builder.vue
  • wherever the type is changed, propagate the type to policy_rule_builder

Incomplete Patch

diff --git a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/base_layout/base_layout_component.vue b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/base_layout/base_layout_component.vue
index c81dd6db885a..6d406cba4dad 100644
--- a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/base_layout/base_layout_component.vue
+++ b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/base_layout/base_layout_component.vue
@@ -38,8 +43,7 @@ export default {
   },
   methods: {
     setScanType(value) {
-      const rule = getDefaultRule(value);
-      this.$emit('changed', rule);
+      this.$emit('updated-scan-type', value);
     },
   },
 };
diff --git a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/license_scan_rule_builder.vue b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/license_scan_rule_builder.vue
index 906bd6435346..f0262892ed46 100644
--- a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/license_scan_rule_builder.vue
+++ b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/license_scan_rule_builder.vue
@@ -133,8 +133,7 @@ export default {
       this.searchTerm = searchTerm;
     },
     setScanType(value) {
-      const rule = getDefaultRule(value);
-      this.$emit('changed', rule);
+      this.$emit('updated-scan-type', value);
     },
   },
 };
diff --git a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/policy_rule_builder.vue b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/policy_rule_builder.vue
index 717037baf298..ba71fade3328 100644
--- a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/policy_rule_builder.vue
+++ b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/policy_rule_builder.vue
@@ -1,6 +1,6 @@
 <script>
 import { __ } from '~/locale';
-import { SCAN_FINDING, LICENSE_FINDING } from './lib';
+import { getDefaultRule, SCAN_FINDING, LICENSE_FINDING } from './lib';
 import BaseLayoutComponent from './base_layout/base_layout_component.vue';
 import SecurityScanRuleBuilder from './security_scan_rule_builder.vue';
 import LicenseScanRuleBuilder from './license_scan_rule_builder.vue';
@@ -17,6 +17,16 @@ export default {
       required: true,
     },
   },
+  data() {
+    const previousRules = {
+      [SCAN_FINDING]: null,
+      [LICENSE_FINDING]: null,
+    };
+
+    return {
+      previousRules,
+    };
+  },
   computed: {
     isSecurityRule() {
       return this.initRule.type === SCAN_FINDING;
@@ -32,6 +42,13 @@ export default {
     removeRule() {
       this.$emit('remove');
     },
+    setScanType(value) {
+      if (this.initRule.type) {
+        this.previousRules[this.initRule.type] = this.initRule;
+      }
+      const rule = this.previousRules[value] || getDefaultRule(value);
+      this.$emit('changed', rule);
+    },
     updateRule(value) {
       this.$emit('changed', value);
     },
@@ -51,6 +68,7 @@ export default {
     :type="initRule.type"
     @changed="updateRule"
     @remove="removeRule"
+    @updated-scan-type="setScanType"
   />
 
   <security-scan-rule-builder
@@ -67,5 +85,6 @@ export default {
     :rule-label="$options.i18n.scanResultIfLabel"
     @changed="updateRule"
     @remove="removeRule"
+    @updated-scan-type="setScanType"
   />
 </template>