Skip to content

Commit 11411bb

Browse files
david-crespodavid-crespo
authored
Shared cells (#2121)
* shared column defs for description, timeCreated, timeModified, size * now do it the right way * don't need that nameCol separate anymore * whoops * delete some cell files. now we're talkin
1 parent 1f8b25d commit 11411bb

File tree

23 files changed

+99
-164
lines changed

23 files changed

+99
-164
lines changed

‎app/pages/ProjectsPage.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ import {
1919
import { Folder24Icon } from '@oxide/design-system/icons/react'
2020

2121
import { confirmDelete } from '~/stores/confirm-delete'
22-
import { DateCell } from '~/table/cells/DateCell'
2322
import { makeLinkCell } from '~/table/cells/LinkCell'
2423
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
24+
import { Columns } from '~/table/columns/common'
2525
import { useQueryTable } from '~/table/QueryTable'
2626
import { buttonStyle } from '~/ui/lib/Button'
2727
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -51,11 +51,8 @@ const staticCols = [
5151
colHelper.accessor('name', {
5252
cell: makeLinkCell((project) => pb.instances({ project })),
5353
}),
54-
colHelper.accessor('description', {}),
55-
colHelper.accessor('timeCreated', {
56-
header: 'created',
57-
cell: (info) => <DateCell value={info.getValue()} />,
58-
}),
54+
colHelper.accessor('description', Columns.description),
55+
colHelper.accessor('timeCreated', Columns.timeCreated),
5956
]
6057

6158
export function ProjectsPage() {
@@ -119,6 +116,7 @@ export function ProjectsPage() {
119116
)
120117

121118
const columns = useColsWithActions(staticCols, makeActions)
119+
122120
return (
123121
<>
124122
<PageHeader>

‎app/pages/project/disks/DisksPage.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,9 @@ import { Storage24Icon } from '@oxide/design-system/icons/react'
2222
import { DiskStatusBadge } from '~/components/StatusBadge'
2323
import { getProjectSelector, useProjectSelector, useToast } from '~/hooks'
2424
import { confirmDelete } from '~/stores/confirm-delete'
25-
import { DateCell } from '~/table/cells/DateCell'
2625
import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
27-
import { SizeCell } from '~/table/cells/SizeCell'
2826
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
27+
import { Columns } from '~/table/columns/common'
2928
import { useQueryTable } from '~/table/QueryTable'
3029
import { buttonStyle } from '~/ui/lib/Button'
3130
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -83,15 +82,12 @@ const staticCols = [
8382
cell: (info) => <InstanceLinkCell instanceId={info.getValue()} />,
8483
}
8584
),
86-
colHelper.accessor('size', { cell: (info) => <SizeCell value={info.getValue()} /> }),
85+
colHelper.accessor('size', Columns.size),
8786
colHelper.accessor('state.state', {
8887
header: 'Status',
8988
cell: (info) => <DiskStatusBadge status={info.getValue()} />,
9089
}),
91-
colHelper.accessor('timeCreated', {
92-
header: 'Created',
93-
cell: (info) => <DateCell value={info.getValue()} />,
94-
}),
90+
colHelper.accessor('timeCreated', Columns.timeCreated),
9591
]
9692

9793
export function DisksPage() {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
2828
import { addToast } from '~/stores/toast'
2929
import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
3030
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
31+
import { Columns } from '~/table/columns/common'
3132
import { useQueryTable } from '~/table/QueryTable'
3233
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
3334
import { Listbox } from '~/ui/lib/Listbox'
@@ -64,7 +65,7 @@ FloatingIpsPage.loader = async ({ params }: LoaderFunctionArgs) => {
6465
const colHelper = createColumnHelper<FloatingIp>()
6566
const staticCols = [
6667
colHelper.accessor('name', {}),
67-
colHelper.accessor('description', {}),
68+
colHelper.accessor('description', Columns.description),
6869
colHelper.accessor('ip', {}),
6970
colHelper.accessor('instanceId', {
7071
cell: (info) => <InstanceLinkCell instanceId={info.getValue()} />,

‎app/pages/project/images/ImagesPage.tsx

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,9 @@ import { Images24Icon } from '@oxide/design-system/icons/react'
1414

1515
import { getProjectSelector, useProjectSelector, useToast } from '~/hooks'
1616
import { confirmDelete } from '~/stores/confirm-delete'
17-
import { DateCell } from '~/table/cells/DateCell'
1817
import { makeLinkCell } from '~/table/cells/LinkCell'
19-
import { SizeCell } from '~/table/cells/SizeCell'
2018
import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
19+
import { Columns } from '~/table/columns/common'
2120
import { useQueryTable } from '~/table/QueryTable'
2221
import { buttonStyle } from '~/ui/lib/Button'
2322
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -37,7 +36,7 @@ const EmptyState = () => (
3736
/>
3837
)
3938

40-
const columnHelper = createColumnHelper<Image>()
39+
const colHelper = createColumnHelper<Image>()
4140

4241
ImagesPage.loader = async ({ params }: LoaderFunctionArgs) => {
4342
const { project } = getProjectSelector(params)
@@ -85,18 +84,12 @@ export function ImagesPage() {
8584

8685
const columns = useMemo(() => {
8786
return [
88-
columnHelper.accessor('name', {
87+
colHelper.accessor('name', {
8988
cell: makeLinkCell((image) => pb.projectImageEdit({ ...projectSelector, image })),
9089
}),
91-
columnHelper.accessor('description', {}),
92-
columnHelper.accessor('size', {
93-
header: 'size',
94-
cell: (info) => <SizeCell value={info.getValue()} />,
95-
}),
96-
columnHelper.accessor('timeCreated', {
97-
header: 'created',
98-
cell: (info) => <DateCell value={info.getValue()} />,
99-
}),
90+
colHelper.accessor('description', Columns.description),
91+
colHelper.accessor('size', Columns.size),
92+
colHelper.accessor('timeCreated', Columns.timeCreated),
10093
getActionsCol(makeActions),
10194
]
10295
}, [projectSelector, makeActions])

‎app/pages/project/instances/InstancesPage.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ import {
1818
import { Instances24Icon, Refresh16Icon } from '@oxide/design-system/icons/react'
1919

2020
import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks'
21-
import { DateCell } from '~/table/cells/DateCell'
2221
import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell'
2322
import { InstanceStatusCell } from '~/table/cells/InstanceStatusCell'
2423
import { makeLinkCell } from '~/table/cells/LinkCell'
2524
import { getActionsCol } from '~/table/columns/action-col'
25+
import { Columns } from '~/table/columns/common'
2626
import { useQueryTable } from '~/table/QueryTable'
2727
import { Button, buttonStyle } from '~/ui/lib/Button'
2828
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -110,10 +110,7 @@ export function InstancesPage() {
110110
}
111111
),
112112
colHelper.accessor('hostname', {}),
113-
colHelper.accessor('timeCreated', {
114-
header: 'created',
115-
cell: (info) => <DateCell value={info.getValue()} />,
116-
}),
113+
colHelper.accessor('timeCreated', Columns.timeCreated),
117114
getActionsCol(makeActions),
118115
],
119116
[projectSelector, makeActions]

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { confirmDelete } from '~/stores/confirm-delete'
3232
import { SkeletonCell } from '~/table/cells/EmptyCell'
3333
import { LinkCell } from '~/table/cells/LinkCell'
3434
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
35+
import { Columns } from '~/table/columns/common'
3536
import { useQueryTable } from '~/table/QueryTable'
3637
import { Badge } from '~/ui/lib/Badge'
3738
import { Button } from '~/ui/lib/Button'
@@ -97,7 +98,7 @@ const staticCols = [
9798
</>
9899
),
99100
}),
100-
colHelper.accessor('description', {}),
101+
colHelper.accessor('description', Columns.description),
101102
colHelper.accessor('ip', {}),
102103
colHelper.accessor('vpcId', {
103104
header: 'vpc',

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,8 @@ import { AttachDiskSideModalForm } from '~/forms/disk-attach'
2626
import { CreateDiskSideModalForm } from '~/forms/disk-create'
2727
import { getInstanceSelector, useInstanceSelector } from '~/hooks'
2828
import { addToast } from '~/stores/toast'
29-
import { DateCell } from '~/table/cells/DateCell'
30-
import { SizeCell } from '~/table/cells/SizeCell'
3129
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
30+
import { Columns } from '~/table/columns/common'
3231
import { useQueryTable } from '~/table/QueryTable'
3332
import { Button } from '~/ui/lib/Button'
3433
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -55,17 +54,12 @@ StorageTab.loader = async ({ params }: LoaderFunctionArgs) => {
5554
const colHelper = createColumnHelper<Disk>()
5655
const staticCols = [
5756
colHelper.accessor('name', {}),
58-
colHelper.accessor('size', {
59-
cell: (info) => <SizeCell value={info.getValue()} />,
60-
}),
57+
colHelper.accessor('size', Columns.size),
6158
colHelper.accessor((row) => row.state.state, {
6259
header: 'status',
6360
cell: (info) => <DiskStatusBadge status={info.getValue()} />,
6461
}),
65-
colHelper.accessor('timeCreated', {
66-
header: 'created',
67-
cell: (info) => <DateCell value={info.getValue()} />,
68-
}),
62+
colHelper.accessor('timeCreated', Columns.timeCreated),
6963
]
7064

7165
const attachableStates = fancifyStates(instanceCan.attachDisk.states)

‎app/pages/project/snapshots/SnapshotsPage.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,9 @@ import { Snapshots24Icon } from '@oxide/design-system/icons/react'
2121
import { SnapshotStatusBadge } from '~/components/StatusBadge'
2222
import { getProjectSelector, useProjectSelector } from '~/hooks'
2323
import { confirmDelete } from '~/stores/confirm-delete'
24-
import { DateCell } from '~/table/cells/DateCell'
2524
import { SkeletonCell } from '~/table/cells/EmptyCell'
26-
import { SizeCell } from '~/table/cells/SizeCell'
2725
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
26+
import { Columns } from '~/table/columns/common'
2827
import { useQueryTable } from '~/table/QueryTable'
2928
import { Badge } from '~/ui/lib/Badge'
3029
import { buttonStyle } from '~/ui/lib/Button'
@@ -84,19 +83,16 @@ SnapshotsPage.loader = async ({ params }: LoaderFunctionArgs) => {
8483
const colHelper = createColumnHelper<Snapshot>()
8584
const staticCols = [
8685
colHelper.accessor('name', {}),
87-
colHelper.accessor('description', {}),
86+
colHelper.accessor('description', Columns.description),
8887
colHelper.accessor('diskId', {
8988
header: 'disk',
9089
cell: (info) => <DiskNameFromId value={info.getValue()} />,
9190
}),
9291
colHelper.accessor('state', {
9392
cell: (info) => <SnapshotStatusBadge status={info.getValue()} />,
9493
}),
95-
colHelper.accessor('size', { cell: (info) => <SizeCell value={info.getValue()} /> }),
96-
colHelper.accessor('timeCreated', {
97-
header: 'created',
98-
cell: (info) => <DateCell value={info.getValue()} />,
99-
}),
94+
colHelper.accessor('size', Columns.size),
95+
colHelper.accessor('timeCreated', Columns.timeCreated),
10096
]
10197

10298
export function SnapshotsPage() {

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ import { CreateFirewallRuleForm } from '~/forms/firewall-rules-create'
1919
import { EditFirewallRuleForm } from '~/forms/firewall-rules-edit'
2020
import { useVpcSelector } from '~/hooks'
2121
import { confirmDelete } from '~/stores/confirm-delete'
22-
import { DateCell } from '~/table/cells/DateCell'
2322
import { EnabledCell } from '~/table/cells/EnabledCell'
2423
import { FirewallFilterCell } from '~/table/cells/FirewallFilterCell'
2524
import { ButtonCell } from '~/table/cells/LinkCell'
2625
import { TypeValueCell } from '~/table/cells/TypeValueCell'
2726
import { getActionsCol } from '~/table/columns/action-col'
27+
import { Columns } from '~/table/columns/common'
2828
import { Table } from '~/table/Table'
2929
import { Button } from '~/ui/lib/Button'
3030
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -66,10 +66,7 @@ const staticColumns = [
6666
header: 'Status',
6767
cell: (info) => <EnabledCell value={info.getValue()} />,
6868
}),
69-
colHelper.accessor('timeCreated', {
70-
header: 'Created',
71-
cell: (info) => <DateCell value={info.getValue()} />,
72-
}),
69+
colHelper.accessor('timeCreated', Columns.timeCreated),
7370
]
7471

7572
export const VpcFirewallRulesTab = () => {

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ import { CreateSubnetForm } from '~/forms/subnet-create'
1414
import { EditSubnetForm } from '~/forms/subnet-edit'
1515
import { useVpcSelector } from '~/hooks'
1616
import { confirmDelete } from '~/stores/confirm-delete'
17-
import { DateCell } from '~/table/cells/DateCell'
1817
import { TwoLineCell } from '~/table/cells/TwoLineCell'
1918
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
19+
import { Columns } from '~/table/columns/common'
2020
import { useQueryTable } from '~/table/QueryTable'
2121
import { Button } from '~/ui/lib/Button'
2222
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -28,10 +28,7 @@ const staticCols = [
2828
header: 'IP Block',
2929
cell: (info) => <TwoLineCell value={[...info.getValue()]} />,
3030
}),
31-
colHelper.accessor('timeCreated', {
32-
header: 'created',
33-
cell: (info) => <DateCell value={info.getValue()} />,
34-
}),
31+
colHelper.accessor('timeCreated', Columns.timeCreated),
3532
]
3633

3734
export const VpcSubnetsTab = () => {

‎app/pages/project/vpcs/VpcsPage.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ import { Networking24Icon } from '@oxide/design-system/icons/react'
2020

2121
import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks'
2222
import { confirmDelete } from '~/stores/confirm-delete'
23-
import { DateCell } from '~/table/cells/DateCell'
2423
import { makeLinkCell } from '~/table/cells/LinkCell'
2524
import { getActionsCol, type MenuAction } from '~/table/columns/action-col'
25+
import { Columns } from '~/table/columns/common'
2626
import { useQueryTable } from '~/table/QueryTable'
2727
import { buttonStyle } from '~/ui/lib/Button'
2828
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -106,11 +106,8 @@ export function VpcsPage() {
106106
cell: makeLinkCell((vpc) => pb.vpc({ project, vpc })),
107107
}),
108108
colHelper.accessor('dnsName', { header: 'DNS name' }),
109-
colHelper.accessor('description', {}),
110-
colHelper.accessor('timeCreated', {
111-
header: 'created',
112-
cell: (info) => <DateCell value={info.getValue()} />,
113-
}),
109+
colHelper.accessor('description', Columns.description),
110+
colHelper.accessor('timeCreated', Columns.timeCreated),
114111
getActionsCol(makeActions),
115112
],
116113
[project, makeActions]

‎app/pages/settings/SSHKeysPage.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import { apiQueryClient, useApiMutation, useApiQueryClient, type SshKey } from '
1313
import { Key16Icon, Key24Icon } from '@oxide/design-system/icons/react'
1414

1515
import { confirmDelete } from '~/stores/confirm-delete'
16-
import { DateCell } from '~/table/cells/DateCell'
1716
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
17+
import { Columns } from '~/table/columns/common'
1818
import { useQueryTable } from '~/table/QueryTable'
1919
import { buttonStyle } from '~/ui/lib/Button'
2020
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -30,11 +30,8 @@ SSHKeysPage.loader = async () => {
3030
const colHelper = createColumnHelper<SshKey>()
3131
const staticCols = [
3232
colHelper.accessor('name', {}),
33-
colHelper.accessor('description', {}),
34-
colHelper.accessor('timeModified', {
35-
header: 'Last updated',
36-
cell: (info) => <DateCell value={info.getValue()} />,
37-
}),
33+
colHelper.accessor('description', Columns.description),
34+
colHelper.accessor('timeModified', Columns.timeModified),
3835
]
3936

4037
export function SSHKeysPage() {

‎app/pages/system/SiloImagesPage.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,9 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
2424
import { useForm, useToast } from '~/hooks'
2525
import { confirmDelete } from '~/stores/confirm-delete'
2626
import { addToast } from '~/stores/toast'
27-
import { DateCell } from '~/table/cells/DateCell'
2827
import { makeLinkCell } from '~/table/cells/LinkCell'
29-
import { SizeCell } from '~/table/cells/SizeCell'
3028
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
29+
import { Columns } from '~/table/columns/common'
3130
import { useQueryTable } from '~/table/QueryTable'
3231
import { Button } from '~/ui/lib/Button'
3332
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -57,12 +56,9 @@ const staticCols = [
5756
colHelper.accessor('name', {
5857
cell: makeLinkCell((image) => pb.siloImageEdit({ image })),
5958
}),
60-
colHelper.accessor('description', {}),
61-
colHelper.accessor('size', { cell: (info) => <SizeCell value={info.getValue()} /> }),
62-
colHelper.accessor('timeCreated', {
63-
header: 'Created',
64-
cell: (info) => <DateCell value={info.getValue()} />,
65-
}),
59+
colHelper.accessor('description', Columns.description),
60+
colHelper.accessor('size', Columns.size),
61+
colHelper.accessor('timeCreated', Columns.timeCreated),
6662
]
6763

6864
export function SiloImagesPage() {

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import { Instances24Icon } from '@oxide/design-system/icons/react'
1313

1414
import { InstanceStatusBadge } from '~/components/StatusBadge'
1515
import { requireSledParams, useSledParams } from '~/hooks'
16-
import { DateCell } from '~/table/cells/DateCell'
1716
import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell'
1817
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
18+
import { Columns } from '~/table/columns/common'
1919
import { useQueryTable } from '~/table/QueryTable'
2020
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
2121
import { pick } from '~/util/object'
@@ -64,14 +64,8 @@ const staticCols = [
6464
header: 'specs',
6565
cell: (info) => <InstanceResourceCell value={info.getValue()} />,
6666
}),
67-
colHelper.accessor('timeCreated', {
68-
header: 'created',
69-
cell: (info) => <DateCell value={info.getValue()} />,
70-
}),
71-
colHelper.accessor('timeModified', {
72-
header: 'modified',
73-
cell: (info) => <DateCell value={info.getValue()} />,
74-
}),
67+
colHelper.accessor('timeCreated', Columns.timeCreated),
68+
colHelper.accessor('timeModified', Columns.timeModified),
7569
]
7670

7771
export function SledInstancesTab() {

0 commit comments

Comments
 (0)