From 63954c8a2bc5bc15ec25cbc0d0ca944153701407 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 18 Dec 2024 21:47:25 -0800
Subject: [PATCH] Add PropertiesTable.IdRow, .DescriptionRow, and .DateRow
 (#2633)

---
 app/forms/idp/edit.tsx                        | 14 ++-----
 app/forms/image-edit.tsx                      | 14 ++-----
 app/forms/ssh-key-edit.tsx                    | 14 ++-----
 .../instances/instance/InstancePage.tsx       | 19 ++--------
 app/pages/project/vpcs/RouterPage.tsx         | 14 ++-----
 app/pages/project/vpcs/VpcPage/VpcPage.tsx    | 14 ++-----
 .../project/vpcs/internet-gateway-edit.tsx    | 13 ++-----
 app/pages/system/silos/SiloPage.tsx           | 16 ++------
 app/ui/lib/PropertiesTable.tsx                | 37 ++++++++++++++++++-
 9 files changed, 61 insertions(+), 94 deletions(-)

diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx
index fa9e5a149..34dc2f322 100644
--- a/app/forms/idp/edit.tsx
+++ b/app/forms/idp/edit.tsx
@@ -16,11 +16,9 @@ import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { getIdpSelector, useIdpSelector } from '~/hooks/use-params'
-import { DateTime } from '~/ui/lib/DateTime'
 import { FormDivider } from '~/ui/lib/Divider'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel, SideModal } from '~/ui/lib/SideModal'
-import { Truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
 
 EditIdpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -61,15 +59,9 @@ export function EditIdpSideModalForm() {
       loading={false}
     >
       <PropertiesTable>
-        <PropertiesTable.Row label="ID">
-          <Truncate text={idp.id} maxLength={32} hasCopyButton />
-        </PropertiesTable.Row>
-        <PropertiesTable.Row label="Created">
-          <DateTime date={idp.timeCreated} />
-        </PropertiesTable.Row>
-        <PropertiesTable.Row label="Updated">
-          <DateTime date={idp.timeModified} />
-        </PropertiesTable.Row>
+        <PropertiesTable.IdRow id={idp.id} />
+        <PropertiesTable.DateRow date={idp.timeCreated} label="Created" />
+        <PropertiesTable.DateRow date={idp.timeModified} label="Updated" />
       </PropertiesTable>
 
       <NameField name="name" control={form.control} disabled />
diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx
index 882bd9325..594cc2939 100644
--- a/app/forms/image-edit.tsx
+++ b/app/forms/image-edit.tsx
@@ -21,10 +21,8 @@ import {
   useProjectImageSelector,
   useSiloImageSelector,
 } from '~/hooks/use-params'
-import { DateTime } from '~/ui/lib/DateTime'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'
-import { Truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
 import { capitalize } from '~/util/str'
 import { bytesToGiB } from '~/util/units'
@@ -96,19 +94,13 @@ function EditImageSideModalForm({
     >
       <PropertiesTable>
         <PropertiesTable.Row label="Shared with">{type}</PropertiesTable.Row>
-        <PropertiesTable.Row label="ID">
-          <Truncate text={image.id} maxLength={32} hasCopyButton />
-        </PropertiesTable.Row>
+        <PropertiesTable.IdRow id={image.id} />
         <PropertiesTable.Row label="Size">
           <span>{bytesToGiB(image.size)}</span>
           <span className="ml-1 inline-block text-tertiary">GiB</span>
         </PropertiesTable.Row>
-        <PropertiesTable.Row label="Created">
-          <DateTime date={image.timeCreated} />
-        </PropertiesTable.Row>
-        <PropertiesTable.Row label="Updated">
-          <DateTime date={image.timeModified} />
-        </PropertiesTable.Row>
+        <PropertiesTable.DateRow date={image.timeCreated} label="Created" />
+        <PropertiesTable.DateRow date={image.timeModified} label="Updated" />
       </PropertiesTable>
       <NameField name="name" control={form.control} disabled />
       <DescriptionField name="description" control={form.control} required disabled />
diff --git a/app/forms/ssh-key-edit.tsx b/app/forms/ssh-key-edit.tsx
index 609ec225c..161b7bd49 100644
--- a/app/forms/ssh-key-edit.tsx
+++ b/app/forms/ssh-key-edit.tsx
@@ -17,10 +17,8 @@ import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { getSshKeySelector, useSshKeySelector } from '~/hooks/use-params'
 import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
-import { DateTime } from '~/ui/lib/DateTime'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'
-import { Truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
 
 EditSSHKeySideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -56,15 +54,9 @@ export function EditSSHKeySideModalForm() {
       submitError={null}
     >
       <PropertiesTable>
-        <PropertiesTable.Row label="ID">
-          <Truncate text={data.id} maxLength={32} hasCopyButton />
-        </PropertiesTable.Row>
-        <PropertiesTable.Row label="Created">
-          <DateTime date={data.timeCreated} />
-        </PropertiesTable.Row>
-        <PropertiesTable.Row label="Updated">
-          <DateTime date={data.timeModified} />
-        </PropertiesTable.Row>
+        <PropertiesTable.IdRow id={data.id} />
+        <PropertiesTable.DateRow date={data.timeCreated} label="Created" />
+        <PropertiesTable.DateRow date={data.timeModified} label="Updated" />
       </PropertiesTable>
       <NameField name="name" control={form.control} disabled />
       <DescriptionField name="description" control={form.control} disabled />
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 46d1397bd..b73ae7e79 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -42,14 +42,13 @@ import {
 import { addToast } from '~/stores/toast'
 import { EmptyCell } from '~/table/cells/EmptyCell'
 import { Button } from '~/ui/lib/Button'
-import { DateTime } from '~/ui/lib/DateTime'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { Spinner } from '~/ui/lib/Spinner'
 import { Tooltip } from '~/ui/lib/Tooltip'
-import { truncate, Truncate } from '~/ui/lib/Truncate'
+import { truncate } from '~/ui/lib/Truncate'
 import { pb } from '~/util/path-builder'
 import { GiB } from '~/util/units'
 
@@ -229,19 +228,9 @@ export function InstancePage() {
           </PropertiesTable.Row>
         </PropertiesTable>
         <PropertiesTable>
-          <PropertiesTable.Row label="description">
-            <span className="text-default">
-              <Truncate text={instance.description} maxLength={40} />
-            </span>
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="created">
-            <DateTime date={instance.timeCreated} />
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="id">
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap text-default">
-              {instance.id}
-            </span>
-          </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>
diff --git a/app/pages/project/vpcs/RouterPage.tsx b/app/pages/project/vpcs/RouterPage.tsx
index 54304780e..86fa6c42d 100644
--- a/app/pages/project/vpcs/RouterPage.tsx
+++ b/app/pages/project/vpcs/RouterPage.tsx
@@ -30,13 +30,11 @@ import { routeFormMessage } from '~/forms/vpc-router-route-common'
 import { getVpcRouterSelector, useVpcRouterSelector } from '~/hooks/use-params'
 import { confirmAction } from '~/stores/confirm-action'
 import { addToast } from '~/stores/toast'
-import { DescriptionCell } from '~/table/cells/DescriptionCell'
 import { TypeValueCell } from '~/table/cells/TypeValueCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
 import { CreateButton, CreateLink } from '~/ui/lib/CreateButton'
-import { DateTime } from '~/ui/lib/DateTime'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -202,20 +200,14 @@ export function Component() {
       </PageHeader>
       <PropertiesTable.Group className="-mt-8 mb-16">
         <PropertiesTable>
-          <PropertiesTable.Row label="Description">
-            <DescriptionCell text={routerData.description} />
-          </PropertiesTable.Row>
+          <PropertiesTable.DescriptionRow description={routerData.description} />
           <PropertiesTable.Row label="Kind">
             <Badge color="neutral">{routerData.kind}</Badge>
           </PropertiesTable.Row>
         </PropertiesTable>
         <PropertiesTable>
-          <PropertiesTable.Row label="Created">
-            <DateTime date={routerData.timeCreated} />
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="Last Modified">
-            <DateTime date={routerData.timeModified} />
-          </PropertiesTable.Row>
+          <PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
+          <PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
         </PropertiesTable>
       </PropertiesTable.Group>
       <TableControls className="mb-3">
diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx
index 87993db96..82901be60 100644
--- a/app/pages/project/vpcs/VpcPage/VpcPage.tsx
+++ b/app/pages/project/vpcs/VpcPage/VpcPage.tsx
@@ -17,8 +17,6 @@ import { RouteTabs, Tab } from '~/components/RouteTabs'
 import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
-import { DescriptionCell } from '~/table/cells/DescriptionCell'
-import { DateTime } from '~/ui/lib/DateTime'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { pb } from '~/util/path-builder'
@@ -79,18 +77,12 @@ export function VpcPage() {
       </PageHeader>
       <PropertiesTable.Group className="mb-16">
         <PropertiesTable>
-          <PropertiesTable.Row label="Description">
-            <DescriptionCell text={vpc.description} />
-          </PropertiesTable.Row>
+          <PropertiesTable.DescriptionRow description={vpc.description} />
           <PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
         </PropertiesTable>
         <PropertiesTable>
-          <PropertiesTable.Row label="Created">
-            <DateTime date={vpc.timeCreated} />
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="Last Modified">
-            <DateTime date={vpc.timeModified} />
-          </PropertiesTable.Row>
+          <PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />
+          <PropertiesTable.DateRow date={vpc.timeModified} label="Last Modified" />
         </PropertiesTable>
       </PropertiesTable.Group>
 
diff --git a/app/pages/project/vpcs/internet-gateway-edit.tsx b/app/pages/project/vpcs/internet-gateway-edit.tsx
index 7a72d8240..115133f5e 100644
--- a/app/pages/project/vpcs/internet-gateway-edit.tsx
+++ b/app/pages/project/vpcs/internet-gateway-edit.tsx
@@ -15,7 +15,6 @@ import { Gateway16Icon } from '@oxide/design-system/icons/react'
 import { apiQueryClient, queryClient, usePrefetchedApiQuery } from '~/api'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { getInternetGatewaySelector, useInternetGatewaySelector } from '~/hooks/use-params'
-import { DescriptionCell } from '~/table/cells/DescriptionCell'
 import { IpPoolCell } from '~/table/cells/IpPoolCell'
 import { CopyableIp } from '~/ui/lib/CopyableIp'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -137,9 +136,7 @@ export function EditInternetGatewayForm() {
       />
       <PropertiesTable key={internetGateway.id}>
         <PropertiesTable.Row label="Name">{internetGateway.name}</PropertiesTable.Row>
-        <PropertiesTable.Row label="Description">
-          <DescriptionCell text={internetGateway.description} />
-        </PropertiesTable.Row>
+        <PropertiesTable.DescriptionRow description={internetGateway.description} />
       </PropertiesTable>
 
       <FormDivider />
@@ -154,9 +151,7 @@ export function EditInternetGatewayForm() {
               <PropertiesTable.Row label="Name">
                 {gatewayIpAddress.name}
               </PropertiesTable.Row>
-              <PropertiesTable.Row label="Description">
-                <DescriptionCell text={gatewayIpAddress.description} />
-              </PropertiesTable.Row>
+              <PropertiesTable.DescriptionRow description={gatewayIpAddress.description} />
               <PropertiesTable.Row label="IP Address">
                 <CopyableIp ip={gatewayIpAddress.address} />
               </PropertiesTable.Row>
@@ -183,9 +178,7 @@ export function EditInternetGatewayForm() {
           gatewayIpPools.map((gatewayIpPool) => (
             <PropertiesTable key={gatewayIpPool.id}>
               <PropertiesTable.Row label="Name">{gatewayIpPool.name}</PropertiesTable.Row>
-              <PropertiesTable.Row label="Description">
-                <DescriptionCell text={gatewayIpPool.description} />
-              </PropertiesTable.Row>
+              <PropertiesTable.DescriptionRow description={gatewayIpPool.description} />
               <PropertiesTable.Row label="IP Pool Name">
                 <IpPoolCell ipPoolId={gatewayIpPool.ipPoolId} />
               </PropertiesTable.Row>
diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx
index 558df43dc..b075dc3ef 100644
--- a/app/pages/system/silos/SiloPage.tsx
+++ b/app/pages/system/silos/SiloPage.tsx
@@ -13,9 +13,7 @@ import { Cloud16Icon, Cloud24Icon, NextArrow12Icon } from '@oxide/design-system/
 import { DocsPopover } from '~/components/DocsPopover'
 import { QueryParamTabs } from '~/components/QueryParamTabs'
 import { getSiloSelector, useSiloSelector } from '~/hooks/use-params'
-import { DescriptionCell } from '~/table/cells/DescriptionCell'
 import { Badge } from '~/ui/lib/Badge'
-import { DateTime } from '~/ui/lib/DateTime'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -68,18 +66,12 @@ export function Component() {
 
       <PropertiesTable.Group className="mb-16">
         <PropertiesTable>
-          <PropertiesTable.Row label="ID">{silo.id}</PropertiesTable.Row>
-          <PropertiesTable.Row label="Description">
-            <DescriptionCell text={silo.description} />
-          </PropertiesTable.Row>
+          <PropertiesTable.IdRow id={silo.id} />
+          <PropertiesTable.DescriptionRow description={silo.description} />
         </PropertiesTable>
         <PropertiesTable>
-          <PropertiesTable.Row label="Created">
-            <DateTime date={silo.timeCreated} />
-          </PropertiesTable.Row>
-          <PropertiesTable.Row label="Last Modified">
-            <DateTime date={silo.timeModified} />
-          </PropertiesTable.Row>
+          <PropertiesTable.DateRow date={silo.timeCreated} label="Created" />
+          <PropertiesTable.DateRow date={silo.timeModified} label="Last Modified" />
         </PropertiesTable>
       </PropertiesTable.Group>
 
diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx
index 5b2c6a104..2741fc1e8 100644
--- a/app/ui/lib/PropertiesTable.tsx
+++ b/app/ui/lib/PropertiesTable.tsx
@@ -8,10 +8,14 @@
 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'
 
+import { DateTime } from './DateTime'
+import { Truncate } from './Truncate'
+
 export interface PropertiesTableProps {
   className?: string
   children: ReactNode
@@ -19,8 +23,13 @@ export interface PropertiesTableProps {
 
 export function PropertiesTable({ className, children }: PropertiesTableProps) {
   invariant(
-    isOneOf(children, [PropertiesTable.Row]),
-    'PropertiesTable can only have PropertiesTable.Row as a child'
+    isOneOf(children, [
+      PropertiesTable.Row,
+      PropertiesTable.IdRow,
+      PropertiesTable.DescriptionRow,
+      PropertiesTable.DateRow,
+    ]),
+    'PropertiesTable only accepts specific Row components as children'
   )
   return (
     <div
@@ -49,6 +58,30 @@ PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
   </>
 )
 
+PropertiesTable.IdRow = ({ id }: { id: string }) => (
+  <PropertiesTable.Row label="ID">
+    <Truncate text={id} maxLength={32} hasCopyButton />
+  </PropertiesTable.Row>
+)
+
+PropertiesTable.DescriptionRow = ({ description }: { description: string }) => (
+  <PropertiesTable.Row label="Description">
+    <DescriptionCell text={description} />
+  </PropertiesTable.Row>
+)
+
+PropertiesTable.DateRow = ({
+  date,
+  label,
+}: {
+  date: Date
+  label: 'Created' | 'Updated' | 'Last Modified'
+}) => (
+  <PropertiesTable.Row label={label}>
+    <DateTime date={date} />
+  </PropertiesTable.Row>
+)
+
 interface PropertiesTableGroupProps {
   children: ReactNode
   className?: string