define ids for user and user group rows

RedHatInsights · Oct 18, 2024 · 9f68118 · 9f68118
1 parent f09db10
commit 9f68118
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 39 deletions.
diff --git a/src/smart-components/access-management/AddUserGroupModal.tsx b/src/smart-components/access-management/AddUserGroupModal.tsx
@@ -18,10 +18,10 @@ export const AddUserGroupModal: React.FunctionComponent<AddUserGroupModalProps>
   const handleCloseModal = () => setIsOpen(false);
 
   const handleAddUsers = () => {
-    const selectedUsernames = selectedUsers.map((user) => ({username: user[0]})); // TODO: fix - this seems gross
+    const selectedUsernames = selectedUsers.map((user) => ({username: user.id}));
     selectedGroups.forEach((group) => {
-      console.log(`Adding ${JSON.stringify(selectedUsernames)} to group ${group.name} - ${group.uuid}`);
-      //dispatch(addMembersToGroup(group.uuid, selectedUsernames)); // TODO: fix 'user' not found 404 error
+      console.log(`Adding ${JSON.stringify(selectedUsernames)} to group ${group.id}`);
+      //dispatch(addMembersToGroup(group.id, selectedUsernames)); // TODO: fix 'user' not found 404 error
     });
     setIsOpen(false);
   };

diff --git a/src/smart-components/access-management/UserGroupsTable.tsx b/src/smart-components/access-management/UserGroupsTable.tsx
@@ -71,7 +71,7 @@ const UserGroupsTable: React.FunctionComponent<UserGroupsTableProps> = ({
   }
   const { page, perPage, onSetPage, onPerPageSelect } = pagination;
 
-  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
   const { selected, onSelect, isSelected } = selection;
 
   const fetchData = useCallback(
@@ -93,10 +93,9 @@ const UserGroupsTable: React.FunctionComponent<UserGroupsTableProps> = ({
 
   useEffect(() => {
     if (onChange) {
-      const selectedGroups = groups.filter((group) => selected.some((s) => s[0] === group.name)); // TODO: need better way to handle this :(
-      onChange(selectedGroups);
+      onChange(selected);
     }
-  }, [selected, groups]);
+  }, [selected]);
 
   const handleBulkSelect = (value: BulkSelectValue) => {
     if (value === BulkSelectValue.none) {
@@ -108,25 +107,28 @@ const UserGroupsTable: React.FunctionComponent<UserGroupsTableProps> = ({
     }
   };
 
-  const rows = groups.map((group: any) => [
-    group.name,
-    group.description ? (
-      <Tooltip isContentLeftAligned content={group.description}>
-        <span>{group.description.length > 23 ? group.description.slice(0, 20) + '...' : group.description}</span>
-      </Tooltip>
-    ) : (
-      <div className="pf-v5-u-color-400">No description</div>
-    ),
-    group.principalCount,
-    group.serviceAccounts || '?', // not currently in API
-    group.roleCount,
-    group.workspaces || '?', // not currently in API
-    formatDistanceToNow(new Date(group.modified), { addSuffix: true }),
-    enableActions && {
-      cell: <ActionsColumn items={ROW_ACTIONS} />,
-      props: { isActionCell: true },
-    },
-  ]);
+  const rows = groups.map((group: any) => ({
+    id: group.uuid,
+    row: [
+      group.name,
+      group.description ? (
+        <Tooltip isContentLeftAligned content={group.description}>
+          <span>{group.description.length > 23 ? group.description.slice(0, 20) + '...' : group.description}</span>
+        </Tooltip>
+      ) : (
+        <div className="pf-v5-u-color-400">No description</div>
+      ),
+      group.principalCount,
+      group.serviceAccounts || '?', // not currently in API
+      group.roleCount,
+      group.workspaces || '?', // not currently in API
+      formatDistanceToNow(new Date(group.modified), { addSuffix: true }),
+      enableActions && {
+        cell: <ActionsColumn items={ROW_ACTIONS} />,
+        props: { isActionCell: true },
+      },
+    ],
+  }));
 
   const pageSelected = rows.length > 0 && rows.every(isSelected);
   const pagePartiallySelected = !pageSelected && rows.some(isSelected);

diff --git a/src/smart-components/access-management/UsersTable.tsx b/src/smart-components/access-management/UsersTable.tsx
@@ -48,7 +48,7 @@ const UsersTable: React.FunctionComponent<UsersTableProps> = ({ onAddUserClick }
   const pagination = useDataViewPagination({ perPage: 20, searchParams, setSearchParams });
   const { page, perPage, onSetPage, onPerPageSelect } = pagination;
 
-  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
   const { selected, onSelect, isSelected } = selection;
 
   const fetchData = useCallback(
@@ -78,18 +78,21 @@ const UsersTable: React.FunctionComponent<UsersTableProps> = ({ onAddUserClick }
     }
   };
 
-  const rows = users.map((user: UserProps) => [
-    user.username,
-    user.email,
-    user.first_name,
-    user.last_name,
-    user.is_active ? 'Active' : 'Inactive',
-    user.is_org_admin ? 'Yes' : 'No',
-    {
-      cell: <ActionsColumn items={rowActions(user)} />,
-      props: { isActionCell: true },
-    },
-  ]);
+  const rows = users.map((user: UserProps) => ({
+    id: user.username,
+    row: [
+      user.username,
+      user.email,
+      user.first_name,
+      user.last_name,
+      user.is_active ? 'Active' : 'Inactive',
+      user.is_org_admin ? 'Yes' : 'No',
+      {
+        cell: <ActionsColumn items={rowActions(user)} />,
+        props: { isActionCell: true },
+      },
+    ],
+  }));
 
   const pageSelected = rows.length > 0 && rows.every(isSelected);
   const pagePartiallySelected = !pageSelected && rows.some(isSelected);