diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx index fa9e5a1491..34dc2f3226 100644 --- 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} > - - - - - - - - - + + + diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx index 882bd93253..594cc29397 100644 --- 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({ > {type} - - - + {bytesToGiB(image.size)} GiB - - - - - - + + diff --git a/app/forms/ssh-key-edit.tsx b/app/forms/ssh-key-edit.tsx index 609ec225ce..161b7bd495 100644 --- 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} > - - - - - - - - - + + + diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx index 46d1397bda..b73ae7e798 100644 --- a/app/pages/project/instances/instance/InstancePage.tsx +++ b/app/pages/project/instances/instance/InstancePage.tsx @@ -42,14 +42,13 @@ 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' import { PropertiesTable } from '~/ui/lib/PropertiesTable' import { Spinner } from '~/ui/lib/Spinner' import { Tooltip } from '~/ui/lib/Tooltip' -import { truncate, Truncate } from '~/ui/lib/Truncate' +import { truncate } from '~/ui/lib/Truncate' import { pb } from '~/util/path-builder' import { GiB } from '~/util/units' @@ -229,19 +228,9 @@ export function InstancePage() { - - - - - - - - - - - {instance.id} - - + + + {} diff --git a/app/pages/project/vpcs/RouterPage.tsx b/app/pages/project/vpcs/RouterPage.tsx index 54304780eb..86fa6c42d3 100644 --- a/app/pages/project/vpcs/RouterPage.tsx +++ b/app/pages/project/vpcs/RouterPage.tsx @@ -30,13 +30,11 @@ import { routeFormMessage } from '~/forms/vpc-router-route-common' import { getVpcRouterSelector, useVpcRouterSelector } from '~/hooks/use-params' import { confirmAction } from '~/stores/confirm-action' import { addToast } from '~/stores/toast' -import { DescriptionCell } from '~/table/cells/DescriptionCell' import { TypeValueCell } from '~/table/cells/TypeValueCell' 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' @@ -202,20 +200,14 @@ export function Component() { - - - + {routerData.kind} - - - - - - + + diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx index 87993db96c..82901be60a 100644 --- a/app/pages/project/vpcs/VpcPage/VpcPage.tsx +++ b/app/pages/project/vpcs/VpcPage/VpcPage.tsx @@ -17,8 +17,6 @@ import { RouteTabs, Tab } from '~/components/RouteTabs' 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' @@ -79,18 +77,12 @@ export function VpcPage() { - - - + {vpc.dnsName} - - - - - - + + diff --git a/app/pages/project/vpcs/internet-gateway-edit.tsx b/app/pages/project/vpcs/internet-gateway-edit.tsx index 7a72d8240c..115133f5ee 100644 --- a/app/pages/project/vpcs/internet-gateway-edit.tsx +++ b/app/pages/project/vpcs/internet-gateway-edit.tsx @@ -15,7 +15,6 @@ import { Gateway16Icon } from '@oxide/design-system/icons/react' import { apiQueryClient, queryClient, usePrefetchedApiQuery } from '~/api' import { SideModalForm } from '~/components/form/SideModalForm' import { getInternetGatewaySelector, useInternetGatewaySelector } from '~/hooks/use-params' -import { DescriptionCell } from '~/table/cells/DescriptionCell' import { IpPoolCell } from '~/table/cells/IpPoolCell' import { CopyableIp } from '~/ui/lib/CopyableIp' import { FormDivider } from '~/ui/lib/Divider' @@ -137,9 +136,7 @@ export function EditInternetGatewayForm() { /> {internetGateway.name} - - - + @@ -154,9 +151,7 @@ export function EditInternetGatewayForm() { {gatewayIpAddress.name} - - - + @@ -183,9 +178,7 @@ export function EditInternetGatewayForm() { gatewayIpPools.map((gatewayIpPool) => ( {gatewayIpPool.name} - - - + diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx index 558df43dce..b075dc3ef4 100644 --- a/app/pages/system/silos/SiloPage.tsx +++ b/app/pages/system/silos/SiloPage.tsx @@ -13,9 +13,7 @@ import { Cloud16Icon, Cloud24Icon, NextArrow12Icon } from '@oxide/design-system/ import { DocsPopover } from '~/components/DocsPopover' 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 +66,12 @@ export function Component() { - {silo.id} - - - + + - - - - - - + + diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx index 5b2c6a104d..2741fc1e88 100644 --- a/app/ui/lib/PropertiesTable.tsx +++ b/app/ui/lib/PropertiesTable.tsx @@ -8,10 +8,14 @@ import cn from 'classnames' import type { ReactNode } from 'react' +import { DescriptionCell } from '~/table/cells/DescriptionCell' 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 @@ -19,8 +23,13 @@ export interface PropertiesTableProps { export function PropertiesTable({ className, children }: PropertiesTableProps) { invariant( - isOneOf(children, [PropertiesTable.Row]), - 'PropertiesTable can only have PropertiesTable.Row as a child' + isOneOf(children, [ + PropertiesTable.Row, + PropertiesTable.IdRow, + PropertiesTable.DescriptionRow, + PropertiesTable.DateRow, + ]), + 'PropertiesTable only accepts specific Row components as children' ) return (
( ) +PropertiesTable.IdRow = ({ id }: { id: string }) => ( + + + +) + +PropertiesTable.DescriptionRow = ({ description }: { description: string }) => ( + + + +) + +PropertiesTable.DateRow = ({ + date, + label, +}: { + date: Date + label: 'Created' | 'Updated' | 'Last Modified' +}) => ( + + + +) + interface PropertiesTableGroupProps { children: ReactNode className?: string