From 3dd40db429ce506f91224d4aba511d853caf8439 Mon Sep 17 00:00:00 2001
From: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
Date: Tue, 30 May 2023 12:32:40 +0200
Subject: [PATCH] [FEATURE] Improve "list" text area UX #589 Use expression
 builder instead of code editor

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 cypress/integration/2_rules.spec.js           | 19 +++++++------------
 .../components/SelectionExpField.tsx          |  7 ++++++-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/cypress/integration/2_rules.spec.js b/cypress/integration/2_rules.spec.js
index 4adae0242..45aad7441 100644
--- a/cypress/integration/2_rules.spec.js
+++ b/cypress/integration/2_rules.spec.js
@@ -10,11 +10,9 @@ const SAMPLE_RULE = {
   name: `Cypress test rule ${uniqueId}`,
   logType: 'windows',
   description: 'This is a rule used to test the rule creation workflow.',
-  detection:
-    "condition: selection\nselection:\nProvider_Name|contains:\n- Service Control Manager\nEventID|contains:\n- '7045'\nServiceName|contains:\n- ZzNetSvc",
   detectionLine: [
-    'condition: selection',
-    'selection:',
+    'condition: Selection_1',
+    'Selection_1:',
     'Provider_Name|contains:',
     '- Service Control Manager',
     'EventID|contains:',
@@ -48,7 +46,7 @@ const YAML_RULE_LINES = [
   `- '${SAMPLE_RULE.references}'`,
   `author: ${SAMPLE_RULE.author}`,
   `detection:`,
-  ...SAMPLE_RULE.detection.replaceAll('  ', '').replaceAll('{backspace}', '').split('\n'),
+  ...SAMPLE_RULE.detectionLine,
 ];
 
 const checkRulesFlyout = () => {
@@ -180,11 +178,8 @@ describe('Rules', () => {
       `${SAMPLE_RULE.falsePositive}{enter}`
     );
 
-    // Enter the author
-    cy.get('[data-test-subj="rule_author_field"]').type(`${SAMPLE_RULE.author}{enter}`);
-
     cy.get('[data-test-subj="detection-visual-editor-0"]').within(() => {
-      cy.getFieldByLabel('Name').type('selection');
+      cy.getFieldByLabel('Name').type('{selectall}{backspace}').type('Selection_1');
       cy.getFieldByLabel('Key').type('Provider_Name');
       cy.getInputByPlaceholder('Value').type('Service Control Manager');
 
@@ -200,9 +195,9 @@ describe('Rules', () => {
         cy.getInputByPlaceholder('Value').type('ZzNetSvc');
       });
     });
-    cy.get('[data-test-subj="rule_detection_field"] textarea').type('selection', {
-      force: true,
-    });
+
+    // Enter the author
+    cy.get('[data-test-subj="rule_author_field"]').type(`${SAMPLE_RULE.author}`);
 
     // Switch to YAML editor
     cy.get('[data-test-subj="change-editor-type"] label:nth-child(2)').click({
diff --git a/public/pages/Rules/components/RuleEditor/components/SelectionExpField.tsx b/public/pages/Rules/components/RuleEditor/components/SelectionExpField.tsx
index dbdd37e67..e07d17c77 100644
--- a/public/pages/Rules/components/RuleEditor/components/SelectionExpField.tsx
+++ b/public/pages/Rules/components/RuleEditor/components/SelectionExpField.tsx
@@ -65,6 +65,7 @@ export const SelectionExpField: React.FC<SelectionExpFieldProps> = ({
     }
 
     setUsedExpressions(expressions);
+    onChange(getValue(expressions));
   }, [value]);
 
   const getValue = (usedExp: UsedSelection[]) => {
@@ -169,7 +170,11 @@ export const SelectionExpField: React.FC<SelectionExpFieldProps> = ({
         <EuiFlexItem
           grow={false}
           key={`selections_${idx}`}
-          className={'selection-exp-field-item-with-remove'}
+          className={
+            usedExpressions.length > 1
+              ? 'selection-exp-field-item-with-remove'
+              : 'selection-exp-field-item'
+          }
         >
           <EuiPopover
             id={`selections_${idx}`}