From e63ae89b0e26259c59ee8a790b91206c3ad8b39c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cristian=20Pallar=C3=A9s?= <cristianp@wing.cloud>
Date: Mon, 5 Aug 2024 15:41:40 +0200
Subject: [PATCH] fix(console): small table ui improvement (#6983)

Hide the table heading when there aren't any rows.
---
 .../resource-panes/table-interaction.tsx      | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/apps/wing-console/console/ui/src/features/inspector-pane/resource-panes/table-interaction.tsx b/apps/wing-console/console/ui/src/features/inspector-pane/resource-panes/table-interaction.tsx
index 1c1faa5b6ca..c5d5eb04a91 100644
--- a/apps/wing-console/console/ui/src/features/inspector-pane/resource-panes/table-interaction.tsx
+++ b/apps/wing-console/console/ui/src/features/inspector-pane/resource-panes/table-interaction.tsx
@@ -21,6 +21,8 @@ export const TableInteraction = memo(
         .map((name) => ({ name, type: "text" }));
     }, [rows]);
 
+    const hasRows = rows && rows.length > 0;
+
     return (
       <div className="inline-block align-middle w-full mt-1">
         <div
@@ -51,39 +53,41 @@ export const TableInteraction = memo(
             }}
           >
             <thead>
-              <tr
-                className={classNames(
-                  theme.bgInput,
-                  "px-1 sticky top-[4px] z-10 border-spacing-x-0",
-                )}
-              >
-                {columns.map(({ name }) => (
+              {hasRows && (
+                <tr
+                  className={classNames(
+                    theme.bgInput,
+                    "px-1 sticky top-[4px] z-10 border-spacing-x-0",
+                  )}
+                >
+                  {columns.map(({ name }) => (
+                    <th
+                      key={name}
+                      className={classNames(
+                        "text-sm px-1.5",
+                        "border-b border-slate-300 dark:border-slate-700",
+                        "text-left",
+                      )}
+                    >
+                      {name}
+                    </th>
+                  ))}
                   <th
-                    key={name}
                     className={classNames(
-                      "text-sm px-1.5",
+                      "w-0",
                       "border-b border-slate-300 dark:border-slate-700",
-                      "text-left",
                     )}
-                  >
-                    {name}
-                  </th>
-                ))}
-                <th
-                  className={classNames(
-                    "w-0",
-                    "border-b border-slate-300 dark:border-slate-700",
-                  )}
-                ></th>
-              </tr>
+                  ></th>
+                </tr>
+              )}
             </thead>
             <tbody className="spacing-y-1">
-              {rows?.length === 0 && (
+              {!hasRows && (
                 <tr>
                   <td
                     colSpan={columns.length + 1}
                     className={classNames(
-                      "text-center text-xs pt-4",
+                      "text-center text-xs py-4",
                       theme.text2,
                     )}
                   >