From 253219f07948a00bfc97157ab1e1849f3de0c2fa Mon Sep 17 00:00:00 2001
From: Christoph Jerolimov <jerolimov+git@redhat.com>
Date: Fri, 18 Oct 2024 16:37:11 +0200
Subject: [PATCH] fix(ocm): fix unaligned status icon and message

Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com>
---
 .../ClusterStatusPage/ClusterStatusPage.tsx   | 40 ++++++++-----------
 plugins/ocm/src/components/common.tsx         | 21 ++--------
 2 files changed, 20 insertions(+), 41 deletions(-)

diff --git a/plugins/ocm/src/components/ClusterStatusPage/ClusterStatusPage.tsx b/plugins/ocm/src/components/ClusterStatusPage/ClusterStatusPage.tsx
index 78cfc44ccf4..8f802071842 100644
--- a/plugins/ocm/src/components/ClusterStatusPage/ClusterStatusPage.tsx
+++ b/plugins/ocm/src/components/ClusterStatusPage/ClusterStatusPage.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
 
@@ -50,27 +50,21 @@ const useStyles = makeStyles(theme => ({
 
 const NodeChip = ({
   count,
-  indicator,
+  indicatorComponent: IndicatorComponent,
 }: {
   count: number;
-  indicator: ReactElement;
-}) => (
-  <>
-    {count > 0 ? (
-      <Chip
-        label={
-          <>
-            {indicator}
-            {count}
-          </>
-        }
-        variant="outlined"
-      />
-    ) : (
-      <></>
-    )}
-  </>
-);
+  indicatorComponent: React.FC<React.PropsWithChildren<{}>>;
+}) => {
+  if (!count) {
+    return null;
+  }
+  return (
+    <Chip
+      label={<IndicatorComponent>{count}</IndicatorComponent>}
+      variant="outlined"
+    />
+  );
+};
 
 const NodeChips = ({ nodes }: { nodes: ClusterNodesStatus[] }) => {
   const readyChipsNodes = nodes.filter(node => node.status === 'True').length;
@@ -85,11 +79,11 @@ const NodeChips = ({ nodes }: { nodes: ClusterNodesStatus[] }) => {
 
   return (
     <>
-      <NodeChip count={readyChipsNodes} indicator={<StatusOK />} />
-      <NodeChip count={notReadyNodesCount} indicator={<StatusError />} />
+      <NodeChip count={readyChipsNodes} indicatorComponent={StatusOK} />
+      <NodeChip count={notReadyNodesCount} indicatorComponent={StatusError} />
       <NodeChip
         count={nodes.length - readyChipsNodes - notReadyNodesCount}
-        indicator={<StatusAborted />}
+        indicatorComponent={StatusAborted}
       />
     </>
   );
diff --git a/plugins/ocm/src/components/common.tsx b/plugins/ocm/src/components/common.tsx
index 7114691f034..16c614e94a9 100644
--- a/plugins/ocm/src/components/common.tsx
+++ b/plugins/ocm/src/components/common.tsx
@@ -25,26 +25,11 @@ const useStyles = makeStyles({
 
 export const Status = ({ status }: { status: ClusterStatus }) => {
   if (!status) {
-    return (
-      <>
-        <StatusAborted />
-        Unknown
-      </>
-    );
+    return <StatusAborted>Unknown</StatusAborted>;
   } else if (status.available) {
-    return (
-      <>
-        <StatusOK />
-        Ready
-      </>
-    );
+    return <StatusOK>Ready</StatusOK>;
   }
-  return (
-    <>
-      <StatusError />
-      Not Ready
-    </>
-  );
+  return <StatusError>Not Ready</StatusError>;
 };
 
 export const Update = ({ data }: { data: versionDetails }) => {