Provide sideModal prop to truncate differently in side modals (#3037)

* Provide sideModal prop to truncate differently in side modals

* Slight adjustment to sideModal string length

* Reuse component

* adjust to 20 characters for edge case wide-with characters

* Add sideModal to internet gateway edit sidemodal

Author: charliepark

app/pages/project/disks/DiskDetailSideModal.tsx

@@ -15,7 +15,6 @@ import { ReadOnlySideModalForm } from '~/components/form/ReadOnlySideModalForm'
 import { DiskStateBadge, DiskTypeBadge } from '~/components/StateBadge'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getDiskSelector, useDiskSelector } from '~/hooks/use-params'
-import { EmptyCell } from '~/table/cells/EmptyCell'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'
 import { pb } from '~/util/path-builder'
@@ -73,7 +72,7 @@ export function DiskDetailSideModal({
     >
       <PropertiesTable>
         <PropertiesTable.IdRow id={disk.id} />
-        <PropertiesTable.DescriptionRow description={disk.description} />
+        <PropertiesTable.DescriptionRow description={disk.description} sideModal />
         <PropertiesTable.Row label="Size">{bytesToGiB(disk.size)} GiB</PropertiesTable.Row>
         <PropertiesTable.Row label="State">
           <DiskStateBadge state={disk.state.state} />
@@ -82,12 +81,8 @@ export function DiskDetailSideModal({
           <DiskTypeBadge diskType={disk.diskType} />
         </PropertiesTable.Row>
         {/* TODO: show attached instance by name like the table does? */}
-        <PropertiesTable.Row label="Image ID">
-          {disk.imageId ?? <EmptyCell />}
-        </PropertiesTable.Row>
-        <PropertiesTable.Row label="Snapshot ID">
-          {disk.snapshotId ?? <EmptyCell />}
-        </PropertiesTable.Row>
+        <PropertiesTable.IdRow id={disk.imageId} label="Image ID" />
+        <PropertiesTable.IdRow id={disk.snapshotId} label="Snapshot ID" />
         <PropertiesTable.Row label="Read only">
           <Badge color="neutral">{disk.readOnly ? 'True' : 'False'}</Badge>
         </PropertiesTable.Row>

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

@@ -134,7 +134,10 @@ export default function EditInternetGatewayForm() {
       />
       <PropertiesTable key={internetGateway.id}>
         <PropertiesTable.Row label="Name">{internetGateway.name}</PropertiesTable.Row>
-        <PropertiesTable.DescriptionRow description={internetGateway.description} />
+        <PropertiesTable.DescriptionRow
+          description={internetGateway.description}
+          sideModal
+        />
         <PropertiesTable.IdRow id={internetGateway.id} />
       </PropertiesTable>
 
@@ -150,7 +153,10 @@ export default function EditInternetGatewayForm() {
               <PropertiesTable.Row label="Name">
                 {gatewayIpAddress.name}
               </PropertiesTable.Row>
-              <PropertiesTable.DescriptionRow description={gatewayIpAddress.description} />
+              <PropertiesTable.DescriptionRow
+                description={gatewayIpAddress.description}
+                sideModal
+              />
               <PropertiesTable.Row label="IP Address">
                 <CopyableIp ip={gatewayIpAddress.address} />
               </PropertiesTable.Row>

app/table/cells/DescriptionCell.tsx

@@ -9,7 +9,11 @@
 import { EmptyCell } from '~/table/cells/EmptyCell'
 import { Truncate } from '~/ui/lib/Truncate'
 
-export type Props = { text?: string; maxLength?: number }
+export type Props = { text?: string; maxLength?: number; sideModal?: boolean }
 
-export const DescriptionCell = ({ text, maxLength = 48 }: Props) =>
-  text ? <Truncate text={text} maxLength={maxLength} /> : <EmptyCell />
+export const DescriptionCell = ({ text, maxLength, sideModal }: Props) =>
+  text ? (
+    <Truncate text={text} maxLength={maxLength ?? (sideModal ? 20 : 48)} />
+  ) : (
+    <EmptyCell />
+  )

app/ui/lib/PropertiesTable.tsx

@@ -9,6 +9,7 @@ import cn from 'classnames'
 import type { ReactNode } from 'react'
 
 import { DescriptionCell } from '~/table/cells/DescriptionCell'
+import { EmptyCell } from '~/table/cells/EmptyCell'
 import { isOneOf } from '~/util/children'
 import { invariant } from '~/util/invariant'
 
@@ -69,15 +70,21 @@ PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
   </>
 )
 
-PropertiesTable.IdRow = ({ id }: { id: string }) => (
-  <PropertiesTable.Row label="ID">
-    <Truncate text={id} maxLength={32} hasCopyButton />
+PropertiesTable.IdRow = ({ id, label = 'ID' }: { id?: string | null; label?: string }) => (
+  <PropertiesTable.Row label={label}>
+    {id ? <Truncate text={id} maxLength={32} hasCopyButton /> : <EmptyCell />}
   </PropertiesTable.Row>
 )
 
-PropertiesTable.DescriptionRow = ({ description }: { description: string }) => (
+PropertiesTable.DescriptionRow = ({
+  description,
+  sideModal,
+}: {
+  description: string
+  sideModal?: boolean
+}) => (
   <PropertiesTable.Row label="Description">
-    <DescriptionCell text={description} />
+    <DescriptionCell text={description} sideModal={sideModal} />
   </PropertiesTable.Row>
 )
 

test/e2e/disks.e2e.ts

@@ -239,10 +239,11 @@ test('Create disk from snapshot with read-only', async ({ page }) => {
   const row = page.getByRole('row', { name: /a-new-disk/ })
   await expect(row.getByText('Read only', { exact: true })).toBeVisible()
 
-  // Verify snapshot ID in detail modal
+  // Verify snapshot ID in detail modal (now truncated)
   await page.getByRole('link', { name: 'a-new-disk' }).click()
   const modal = page.getByRole('dialog', { name: 'Disk details' })
-  await expect(modal.getByText('e6c58826-62fb-4205-820e-620407cd04e7')).toBeVisible()
+  // The ID is truncated to 32 chars, but full ID is in aria-label
+  await expect(modal.getByLabel('e6c58826-62fb-4205-820e-620407cd04e7')).toBeVisible()
 })
 
 test('Create disk from image with read-only', async ({ page }) => {
@@ -259,8 +260,9 @@ test('Create disk from image with read-only', async ({ page }) => {
   const row = page.getByRole('row', { name: /a-new-disk/ })
   await expect(row.getByText('Read only', { exact: true })).toBeVisible()
 
-  // Verify image ID in detail modal
+  // Verify image ID in detail modal (now truncated)
   await page.getByRole('link', { name: 'a-new-disk' }).click()
   const modal = page.getByRole('dialog', { name: 'Disk details' })
-  await expect(modal.getByText('4700ecf1-8f48-4ecf-b78e-816ddb76aaca')).toBeVisible()
+  // The ID is truncated to 32 chars, but full ID is in aria-label
+  await expect(modal.getByLabel('4700ecf1-8f48-4ecf-b78e-816ddb76aaca')).toBeVisible()
 })

test/e2e/vpcs.e2e.ts

@@ -351,7 +351,8 @@ test('can view internet gateways', async ({ page }) => {
   await expect(page).toHaveURL(
     '/projects/mock-project/vpcs/mock-vpc/internet-gateways/internet-gateway-1'
   )
-  const sidemodal = page.getByLabel('Internet Gateway')
+  // Use getByRole instead of getByLabel to avoid matching truncated descriptions
+  const sidemodal = page.getByRole('dialog', { name: 'Internet gateway' })
 
   await expect(sidemodal.getByText('123.4.56.3')).toBeVisible()