Add PropertiesTable.IdRow and PropertiesTable.DateRow

oxidecomputer · Dec 19, 2024 · 2cb9d8d · 2cb9d8d
1 parent aa46e50
commit 2cb9d8d
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -42,7 +42,6 @@ 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'
@@ -234,14 +233,8 @@ export function InstancePage() {
               <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.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
@@ -36,7 +36,6 @@ 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'
@@ -210,12 +209,8 @@ export function Component() {
           </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
@@ -18,7 +18,6 @@ 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'
@@ -85,12 +84,8 @@ export function VpcPage() {
           <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/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx
@@ -15,7 +15,6 @@ 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 +67,14 @@ export function Component() {
 
       <PropertiesTable.Group className="mb-16">
         <PropertiesTable>
-          <PropertiesTable.Row label="ID">{silo.id}</PropertiesTable.Row>
+          <PropertiesTable.IdRow id={silo.id} />
           <PropertiesTable.Row label="Description">
             <DescriptionCell text={silo.description} />
           </PropertiesTable.Row>
         </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
@@ -12,14 +12,21 @@ 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
 }
 
 export function PropertiesTable({ className, children }: PropertiesTableProps) {
   invariant(
-    isOneOf(children, [PropertiesTable.Row]),
+    isOneOf(children, [
+      PropertiesTable.Row,
+      PropertiesTable.IdRow,
+      PropertiesTable.DateRow,
+    ]),
     'PropertiesTable can only have PropertiesTable.Row as a child'
   )
   return (
@@ -49,6 +56,24 @@ PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
   </>
 )
 
+PropertiesTable.IdRow = ({ id }: { id: string }) => (
+  <PropertiesTable.Row label="ID">
+    <Truncate text={id} maxLength={32} hasCopyButton />
+  </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