Add ID row to Internet Gateway side modal

[charliepark]

This PR adds an ID field to the Internet Gateway details view.

Closes #2656

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Jan 22, 2025 1:52am

[david-crespo]

Should it go first for consistency?

I see we are not super consistent to begin with. Some of these are different, too, because they're full pages rather than side modals. You could imagine following a different pattern in each. Also not sure ID should go first — it's probably less useful than name?

$ rg '<PropertiesTable[^\.]' -A 2
app/forms/image-edit.tsx
95:      <PropertiesTable>
96-        <PropertiesTable.Row label="Shared with">{type}</PropertiesTable.Row>
97-        <PropertiesTable.IdRow id={image.id} />

app/pages/system/silos/SiloPage.tsx
68:        <PropertiesTable>
69-          <PropertiesTable.IdRow id={silo.id} />
70-          <PropertiesTable.DescriptionRow description={silo.description} />
--
72:        <PropertiesTable>
73-          <PropertiesTable.DateRow date={silo.timeCreated} label="Created" />
74-          <PropertiesTable.DateRow date={silo.timeModified} label="Last Modified" />

app/pages/system/inventory/sled/SledPage.tsx
42:        <PropertiesTable>
43-          <PropertiesTable.Row label="sled id">
44-            <span className="text-default">{sled.id}</span>
--
56:        <PropertiesTable>
57-          <PropertiesTable.Row label="rack id">
58-            <span className="text-default">{sled.rackId}</span>

app/forms/ssh-key-edit.tsx
56:      <PropertiesTable>
57-        <PropertiesTable.IdRow id={data.id} />
58-        <PropertiesTable.DateRow date={data.timeCreated} label="Created" />

app/forms/image-from-snapshot.tsx
86:      <PropertiesTable>
87-        <PropertiesTable.Row label="Snapshot">{data.name}</PropertiesTable.Row>
88-        <PropertiesTable.Row label="Project">{project}</PropertiesTable.Row>

app/forms/floating-ip-edit.tsx
85:      <PropertiesTable>
86-        <PropertiesTable.IdRow id={floatingIp.id} />
87-        <PropertiesTable.DateRow label="Created" date={floatingIp.timeCreated} />

app/forms/idp/edit.tsx
61:      <PropertiesTable>
62-        <PropertiesTable.IdRow id={idp.id} />
63-        <PropertiesTable.DateRow date={idp.timeCreated} label="Created" />

app/pages/settings/ProfilePage.tsx
44:      <PropertiesTable className="-mt-8 mb-16">
45-        <PropertiesTable.Row label="Display name">{me.displayName}</PropertiesTable.Row>
46-        <PropertiesTable.Row label="User ID">

app/pages/project/instances/instance/InstancePage.tsx
196:        <PropertiesTable>
197-          <PropertiesTable.Row label="cpu">
198-            <span className="text-default">{instance.ncpus}</span>
--
230:        <PropertiesTable>
231-          <PropertiesTable.DescriptionRow description={instance.description} />
232-          <PropertiesTable.DateRow date={instance.timeCreated} label="Created" />

app/pages/project/vpcs/VpcPage/VpcPage.tsx
79:        <PropertiesTable>
80-          <PropertiesTable.DescriptionRow description={vpc.description} />
81-          <PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
--
83:        <PropertiesTable>
84-          <PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />
85-          <PropertiesTable.DateRow date={vpc.timeModified} label="Last Modified" />

app/pages/project/vpcs/internet-gateway-edit.tsx
137:      <PropertiesTable key={internetGateway.id}>
138-        <PropertiesTable.Row label="Name">{internetGateway.name}</PropertiesTable.Row>
139-        <PropertiesTable.DescriptionRow description={internetGateway.description} />
--
150:            <PropertiesTable key={gatewayIpAddress.id}>
151-              <PropertiesTable.Row label="Name">
152-                {gatewayIpAddress.name}
--
179:            <PropertiesTable key={gatewayIpPool.id}>
180-              <PropertiesTable.Row label="Name">{gatewayIpPool.name}</PropertiesTable.Row>
181-              <PropertiesTable.DescriptionRow description={gatewayIpPool.description} />

app/pages/project/vpcs/RouterPage.tsx
202:        <PropertiesTable>
203-          <PropertiesTable.DescriptionRow description={routerData.description} />
204-          <PropertiesTable.Row label="Kind">
--
208:        <PropertiesTable>
209-          <PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
210-          <PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />

[charliepark]

My gut would be name-before-ID. I pinged @augustuswm for input and he didn't have strong feelings on it, though agreed that we should be consistent.

[benjaminleonard]

Latest internet gateways designs turns the internet gateways modal into it's own page a la instances. We should probably make property table order consistent anyway, but this PR is probably no longer necessary.

[charliepark]

Despite its obsolescence, we probably won't get the larger internet gateways refresh in for Release 13, so we'll merge this to get the ID into console, and then roll out a larger change in a subsequent release.