Skip to content

Commit 63954c8

Browse files
charlieparkcharliepark
authored
Add PropertiesTable.IdRow, .DescriptionRow, and .DateRow (#2633)
1 parent aa46e50 commit 63954c8

File tree

9 files changed

+61
-94
lines changed

9 files changed

+61
-94
lines changed

‎app/forms/idp/edit.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,9 @@ import { NameField } from '~/components/form/fields/NameField'
1616
import { TextField } from '~/components/form/fields/TextField'
1717
import { SideModalForm } from '~/components/form/SideModalForm'
1818
import { getIdpSelector, useIdpSelector } from '~/hooks/use-params'
19-
import { DateTime } from '~/ui/lib/DateTime'
2019
import { FormDivider } from '~/ui/lib/Divider'
2120
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
2221
import { ResourceLabel, SideModal } from '~/ui/lib/SideModal'
23-
import { Truncate } from '~/ui/lib/Truncate'
2422
import { pb } from '~/util/path-builder'
2523

2624
EditIdpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -61,15 +59,9 @@ export function EditIdpSideModalForm() {
6159
loading={false}
6260
>
6361
<PropertiesTable>
64-
<PropertiesTable.Row label="ID">
65-
<Truncate text={idp.id} maxLength={32} hasCopyButton />
66-
</PropertiesTable.Row>
67-
<PropertiesTable.Row label="Created">
68-
<DateTime date={idp.timeCreated} />
69-
</PropertiesTable.Row>
70-
<PropertiesTable.Row label="Updated">
71-
<DateTime date={idp.timeModified} />
72-
</PropertiesTable.Row>
62+
<PropertiesTable.IdRow id={idp.id} />
63+
<PropertiesTable.DateRow date={idp.timeCreated} label="Created" />
64+
<PropertiesTable.DateRow date={idp.timeModified} label="Updated" />
7365
</PropertiesTable>
7466

7567
<NameField name="name" control={form.control} disabled />

‎app/forms/image-edit.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,8 @@ import {
2121
useProjectImageSelector,
2222
useSiloImageSelector,
2323
} from '~/hooks/use-params'
24-
import { DateTime } from '~/ui/lib/DateTime'
2524
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
2625
import { ResourceLabel } from '~/ui/lib/SideModal'
27-
import { Truncate } from '~/ui/lib/Truncate'
2826
import { pb } from '~/util/path-builder'
2927
import { capitalize } from '~/util/str'
3028
import { bytesToGiB } from '~/util/units'
@@ -96,19 +94,13 @@ function EditImageSideModalForm({
9694
>
9795
<PropertiesTable>
9896
<PropertiesTable.Row label="Shared with">{type}</PropertiesTable.Row>
99-
<PropertiesTable.Row label="ID">
100-
<Truncate text={image.id} maxLength={32} hasCopyButton />
101-
</PropertiesTable.Row>
97+
<PropertiesTable.IdRow id={image.id} />
10298
<PropertiesTable.Row label="Size">
10399
<span>{bytesToGiB(image.size)}</span>
104100
<span className="ml-1 inline-block text-tertiary">GiB</span>
105101
</PropertiesTable.Row>
106-
<PropertiesTable.Row label="Created">
107-
<DateTime date={image.timeCreated} />
108-
</PropertiesTable.Row>
109-
<PropertiesTable.Row label="Updated">
110-
<DateTime date={image.timeModified} />
111-
</PropertiesTable.Row>
102+
<PropertiesTable.DateRow date={image.timeCreated} label="Created" />
103+
<PropertiesTable.DateRow date={image.timeModified} label="Updated" />
112104
</PropertiesTable>
113105
<NameField name="name" control={form.control} disabled />
114106
<DescriptionField name="description" control={form.control} required disabled />

‎app/forms/ssh-key-edit.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,8 @@ import { TextField } from '~/components/form/fields/TextField'
1717
import { SideModalForm } from '~/components/form/SideModalForm'
1818
import { getSshKeySelector, useSshKeySelector } from '~/hooks/use-params'
1919
import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
20-
import { DateTime } from '~/ui/lib/DateTime'
2120
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
2221
import { ResourceLabel } from '~/ui/lib/SideModal'
23-
import { Truncate } from '~/ui/lib/Truncate'
2422
import { pb } from '~/util/path-builder'
2523

2624
EditSSHKeySideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -56,15 +54,9 @@ export function EditSSHKeySideModalForm() {
5654
submitError={null}
5755
>
5856
<PropertiesTable>
59-
<PropertiesTable.Row label="ID">
60-
<Truncate text={data.id} maxLength={32} hasCopyButton />
61-
</PropertiesTable.Row>
62-
<PropertiesTable.Row label="Created">
63-
<DateTime date={data.timeCreated} />
64-
</PropertiesTable.Row>
65-
<PropertiesTable.Row label="Updated">
66-
<DateTime date={data.timeModified} />
67-
</PropertiesTable.Row>
57+
<PropertiesTable.IdRow id={data.id} />
58+
<PropertiesTable.DateRow date={data.timeCreated} label="Created" />
59+
<PropertiesTable.DateRow date={data.timeModified} label="Updated" />
6860
</PropertiesTable>
6961
<NameField name="name" control={form.control} disabled />
7062
<DescriptionField name="description" control={form.control} disabled />

‎app/pages/project/instances/instance/InstancePage.tsx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,13 @@ import {
4242
import { addToast } from '~/stores/toast'
4343
import { EmptyCell } from '~/table/cells/EmptyCell'
4444
import { Button } from '~/ui/lib/Button'
45-
import { DateTime } from '~/ui/lib/DateTime'
4645
import { Message } from '~/ui/lib/Message'
4746
import { Modal } from '~/ui/lib/Modal'
4847
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
4948
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
5049
import { Spinner } from '~/ui/lib/Spinner'
5150
import { Tooltip } from '~/ui/lib/Tooltip'
52-
import { truncate, Truncate } from '~/ui/lib/Truncate'
51+
import { truncate } from '~/ui/lib/Truncate'
5352
import { pb } from '~/util/path-builder'
5453
import { GiB } from '~/util/units'
5554

@@ -229,19 +228,9 @@ export function InstancePage() {
229228
</PropertiesTable.Row>
230229
</PropertiesTable>
231230
<PropertiesTable>
232-
<PropertiesTable.Row label="description">
233-
<span className="text-default">
234-
<Truncate text={instance.description} maxLength={40} />
235-
</span>
236-
</PropertiesTable.Row>
237-
<PropertiesTable.Row label="created">
238-
<DateTime date={instance.timeCreated} />
239-
</PropertiesTable.Row>
240-
<PropertiesTable.Row label="id">
241-
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-default">
242-
{instance.id}
243-
</span>
244-
</PropertiesTable.Row>
231+
<PropertiesTable.DescriptionRow description={instance.description} />
232+
<PropertiesTable.DateRow date={instance.timeCreated} label="Created" />
233+
<PropertiesTable.IdRow id={instance.id} />
245234
<PropertiesTable.Row label="external IPs">
246235
{<ExternalIps {...instanceSelector} />}
247236
</PropertiesTable.Row>

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,11 @@ import { routeFormMessage } from '~/forms/vpc-router-route-common'
3030
import { getVpcRouterSelector, useVpcRouterSelector } from '~/hooks/use-params'
3131
import { confirmAction } from '~/stores/confirm-action'
3232
import { addToast } from '~/stores/toast'
33-
import { DescriptionCell } from '~/table/cells/DescriptionCell'
3433
import { TypeValueCell } from '~/table/cells/TypeValueCell'
3534
import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
3635
import { useQueryTable } from '~/table/QueryTable'
3736
import { Badge } from '~/ui/lib/Badge'
3837
import { CreateButton, CreateLink } from '~/ui/lib/CreateButton'
39-
import { DateTime } from '~/ui/lib/DateTime'
4038
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
4139
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
4240
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -202,20 +200,14 @@ export function Component() {
202200
</PageHeader>
203201
<PropertiesTable.Group className="-mt-8 mb-16">
204202
<PropertiesTable>
205-
<PropertiesTable.Row label="Description">
206-
<DescriptionCell text={routerData.description} />
207-
</PropertiesTable.Row>
203+
<PropertiesTable.DescriptionRow description={routerData.description} />
208204
<PropertiesTable.Row label="Kind">
209205
<Badge color="neutral">{routerData.kind}</Badge>
210206
</PropertiesTable.Row>
211207
</PropertiesTable>
212208
<PropertiesTable>
213-
<PropertiesTable.Row label="Created">
214-
<DateTime date={routerData.timeCreated} />
215-
</PropertiesTable.Row>
216-
<PropertiesTable.Row label="Last Modified">
217-
<DateTime date={routerData.timeModified} />
218-
</PropertiesTable.Row>
209+
<PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
210+
<PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
219211
</PropertiesTable>
220212
</PropertiesTable.Group>
221213
<TableControls className="mb-3">

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ import { RouteTabs, Tab } from '~/components/RouteTabs'
1717
import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
1818
import { confirmDelete } from '~/stores/confirm-delete'
1919
import { addToast } from '~/stores/toast'
20-
import { DescriptionCell } from '~/table/cells/DescriptionCell'
21-
import { DateTime } from '~/ui/lib/DateTime'
2220
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
2321
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
2422
import { pb } from '~/util/path-builder'
@@ -79,18 +77,12 @@ export function VpcPage() {
7977
</PageHeader>
8078
<PropertiesTable.Group className="mb-16">
8179
<PropertiesTable>
82-
<PropertiesTable.Row label="Description">
83-
<DescriptionCell text={vpc.description} />
84-
</PropertiesTable.Row>
80+
<PropertiesTable.DescriptionRow description={vpc.description} />
8581
<PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
8682
</PropertiesTable>
8783
<PropertiesTable>
88-
<PropertiesTable.Row label="Created">
89-
<DateTime date={vpc.timeCreated} />
90-
</PropertiesTable.Row>
91-
<PropertiesTable.Row label="Last Modified">
92-
<DateTime date={vpc.timeModified} />
93-
</PropertiesTable.Row>
84+
<PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />
85+
<PropertiesTable.DateRow date={vpc.timeModified} label="Last Modified" />
9486
</PropertiesTable>
9587
</PropertiesTable.Group>
9688

‎app/pages/project/vpcs/internet-gateway-edit.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { Gateway16Icon } from '@oxide/design-system/icons/react'
1515
import { apiQueryClient, queryClient, usePrefetchedApiQuery } from '~/api'
1616
import { SideModalForm } from '~/components/form/SideModalForm'
1717
import { getInternetGatewaySelector, useInternetGatewaySelector } from '~/hooks/use-params'
18-
import { DescriptionCell } from '~/table/cells/DescriptionCell'
1918
import { IpPoolCell } from '~/table/cells/IpPoolCell'
2019
import { CopyableIp } from '~/ui/lib/CopyableIp'
2120
import { FormDivider } from '~/ui/lib/Divider'
@@ -137,9 +136,7 @@ export function EditInternetGatewayForm() {
137136
/>
138137
<PropertiesTable key={internetGateway.id}>
139138
<PropertiesTable.Row label="Name">{internetGateway.name}</PropertiesTable.Row>
140-
<PropertiesTable.Row label="Description">
141-
<DescriptionCell text={internetGateway.description} />
142-
</PropertiesTable.Row>
139+
<PropertiesTable.DescriptionRow description={internetGateway.description} />
143140
</PropertiesTable>
144141

145142
<FormDivider />
@@ -154,9 +151,7 @@ export function EditInternetGatewayForm() {
154151
<PropertiesTable.Row label="Name">
155152
{gatewayIpAddress.name}
156153
</PropertiesTable.Row>
157-
<PropertiesTable.Row label="Description">
158-
<DescriptionCell text={gatewayIpAddress.description} />
159-
</PropertiesTable.Row>
154+
<PropertiesTable.DescriptionRow description={gatewayIpAddress.description} />
160155
<PropertiesTable.Row label="IP Address">
161156
<CopyableIp ip={gatewayIpAddress.address} />
162157
</PropertiesTable.Row>
@@ -183,9 +178,7 @@ export function EditInternetGatewayForm() {
183178
gatewayIpPools.map((gatewayIpPool) => (
184179
<PropertiesTable key={gatewayIpPool.id}>
185180
<PropertiesTable.Row label="Name">{gatewayIpPool.name}</PropertiesTable.Row>
186-
<PropertiesTable.Row label="Description">
187-
<DescriptionCell text={gatewayIpPool.description} />
188-
</PropertiesTable.Row>
181+
<PropertiesTable.DescriptionRow description={gatewayIpPool.description} />
189182
<PropertiesTable.Row label="IP Pool Name">
190183
<IpPoolCell ipPoolId={gatewayIpPool.ipPoolId} />
191184
</PropertiesTable.Row>

‎app/pages/system/silos/SiloPage.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ import { Cloud16Icon, Cloud24Icon, NextArrow12Icon } from '@oxide/design-system/
1313
import { DocsPopover } from '~/components/DocsPopover'
1414
import { QueryParamTabs } from '~/components/QueryParamTabs'
1515
import { getSiloSelector, useSiloSelector } from '~/hooks/use-params'
16-
import { DescriptionCell } from '~/table/cells/DescriptionCell'
1716
import { Badge } from '~/ui/lib/Badge'
18-
import { DateTime } from '~/ui/lib/DateTime'
1917
import { EmptyMessage } from '~/ui/lib/EmptyMessage'
2018
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
2119
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -68,18 +66,12 @@ export function Component() {
6866

6967
<PropertiesTable.Group className="mb-16">
7068
<PropertiesTable>
71-
<PropertiesTable.Row label="ID">{silo.id}</PropertiesTable.Row>
72-
<PropertiesTable.Row label="Description">
73-
<DescriptionCell text={silo.description} />
74-
</PropertiesTable.Row>
69+
<PropertiesTable.IdRow id={silo.id} />
70+
<PropertiesTable.DescriptionRow description={silo.description} />
7571
</PropertiesTable>
7672
<PropertiesTable>
77-
<PropertiesTable.Row label="Created">
78-
<DateTime date={silo.timeCreated} />
79-
</PropertiesTable.Row>
80-
<PropertiesTable.Row label="Last Modified">
81-
<DateTime date={silo.timeModified} />
82-
</PropertiesTable.Row>
73+
<PropertiesTable.DateRow date={silo.timeCreated} label="Created" />
74+
<PropertiesTable.DateRow date={silo.timeModified} label="Last Modified" />
8375
</PropertiesTable>
8476
</PropertiesTable.Group>
8577

‎app/ui/lib/PropertiesTable.tsx‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,28 @@
88
import cn from 'classnames'
99
import type { ReactNode } from 'react'
1010

11+
import { DescriptionCell } from '~/table/cells/DescriptionCell'
1112
import { Badge } from '~/ui/lib/Badge'
1213
import { isOneOf } from '~/util/children'
1314
import { invariant } from '~/util/invariant'
1415

16+
import { DateTime } from './DateTime'
17+
import { Truncate } from './Truncate'
18+
1519
export interface PropertiesTableProps {
1620
className?: string
1721
children: ReactNode
1822
}
1923

2024
export function PropertiesTable({ className, children }: PropertiesTableProps) {
2125
invariant(
22-
isOneOf(children, [PropertiesTable.Row]),
23-
'PropertiesTable can only have PropertiesTable.Row as a child'
26+
isOneOf(children, [
27+
PropertiesTable.Row,
28+
PropertiesTable.IdRow,
29+
PropertiesTable.DescriptionRow,
30+
PropertiesTable.DateRow,
31+
]),
32+
'PropertiesTable only accepts specific Row components as children'
2433
)
2534
return (
2635
<div
@@ -49,6 +58,30 @@ PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
4958
</>
5059
)
5160

61+
PropertiesTable.IdRow = ({ id }: { id: string }) => (
62+
<PropertiesTable.Row label="ID">
63+
<Truncate text={id} maxLength={32} hasCopyButton />
64+
</PropertiesTable.Row>
65+
)
66+
67+
PropertiesTable.DescriptionRow = ({ description }: { description: string }) => (
68+
<PropertiesTable.Row label="Description">
69+
<DescriptionCell text={description} />
70+
</PropertiesTable.Row>
71+
)
72+
73+
PropertiesTable.DateRow = ({
74+
date,
75+
label,
76+
}: {
77+
date: Date
78+
label: 'Created' | 'Updated' | 'Last Modified'
79+
}) => (
80+
<PropertiesTable.Row label={label}>
81+
<DateTime date={date} />
82+
</PropertiesTable.Row>
83+
)
84+
5285
interface PropertiesTableGroupProps {
5386
children: ReactNode
5487
className?: string

0 commit comments

Comments
 (0)