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)} ))}