From b1dc68df2aa3ad1c1e6e55cc324d34c3fa1fa293 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 28 Aug 2024 10:19:30 +0300
Subject: [PATCH] fix: show two columns when no none headline properties

chore: remove console.log

chore: update spacing
---
 src/components/Canary/HealthChecksSummary.tsx |  2 +-
 src/components/StatusLine/StatusLine.tsx      | 18 +++++++----
 .../Topology/TopologyCard/TopologyCard.tsx    | 31 +++++++++++++------
 .../TopologyCard/Utils/FormatProperties.tsx   |  1 -
 src/ui/CustomScroll/index.tsx                 |  2 +-
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/Canary/HealthChecksSummary.tsx b/src/components/Canary/HealthChecksSummary.tsx
index 34f7a850d..b095e9121 100644
--- a/src/components/Canary/HealthChecksSummary.tsx
+++ b/src/components/Canary/HealthChecksSummary.tsx
@@ -23,7 +23,7 @@ export function HealthChecksSummary({
 
     const data: StatusLineProps = {
       label: "Health Checks",
-      icon: <AiFillHeart className="mr-1 inline-block h-3.5 w-3.5" />,
+      icon: <AiFillHeart className="inline-block h-4 w-4" />,
       url: "/health",
       statuses: [
         ...(checks.healthy > 0
diff --git a/src/components/StatusLine/StatusLine.tsx b/src/components/StatusLine/StatusLine.tsx
index ec0cfed48..618d9ede9 100644
--- a/src/components/StatusLine/StatusLine.tsx
+++ b/src/components/StatusLine/StatusLine.tsx
@@ -20,15 +20,21 @@ export type StatusLineData = {
 
 export type StatusLineProps = React.HTMLProps<HTMLDivElement> & StatusLineData;
 
-const renderIcon = (icon: string | React.ReactNode) => {
+interface RenderIconProps {
+  icon: string | React.ReactNode;
+}
+
+const RenderIcon: React.FC<RenderIconProps> = ({ icon }) => {
   if (!icon) {
     return null;
   }
   if (typeof icon === "object") {
-    return icon;
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{icon}</>;
   } else if (typeof icon === "string") {
-    return <Icon name={icon} className="h-4 w-4" />;
+    return <Icon name={icon} className="h-4 w-4 min-w-max" />;
   }
+  return null;
 };
 
 const StatusInfoEntry = ({
@@ -46,14 +52,14 @@ const StatusInfoEntry = ({
         to={statusInfo.url}
         target={target || ""}
       >
-        {statusInfo.icon && renderIcon(statusInfo.icon)}
+        {statusInfo.icon && <RenderIcon icon={statusInfo.icon} />}
         <Chip text={statusInfo.label} color={statusInfo.color} />
       </Link>
     );
   } else {
     return (
       <span className="inline-flex cursor-pointer space-x-1">
-        {statusInfo.icon && renderIcon(statusInfo.icon)}
+        {statusInfo.icon && <RenderIcon icon={statusInfo.icon} />}
         <Chip text={statusInfo.label} color={statusInfo.color} />
       </span>
     );
@@ -74,7 +80,7 @@ export function StatusLine({
       className={clsx("flex flex-row items-center space-x-1", className)}
       {...rest}
     >
-      {icon && renderIcon(icon)}
+      {icon && <RenderIcon icon={icon} />}
       {url && (
         <Link
           title={label}
diff --git a/src/components/Topology/TopologyCard/TopologyCard.tsx b/src/components/Topology/TopologyCard/TopologyCard.tsx
index 3ca8f96af..fc9287590 100644
--- a/src/components/Topology/TopologyCard/TopologyCard.tsx
+++ b/src/components/Topology/TopologyCard/TopologyCard.tsx
@@ -143,17 +143,26 @@ export function TopologyCard({
     [topology?.components]
   );
 
+  const { heading, properties, hasNoneHeadlineProperties } = useMemo(() => {
+    const allProperties = topology?.properties || [];
+    const properties = allProperties.filter((i) => !i.headline);
+
+    const heading = allProperties.filter(
+      (i) => i.headline && (!!i.value || !!i.text || !!i.url)
+    );
+
+    const hasNoneHeadlineProperties =
+      properties.filter(
+        (i) => !i.headline && i.type !== "hidden" && (i.text || i.value)
+      ).length > 0;
+
+    return { heading, properties, hasNoneHeadlineProperties };
+  }, [topology?.properties]);
+
   if (topology == null) {
     return <TopologyCardSkeletonLoader />;
   }
 
-  const allProperties = topology.properties || [];
-  const properties = allProperties.filter((i) => !i.headline);
-
-  const heading = allProperties.filter(
-    (i) => i.headline && (!!i.value || !!i.text || !!i.url)
-  );
-
   return (
     <div
       style={{ width: CardWidth[size as Size] || size }}
@@ -232,10 +241,14 @@ export function TopologyCard({
           <>
             <TopologyCardPropertiesColumn properties={properties} />
             <CustomScroll
-              className="flex-1 space-y-1.5 py-2 pl-2 pr-2"
+              className={clsx(
+                "flex-1 py-2 pl-2 pr-2",
+                !hasNoneHeadlineProperties ? "grid grid-cols-2 gap-1" : ""
+              )}
               showMoreClass="text-xs linear-1.21rel mr-1 cursor-pointer"
               maxHeight="200px"
-              minChildCount={5}
+              // When we showing two columns, we need to show more items
+              minChildCount={hasNoneHeadlineProperties ? 5 : 10}
             >
               <TopologyConfigAnalysisLine topology={topology} />
               {canShowChildHealth() && (
diff --git a/src/components/Topology/TopologyCard/Utils/FormatProperties.tsx b/src/components/Topology/TopologyCard/Utils/FormatProperties.tsx
index 6dd023cd9..9bfbbe138 100644
--- a/src/components/Topology/TopologyCard/Utils/FormatProperties.tsx
+++ b/src/components/Topology/TopologyCard/Utils/FormatProperties.tsx
@@ -14,7 +14,6 @@ type FormatPropertyProps = {
 };
 
 export function FormatPropertyURL({ property }: FormatPropertyProps) {
-  console.log("property", property);
   if (property == null) {
     return null;
   }
diff --git a/src/ui/CustomScroll/index.tsx b/src/ui/CustomScroll/index.tsx
index 607007411..feaa0cbcd 100644
--- a/src/ui/CustomScroll/index.tsx
+++ b/src/ui/CustomScroll/index.tsx
@@ -53,7 +53,7 @@ export const CustomScroll = ({
             setHasScroll(true);
           }}
           className={clsx(
-            "bottom-0 m-auto w-full hover:underline",
+            "bottom-0 col-span-2 m-auto w-full hover:underline",
             showMoreClass
           )}
         >