From 96a5d4fa3d7ce9fc1658e02846cf31a9e02e2198 Mon Sep 17 00:00:00 2001
From: Pete Harverson <peteharverson@users.noreply.github.com>
Date: Thu, 10 Jun 2021 11:21:52 +0100
Subject: [PATCH] [ML] Fixes display of job group badges in recognizer wizard
 (#101775) (#101858)

---
 .../jobs/new_job/recognize/components/edit_job.tsx    |  6 +++---
 .../jobs/new_job/recognize/components/job_item.tsx    | 11 +++++------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/edit_job.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/edit_job.tsx
index d2780691e551d9..408e86512ed6dc 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/edit_job.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/edit_job.tsx
@@ -51,9 +51,9 @@ export const EditJob: FC<EditJobProps> = ({ job, jobOverride, existingGroupIds,
   );
 
   const handleValidation = () => {
-    const jobGroupsValidationResult =
-      formState.jobGroups ??
-      [].map((group) => groupValidator(group)).filter((result) => result !== null);
+    const jobGroupsValidationResult = (formState.jobGroups ?? [])
+      .map((group) => groupValidator(group))
+      .filter((result) => result !== null);
 
     setValidationResult({
       jobGroups: jobGroupsValidationResult,
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
index b97c16e02d9007..0daf4f28f33d31 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
@@ -87,12 +87,11 @@ export const JobItem: FC<JobItemProps> = memo(
           </EuiText>
 
           <EuiFlexGroup wrap responsive={false} gutterSize="xs">
-            {jobGroups ??
-              [].map((group) => (
-                <EuiFlexItem grow={false} key={group}>
-                  <EuiBadge color={tabColor(group)}>{group}</EuiBadge>
-                </EuiFlexItem>
-              ))}
+            {(jobGroups ?? []).map((group) => (
+              <EuiFlexItem grow={false} key={group}>
+                <EuiBadge color={tabColor(group)}>{group}</EuiBadge>
+              </EuiFlexItem>
+            ))}
           </EuiFlexGroup>
 
           {setupResult && setupResult.error && (