fix: show two columns, when the other one is empty

fix: show two columns when no none headline properties

chore: remove console.log

chore: update spacing

fix: show two property columns when no analytics

fix: fix issues with cards styling

fix: scroll issues

fix: refactor and re-sort components statuses

chore: remove console logs

Author: mainawycliffe

src/components/Canary/HealthChecksSummary.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}

src/components/Incidents/IncidentCardSummary/index.tsx

@@ -24,6 +24,10 @@ export const CardMetrics = ({
   labelClasses = "text-gray-600 font-semibold text-xs mb-0.5",
   metricsClasses = "font-bold text-xs leading-1.21rel flex flex-center justify-center"
 }: IProps) => {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
   return (
     <div className="flex flex-1 items-center justify-between divide-x rounded-b-8px">
       {items.map((item) => (

src/components/StatusLine/StatusLine.tsx

@@ -14,7 +14,6 @@ export function PropertyDisplay({
   className = "",
   ...props
 }: PropertyDisplayProps) {
-  console.log("property display", property);
   const { name, icon, color } = property;
   const label =
     NodePodPropToLabelMap[name as keyof typeof NodePodPropToLabelMap] || name;