what the heck let's do descriptions as well

oxidecomputer · Dec 19, 2024 · 1219811 · 1219811
1 parent 2cb9d8d
commit 1219811
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 28 deletions.
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
@@ -48,7 +48,7 @@ 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'
 
@@ -228,11 +228,7 @@ export function InstancePage() {
           </PropertiesTable.Row>
         </PropertiesTable>
         <PropertiesTable>
-          <PropertiesTable.Row label="description">
-            <span className="text-default">
-              <Truncate text={instance.description} maxLength={40} />
-            </span>
-          </PropertiesTable.Row>
+          <PropertiesTable.DescriptionRow description={instance.description} />
           <PropertiesTable.DateRow date={instance.timeCreated} label="Created" />
           <PropertiesTable.IdRow id={instance.id} />
           <PropertiesTable.Row label="external IPs">

diff --git a/app/pages/project/vpcs/RouterPage.tsx b/app/pages/project/vpcs/RouterPage.tsx
@@ -30,7 +30,6 @@ 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'
@@ -201,9 +200,7 @@ export function Component() {
       </PageHeader>
       <PropertiesTable.Group className="-mt-8 mb-16">
         <PropertiesTable>
-          <PropertiesTable.Row label="Description">
-            <DescriptionCell text={routerData.description} />
-          </PropertiesTable.Row>
+          <PropertiesTable.DescriptionRow description={routerData.description} />
           <PropertiesTable.Row label="Kind">
             <Badge color="neutral">{routerData.kind}</Badge>
           </PropertiesTable.Row>

diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx
@@ -17,7 +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 { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { pb } from '~/util/path-builder'
@@ -78,9 +77,7 @@ export function VpcPage() {
       </PageHeader>
       <PropertiesTable.Group className="mb-16">
         <PropertiesTable>
-          <PropertiesTable.Row label="Description">
-            <DescriptionCell text={vpc.description} />
-          </PropertiesTable.Row>
+          <PropertiesTable.DescriptionRow description={vpc.description} />
           <PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
         </PropertiesTable>
         <PropertiesTable>

diff --git 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() {
       />
       <PropertiesTable key={internetGateway.id}>
         <PropertiesTable.Row label="Name">{internetGateway.name}</PropertiesTable.Row>
-        <PropertiesTable.Row label="Description">
-          <DescriptionCell text={internetGateway.description} />
-        </PropertiesTable.Row>
+        <PropertiesTable.DescriptionRow description={internetGateway.description} />
       </PropertiesTable>
 
       <FormDivider />
@@ -154,9 +151,7 @@ export function EditInternetGatewayForm() {
               <PropertiesTable.Row label="Name">
                 {gatewayIpAddress.name}
               </PropertiesTable.Row>
-              <PropertiesTable.Row label="Description">
-                <DescriptionCell text={gatewayIpAddress.description} />
-              </PropertiesTable.Row>
+              <PropertiesTable.DescriptionRow description={gatewayIpAddress.description} />
               <PropertiesTable.Row label="IP Address">
                 <CopyableIp ip={gatewayIpAddress.address} />
               </PropertiesTable.Row>
@@ -183,9 +178,7 @@ export function EditInternetGatewayForm() {
           gatewayIpPools.map((gatewayIpPool) => (
             <PropertiesTable key={gatewayIpPool.id}>
               <PropertiesTable.Row label="Name">{gatewayIpPool.name}</PropertiesTable.Row>
-              <PropertiesTable.Row label="Description">
-                <DescriptionCell text={gatewayIpPool.description} />
-              </PropertiesTable.Row>
+              <PropertiesTable.DescriptionRow description={gatewayIpPool.description} />
               <PropertiesTable.Row label="IP Pool Name">
                 <IpPoolCell ipPoolId={gatewayIpPool.ipPoolId} />
               </PropertiesTable.Row>

diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx
@@ -13,7 +13,6 @@ 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 { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
@@ -68,9 +67,7 @@ export function Component() {
       <PropertiesTable.Group className="mb-16">
         <PropertiesTable>
           <PropertiesTable.IdRow id={silo.id} />
-          <PropertiesTable.Row label="Description">
-            <DescriptionCell text={silo.description} />
-          </PropertiesTable.Row>
+          <PropertiesTable.DescriptionRow description={silo.description} />
         </PropertiesTable>
         <PropertiesTable>
           <PropertiesTable.DateRow date={silo.timeCreated} label="Created" />

diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx
@@ -8,6 +8,7 @@
 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'
@@ -25,6 +26,7 @@ export function PropertiesTable({ className, children }: PropertiesTableProps) {
     isOneOf(children, [
       PropertiesTable.Row,
       PropertiesTable.IdRow,
+      PropertiesTable.DescriptionRow,
       PropertiesTable.DateRow,
     ]),
     'PropertiesTable can only have PropertiesTable.Row as a child'
@@ -62,6 +64,12 @@ PropertiesTable.IdRow = ({ id }: { id: string }) => (
   </PropertiesTable.Row>
 )
 
+PropertiesTable.DescriptionRow = ({ description }: { description: string }) => (
+  <PropertiesTable.Row label="Description">
+    <DescriptionCell text={description} />
+  </PropertiesTable.Row>
+)
+
 PropertiesTable.DateRow = ({
   date,
   label,