Skip to content

Commit a64dbb8

Browse files
benjaminleonarddavid-crespo
benjaminleonard
and
david-crespo
authored
Update properties table (#2723)
* Update properties table treatment * Tweak copy button so it is not cut off * Spacing tweak * Satisfy husky error * Remove css file * Remove other group uses * share col styling that's the same --------- Co-authored-by: David Crespo <[email protected]>
1 parent 7410850 commit a64dbb8

File tree

10 files changed

+102
-148
lines changed

10 files changed

+102
-148
lines changed

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

+35-39
Original file line numberDiff line numberDiff line change
@@ -218,45 +218,41 @@ export default function InstancePage() {
218218
<MoreActionsMenu label="Instance actions" actions={allMenuActions} />
219219
</div>
220220
</PageHeader>
221-
<PropertiesTable.Group className="-mt-8 mb-16">
222-
<PropertiesTable>
223-
<PropertiesTable.Row label="cpu">
224-
<span className="text-default">{instance.ncpus}</span>
225-
<span className="ml-1 text-tertiary">{pluralize(' vCPU', instance.ncpus)}</span>
226-
</PropertiesTable.Row>
227-
<PropertiesTable.Row label="ram">
228-
<span className="text-default">{memory.value}</span>
229-
<span className="ml-1 text-tertiary"> {memory.unit}</span>
230-
</PropertiesTable.Row>
231-
<PropertiesTable.Row label="state">
232-
<div className="flex items-center gap-2">
233-
<InstanceStateBadge state={instance.runState} />
234-
{instanceTransitioning(instance) && <PollingSpinner />}
235-
<InstanceAutoRestartPopover instance={instance} />
236-
</div>
237-
</PropertiesTable.Row>
238-
<PropertiesTable.Row label="vpc">
239-
{vpc ? (
240-
<Link
241-
className="link-with-underline group text-sans-md"
242-
to={pb.vpc({ project: instanceSelector.project, vpc: vpc.name })}
243-
>
244-
{vpc.name}
245-
</Link>
246-
) : (
247-
<EmptyCell />
248-
)}
249-
</PropertiesTable.Row>
250-
</PropertiesTable>
251-
<PropertiesTable>
252-
<PropertiesTable.DescriptionRow description={instance.description} />
253-
<PropertiesTable.DateRow date={instance.timeCreated} label="Created" />
254-
<PropertiesTable.IdRow id={instance.id} />
255-
<PropertiesTable.Row label="external IPs">
256-
{<ExternalIps {...instanceSelector} />}
257-
</PropertiesTable.Row>
258-
</PropertiesTable>
259-
</PropertiesTable.Group>
221+
<PropertiesTable columns={2} className="-mt-8 mb-16">
222+
<PropertiesTable.Row label="cpu">
223+
<span className="text-default">{instance.ncpus}</span>
224+
<span className="ml-1 text-tertiary">{pluralize(' vCPU', instance.ncpus)}</span>
225+
</PropertiesTable.Row>
226+
<PropertiesTable.Row label="ram">
227+
<span className="text-default">{memory.value}</span>
228+
<span className="ml-1 text-tertiary"> {memory.unit}</span>
229+
</PropertiesTable.Row>
230+
<PropertiesTable.Row label="state">
231+
<div className="flex items-center gap-2">
232+
<InstanceStateBadge state={instance.runState} />
233+
{instanceTransitioning(instance) && <PollingSpinner />}
234+
<InstanceAutoRestartPopover instance={instance} />
235+
</div>
236+
</PropertiesTable.Row>
237+
<PropertiesTable.Row label="vpc">
238+
{vpc ? (
239+
<Link
240+
className="link-with-underline group text-sans-md"
241+
to={pb.vpc({ project: instanceSelector.project, vpc: vpc.name })}
242+
>
243+
{vpc.name}
244+
</Link>
245+
) : (
246+
<EmptyCell />
247+
)}
248+
</PropertiesTable.Row>
249+
<PropertiesTable.DescriptionRow description={instance.description} />
250+
<PropertiesTable.DateRow date={instance.timeCreated} label="Created" />
251+
<PropertiesTable.IdRow id={instance.id} />
252+
<PropertiesTable.Row label="external IPs">
253+
{<ExternalIps {...instanceSelector} />}
254+
</PropertiesTable.Row>
255+
</PropertiesTable>
260256
<RouteTabs fullWidth>
261257
<Tab to={pb.instanceStorage(instanceSelector)}>Storage</Tab>
262258
<Tab to={pb.instanceNetworking(instanceSelector)}>Networking</Tab>

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

+8-12
Original file line numberDiff line numberDiff line change
@@ -200,18 +200,14 @@ export default function RouterPage() {
200200
<MoreActionsMenu label="Router actions" actions={actions} />
201201
</div>
202202
</PageHeader>
203-
<PropertiesTable.Group className="-mt-8 mb-16">
204-
<PropertiesTable>
205-
<PropertiesTable.DescriptionRow description={routerData.description} />
206-
<PropertiesTable.Row label="Kind">
207-
<Badge color="neutral">{routerData.kind}</Badge>
208-
</PropertiesTable.Row>
209-
</PropertiesTable>
210-
<PropertiesTable>
211-
<PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
212-
<PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
213-
</PropertiesTable>
214-
</PropertiesTable.Group>
203+
<PropertiesTable columns={2} className="-mt-8 mb-16">
204+
<PropertiesTable.DescriptionRow description={routerData.description} />
205+
<PropertiesTable.Row label="Kind">
206+
<Badge color="neutral">{routerData.kind}</Badge>
207+
</PropertiesTable.Row>
208+
<PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
209+
<PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
210+
</PropertiesTable>
215211
<TableControls className="mb-3">
216212
<TableTitle>Routes</TableTitle>
217213
{canCreateNewRoute ? (

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

+6-10
Original file line numberDiff line numberDiff line change
@@ -75,16 +75,12 @@ export default function VpcPage() {
7575
<MoreActionsMenu label="VPC actions" actions={actions} />
7676
</div>
7777
</PageHeader>
78-
<PropertiesTable.Group className="mb-16">
79-
<PropertiesTable>
80-
<PropertiesTable.DescriptionRow description={vpc.description} />
81-
<PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
82-
</PropertiesTable>
83-
<PropertiesTable>
84-
<PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />
85-
<PropertiesTable.DateRow date={vpc.timeModified} label="Last Modified" />
86-
</PropertiesTable>
87-
</PropertiesTable.Group>
78+
<PropertiesTable columns={2} className="-mt-8 mb-16">
79+
<PropertiesTable.DescriptionRow description={vpc.description} />
80+
<PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
81+
<PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />
82+
<PropertiesTable.DateRow date={vpc.timeModified} label="Last Modified" />
83+
</PropertiesTable>
8884

8985
<RouteTabs fullWidth>
9086
<Tab to={pb.vpcFirewallRules(vpcSelector)}>Firewall Rules</Tab>

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

+27-31
Original file line numberDiff line numberDiff line change
@@ -43,37 +43,33 @@ export default function SledPage() {
4343
<PageTitle icon={<Servers24Icon />}>Sled</PageTitle>
4444
</PageHeader>
4545

46-
<PropertiesTable.Group className="-mt-8 mb-16">
47-
<PropertiesTable>
48-
<PropertiesTable.Row label="sled id">
49-
<span className="text-default">{sled.id}</span>
50-
</PropertiesTable.Row>
51-
<PropertiesTable.Row label="part">
52-
<span className="text-default">{sled.baseboard.part}</span>
53-
</PropertiesTable.Row>
54-
<PropertiesTable.Row label="serial">
55-
<span className="text-default">{sled.baseboard.serial}</span>
56-
</PropertiesTable.Row>
57-
<PropertiesTable.Row label="revision">
58-
<span className="text-default">{sled.baseboard.revision}</span>
59-
</PropertiesTable.Row>
60-
</PropertiesTable>
61-
<PropertiesTable>
62-
<PropertiesTable.Row label="rack id">
63-
<span className="text-default">{sled.rackId}</span>
64-
</PropertiesTable.Row>
65-
<PropertiesTable.Row label="location">
66-
<span className="text-disabled">Coming soon</span>
67-
</PropertiesTable.Row>
68-
<PropertiesTable.Row label="usable hardware threads">
69-
<span className="text-default">{sled.usableHardwareThreads}</span>
70-
</PropertiesTable.Row>
71-
<PropertiesTable.Row label="usable physical ram">
72-
<span className="pr-0.5 text-default">{ram.value}</span>
73-
<span className="text-tertiary">{ram.unit}</span>
74-
</PropertiesTable.Row>
75-
</PropertiesTable>
76-
</PropertiesTable.Group>
46+
<PropertiesTable columns={2} className="-mt-8 mb-16">
47+
<PropertiesTable.Row label="sled id">
48+
<span className="text-default">{sled.id}</span>
49+
</PropertiesTable.Row>
50+
<PropertiesTable.Row label="part">
51+
<span className="text-default">{sled.baseboard.part}</span>
52+
</PropertiesTable.Row>
53+
<PropertiesTable.Row label="serial">
54+
<span className="text-default">{sled.baseboard.serial}</span>
55+
</PropertiesTable.Row>
56+
<PropertiesTable.Row label="revision">
57+
<span className="text-default">{sled.baseboard.revision}</span>
58+
</PropertiesTable.Row>
59+
<PropertiesTable.Row label="rack id">
60+
<span className="text-default">{sled.rackId}</span>
61+
</PropertiesTable.Row>
62+
<PropertiesTable.Row label="location">
63+
<span className="text-disabled">Coming soon</span>
64+
</PropertiesTable.Row>
65+
<PropertiesTable.Row label="usable hardware threads">
66+
<span className="text-default">{sled.usableHardwareThreads}</span>
67+
</PropertiesTable.Row>
68+
<PropertiesTable.Row label="usable physical ram">
69+
<span className="pr-0.5 text-default">{ram.value}</span>
70+
<span className="text-tertiary">{ram.unit}</span>
71+
</PropertiesTable.Row>
72+
</PropertiesTable>
7773

7874
<RouteTabs fullWidth>
7975
<Tab to={pb.sledInstances({ sledId })}>Instances</Tab>

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

+6-10
Original file line numberDiff line numberDiff line change
@@ -66,16 +66,12 @@ export default function SiloPage() {
6666
/>
6767
</PageHeader>
6868

69-
<PropertiesTable.Group className="mb-16">
70-
<PropertiesTable>
71-
<PropertiesTable.IdRow id={silo.id} />
72-
<PropertiesTable.DescriptionRow description={silo.description} />
73-
</PropertiesTable>
74-
<PropertiesTable>
75-
<PropertiesTable.DateRow date={silo.timeCreated} label="Created" />
76-
<PropertiesTable.DateRow date={silo.timeModified} label="Last Modified" />
77-
</PropertiesTable>
78-
</PropertiesTable.Group>
69+
<PropertiesTable columns={2} className="-mt-8 mb-16">
70+
<PropertiesTable.IdRow id={silo.id} />
71+
<PropertiesTable.DescriptionRow description={silo.description} />
72+
<PropertiesTable.DateRow date={silo.timeCreated} label="Created" />
73+
<PropertiesTable.DateRow date={silo.timeModified} label="Last Modified" />
74+
</PropertiesTable>
7975

8076
<QueryParamTabs className="full-width" defaultValue="idps">
8177
<Tabs.List>

‎app/ui/lib/DateTime.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import { toLocaleDateString, toLocaleTimeString } from '~/util/date'
1010

1111
export const DateTime = ({ date, locale }: { date: Date; locale?: string }) => (
12-
<time dateTime={date.toISOString()} className="flex flex-wrap gap-x-2">
12+
<time dateTime={date.toISOString()} className="flex flex-wrap gap-x-1">
1313
<span>{toLocaleDateString(date, locale)}</span>
1414
<span className="text-tertiary">{toLocaleTimeString(date, locale)}</span>
1515
</time>

‎app/ui/lib/PropertiesTable.tsx

+16-28
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import cn from 'classnames'
99
import type { ReactNode } from 'react'
1010

1111
import { DescriptionCell } from '~/table/cells/DescriptionCell'
12-
import { Badge } from '~/ui/lib/Badge'
1312
import { isOneOf } from '~/util/children'
1413
import { invariant } from '~/util/invariant'
1514

@@ -19,9 +18,14 @@ import { Truncate } from './Truncate'
1918
export interface PropertiesTableProps {
2019
className?: string
2120
children: ReactNode
21+
columns?: 1 | 2
2222
}
2323

24-
export function PropertiesTable({ className, children }: PropertiesTableProps) {
24+
export function PropertiesTable({
25+
className,
26+
children,
27+
columns = 1,
28+
}: PropertiesTableProps) {
2529
invariant(
2630
isOneOf(children, [
2731
PropertiesTable.Row,
@@ -35,7 +39,13 @@ export function PropertiesTable({ className, children }: PropertiesTableProps) {
3539
<div
3640
className={cn(
3741
className,
38-
'properties-table grid min-w-min basis-6/12 divide-y rounded-lg border border-default children:pl-3 children:pr-6 children:border-secondary'
42+
'properties-table min-w-min basis-6/12 rounded-lg border border-default',
43+
'children:border-t children:pl-3 children:pr-6 children:border-secondary [&>*:nth-child(-n+2)]:!border-t-0',
44+
'grid grid-cols-[minmax(min-content,1fr)_3fr]',
45+
{
46+
'lg+:grid-cols-[minmax(min-content,1fr)_3fr_minmax(min-content,1fr)_3fr] lg+:[&>*:nth-child(-n+4)]:!border-t-0 lg+:[&>*:nth-child(4n-2)]:border-r':
47+
columns === 2,
48+
}
3949
)}
4050
>
4151
{children}
@@ -49,10 +59,10 @@ interface PropertiesTableRowProps {
4959
}
5060
PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
5161
<>
52-
<span className="flex items-center">
53-
<Badge>{label}</Badge>
62+
<span className="flex items-center whitespace-nowrap text-mono-sm text-secondary">
63+
{label}
5464
</span>
55-
<div className="flex h-11 items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-default">
65+
<div className="flex h-10 items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-default">
5666
{children}
5767
</div>
5868
</>
@@ -81,25 +91,3 @@ PropertiesTable.DateRow = ({
8191
<DateTime date={date} />
8292
</PropertiesTable.Row>
8393
)
84-
85-
interface PropertiesTableGroupProps {
86-
children: ReactNode
87-
className?: string
88-
}
89-
90-
PropertiesTable.Group = ({ children, className }: PropertiesTableGroupProps) => {
91-
invariant(
92-
isOneOf(children, [PropertiesTable]),
93-
'PropertiesTable can only have PropertiesTable as a child'
94-
)
95-
return (
96-
<div
97-
className={cn(
98-
className,
99-
'flex min-w-min md-:flex-col md-:first:children:rounded-b-none md-:first:children:border-b-secondary md-:last:children:rounded-t-none md-:last:children:border-t-0 lg+:gap-x-4'
100-
)}
101-
>
102-
{children}
103-
</div>
104-
)
105-
}

‎app/ui/lib/Truncate.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ export const Truncate = ({
3939
{truncate(text, maxLength, position)}
4040
</div>
4141
</Tooltip>
42-
{hasCopyButton && <CopyToClipboard text={text} />}
42+
<div className="flex items-center p-0.5">
43+
{hasCopyButton && <CopyToClipboard text={text} />}
44+
</div>
4345
</div>
4446
)
4547
}

‎app/ui/styles/components/properties-table.css

-15
This file was deleted.

‎app/ui/styles/index.css

-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
@import './components/form.css';
3333
@import './components/login-page.css';
3434
@import './components/mini-table.css';
35-
@import './components/properties-table.css';
3635
@import './components/side-modal.css';
3736
@import './components/spinner.css';
3837
@import './components/table.css';

0 commit comments

Comments
 (0)