From 3642fca3a29be5461758af239fd50eea5ad10077 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Mon, 3 Mar 2025 13:18:12 +0000
Subject: [PATCH 1/7] Update properties table treatment

---
 app/pages/project/instances/InstancePage.tsx  | 74 +++++++++----------
 app/ui/lib/PropertiesTable.tsx                | 44 ++++-------
 app/ui/styles/components/properties-table.css | 15 ----
 3 files changed, 51 insertions(+), 82 deletions(-)
 delete mode 100644 app/ui/styles/components/properties-table.css

diff --git a/app/pages/project/instances/InstancePage.tsx b/app/pages/project/instances/InstancePage.tsx
index 6079755b93..64998cf840 100644
--- a/app/pages/project/instances/InstancePage.tsx
+++ b/app/pages/project/instances/InstancePage.tsx
@@ -218,45 +218,41 @@ export default function InstancePage() {
           <MoreActionsMenu label="Instance actions" actions={allMenuActions} />
         </div>
       </PageHeader>
-      <PropertiesTable.Group className="-mt-8 mb-16">
-        <PropertiesTable>
-          <PropertiesTable.Row label="cpu">
-            <span className="text-default">{instance.ncpus}</span>
-            <span className="ml-1 text-tertiary">{pluralize(' vCPU', instance.ncpus)}</span>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="ram">
-            <span className="text-default">{memory.value}</span>
-            <span className="ml-1 text-tertiary"> {memory.unit}</span>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="state">
-            <div className="flex items-center gap-2">
-              <InstanceStateBadge state={instance.runState} />
-              {instanceTransitioning(instance) && <PollingSpinner />}
-              <InstanceAutoRestartPopover instance={instance} />
-            </div>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="vpc">
-            {vpc ? (
-              <Link
-                className="link-with-underline group text-sans-md"
-                to={pb.vpc({ project: instanceSelector.project, vpc: vpc.name })}
-              >
-                {vpc.name}
-              </Link>
-            ) : (
-              <EmptyCell />
-            )}
-          </PropertiesTable.Row>
-        </PropertiesTable>
-        <PropertiesTable>
-          <PropertiesTable.DescriptionRow description={instance.description} />
-          <PropertiesTable.DateRow date={instance.timeCreated} label="Created" />
-          <PropertiesTable.IdRow id={instance.id} />
-          <PropertiesTable.Row label="external IPs">
-            {<ExternalIps {...instanceSelector} />}
-          </PropertiesTable.Row>
-        </PropertiesTable>
-      </PropertiesTable.Group>
+      <PropertiesTable columns={2} className="-mt-8 mb-16">
+        <PropertiesTable.Row label="cpu">
+          <span className="text-default">{instance.ncpus}</span>
+          <span className="ml-1 text-tertiary">{pluralize(' vCPU', instance.ncpus)}</span>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="ram">
+          <span className="text-default">{memory.value}</span>
+          <span className="ml-1 text-tertiary"> {memory.unit}</span>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="state">
+          <div className="flex items-center gap-2">
+            <InstanceStateBadge state={instance.runState} />
+            {instanceTransitioning(instance) && <PollingSpinner />}
+            <InstanceAutoRestartPopover instance={instance} />
+          </div>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="vpc">
+          {vpc ? (
+            <Link
+              className="link-with-underline group text-sans-md"
+              to={pb.vpc({ project: instanceSelector.project, vpc: vpc.name })}
+            >
+              {vpc.name}
+            </Link>
+          ) : (
+            <EmptyCell />
+          )}
+        </PropertiesTable.Row>
+        <PropertiesTable.DescriptionRow description={instance.description} />
+        <PropertiesTable.DateRow date={instance.timeCreated} label="Created" />
+        <PropertiesTable.IdRow id={instance.id} />
+        <PropertiesTable.Row label="external IPs">
+          {<ExternalIps {...instanceSelector} />}
+        </PropertiesTable.Row>
+      </PropertiesTable>
       <RouteTabs fullWidth>
         <Tab to={pb.instanceStorage(instanceSelector)}>Storage</Tab>
         <Tab to={pb.instanceNetworking(instanceSelector)}>Networking</Tab>
diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx
index 2741fc1e88..7f33d81bcb 100644
--- a/app/ui/lib/PropertiesTable.tsx
+++ b/app/ui/lib/PropertiesTable.tsx
@@ -9,7 +9,6 @@ import cn from 'classnames'
 import type { ReactNode } from 'react'
 
 import { DescriptionCell } from '~/table/cells/DescriptionCell'
-import { Badge } from '~/ui/lib/Badge'
 import { isOneOf } from '~/util/children'
 import { invariant } from '~/util/invariant'
 
@@ -19,9 +18,14 @@ import { Truncate } from './Truncate'
 export interface PropertiesTableProps {
   className?: string
   children: ReactNode
+  columns?: 1 | 2
 }
 
-export function PropertiesTable({ className, children }: PropertiesTableProps) {
+export function PropertiesTable({
+  className,
+  children,
+  columns = 1,
+}: PropertiesTableProps) {
   invariant(
     isOneOf(children, [
       PropertiesTable.Row,
@@ -35,7 +39,13 @@ export function PropertiesTable({ className, children }: PropertiesTableProps) {
     <div
       className={cn(
         className,
-        'properties-table grid min-w-min basis-6/12 divide-y rounded-lg border border-default children:pl-3 children:pr-6 children:border-secondary'
+        'properties-table min-w-min basis-6/12 rounded-lg border border-default',
+        'children:border-t children:pl-3 children:pr-6 children:border-secondary [&>*:nth-child(-n+2)]:!border-t-0',
+        {
+          'grid grid-cols-[minmax(min-content,1fr)_3fr]': columns === 1,
+          'grid grid-cols-[minmax(min-content,1fr)_3fr] lg+:grid-cols-[minmax(min-content,1fr)_3fr_minmax(min-content,1fr)_3fr] lg+:[&>*:nth-child(-n+4)]:!border-t-0 lg+:[&>*:nth-child(4n-2)]:border-r':
+            columns === 2,
+        }
       )}
     >
       {children}
@@ -49,10 +59,10 @@ interface PropertiesTableRowProps {
 }
 PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
   <>
-    <span className="flex items-center">
-      <Badge>{label}</Badge>
+    <span className="flex items-center whitespace-nowrap text-mono-sm text-secondary">
+      {label}
     </span>
-    <div className="flex h-11 items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-default">
+    <div className="flex h-10 items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-default">
       {children}
     </div>
   </>
@@ -81,25 +91,3 @@ PropertiesTable.DateRow = ({
     <DateTime date={date} />
   </PropertiesTable.Row>
 )
-
-interface PropertiesTableGroupProps {
-  children: ReactNode
-  className?: string
-}
-
-PropertiesTable.Group = ({ children, className }: PropertiesTableGroupProps) => {
-  invariant(
-    isOneOf(children, [PropertiesTable]),
-    'PropertiesTable can only have PropertiesTable as a child'
-  )
-  return (
-    <div
-      className={cn(
-        className,
-        'flex min-w-min md-:flex-col md-:first:children:rounded-b-none md-:first:children:border-b-secondary md-:last:children:rounded-t-none md-:last:children:border-t-0 lg+:gap-x-4'
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/app/ui/styles/components/properties-table.css b/app/ui/styles/components/properties-table.css
deleted file mode 100644
index 75bd703811..0000000000
--- a/app/ui/styles/components/properties-table.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *  
- * Copyright Oxide Computer Company
- */
-
-.properties-table {
-  grid-template-columns: minmax(min-content, 1fr) 3fr;
-}
-
-.properties-table > *:nth-child(2) {
-  @apply !border-0;
-}

From 3ba8c073f5291e8b4109a98865137efc73ac133a Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Mon, 3 Mar 2025 13:18:27 +0000
Subject: [PATCH 2/7] Tweak copy button so it is not cut off

---
 app/ui/lib/Truncate.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/ui/lib/Truncate.tsx b/app/ui/lib/Truncate.tsx
index b4dd18b464..12d63239bf 100644
--- a/app/ui/lib/Truncate.tsx
+++ b/app/ui/lib/Truncate.tsx
@@ -39,7 +39,9 @@ export const Truncate = ({
           {truncate(text, maxLength, position)}
         </div>
       </Tooltip>
-      {hasCopyButton && <CopyToClipboard text={text} />}
+      <div className="flex items-center p-0.5">
+        {hasCopyButton && <CopyToClipboard text={text} />}
+      </div>
     </div>
   )
 }

From eae0c8acde4817dde58d10850b14a468044be195 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Mon, 3 Mar 2025 13:18:34 +0000
Subject: [PATCH 3/7] Spacing tweak

---
 app/ui/lib/DateTime.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/lib/DateTime.tsx b/app/ui/lib/DateTime.tsx
index e2a0897e46..60dfe000c1 100644
--- a/app/ui/lib/DateTime.tsx
+++ b/app/ui/lib/DateTime.tsx
@@ -9,7 +9,7 @@
 import { toLocaleDateString, toLocaleTimeString } from '~/util/date'
 
 export const DateTime = ({ date, locale }: { date: Date; locale?: string }) => (
-  <time dateTime={date.toISOString()} className="flex flex-wrap gap-x-2">
+  <time dateTime={date.toISOString()} className="flex flex-wrap gap-x-1">
     <span>{toLocaleDateString(date, locale)}</span>
     <span className="text-tertiary">{toLocaleTimeString(date, locale)}</span>
   </time>

From a50eb3cb4bec960a3207c4f06592fb26db3b886f Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Mon, 3 Mar 2025 13:18:45 +0000
Subject: [PATCH 4/7] Satisfy husky error

---
 tools/deno/deploy-dogfood.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/deno/deploy-dogfood.ts b/tools/deno/deploy-dogfood.ts
index 9c78a51da4..ab8014c4a0 100755
--- a/tools/deno/deploy-dogfood.ts
+++ b/tools/deno/deploy-dogfood.ts
@@ -43,7 +43,7 @@ if (!consoleCommit) {
 const fullCommit = await $`git rev-parse ${consoleCommit}`.text()
 
 if (consoleCommit !== fullCommit) {
-  console.log(`Resolved ${consoleCommit} to ${fullCommit}`)
+  console.info(`Resolved ${consoleCommit} to ${fullCommit}`)
 }
 
 console.info('Finding nexus zones...')

From 2eb17fdbabc5f500534ef5fe12b57bfade41e435 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Mon, 3 Mar 2025 13:20:43 +0000
Subject: [PATCH 5/7] Remove css file

---
 app/ui/styles/index.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css
index 52adedc6e7..9458fdbc4a 100644
--- a/app/ui/styles/index.css
+++ b/app/ui/styles/index.css
@@ -32,7 +32,6 @@
 @import './components/form.css';
 @import './components/login-page.css';
 @import './components/mini-table.css';
-@import './components/properties-table.css';
 @import './components/side-modal.css';
 @import './components/spinner.css';
 @import './components/table.css';

From d0af5a4bfaf8e32b797901a6cf8061a5ce79abbf Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Mon, 3 Mar 2025 14:25:58 +0000
Subject: [PATCH 6/7] Remove other group uses

---
 app/pages/project/vpcs/RouterPage.tsx        | 20 +++----
 app/pages/project/vpcs/VpcPage.tsx           | 16 ++----
 app/pages/system/inventory/sled/SledPage.tsx | 58 +++++++++-----------
 app/pages/system/silos/SiloPage.tsx          | 16 ++----
 4 files changed, 47 insertions(+), 63 deletions(-)

diff --git a/app/pages/project/vpcs/RouterPage.tsx b/app/pages/project/vpcs/RouterPage.tsx
index baa40c60d9..5abec76c8a 100644
--- a/app/pages/project/vpcs/RouterPage.tsx
+++ b/app/pages/project/vpcs/RouterPage.tsx
@@ -200,18 +200,14 @@ export default function RouterPage() {
           <MoreActionsMenu label="Router actions" actions={actions} />
         </div>
       </PageHeader>
-      <PropertiesTable.Group className="-mt-8 mb-16">
-        <PropertiesTable>
-          <PropertiesTable.DescriptionRow description={routerData.description} />
-          <PropertiesTable.Row label="Kind">
-            <Badge color="neutral">{routerData.kind}</Badge>
-          </PropertiesTable.Row>
-        </PropertiesTable>
-        <PropertiesTable>
-          <PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
-          <PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
-        </PropertiesTable>
-      </PropertiesTable.Group>
+      <PropertiesTable columns={2} className="-mt-8 mb-16">
+        <PropertiesTable.DescriptionRow description={routerData.description} />
+        <PropertiesTable.Row label="Kind">
+          <Badge color="neutral">{routerData.kind}</Badge>
+        </PropertiesTable.Row>
+        <PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
+        <PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
+      </PropertiesTable>
       <TableControls className="mb-3">
         <TableTitle>Routes</TableTitle>
         {canCreateNewRoute ? (
diff --git a/app/pages/project/vpcs/VpcPage.tsx b/app/pages/project/vpcs/VpcPage.tsx
index 6518c6f04e..9b4d008978 100644
--- a/app/pages/project/vpcs/VpcPage.tsx
+++ b/app/pages/project/vpcs/VpcPage.tsx
@@ -75,16 +75,12 @@ export default function VpcPage() {
           <MoreActionsMenu label="VPC actions" actions={actions} />
         </div>
       </PageHeader>
-      <PropertiesTable.Group className="mb-16">
-        <PropertiesTable>
-          <PropertiesTable.DescriptionRow description={vpc.description} />
-          <PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
-        </PropertiesTable>
-        <PropertiesTable>
-          <PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />
-          <PropertiesTable.DateRow date={vpc.timeModified} label="Last Modified" />
-        </PropertiesTable>
-      </PropertiesTable.Group>
+      <PropertiesTable columns={2} className="-mt-8 mb-16">
+        <PropertiesTable.DescriptionRow description={vpc.description} />
+        <PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
+        <PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />
+        <PropertiesTable.DateRow date={vpc.timeModified} label="Last Modified" />
+      </PropertiesTable>
 
       <RouteTabs fullWidth>
         <Tab to={pb.vpcFirewallRules(vpcSelector)}>Firewall Rules</Tab>
diff --git a/app/pages/system/inventory/sled/SledPage.tsx b/app/pages/system/inventory/sled/SledPage.tsx
index b150a158ce..5994b5c431 100644
--- a/app/pages/system/inventory/sled/SledPage.tsx
+++ b/app/pages/system/inventory/sled/SledPage.tsx
@@ -43,37 +43,33 @@ export default function SledPage() {
         <PageTitle icon={<Servers24Icon />}>Sled</PageTitle>
       </PageHeader>
 
-      <PropertiesTable.Group className="-mt-8 mb-16">
-        <PropertiesTable>
-          <PropertiesTable.Row label="sled id">
-            <span className="text-default">{sled.id}</span>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="part">
-            <span className="text-default">{sled.baseboard.part}</span>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="serial">
-            <span className="text-default">{sled.baseboard.serial}</span>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="revision">
-            <span className="text-default">{sled.baseboard.revision}</span>
-          </PropertiesTable.Row>
-        </PropertiesTable>
-        <PropertiesTable>
-          <PropertiesTable.Row label="rack id">
-            <span className="text-default">{sled.rackId}</span>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="location">
-            <span className="text-disabled">Coming soon</span>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="usable hardware threads">
-            <span className="text-default">{sled.usableHardwareThreads}</span>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="usable physical ram">
-            <span className="pr-0.5 text-default">{ram.value}</span>
-            <span className="text-tertiary">{ram.unit}</span>
-          </PropertiesTable.Row>
-        </PropertiesTable>
-      </PropertiesTable.Group>
+      <PropertiesTable columns={2} className="-mt-8 mb-16">
+        <PropertiesTable.Row label="sled id">
+          <span className="text-default">{sled.id}</span>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="part">
+          <span className="text-default">{sled.baseboard.part}</span>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="serial">
+          <span className="text-default">{sled.baseboard.serial}</span>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="revision">
+          <span className="text-default">{sled.baseboard.revision}</span>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="rack id">
+          <span className="text-default">{sled.rackId}</span>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="location">
+          <span className="text-disabled">Coming soon</span>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="usable hardware threads">
+          <span className="text-default">{sled.usableHardwareThreads}</span>
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="usable physical ram">
+          <span className="pr-0.5 text-default">{ram.value}</span>
+          <span className="text-tertiary">{ram.unit}</span>
+        </PropertiesTable.Row>
+      </PropertiesTable>
 
       <RouteTabs fullWidth>
         <Tab to={pb.sledInstances({ sledId })}>Instances</Tab>
diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx
index 609842d794..9683b36529 100644
--- a/app/pages/system/silos/SiloPage.tsx
+++ b/app/pages/system/silos/SiloPage.tsx
@@ -66,16 +66,12 @@ export default function SiloPage() {
         />
       </PageHeader>
 
-      <PropertiesTable.Group className="mb-16">
-        <PropertiesTable>
-          <PropertiesTable.IdRow id={silo.id} />
-          <PropertiesTable.DescriptionRow description={silo.description} />
-        </PropertiesTable>
-        <PropertiesTable>
-          <PropertiesTable.DateRow date={silo.timeCreated} label="Created" />
-          <PropertiesTable.DateRow date={silo.timeModified} label="Last Modified" />
-        </PropertiesTable>
-      </PropertiesTable.Group>
+      <PropertiesTable columns={2} className="-mt-8 mb-16">
+        <PropertiesTable.IdRow id={silo.id} />
+        <PropertiesTable.DescriptionRow description={silo.description} />
+        <PropertiesTable.DateRow date={silo.timeCreated} label="Created" />
+        <PropertiesTable.DateRow date={silo.timeModified} label="Last Modified" />
+      </PropertiesTable>
 
       <QueryParamTabs className="full-width" defaultValue="idps">
         <Tabs.List>

From 1faeaeebe0fa8d73dfa34c4301e60bbe8f8a62fa Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Mon, 3 Mar 2025 11:36:37 -0600
Subject: [PATCH 7/7] share col styling that's the same

---
 app/ui/lib/PropertiesTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx
index 7f33d81bcb..68915fc70a 100644
--- a/app/ui/lib/PropertiesTable.tsx
+++ b/app/ui/lib/PropertiesTable.tsx
@@ -41,9 +41,9 @@ export function PropertiesTable({
         className,
         'properties-table min-w-min basis-6/12 rounded-lg border border-default',
         'children:border-t children:pl-3 children:pr-6 children:border-secondary [&>*:nth-child(-n+2)]:!border-t-0',
+        'grid grid-cols-[minmax(min-content,1fr)_3fr]',
         {
-          'grid grid-cols-[minmax(min-content,1fr)_3fr]': columns === 1,
-          'grid grid-cols-[minmax(min-content,1fr)_3fr] lg+:grid-cols-[minmax(min-content,1fr)_3fr_minmax(min-content,1fr)_3fr] lg+:[&>*:nth-child(-n+4)]:!border-t-0 lg+:[&>*:nth-child(4n-2)]:border-r':
+          'lg+:grid-cols-[minmax(min-content,1fr)_3fr_minmax(min-content,1fr)_3fr] lg+:[&>*:nth-child(-n+4)]:!border-t-0 lg+:[&>*:nth-child(4n-2)]:border-r':
             columns === 2,
         }
       )}