Shared cells

app/pages/ProjectsPage.tsx

@@ -19,9 +19,9 @@ import {
 import { Folder24Icon } from '@oxide/design-system/icons/react'
 
 import { confirmDelete } from '~/stores/confirm-delete'
-import { DateCell } from '~/table/cells/DateCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -51,11 +51,8 @@ const staticCols = [
   colHelper.accessor('name', {
     cell: makeLinkCell((project) => pb.instances({ project })),
   }),
-  colHelper.accessor('description', {}),
-  colHelper.accessor('timeCreated', {
-    header: 'created',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('description', Columns.description),
+  colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
 export function ProjectsPage() {
@@ -119,6 +116,7 @@ export function ProjectsPage() {
   )
 
   const columns = useColsWithActions(staticCols, makeActions)
+
   return (
     <>
       <PageHeader>

app/pages/project/disks/DisksPage.tsx

@@ -22,10 +22,9 @@ import { Storage24Icon } from '@oxide/design-system/icons/react'
 import { DiskStatusBadge } from '~/components/StatusBadge'
 import { getProjectSelector, useProjectSelector, useToast } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
-import { DateCell } from '~/table/cells/DateCell'
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
-import { SizeCell } from '~/table/cells/SizeCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -83,15 +82,12 @@ const staticCols = [
       cell: (info) => <InstanceLinkCell instanceId={info.getValue()} />,
     }
   ),
-  colHelper.accessor('size', { cell: (info) => <SizeCell value={info.getValue()} /> }),
+  colHelper.accessor('size', Columns.size),
   colHelper.accessor('state.state', {
     header: 'Status',
     cell: (info) => <DiskStatusBadge status={info.getValue()} />,
   }),
-  colHelper.accessor('timeCreated', {
-    header: 'Created',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
 export function DisksPage() {

app/pages/project/floating-ips/FloatingIpsPage.tsx

@@ -28,6 +28,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Listbox } from '~/ui/lib/Listbox'
@@ -64,7 +65,7 @@ FloatingIpsPage.loader = async ({ params }: LoaderFunctionArgs) => {
 const colHelper = createColumnHelper<FloatingIp>()
 const staticCols = [
   colHelper.accessor('name', {}),
-  colHelper.accessor('description', {}),
+  colHelper.accessor('description', Columns.description),
   colHelper.accessor('ip', {}),
   colHelper.accessor('instanceId', {
     cell: (info) => <InstanceLinkCell instanceId={info.getValue()} />,

app/pages/project/images/ImagesPage.tsx

@@ -14,10 +14,9 @@ import { Images24Icon } from '@oxide/design-system/icons/react'
 
 import { getProjectSelector, useProjectSelector, useToast } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
-import { DateCell } from '~/table/cells/DateCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
-import { SizeCell } from '~/table/cells/SizeCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -37,7 +36,7 @@ const EmptyState = () => (
   />
 )
 
-const columnHelper = createColumnHelper<Image>()
+const colHelper = createColumnHelper<Image>()
 
 ImagesPage.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project } = getProjectSelector(params)
@@ -85,18 +84,12 @@ export function ImagesPage() {
 
   const columns = useMemo(() => {
     return [
-      columnHelper.accessor('name', {
+      colHelper.accessor('name', {
         cell: makeLinkCell((image) => pb.projectImageEdit({ ...projectSelector, image })),
       }),
-      columnHelper.accessor('description', {}),
-      columnHelper.accessor('size', {
-        header: 'size',
-        cell: (info) => <SizeCell value={info.getValue()} />,
-      }),
-      columnHelper.accessor('timeCreated', {
-        header: 'created',
-        cell: (info) => <DateCell value={info.getValue()} />,
-      }),
+      colHelper.accessor('description', Columns.description),
+      colHelper.accessor('size', Columns.size),
+      colHelper.accessor('timeCreated', Columns.timeCreated),
       getActionsCol(makeActions),
     ]
   }, [projectSelector, makeActions])

app/pages/project/instances/InstancesPage.tsx

@@ -18,11 +18,11 @@ import {
 import { Instances24Icon, Refresh16Icon } from '@oxide/design-system/icons/react'
 
 import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks'
-import { DateCell } from '~/table/cells/DateCell'
 import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell'
 import { InstanceStatusCell } from '~/table/cells/InstanceStatusCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { Button, buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -110,10 +110,7 @@ export function InstancesPage() {
         }
       ),
       colHelper.accessor('hostname', {}),
-      colHelper.accessor('timeCreated', {
-        header: 'created',
-        cell: (info) => <DateCell value={info.getValue()} />,
-      }),
+      colHelper.accessor('timeCreated', Columns.timeCreated),
       getActionsCol(makeActions),
     ],
     [projectSelector, makeActions]

app/pages/project/instances/instance/tabs/NetworkingTab.tsx

@@ -32,6 +32,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
 import { SkeletonCell } from '~/table/cells/EmptyCell'
 import { LinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
@@ -97,7 +98,7 @@ const staticCols = [
       </>
     ),
   }),
-  colHelper.accessor('description', {}),
+  colHelper.accessor('description', Columns.description),
   colHelper.accessor('ip', {}),
   colHelper.accessor('vpcId', {
     header: 'vpc',

app/pages/project/instances/instance/tabs/StorageTab.tsx

@@ -26,9 +26,8 @@ import { AttachDiskSideModalForm } from '~/forms/disk-attach'
 import { CreateDiskSideModalForm } from '~/forms/disk-create'
 import { getInstanceSelector, useInstanceSelector } from '~/hooks'
 import { addToast } from '~/stores/toast'
-import { DateCell } from '~/table/cells/DateCell'
-import { SizeCell } from '~/table/cells/SizeCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -55,17 +54,12 @@ StorageTab.loader = async ({ params }: LoaderFunctionArgs) => {
 const colHelper = createColumnHelper<Disk>()
 const staticCols = [
   colHelper.accessor('name', {}),
-  colHelper.accessor('size', {
-    cell: (info) => <SizeCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('size', Columns.size),
   colHelper.accessor((row) => row.state.state, {
     header: 'status',
     cell: (info) => <DiskStatusBadge status={info.getValue()} />,
   }),
-  colHelper.accessor('timeCreated', {
-    header: 'created',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
 const attachableStates = fancifyStates(instanceCan.attachDisk.states)

app/pages/project/snapshots/SnapshotsPage.tsx

@@ -21,10 +21,9 @@ import { Snapshots24Icon } from '@oxide/design-system/icons/react'
 import { SnapshotStatusBadge } from '~/components/StatusBadge'
 import { getProjectSelector, useProjectSelector } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
-import { DateCell } from '~/table/cells/DateCell'
 import { SkeletonCell } from '~/table/cells/EmptyCell'
-import { SizeCell } from '~/table/cells/SizeCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
 import { buttonStyle } from '~/ui/lib/Button'
@@ -84,19 +83,16 @@ SnapshotsPage.loader = async ({ params }: LoaderFunctionArgs) => {
 const colHelper = createColumnHelper<Snapshot>()
 const staticCols = [
   colHelper.accessor('name', {}),
-  colHelper.accessor('description', {}),
+  colHelper.accessor('description', Columns.description),
   colHelper.accessor('diskId', {
     header: 'disk',
     cell: (info) => <DiskNameFromId value={info.getValue()} />,
   }),
   colHelper.accessor('state', {
     cell: (info) => <SnapshotStatusBadge status={info.getValue()} />,
   }),
-  colHelper.accessor('size', { cell: (info) => <SizeCell value={info.getValue()} /> }),
-  colHelper.accessor('timeCreated', {
-    header: 'created',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('size', Columns.size),
+  colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
 export function SnapshotsPage() {

app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx

@@ -19,12 +19,12 @@ import { CreateFirewallRuleForm } from '~/forms/firewall-rules-create'
 import { EditFirewallRuleForm } from '~/forms/firewall-rules-edit'
 import { useVpcSelector } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
-import { DateCell } from '~/table/cells/DateCell'
 import { EnabledCell } from '~/table/cells/EnabledCell'
 import { FirewallFilterCell } from '~/table/cells/FirewallFilterCell'
 import { ButtonCell } from '~/table/cells/LinkCell'
 import { TypeValueCell } from '~/table/cells/TypeValueCell'
 import { getActionsCol } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { Table } from '~/table/Table'
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -66,10 +66,7 @@ const staticColumns = [
     header: 'Status',
     cell: (info) => <EnabledCell value={info.getValue()} />,
   }),
-  colHelper.accessor('timeCreated', {
-    header: 'Created',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
 export const VpcFirewallRulesTab = () => {

app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx

@@ -14,9 +14,9 @@ import { CreateSubnetForm } from '~/forms/subnet-create'
 import { EditSubnetForm } from '~/forms/subnet-edit'
 import { useVpcSelector } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
-import { DateCell } from '~/table/cells/DateCell'
 import { TwoLineCell } from '~/table/cells/TwoLineCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -28,10 +28,7 @@ const staticCols = [
     header: 'IP Block',
     cell: (info) => <TwoLineCell value={[...info.getValue()]} />,
   }),
-  colHelper.accessor('timeCreated', {
-    header: 'created',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
 export const VpcSubnetsTab = () => {

app/pages/project/vpcs/VpcsPage.tsx

@@ -20,9 +20,9 @@ import { Networking24Icon } from '@oxide/design-system/icons/react'
 
 import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
-import { DateCell } from '~/table/cells/DateCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -106,11 +106,8 @@ export function VpcsPage() {
         cell: makeLinkCell((vpc) => pb.vpc({ project, vpc })),
       }),
       colHelper.accessor('dnsName', { header: 'DNS name' }),
-      colHelper.accessor('description', {}),
-      colHelper.accessor('timeCreated', {
-        header: 'created',
-        cell: (info) => <DateCell value={info.getValue()} />,
-      }),
+      colHelper.accessor('description', Columns.description),
+      colHelper.accessor('timeCreated', Columns.timeCreated),
       getActionsCol(makeActions),
     ],
     [project, makeActions]

app/pages/settings/SSHKeysPage.tsx

@@ -13,8 +13,8 @@ import { apiQueryClient, useApiMutation, useApiQueryClient, type SshKey } from '
 import { Key16Icon, Key24Icon } from '@oxide/design-system/icons/react'
 
 import { confirmDelete } from '~/stores/confirm-delete'
-import { DateCell } from '~/table/cells/DateCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -30,11 +30,8 @@ SSHKeysPage.loader = async () => {
 const colHelper = createColumnHelper<SshKey>()
 const staticCols = [
   colHelper.accessor('name', {}),
-  colHelper.accessor('description', {}),
-  colHelper.accessor('timeModified', {
-    header: 'Last updated',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('description', Columns.description),
+  colHelper.accessor('timeModified', Columns.timeModified),
 ]
 
 export function SSHKeysPage() {

app/pages/system/SiloImagesPage.tsx

@@ -24,10 +24,9 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
 import { useForm, useToast } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
-import { DateCell } from '~/table/cells/DateCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
-import { SizeCell } from '~/table/cells/SizeCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -57,12 +56,9 @@ const staticCols = [
   colHelper.accessor('name', {
     cell: makeLinkCell((image) => pb.siloImageEdit({ image })),
   }),
-  colHelper.accessor('description', {}),
-  colHelper.accessor('size', { cell: (info) => <SizeCell value={info.getValue()} /> }),
-  colHelper.accessor('timeCreated', {
-    header: 'Created',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('description', Columns.description),
+  colHelper.accessor('size', Columns.size),
+  colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
 export function SiloImagesPage() {

app/pages/system/inventory/sled/SledInstancesTab.tsx

@@ -13,9 +13,9 @@ import { Instances24Icon } from '@oxide/design-system/icons/react'
 
 import { InstanceStatusBadge } from '~/components/StatusBadge'
 import { requireSledParams, useSledParams } from '~/hooks'
-import { DateCell } from '~/table/cells/DateCell'
 import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { pick } from '~/util/object'
@@ -64,14 +64,8 @@ const staticCols = [
     header: 'specs',
     cell: (info) => <InstanceResourceCell value={info.getValue()} />,
   }),
-  colHelper.accessor('timeCreated', {
-    header: 'created',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
-  colHelper.accessor('timeModified', {
-    header: 'modified',
-    cell: (info) => <DateCell value={info.getValue()} />,
-  }),
+  colHelper.accessor('timeCreated', Columns.timeCreated),
+  colHelper.accessor('timeModified', Columns.timeModified),
 ]
 
 export function SledInstancesTab() {