Ensure to use a unique key in all table rows (#1069)

## Done

- ensure to use a unique key in all table rows to fix updates on search
and filter of table contents

## QA

1. Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is
only available for PRs created by collaborators of the repo. Ask
@mas-who or @edlerd for access.
- With a local copy of this branch, [build and run as described in the
docs](../CONTRIBUTING.md#setting-up-for-development).
2. Perform the following QA steps:
- browse the tables and use search, ensure no errors are in the dev
console from duplicate or missing keys.

src/components/ConfigurationRow.tsx

@@ -234,6 +234,7 @@ export const getConfigurationRowBase = ({
 }: BaseProps): MainTableRow => {
   return {
     name,
+    key: name,
     className,
     columns: [
       {

src/components/DeviceListTable.tsx

@@ -68,6 +68,7 @@ const DeviceListTable: FC<Props> = ({ configBaseURL, devices }) => {
     }
 
     return {
+      key: devicename,
       columns: [
         {
           content: (

src/components/NetworkListTable.tsx

@@ -62,6 +62,7 @@ const NetworkListTable: FC<Props> = ({ onFailure, devices }) => {
         .map(([key]) => key);
 
       return {
+        key: network.name,
         columns: [
           {
             content: (

src/components/forms/SelectGPUModal.tsx

@@ -32,6 +32,7 @@ const SelectGPUModal: FC<Props> = ({ onSelect, onClose }) => {
         const selectCard = () => onSelect(card);
 
         return {
+          key: card.pci_address,
           className: "u-row",
           columns: [
             {

src/pages/cluster/ClusterMemberSelectTable.tsx

@@ -39,6 +39,7 @@ const ClusterMemberSelectTable: FC<Props> = ({ onSelect, disableMember }) => {
     };
 
     return {
+      key: member.server_name,
       className: classnames("u-row", {
         "u-text--muted": disableReason,
         "u-row--disabled": disableReason,

src/pages/images/CustomIsoSelector.tsx

@@ -44,6 +44,7 @@ const CustomIsoSelector: FC<Props> = ({
     const selectIso = () => onSelect(image, "virtual-machine");
 
     return {
+      key: image.fingerprint,
       className: "u-row",
       columns: [
         {

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: [
         {

src/pages/images/ImageSelector.tsx

@@ -239,6 +239,7 @@ const ImageSelector: FC<Props> = ({ onSelect, onClose }) => {
       };
 
       return {
+        key: itemType + item.os + displayRelease + displayVariant,
         className: "u-row",
         columns: [
           {

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,

src/pages/instances/InstanceOverviewProfiles.tsx

@@ -44,6 +44,7 @@ const InstanceOverviewProfiles: FC<Props> = ({ instance, onFailure }) => {
     const description = profiles.filter((item) => item.name === profile)[0]
       .description;
     return {
+      key: profile,
       columns: [
         {
           content: (

src/pages/instances/InstanceSnapshots.tsx

@@ -122,6 +122,7 @@ const InstanceSnapshots = (props: Props) => {
     );
 
     return {
+      key: snapshot.name,
       className: "u-row",
       name: snapshot.name,
       columns: [

src/pages/networks/NetworkForwards.tsx

@@ -58,6 +58,7 @@ const NetworkForwards: FC<Props> = ({ network, project }) => {
 
   const rows = forwards.map((forward) => {
     return {
+      key: forward.listen_address,
       columns: [
         {
           content: forward.listen_address,

src/pages/networks/NetworkList.tsx

@@ -60,6 +60,7 @@ const NetworkList: FC = () => {
 
   const rows = networks.map((network) => {
     return {
+      key: network.name,
       columns: [
         {
           content: (

src/pages/networks/forms/NetworkAddresses.tsx

@@ -40,6 +40,7 @@ const NetworkAddresses: FC<Props> = ({ formik, project }) => {
           ]}
           rows={networkState?.addresses.map((item) => {
             return {
+              key: item.address,
               columns: [
                 {
                   content: item.address,

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: (

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: [

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: [
         {

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: [

src/pages/permissions/panels/EditGroupIdentitiesPanel.tsx

@@ -223,6 +223,7 @@ const EditGroupIdentitiesPanel: FC<Props> = ({ groups }) => {
         : "";
 
     return {
+      key: identity.id,
       name: identity.id,
       className: "u-row",
       columns: [

src/pages/permissions/panels/EditGroupPermissionsForm.tsx

@@ -119,6 +119,7 @@ const EditGroupPermissionsForm: FC<Props> = ({
     const isModified = permission.isAdded || permission.isRemoved;
 
     return {
+      key: permission.id,
       name: permission.id,
       className: classnames("u-row", {
         strikeout: permission.isRemoved,

src/pages/permissions/panels/EditIdentitiesForm.tsx

@@ -119,6 +119,7 @@ const EditIdentitiesForm: FC<Props> = ({
     const isModified = formIdentity?.isAdded || formIdentity?.isRemoved;
 
     return {
+      key: identity.id,
       name: identity.id,
       className: "u-row",
       columns: [

src/pages/permissions/panels/GroupSelection.tsx

@@ -80,6 +80,7 @@ const GroupSelection: FC<Props> = ({
     };
 
     return {
+      key: group.name,
       name: group.name,
       className: "u-row",
       columns: [

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: [

src/pages/projects/ProjectSelectTable.tsx

@@ -36,6 +36,7 @@ const ProjectSelectTable: FC<Props> = ({ onSelect, disableProject }) => {
     };
 
     return {
+      key: project.name,
       className: classnames("u-row", {
         "u-text--muted": disableReason,
         "u-row--disabled": disableReason,

src/pages/settings/Settings.tsx

@@ -117,6 +117,7 @@ const Settings: FC = () => {
       lastCategory = configField.category;
 
       return {
+        key: configField.key,
         columns: [
           {
             content: isNewCategory && (

src/pages/storage/CustomIsoList.tsx

@@ -94,6 +94,7 @@ const CustomIsoList: FC = () => {
     );
 
     return {
+      key: image.fingerprint,
       columns: [
         {
           content: image.aliases,

src/pages/storage/CustomVolumeSelectModal.tsx

@@ -85,6 +85,7 @@ const CustomVolumeSelectModal: FC<Props> = ({
           };
 
           return {
+            key: volume.name,
             className: classnames("u-row", {
               "u-text--muted": isDisabled,
               "u-row--disabled": isDisabled,

src/pages/storage/StoragePoolSelectTable.tsx

@@ -40,6 +40,7 @@ const StoragePoolSelectTable: FC<Props> = ({ onSelect, disablePool }) => {
     };
 
     return {
+      key: pool.name,
       className: classnames("u-row", {
         "u-text--muted": disableReason,
         "u-row--disabled": disableReason,

src/pages/storage/StoragePools.tsx

@@ -87,6 +87,7 @@ const StoragePools: FC = () => {
     const totalVolumeCount = volumes.length;
 
     return {
+      key: pool.name,
       columns: [
         {
           content: (

src/pages/storage/StorageVolumeSnapshots.tsx

@@ -125,6 +125,7 @@ const StorageVolumeSnapshots: FC<Props> = ({ volume }) => {
     );
 
     return {
+      key: snapshot.name,
       className: "u-row",
       name: snapshot.name,
       columns: [

src/pages/storage/StorageVolumes.tsx

@@ -217,6 +217,7 @@ const StorageVolumes: FC = () => {
     const contentType = renderContentType(volume);
 
     return {
+      key: volume.name,
       className: "u-row",
       columns: [
         {

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,

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: [