chore: Revert "remove circular dependence + correctly derive values" (#…

…9590)

webui/react/src/pages/WorkspaceDetails.tsx

@@ -52,15 +52,15 @@ const WorkspaceDetails: React.FC = () => {
   const loadableUsers = useObservable(userStore.getUsers());
   const users = loadableUsers.getOrElse([]);
   const { tab, workspaceId: workspaceID } = useParams<Params>();
-  const [groups, setGroups] = useState<V1GroupSearchResult[]>([]);
+  const [groups, setGroups] = useState<V1GroupSearchResult[]>();
   const [usersAssignedDirectly, setUsersAssignedDirectly] = useState<User[]>([]);
   const [groupsAssignedDirectly, setGroupsAssignedDirectly] = useState<V1Group[]>([]);
-  const usersAssignedDirectlyIds = useMemo(() => {
-    return new Set(usersAssignedDirectly.map((user) => user.id));
-  }, [usersAssignedDirectly]);
-  const groupsAssignedDirectlyIds = useMemo(() => {
-    return new Set(groupsAssignedDirectly.map((group) => group.groupId).filter((id) => !!id));
-  }, [groupsAssignedDirectly]);
+  const [usersAssignedDirectlyIds, setUsersAssignedDirectlyIds] = useState<Set<number>>(
+    new Set<number>(),
+  );
+  const [groupsAssignedDirectlyIds, setGroupsAssignedDirectlyIds] = useState<Set<number>>(
+    new Set<number>(),
+  );
   const [rolesAssignableToScope, setRolesAssignableToScope] = useState<V1Role[]>([]);
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
   const [nameFilter, setNameFilter] = useState<string>();
@@ -103,13 +103,17 @@ const WorkspaceDetails: React.FC = () => {
 
     const response = await getWorkspaceMembers({ nameFilter, workspaceId: id });
     const activeUsers = response.usersAssignedDirectly.filter((u) => u.isActive);
-    setUsersAssignedDirectly((prev) => (_.isEqual(prev, activeUsers) ? prev : activeUsers));
-    setGroupsAssignedDirectly((prev) =>
-      _.isEqual(prev, response.groups) ? prev : response.groups,
-    );
-    setWorkspaceAssignments((prev) =>
-      _.isEqual(prev, response.assignments) ? prev : response.assignments,
-    );
+    const newGroupIds = new Set<number>();
+    setUsersAssignedDirectly(activeUsers);
+    setUsersAssignedDirectlyIds(new Set(activeUsers.map((user) => user.id)));
+    setGroupsAssignedDirectly(response.groups);
+    response.groups.forEach((group) => {
+      if (group.groupId) {
+        newGroupIds.add(group.groupId);
+      }
+    });
+    setGroupsAssignedDirectlyIds(newGroupIds);
+    setWorkspaceAssignments(response.assignments);
   }, [id, nameFilter, rbacEnabled]);
 
   const fetchRolesAssignableToScope = useCallback(async (): Promise<void> => {