diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 996b7c445..d268b00aa 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -23,6 +23,26 @@ export type DiskTableItem =
| (DiskCreate & { action: 'create' })
| { name: string; action: 'attach'; size: number; diskType: DiskType }
+const diskTableColumns = [
+ {
+ header: 'Name',
+ cell: (item: DiskTableItem) => ,
+ },
+ {
+ header: 'Action',
+ cell: (item: DiskTableItem) => {item.action},
+ },
+ {
+ header: 'Type',
+ cell: (item: DiskTableItem) => (
+
+ {item.action === 'create' ? item.diskBackend.type : item.diskType}
+
+ ),
+ },
+ { header: 'Size', cell: (item: DiskTableItem) => },
+]
+
/**
* Designed less for reuse, more to encapsulate logic that would otherwise
* clutter the instance create form.
@@ -49,28 +69,7 @@ export function DisksTableField({
,
- },
- {
- header: 'Action',
- cell: (item) => {item.action},
- },
- {
- header: 'Type',
- cell: (item) => (
-
- {item.action === 'create' ? item.diskBackend.type : item.diskType}
-
- ),
- },
- {
- header: 'Size',
- cell: (item) => ,
- },
- ]}
+ columns={diskTableColumns}
rowKey={(item) => item.name}
onRemoveItem={(item) => onChange(items.filter((i) => i.name !== item.name))}
removeLabel={(item) => `Remove disk ${item.name}`}
diff --git a/app/components/form/fields/NetworkInterfaceField.tsx b/app/components/form/fields/NetworkInterfaceField.tsx
index 0dbe3b639..a9fd0f3ef 100644
--- a/app/components/form/fields/NetworkInterfaceField.tsx
+++ b/app/components/form/fields/NetworkInterfaceField.tsx
@@ -18,6 +18,12 @@ import { Listbox } from '~/ui/lib/Listbox'
import { MiniTable } from '~/ui/lib/MiniTable'
import { Radio } from '~/ui/lib/Radio'
+const networkInterfaceTableColumns = [
+ { header: 'Name', cell: (item: InstanceNetworkInterfaceCreate) => item.name },
+ { header: 'VPC', cell: (item: InstanceNetworkInterfaceCreate) => item.vpcName },
+ { header: 'Subnet', cell: (item: InstanceNetworkInterfaceCreate) => item.subnetName },
+]
+
/**
* Designed less for reuse, more to encapsulate logic that would otherwise
* clutter the instance create form.
@@ -115,11 +121,7 @@ export function NetworkInterfaceField({
item.name },
- { header: 'VPC', cell: (item) => item.vpcName },
- { header: 'Subnet', cell: (item) => item.subnetName },
- ]}
+ columns={networkInterfaceTableColumns}
rowKey={(item) => item.name}
onRemoveItem={(item) =>
onChange({
diff --git a/app/components/form/fields/TlsCertsField.tsx b/app/components/form/fields/TlsCertsField.tsx
index 139304230..097824e0d 100644
--- a/app/components/form/fields/TlsCertsField.tsx
+++ b/app/components/form/fields/TlsCertsField.tsx
@@ -22,6 +22,10 @@ import { ErrorMessage } from './ErrorMessage'
import { FileField } from './FileField'
import { NameField } from './NameField'
+const tlsCertTableColumns = [
+ { header: 'Name', cell: (item: CertificateCreate) => item.name },
+]
+
export function TlsCertsField({ control }: { control: Control }) {
const [showAddCert, setShowAddCert] = useState(false)
@@ -49,7 +53,7 @@ export function TlsCertsField({ control }: { control: Control item.name }]}
+ columns={tlsCertTableColumns}
rowKey={(item) => item.name}
onRemoveItem={(item) => onChange(items.filter((i) => i.name !== item.name))}
removeLabel={(item) => `remove cert ${item.name}`}
diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx
index 33fc7ab8d..2895873ea 100644
--- a/app/forms/instance-create.tsx
+++ b/app/forms/instance-create.tsx
@@ -93,6 +93,11 @@ import { GiB } from '~/util/units'
// for referential stability
const EMPTY_NAME_OR_ID_LIST: NameOrId[] = []
+const floatingIpTableColumns = [
+ { header: 'Name', cell: (item: FloatingIp) => item.name },
+ { header: 'IP', cell: (item: FloatingIp) => item.ip },
+]
+
const getBootDiskAttachment = (
values: InstanceCreateInput,
images: Array
@@ -1016,10 +1021,7 @@ const NetworkingSection = ({
item.name },
- { header: 'IP', cell: (item) => item.ip },
- ]}
+ columns={floatingIpTableColumns}
rowKey={(item) => item.name}
onRemoveItem={(item) => detachFloatingIp(item.name)}
removeLabel={(item) => `remove floating IP ${item.name}`}
diff --git a/app/forms/network-interface-edit.tsx b/app/forms/network-interface-edit.tsx
index 8bd206ccd..cbc7ef6d0 100644
--- a/app/forms/network-interface-edit.tsx
+++ b/app/forms/network-interface-edit.tsx
@@ -34,6 +34,8 @@ import { KEYS } from '~/ui/util/keys'
import { parseIpNet, validateIpNet } from '~/util/ip'
import { docLinks, links } from '~/util/links'
+const transitIpTableColumns = [{ header: 'Transit IPs', cell: (ip: string) => ip }]
+
type EditNetworkInterfaceFormProps = {
editing: InstanceNetworkInterface
onDismiss: () => void
@@ -164,7 +166,7 @@ export function EditNetworkInterfaceForm({
className="mb-4"
ariaLabel="Transit IPs"
items={transitIps}
- columns={[{ header: 'Transit IPs', cell: (ip) => ip }]}
+ columns={transitIpTableColumns}
rowKey={(ip) => ip}
onRemoveItem={(ip) => {
form.setValue(
diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index 0212b2edb..0cf348973 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -108,7 +108,7 @@ export const ClearAndAddButtons = ({
type Column = {
header: string
- cell: (item: T, index: number) => React.ReactNode
+ cell: (item: T) => React.ReactNode
}
type MiniTableProps = {
@@ -154,7 +154,7 @@ export function MiniTable({
items.map((item, index) => (
{columns.map((column, colIndex) => (
- | {column.cell(item, index)} |
+ {column.cell(item)} |
))}