From c58989c41976c50ae097fbca92b4c3b9076c3301 Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Tue, 12 Nov 2024 16:13:29 +0000
Subject: [PATCH] [ML] Anomaly detection: Adds spacer below split card chart in
 job wizard (#199708)

Adds a spacer below the chart so the `Add metric` label doesn't appear
like it is underneath the cards due to their drop shadow.

Recommend viewing the diff with whitespace hidden as the change looks
larger than it actually is.

<img width="1064" alt="image"
src="https://github.com/user-attachments/assets/90e460c4-5ad6-4f4b-bf9f-7163d740747f">

vs

<img width="1057" alt="image"
src="https://github.com/user-attachments/assets/bb8d7bc3-17bb-428d-a8a4-c515a5845025">
---
 .../components/split_cards/split_cards.tsx    | 69 ++++++++++---------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
index d09791941a379..96692ab073738 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_cards/split_cards.tsx
@@ -97,42 +97,45 @@ export const SplitCards: FC<PropsWithChildren<Props>> = memo(
     }
 
     return (
-      <EuiFlexGroup>
-        <EuiFlexItem data-test-subj="mlDataSplit">
-          {(fieldValues.length === 0 || numberOfDetectors === 0) && <>{children}</>}
-          {fieldValues.length > 0 && numberOfDetectors > 0 && splitField !== null && (
-            <Fragment>
-              {(jobType === JOB_TYPE.MULTI_METRIC || jobType === JOB_TYPE.GEO) && (
-                <Fragment>
+      <>
+        <EuiFlexGroup>
+          <EuiFlexItem data-test-subj="mlDataSplit">
+            {(fieldValues.length === 0 || numberOfDetectors === 0) && <>{children}</>}
+            {fieldValues.length > 0 && numberOfDetectors > 0 && splitField !== null && (
+              <Fragment>
+                {(jobType === JOB_TYPE.MULTI_METRIC || jobType === JOB_TYPE.GEO) && (
+                  <Fragment>
+                    <div
+                      css={{ fontSize: 'small' }}
+                      data-test-subj={`mlDataSplitTitle ${splitField.name}`}
+                    >
+                      <FormattedMessage
+                        id="xpack.ml.newJob.wizard.pickFieldsStep.splitCards.dataSplitBy"
+                        defaultMessage="Data split by {field}"
+                        values={{ field: splitField.name }}
+                      />
+                    </div>
+                    <EuiSpacer size="m" />
+                  </Fragment>
+                )}
+
+                {getBackPanels()}
+                <EuiPanel paddingSize="m" css={splitCardStyle} data-test-subj="mlSplitCard front">
                   <div
-                    css={{ fontSize: 'small' }}
-                    data-test-subj={`mlDataSplitTitle ${splitField.name}`}
+                    css={{ fontWeight: 'bold', fontSize: 'small' }}
+                    data-test-subj="mlSplitCardTitle"
                   >
-                    <FormattedMessage
-                      id="xpack.ml.newJob.wizard.pickFieldsStep.splitCards.dataSplitBy"
-                      defaultMessage="Data split by {field}"
-                      values={{ field: splitField.name }}
-                    />
+                    {fieldValues[0]}
                   </div>
-                  <EuiSpacer size="m" />
-                </Fragment>
-              )}
-
-              {getBackPanels()}
-              <EuiPanel paddingSize="m" css={splitCardStyle} data-test-subj="mlSplitCard front">
-                <div
-                  css={{ fontWeight: 'bold', fontSize: 'small' }}
-                  data-test-subj="mlSplitCardTitle"
-                >
-                  {fieldValues[0]}
-                </div>
-                <EuiHorizontalRule margin="s" />
-                <>{children}</>
-              </EuiPanel>
-            </Fragment>
-          )}
-        </EuiFlexItem>
-      </EuiFlexGroup>
+                  <EuiHorizontalRule margin="s" />
+                  <>{children}</>
+                </EuiPanel>
+              </Fragment>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        {splitField !== null ? <EuiSpacer size="m" /> : null}
+      </>
     );
   }
 );