From 77604e3bcb1ca3f80372ba9041f00dc0686b2132 Mon Sep 17 00:00:00 2001
From: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
Date: Mon, 20 Mar 2023 18:30:15 +0100
Subject: [PATCH] Edit detector - UX improvements and updates #482

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 .../Alerts/__snapshots__/Alerts.test.tsx.snap |  1 +
 .../DetectorRulesView.test.tsx.snap           |  1 +
 .../UpdateDetectorBasicDetails.test.tsx.snap  |  2 +
 .../components/UpdateRules/UpdateRules.tsx    |  5 +-
 .../UpdateDetectorRules.test.tsx.snap         |  6 +++
 .../AlertTriggersView.test.tsx.snap           |  1 +
 .../DetectorDetails.test.tsx.snap             |  2 +
 .../DetectorDetailsView.test.tsx.snap         |  2 +
 .../EditFieldMappings.test.tsx.snap           | 47 +++++++++++++++++--
 9 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/public/pages/Alerts/containers/Alerts/__snapshots__/Alerts.test.tsx.snap b/public/pages/Alerts/containers/Alerts/__snapshots__/Alerts.test.tsx.snap
index 050feb771..08f80250c 100644
--- a/public/pages/Alerts/containers/Alerts/__snapshots__/Alerts.test.tsx.snap
+++ b/public/pages/Alerts/containers/Alerts/__snapshots__/Alerts.test.tsx.snap
@@ -943,6 +943,7 @@ exports[`<Alerts /> spec renders the component 1`] = `
               title="Alerts"
             >
               <EuiPanel
+                className=""
                 style={
                   Object {
                     "paddingLeft": "0px",
diff --git a/public/pages/Detectors/components/DetectorRulesView/__snapshots__/DetectorRulesView.test.tsx.snap b/public/pages/Detectors/components/DetectorRulesView/__snapshots__/DetectorRulesView.test.tsx.snap
index cedeea49f..6600a5549 100644
--- a/public/pages/Detectors/components/DetectorRulesView/__snapshots__/DetectorRulesView.test.tsx.snap
+++ b/public/pages/Detectors/components/DetectorRulesView/__snapshots__/DetectorRulesView.test.tsx.snap
@@ -202,6 +202,7 @@ exports[`<DetectorRulesView /> spec renders the component 1`] = `
     title="Active rules (2)"
   >
     <EuiPanel
+      className=""
       style={
         Object {
           "paddingLeft": "0px",
diff --git a/public/pages/Detectors/components/UpdateBasicDetails/__snapshots__/UpdateDetectorBasicDetails.test.tsx.snap b/public/pages/Detectors/components/UpdateBasicDetails/__snapshots__/UpdateDetectorBasicDetails.test.tsx.snap
index a787a5377..2c3482053 100644
--- a/public/pages/Detectors/components/UpdateBasicDetails/__snapshots__/UpdateDetectorBasicDetails.test.tsx.snap
+++ b/public/pages/Detectors/components/UpdateBasicDetails/__snapshots__/UpdateDetectorBasicDetails.test.tsx.snap
@@ -609,6 +609,7 @@ exports[`<UpdateDetectorBasicDetails /> spec renders the component 1`] = `
         titleSize="m"
       >
         <EuiPanel
+          className=""
           style={
             Object {
               "paddingLeft": "0px",
@@ -1105,6 +1106,7 @@ exports[`<UpdateDetectorBasicDetails /> spec renders the component 1`] = `
         title="Detector schedule"
       >
         <EuiPanel
+          className=""
           style={
             Object {
               "paddingLeft": "0px",
diff --git a/public/pages/Detectors/components/UpdateRules/UpdateRules.tsx b/public/pages/Detectors/components/UpdateRules/UpdateRules.tsx
index 3977ced80..f0c218f90 100644
--- a/public/pages/Detectors/components/UpdateRules/UpdateRules.tsx
+++ b/public/pages/Detectors/components/UpdateRules/UpdateRules.tsx
@@ -45,6 +45,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
   const detectorId = props.location.pathname.replace(`${ROUTES.EDIT_DETECTOR_RULES}/`, '');
   const [flyoutData, setFlyoutData] = useState<RuleTableItem | null>(null);
   const [fieldMappings, setFieldMappings] = useState<FieldMapping[]>();
+  const [showMappings, setShowMappings] = useState(false);
 
   const context = useContext(CoreServicesContext);
 
@@ -126,6 +127,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
   }, [services, detectorId]);
 
   const onToggle = (changedItem: RuleItem, isActive: boolean) => {
+    setShowMappings(true);
     switch (changedItem.library) {
       case 'Custom':
         setCustomRuleItems(
@@ -147,6 +149,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
   };
 
   const onAllRulesToggle = (isActive: boolean) => {
+    setShowMappings(true);
     setCustomRuleItems(customRuleItems.map((rule) => ({ ...rule, active: isActive })));
     setPrePackagedRuleItems(prePackagedRuleItems.map((rule) => ({ ...rule, active: isActive })));
   };
@@ -264,7 +267,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
 
         <EuiSpacer size="xl" />
 
-        {detector?.inputs[0]?.detector_input.indices[0] ? (
+        {showMappings ? (
           <NewFieldMappings
             {...props}
             detector={detector}
diff --git a/public/pages/Detectors/components/UpdateRules/__snapshots__/UpdateDetectorRules.test.tsx.snap b/public/pages/Detectors/components/UpdateRules/__snapshots__/UpdateDetectorRules.test.tsx.snap
index bfb5cdf4d..b158b0934 100644
--- a/public/pages/Detectors/components/UpdateRules/__snapshots__/UpdateDetectorRules.test.tsx.snap
+++ b/public/pages/Detectors/components/UpdateRules/__snapshots__/UpdateDetectorRules.test.tsx.snap
@@ -336,6 +336,9 @@ Object {
             <div
               class="euiSpacer euiSpacer--xl"
             />
+            <div
+              class="euiSpacer euiSpacer--xl"
+            />
             <div
               class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
@@ -714,6 +717,9 @@ Object {
           <div
             class="euiSpacer euiSpacer--xl"
           />
+          <div
+            class="euiSpacer euiSpacer--xl"
+          />
           <div
             class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
diff --git a/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap b/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap
index 4b134ef5d..5d4b67e59 100644
--- a/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap
+++ b/public/pages/Detectors/containers/AlertTriggersView/__snapshots__/AlertTriggersView.test.tsx.snap
@@ -200,6 +200,7 @@ exports[`<AlertTriggersView /> spec renders the component 1`] = `
     title="Alert triggers (2)"
   >
     <EuiPanel
+      className=""
       style={
         Object {
           "paddingLeft": "0px",
diff --git a/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap b/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap
index 29921169b..224d74a72 100644
--- a/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap
+++ b/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap
@@ -1373,6 +1373,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
         title="Detector details"
       >
         <EuiPanel
+          className=""
           style={
             Object {
               "paddingLeft": "0px",
@@ -2739,6 +2740,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
         title="Active rules (2)"
       >
         <EuiPanel
+          className=""
           style={
             Object {
               "paddingLeft": "0px",
diff --git a/public/pages/Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap b/public/pages/Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap
index 437227411..cb8f0ed1c 100644
--- a/public/pages/Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap
+++ b/public/pages/Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap
@@ -396,6 +396,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
       title="Detector details"
     >
       <EuiPanel
+        className=""
         style={
           Object {
             "paddingLeft": "0px",
@@ -1535,6 +1536,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
       title="Active rules (2)"
     >
       <EuiPanel
+        className=""
         style={
           Object {
             "paddingLeft": "0px",
diff --git a/public/pages/Detectors/containers/FieldMappings/__snapshots__/EditFieldMappings.test.tsx.snap b/public/pages/Detectors/containers/FieldMappings/__snapshots__/EditFieldMappings.test.tsx.snap
index 00d065985..bc1c033e1 100644
--- a/public/pages/Detectors/containers/FieldMappings/__snapshots__/EditFieldMappings.test.tsx.snap
+++ b/public/pages/Detectors/containers/FieldMappings/__snapshots__/EditFieldMappings.test.tsx.snap
@@ -179,7 +179,7 @@ exports[`<EditFieldMappings /> spec renders the component 1`] = `
     }
   }
   fieldMappings={Array []}
-  fieldMappingService={
+  filedMappingService={
     FieldMappingService {
       "createMappings": [Function],
       "getMappings": [Function],
@@ -190,7 +190,9 @@ exports[`<EditFieldMappings /> spec renders the component 1`] = `
   loading={false}
   replaceFieldMappings={[MockFunction]}
 >
-  <div>
+  <div
+    className="editFieldMappings"
+  >
     <EuiPanel>
       <div
         className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
@@ -469,7 +471,7 @@ exports[`<EditFieldMappings /> spec renders the component 1`] = `
                         }
                       }
                       fieldMappings={Array []}
-                      fieldMappingService={
+                      filedMappingService={
                         FieldMappingService {
                           "createMappings": [Function],
                           "getMappings": [Function],
@@ -1103,6 +1105,45 @@ exports[`<EditFieldMappings /> spec renders the component 1`] = `
         className="euiSpacer euiSpacer--m"
       />
     </EuiSpacer>
+    <EuiCallOut
+      color="success"
+      title="We have automatically mapped 0 field(s)"
+    >
+      <div
+        className="euiCallOut euiCallOut--success"
+      >
+        <div
+          className="euiCallOutHeader"
+        >
+          <span
+            className="euiCallOutHeader__title"
+          >
+            We have automatically mapped 0 field(s)
+          </span>
+        </div>
+        <EuiText
+          color="default"
+          size="s"
+        >
+          <div
+            className="euiText euiText--small"
+          >
+            <EuiTextColor
+              color="default"
+              component="div"
+            >
+              <div
+                className="euiTextColor euiTextColor--default"
+              >
+                <p>
+                  Your data sources have been mapped with every rule field name. No action is needed.
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiText>
+      </div>
+    </EuiCallOut>
     <EuiSpacer
       size="m"
     >