From 5e1c87f30cdf3be67ae793c0ec05e9c2fda731a5 Mon Sep 17 00:00:00 2001 From: David Edler Date: Wed, 22 Jan 2025 13:59:50 +0100 Subject: [PATCH] fix(tables) ensure to use a unique key in all table rows to fix updates on search and filter of table contents Signed-off-by: David Edler --- src/components/ConfigurationRow.tsx | 1 + src/components/DeviceListTable.tsx | 1 + src/components/NetworkListTable.tsx | 1 + src/components/forms/SelectGPUModal.tsx | 1 + src/pages/cluster/ClusterMemberSelectTable.tsx | 1 + src/pages/images/CustomIsoSelector.tsx | 1 + src/pages/images/ImageList.tsx | 1 + src/pages/images/ImageSelector.tsx | 1 + src/pages/instances/InstanceList.tsx | 2 ++ src/pages/instances/InstanceOverviewProfiles.tsx | 1 + src/pages/instances/InstanceSnapshots.tsx | 1 + src/pages/networks/NetworkForwards.tsx | 1 + src/pages/networks/NetworkList.tsx | 1 + src/pages/networks/forms/NetworkAddresses.tsx | 1 + src/pages/operations/OperationList.tsx | 1 + src/pages/permissions/PermissionGroups.tsx | 1 + src/pages/permissions/PermissionIdentities.tsx | 2 +- src/pages/permissions/PermissionIdpGroups.tsx | 1 + src/pages/permissions/panels/EditGroupIdentitiesPanel.tsx | 1 + src/pages/permissions/panels/EditGroupPermissionsForm.tsx | 1 + src/pages/permissions/panels/EditIdentitiesForm.tsx | 1 + src/pages/permissions/panels/GroupSelection.tsx | 1 + src/pages/profiles/ProfileList.tsx | 1 + src/pages/projects/ProjectSelectTable.tsx | 1 + src/pages/settings/Settings.tsx | 1 + src/pages/storage/CustomIsoList.tsx | 1 + src/pages/storage/CustomVolumeSelectModal.tsx | 1 + src/pages/storage/StoragePoolSelectTable.tsx | 1 + src/pages/storage/StoragePools.tsx | 1 + src/pages/storage/StorageVolumeSnapshots.tsx | 1 + src/pages/storage/StorageVolumes.tsx | 1 + src/pages/warnings/WarningList.tsx | 1 + src/util/clusterGroups.tsx | 1 + 33 files changed, 34 insertions(+), 1 deletion(-) diff --git a/src/components/ConfigurationRow.tsx b/src/components/ConfigurationRow.tsx index 9d28a3c682..f107dc4770 100644 --- a/src/components/ConfigurationRow.tsx +++ b/src/components/ConfigurationRow.tsx @@ -234,6 +234,7 @@ export const getConfigurationRowBase = ({ }: BaseProps): MainTableRow => { return { name, + key: name, className, columns: [ { diff --git a/src/components/DeviceListTable.tsx b/src/components/DeviceListTable.tsx index 0090afa102..eba71a259d 100644 --- a/src/components/DeviceListTable.tsx +++ b/src/components/DeviceListTable.tsx @@ -68,6 +68,7 @@ const DeviceListTable: FC = ({ configBaseURL, devices }) => { } return { + key: devicename, columns: [ { content: ( diff --git a/src/components/NetworkListTable.tsx b/src/components/NetworkListTable.tsx index 12fb417217..6a715e1a87 100644 --- a/src/components/NetworkListTable.tsx +++ b/src/components/NetworkListTable.tsx @@ -62,6 +62,7 @@ const NetworkListTable: FC = ({ onFailure, devices }) => { .map(([key]) => key); return { + key: network.name, columns: [ { content: ( diff --git a/src/components/forms/SelectGPUModal.tsx b/src/components/forms/SelectGPUModal.tsx index 1c2f12b381..3cb14a39ce 100644 --- a/src/components/forms/SelectGPUModal.tsx +++ b/src/components/forms/SelectGPUModal.tsx @@ -32,6 +32,7 @@ const SelectGPUModal: FC = ({ onSelect, onClose }) => { const selectCard = () => onSelect(card); return { + key: card.pci_address, className: "u-row", columns: [ { diff --git a/src/pages/cluster/ClusterMemberSelectTable.tsx b/src/pages/cluster/ClusterMemberSelectTable.tsx index 8969d5aa6a..bbcf3a6d0b 100644 --- a/src/pages/cluster/ClusterMemberSelectTable.tsx +++ b/src/pages/cluster/ClusterMemberSelectTable.tsx @@ -39,6 +39,7 @@ const ClusterMemberSelectTable: FC = ({ onSelect, disableMember }) => { }; return { + key: member.server_name, className: classnames("u-row", { "u-text--muted": disableReason, "u-row--disabled": disableReason, diff --git a/src/pages/images/CustomIsoSelector.tsx b/src/pages/images/CustomIsoSelector.tsx index df8753006c..646011ce6b 100644 --- a/src/pages/images/CustomIsoSelector.tsx +++ b/src/pages/images/CustomIsoSelector.tsx @@ -44,6 +44,7 @@ const CustomIsoSelector: FC = ({ const selectIso = () => onSelect(image, "virtual-machine"); return { + key: image.fingerprint, className: "u-row", columns: [ { diff --git a/src/pages/images/ImageList.tsx b/src/pages/images/ImageList.tsx index ac5e4d2ec0..cf5cf0795e 100644 --- a/src/pages/images/ImageList.tsx +++ b/src/pages/images/ImageList.tsx @@ -123,6 +123,7 @@ const ImageList: FC = () => { const description = image.properties?.description ?? image.fingerprint; return { + key: image.fingerprint, name: image.fingerprint, columns: [ { diff --git a/src/pages/images/ImageSelector.tsx b/src/pages/images/ImageSelector.tsx index 72c21b96ef..d24bd65992 100644 --- a/src/pages/images/ImageSelector.tsx +++ b/src/pages/images/ImageSelector.tsx @@ -239,6 +239,7 @@ const ImageSelector: FC = ({ onSelect, onClose }) => { }; return { + key: itemType + item.os + displayRelease + displayVariant, className: "u-row", columns: [ { diff --git a/src/pages/instances/InstanceList.tsx b/src/pages/instances/InstanceList.tsx index 329b463ec5..e66eab9782 100644 --- a/src/pages/instances/InstanceList.tsx +++ b/src/pages/instances/InstanceList.tsx @@ -275,6 +275,7 @@ const InstanceList: FC = () => { const creationRows: MainTableRow[] = creationOperations.map((operation) => { return { + key: operation.id, className: "u-row", columns: [ { @@ -349,6 +350,7 @@ const InstanceList: FC = () => { .map((val) => val.address); return { + key: instance.name, className: panelParams.instance === instance.name ? "u-row-selected" : "u-row", name: instance.name, diff --git a/src/pages/instances/InstanceOverviewProfiles.tsx b/src/pages/instances/InstanceOverviewProfiles.tsx index e2cbd31d88..84fcd4ef2d 100644 --- a/src/pages/instances/InstanceOverviewProfiles.tsx +++ b/src/pages/instances/InstanceOverviewProfiles.tsx @@ -44,6 +44,7 @@ const InstanceOverviewProfiles: FC = ({ instance, onFailure }) => { const description = profiles.filter((item) => item.name === profile)[0] .description; return { + key: profile, columns: [ { content: ( diff --git a/src/pages/instances/InstanceSnapshots.tsx b/src/pages/instances/InstanceSnapshots.tsx index f3fbdd6832..04f2cdf790 100644 --- a/src/pages/instances/InstanceSnapshots.tsx +++ b/src/pages/instances/InstanceSnapshots.tsx @@ -122,6 +122,7 @@ const InstanceSnapshots = (props: Props) => { ); return { + key: snapshot.name, className: "u-row", name: snapshot.name, columns: [ diff --git a/src/pages/networks/NetworkForwards.tsx b/src/pages/networks/NetworkForwards.tsx index ca4a2d27ba..7a623fa351 100644 --- a/src/pages/networks/NetworkForwards.tsx +++ b/src/pages/networks/NetworkForwards.tsx @@ -58,6 +58,7 @@ const NetworkForwards: FC = ({ network, project }) => { const rows = forwards.map((forward) => { return { + key: forward.listen_address, columns: [ { content: forward.listen_address, diff --git a/src/pages/networks/NetworkList.tsx b/src/pages/networks/NetworkList.tsx index 71256ed32f..d9601de933 100644 --- a/src/pages/networks/NetworkList.tsx +++ b/src/pages/networks/NetworkList.tsx @@ -60,6 +60,7 @@ const NetworkList: FC = () => { const rows = networks.map((network) => { return { + key: network.name, columns: [ { content: ( diff --git a/src/pages/networks/forms/NetworkAddresses.tsx b/src/pages/networks/forms/NetworkAddresses.tsx index ce1f14af46..616b988b7e 100644 --- a/src/pages/networks/forms/NetworkAddresses.tsx +++ b/src/pages/networks/forms/NetworkAddresses.tsx @@ -40,6 +40,7 @@ const NetworkAddresses: FC = ({ formik, project }) => { ]} rows={networkState?.addresses.map((item) => { return { + key: item.address, columns: [ { content: item.address, diff --git a/src/pages/operations/OperationList.tsx b/src/pages/operations/OperationList.tsx index e5205e9f39..c3123c2ac2 100644 --- a/src/pages/operations/OperationList.tsx +++ b/src/pages/operations/OperationList.tsx @@ -45,6 +45,7 @@ const OperationList: FC = () => { const rows = operations.map((operation) => { const projectName = getProjectName(operation); return { + key: operation.id, columns: [ { content: ( diff --git a/src/pages/permissions/PermissionGroups.tsx b/src/pages/permissions/PermissionGroups.tsx index 1cc2feffe8..7c07a5aa1b 100644 --- a/src/pages/permissions/PermissionGroups.tsx +++ b/src/pages/permissions/PermissionGroups.tsx @@ -100,6 +100,7 @@ const PermissionGroups: FC = () => { const rows = filteredGroups.map((group) => { const allIdentityIds = getIdentityIdsForGroup(group); return { + key: group.name, name: group.name, className: "u-row", columns: [ diff --git a/src/pages/permissions/PermissionIdentities.tsx b/src/pages/permissions/PermissionIdentities.tsx index 8ddb521bb2..13d0baedd8 100644 --- a/src/pages/permissions/PermissionIdentities.tsx +++ b/src/pages/permissions/PermissionIdentities.tsx @@ -121,8 +121,8 @@ const PermissionIdentities: FC = () => { }; return { - name: isUnrestricted(identity) ? "" : identity.id, key: identity.id, + name: isUnrestricted(identity) ? "" : identity.id, className: "u-row", columns: [ { diff --git a/src/pages/permissions/PermissionIdpGroups.tsx b/src/pages/permissions/PermissionIdpGroups.tsx index 84d92e1775..da7805482a 100644 --- a/src/pages/permissions/PermissionIdpGroups.tsx +++ b/src/pages/permissions/PermissionIdpGroups.tsx @@ -87,6 +87,7 @@ const PermissionIdpGroups: FC = () => { const rows = filteredGroups.map((idpGroup) => { return { + key: idpGroup.name, name: idpGroup.name, className: "u-row", columns: [ diff --git a/src/pages/permissions/panels/EditGroupIdentitiesPanel.tsx b/src/pages/permissions/panels/EditGroupIdentitiesPanel.tsx index 0230bf5b7c..4605e86b2b 100644 --- a/src/pages/permissions/panels/EditGroupIdentitiesPanel.tsx +++ b/src/pages/permissions/panels/EditGroupIdentitiesPanel.tsx @@ -223,6 +223,7 @@ const EditGroupIdentitiesPanel: FC = ({ groups }) => { : ""; return { + key: identity.id, name: identity.id, className: "u-row", columns: [ diff --git a/src/pages/permissions/panels/EditGroupPermissionsForm.tsx b/src/pages/permissions/panels/EditGroupPermissionsForm.tsx index 1ba3716cfe..9284a170f4 100644 --- a/src/pages/permissions/panels/EditGroupPermissionsForm.tsx +++ b/src/pages/permissions/panels/EditGroupPermissionsForm.tsx @@ -119,6 +119,7 @@ const EditGroupPermissionsForm: FC = ({ const isModified = permission.isAdded || permission.isRemoved; return { + key: permission.id, name: permission.id, className: classnames("u-row", { strikeout: permission.isRemoved, diff --git a/src/pages/permissions/panels/EditIdentitiesForm.tsx b/src/pages/permissions/panels/EditIdentitiesForm.tsx index c2386f8f71..31819efb53 100644 --- a/src/pages/permissions/panels/EditIdentitiesForm.tsx +++ b/src/pages/permissions/panels/EditIdentitiesForm.tsx @@ -119,6 +119,7 @@ const EditIdentitiesForm: FC = ({ const isModified = formIdentity?.isAdded || formIdentity?.isRemoved; return { + key: identity.id, name: identity.id, className: "u-row", columns: [ diff --git a/src/pages/permissions/panels/GroupSelection.tsx b/src/pages/permissions/panels/GroupSelection.tsx index c77b1d2a95..822f21c54c 100644 --- a/src/pages/permissions/panels/GroupSelection.tsx +++ b/src/pages/permissions/panels/GroupSelection.tsx @@ -80,6 +80,7 @@ const GroupSelection: FC = ({ }; return { + key: group.name, name: group.name, className: "u-row", columns: [ diff --git a/src/pages/profiles/ProfileList.tsx b/src/pages/profiles/ProfileList.tsx index 6f2585d9f7..cfeaf42c0a 100644 --- a/src/pages/profiles/ProfileList.tsx +++ b/src/pages/profiles/ProfileList.tsx @@ -113,6 +113,7 @@ const ProfileList: FC = () => { instanceCountMap.find((item) => profile.name === item.name)?.total ?? 0; return { + key: profile.name, className: panelParams.profile === profile.name ? "u-row-selected" : "u-row", columns: [ diff --git a/src/pages/projects/ProjectSelectTable.tsx b/src/pages/projects/ProjectSelectTable.tsx index 1de8764090..53636751ab 100644 --- a/src/pages/projects/ProjectSelectTable.tsx +++ b/src/pages/projects/ProjectSelectTable.tsx @@ -36,6 +36,7 @@ const ProjectSelectTable: FC = ({ onSelect, disableProject }) => { }; return { + key: project.name, className: classnames("u-row", { "u-text--muted": disableReason, "u-row--disabled": disableReason, diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 24cecfa048..ed0550b509 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -107,6 +107,7 @@ const Settings: FC = () => { lastCategory = configField.category; return { + key: configField.key, columns: [ { content: isNewCategory && ( diff --git a/src/pages/storage/CustomIsoList.tsx b/src/pages/storage/CustomIsoList.tsx index 8f76106981..f36076259d 100644 --- a/src/pages/storage/CustomIsoList.tsx +++ b/src/pages/storage/CustomIsoList.tsx @@ -94,6 +94,7 @@ const CustomIsoList: FC = () => { ); return { + key: image.fingerprint, columns: [ { content: image.aliases, diff --git a/src/pages/storage/CustomVolumeSelectModal.tsx b/src/pages/storage/CustomVolumeSelectModal.tsx index ee9a49ee1e..ccc1f85e77 100644 --- a/src/pages/storage/CustomVolumeSelectModal.tsx +++ b/src/pages/storage/CustomVolumeSelectModal.tsx @@ -85,6 +85,7 @@ const CustomVolumeSelectModal: FC = ({ }; return { + key: volume.name, className: classnames("u-row", { "u-text--muted": isDisabled, "u-row--disabled": isDisabled, diff --git a/src/pages/storage/StoragePoolSelectTable.tsx b/src/pages/storage/StoragePoolSelectTable.tsx index da8f2fc580..4e7ebf7327 100644 --- a/src/pages/storage/StoragePoolSelectTable.tsx +++ b/src/pages/storage/StoragePoolSelectTable.tsx @@ -40,6 +40,7 @@ const StoragePoolSelectTable: FC = ({ onSelect, disablePool }) => { }; return { + key: pool.name, className: classnames("u-row", { "u-text--muted": disableReason, "u-row--disabled": disableReason, diff --git a/src/pages/storage/StoragePools.tsx b/src/pages/storage/StoragePools.tsx index 8991592a7b..9443de45d6 100644 --- a/src/pages/storage/StoragePools.tsx +++ b/src/pages/storage/StoragePools.tsx @@ -87,6 +87,7 @@ const StoragePools: FC = () => { const totalVolumeCount = volumes.length; return { + key: pool.name, columns: [ { content: ( diff --git a/src/pages/storage/StorageVolumeSnapshots.tsx b/src/pages/storage/StorageVolumeSnapshots.tsx index aaf1251e50..9378f9a5fa 100644 --- a/src/pages/storage/StorageVolumeSnapshots.tsx +++ b/src/pages/storage/StorageVolumeSnapshots.tsx @@ -125,6 +125,7 @@ const StorageVolumeSnapshots: FC = ({ volume }) => { ); return { + key: snapshot.name, className: "u-row", name: snapshot.name, columns: [ diff --git a/src/pages/storage/StorageVolumes.tsx b/src/pages/storage/StorageVolumes.tsx index 924ce508c5..84a2a59bf7 100644 --- a/src/pages/storage/StorageVolumes.tsx +++ b/src/pages/storage/StorageVolumes.tsx @@ -217,6 +217,7 @@ const StorageVolumes: FC = () => { const contentType = renderContentType(volume); return { + key: volume.name, className: "u-row", columns: [ { diff --git a/src/pages/warnings/WarningList.tsx b/src/pages/warnings/WarningList.tsx index 45e09ba1f2..701ce29b1e 100644 --- a/src/pages/warnings/WarningList.tsx +++ b/src/pages/warnings/WarningList.tsx @@ -40,6 +40,7 @@ const WarningList: FC = () => { const rows = warnings.map((warning) => { return { + key: warning.uuid, columns: [ { content: warning.type, diff --git a/src/util/clusterGroups.tsx b/src/util/clusterGroups.tsx index 198f891439..4b34d83bfc 100644 --- a/src/util/clusterGroups.tsx +++ b/src/util/clusterGroups.tsx @@ -51,6 +51,7 @@ export const getClusterRows = ( ): MainTableRow[] => members.map((member) => { return { + key: member.server_name, className: "u-row", name: member.server_name, columns: [