chore: drill groups data down to cell component

coder · Parkreiner · Oct 19, 2023 · Oct 15, 2023 · Oct 15, 2023 · Oct 15, 2023
commit a29f39525bec7780eb5f080a4eb84921308ab917
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -1,23 +1,10 @@
-import { User } from "api/typesGenerated";
-import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
-import { nonInitialPage } from "components/PaginationWidget/utils";
-import { useMe } from "hooks/useMe";
-import { usePermissions } from "hooks/usePermissions";
-import { FC, ReactNode, useState } from "react";
-import { Helmet } from "react-helmet-async";
-import { useSearchParams, useNavigate } from "react-router-dom";
-import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
-import { ResetPasswordDialog } from "./ResetPasswordDialog";
-import { pageTitle } from "utils/page";
-import { UsersPageView } from "./UsersPageView";
-import { useStatusFilterMenu } from "./UsersFilter";
-import { useFilter } from "components/Filter/filter";
-import { useDashboard } from "components/Dashboard/DashboardProvider";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+import { type FC, type ReactNode, useState } from "react";
+
+import { type User } from "api/typesGenerated";
 import { roles } from "api/queries/roles";
+import { groupsByUserId } from "api/queries/groups";
+import { getErrorMessage } from "api/errors";
 import { deploymentConfig } from "api/queries/deployment";
-import { prepareQuery } from "utils/filters";
-import { usePagination } from "hooks";
 import {
   users,
   suspendUser,
@@ -27,38 +14,55 @@ import {
   updateRoles,
   authMethods,
 } from "api/queries/users";
-import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
-import { getErrorMessage } from "api/errors";
+
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import { useOrganizationId, usePagination } from "hooks";
+import { useMe } from "hooks/useMe";
+import { usePermissions } from "hooks/usePermissions";
+import { useStatusFilterMenu } from "./UsersFilter";
+import { useFilter } from "components/Filter/filter";
+import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { generateRandomString } from "utils/random";
+import { prepareQuery } from "utils/filters";
+
+import { Helmet } from "react-helmet-async";
+import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
+import { nonInitialPage } from "components/PaginationWidget/utils";
+import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
+import { ResetPasswordDialog } from "./ResetPasswordDialog";
+import { pageTitle } from "utils/page";
+import { UsersPageView } from "./UsersPageView";
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 
 export const UsersPage: FC<{ children?: ReactNode }> = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
+
   const searchParamsResult = useSearchParams();
   const { entitlements } = useDashboard();
   const [searchParams] = searchParamsResult;
-  const filter = searchParams.get("filter") ?? "";
-  const pagination = usePagination({
-    searchParamsResult,
-  });
+
+  const pagination = usePagination({ searchParamsResult });
   const usersQuery = useQuery(
     users({
-      q: prepareQuery(filter),
+      q: prepareQuery(searchParams.get("filter") ?? ""),
       limit: pagination.limit,
       offset: pagination.offset,
     }),
   );
+
+  const organizationId = useOrganizationId();
+  const groupsByUserIdQuery = useQuery(groupsByUserId(organizationId));
+  const authMethodsQuery = useQuery(authMethods());
+
   const { updateUsers: canEditUsers, viewDeploymentValues } = usePermissions();
   const rolesQuery = useQuery(roles());
   const { data: deploymentValues } = useQuery({
     ...deploymentConfig(),
     enabled: viewDeploymentValues,
   });
-  // Indicates if oidc roles are synced from the oidc idp.
-  // Assign 'false' if unknown.
-  const oidcRoleSyncEnabled =
-    viewDeploymentValues &&
-    deploymentValues?.config.oidc?.user_role_field !== "";
+
   const me = useMe();
   const useFilterResult = useFilter({
     searchParamsResult,
@@ -74,36 +78,47 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
         status: option?.value,
       }),
   });
-  const authMethodsQuery = useQuery(authMethods());
-  const isLoading =
-    usersQuery.isLoading || rolesQuery.isLoading || authMethodsQuery.isLoading;
 
-  const [confirmSuspendUser, setConfirmSuspendUser] = useState<User>();
+  const [userToSuspend, setUserToSuspend] = useState<User>();
   const suspendUserMutation = useMutation(suspendUser(queryClient));
 
-  const [confirmActivateUser, setConfirmActivateUser] = useState<User>();
+  const [userToActivate, setUserToActivate] = useState<User>();
   const activateUserMutation = useMutation(activateUser(queryClient));
 
-  const [confirmDeleteUser, setConfirmDeleteUser] = useState<User>();
+  const [userToDelete, setUserToDelete] = useState<User>();
   const deleteUserMutation = useMutation(deleteUser(queryClient));
 
   const [confirmResetPassword, setConfirmResetPassword] = useState<{
     user: User;
     newPassword: string;
   }>();
-  const updatePasswordMutation = useMutation(updatePassword());
 
+  const updatePasswordMutation = useMutation(updatePassword());
   const updateRolesMutation = useMutation(updateRoles(queryClient));
 
+  // Indicates if oidc roles are synced from the oidc idp.
+  // Assign 'false' if unknown.
+  const oidcRoleSyncEnabled =
+    viewDeploymentValues &&
+    deploymentValues?.config.oidc?.user_role_field !== "";
+
+  const isLoading =
+    usersQuery.isLoading ||
+    rolesQuery.isLoading ||
+    authMethodsQuery.isLoading ||
+    groupsByUserIdQuery.isLoading;
+
   return (
     <>
       <Helmet>
         <title>{pageTitle("Users")}</title>
       </Helmet>
+
       <UsersPageView
         oidcRoleSyncEnabled={oidcRoleSyncEnabled}
         roles={rolesQuery.data}
         users={usersQuery.data?.users}
+        groupsByUserId={groupsByUserIdQuery.data}
         authMethods={authMethodsQuery.data}
         onListWorkspaces={(user) => {
           navigate(
@@ -116,9 +131,9 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
             "/audit?filter=" + encodeURIComponent(`username:${user.username}`),
           );
         }}
-        onDeleteUser={setConfirmDeleteUser}
-        onSuspendUser={setConfirmSuspendUser}
-        onActivateUser={setConfirmActivateUser}
+        onDeleteUser={setUserToDelete}
+        onSuspendUser={setUserToSuspend}
+        onActivateUser={setUserToActivate}
         onResetUserPassword={(user) => {
           setConfirmResetPassword({
             user,
@@ -147,9 +162,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
         filterProps={{
           filter: useFilterResult,
           error: usersQuery.error,
-          menus: {
-            status: statusMenu,
-          },
+          menus: { status: statusMenu },
         }}
         count={usersQuery.data?.count}
         page={pagination.page}
@@ -158,75 +171,69 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
       />
 
       <DeleteDialog
-        key={confirmDeleteUser?.username}
-        isOpen={confirmDeleteUser !== undefined}
+        key={userToDelete?.username}
+        isOpen={userToDelete !== undefined}
         confirmLoading={deleteUserMutation.isLoading}
-        name={confirmDeleteUser?.username ?? ""}
+        name={userToDelete?.username ?? ""}
         entity="user"
+        onCancel={() => setUserToDelete(undefined)}
         onConfirm={async () => {
           try {
-            await deleteUserMutation.mutateAsync(confirmDeleteUser!.id);
-            setConfirmDeleteUser(undefined);
+            await deleteUserMutation.mutateAsync(userToDelete!.id);
+            setUserToDelete(undefined);
             displaySuccess("Successfully deleted the user.");
           } catch (e) {
             displayError(getErrorMessage(e, "Error deleting user."));
           }
         }}
-        onCancel={() => {
-          setConfirmDeleteUser(undefined);
-        }}
       />
 
       <ConfirmDialog
         type="delete"
         hideCancel={false}
-        open={confirmSuspendUser !== undefined}
+        open={userToSuspend !== undefined}
         confirmLoading={suspendUserMutation.isLoading}
         title="Suspend user"
         confirmText="Suspend"
+        onClose={() => setUserToSuspend(undefined)}
         onConfirm={async () => {
           try {
-            await suspendUserMutation.mutateAsync(confirmSuspendUser!.id);
-            setConfirmSuspendUser(undefined);
+            await suspendUserMutation.mutateAsync(userToSuspend!.id);
+            setUserToSuspend(undefined);
             displaySuccess("Successfully suspended the user.");
           } catch (e) {
             displayError(getErrorMessage(e, "Error suspending user."));
           }
         }}
-        onClose={() => {
-          setConfirmSuspendUser(undefined);
-        }}
         description={
           <>
             Do you want to suspend the user{" "}
-            <strong>{confirmSuspendUser?.username ?? ""}</strong>?
+            <strong>{userToSuspend?.username ?? ""}</strong>?
           </>
         }
       />
 
       <ConfirmDialog
         type="success"
         hideCancel={false}
-        open={confirmActivateUser !== undefined}
+        open={userToActivate !== undefined}
         confirmLoading={activateUserMutation.isLoading}
         title="Activate user"
         confirmText="Activate"
+        onClose={() => setUserToActivate(undefined)}
         onConfirm={async () => {
           try {
-            await activateUserMutation.mutateAsync(confirmActivateUser!.id);
-            setConfirmActivateUser(undefined);
+            await activateUserMutation.mutateAsync(userToActivate!.id);
+            setUserToActivate(undefined);
             displaySuccess("Successfully activated the user.");
           } catch (e) {
             displayError(getErrorMessage(e, "Error activating user."));
           }
         }}
-        onClose={() => {
-          setConfirmActivateUser(undefined);
-        }}
         description={
           <>
             Do you want to activate{" "}
-            <strong>{confirmActivateUser?.username ?? ""}</strong>?
+            <strong>{userToActivate?.username ?? ""}</strong>?
           </>
         }
       />

diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -1,5 +1,7 @@
-import { ComponentProps, FC } from "react";
-import * as TypesGen from "api/typesGenerated";
+import { type ComponentProps, type FC } from "react";
+import type * as TypesGen from "api/typesGenerated";
+import { type GroupsByUserId } from "api/queries/groups";
+
 import { UsersTable } from "./UsersTable/UsersTable";
 import { UsersFilter } from "./UsersFilter";
 import {
@@ -30,6 +32,8 @@ export interface UsersPageViewProps {
   filterProps: ComponentProps<typeof UsersFilter>;
   isNonInitialPage: boolean;
   actorID: string;
+  groupsByUserId: GroupsByUserId | undefined;
+
   // Pagination
   count?: number;
   page: number;
@@ -60,6 +64,7 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
   limit,
   onPageChange,
   page,
+  groupsByUserId,
 }) => {
   return (
     <>
@@ -77,6 +82,7 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
       <UsersTable
         users={users}
         roles={roles}
+        groupsByUserId={groupsByUserId}
         onSuspendUser={onSuspendUser}
         onDeleteUser={onDeleteUser}
         onListWorkspaces={onListWorkspaces}

diff --git a/site/src/pages/UsersPage/UsersTable/GroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/GroupsCell.tsx
@@ -0,0 +1,12 @@
+import TableCell from "@mui/material/TableCell";
+import { GroupsByUserId } from "api/queries/groups";
+import { User } from "api/typesGenerated";
+
+type GroupsCellProps = {
+  user: User;
+  groupsByUserId: GroupsByUserId | undefined;
+};
+
+export function GroupsCell({ user, groupsByUserId }: GroupsCellProps) {
+  return <TableCell>5 Groups</TableCell>;
+}
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTable.tsx b/site/src/pages/UsersPage/UsersTable/UsersTable.tsx
@@ -1,11 +1,13 @@
+import { type FC } from "react";
+import type * as TypesGen from "api/typesGenerated";
+import { type GroupsByUserId } from "api/queries/groups";
+
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import { FC } from "react";
-import * as TypesGen from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 import { UserRoleHelpTooltip } from "./UserRoleHelpTooltip";
 import { UsersTableBody } from "./UsersTableBody";
@@ -20,8 +22,9 @@ export const Language = {
 } as const;
 
 export interface UsersTableProps {
-  users?: TypesGen.User[];
-  roles?: TypesGen.AssignableRoles[];
+  users: TypesGen.User[] | undefined;
+  roles: TypesGen.AssignableRoles[] | undefined;
+  groupsByUserId: GroupsByUserId | undefined;
   isUpdatingUserRoles?: boolean;
   canEditUsers: boolean;
   canViewActivity?: boolean;
@@ -60,6 +63,7 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
   actorID,
   oidcRoleSyncEnabled,
   authMethods,
+  groupsByUserId,
 }) => {
   return (
     <TableContainer>
@@ -88,6 +92,7 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
           <UsersTableBody
             users={users}
             roles={roles}
+            groupsByUserId={groupsByUserId}
             isLoading={isLoading}
             canEditUsers={canEditUsers}
             canViewActivity={canViewActivity}

diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
@@ -23,11 +23,14 @@ import GitHub from "@mui/icons-material/GitHub";
 import PasswordOutlined from "@mui/icons-material/PasswordOutlined";
 import ShieldOutlined from "@mui/icons-material/ShieldOutlined";
 import { UserRoleCell } from "./UserRoleCell";
+import { GroupsByUserId } from "api/queries/groups";
+import { GroupsCell } from "./GroupsCell";
 
 dayjs.extend(relativeTime);
 
 interface UsersTableBodyProps {
-  users?: TypesGen.User[];
+  users: TypesGen.User[] | undefined;
+  groupsByUserId: GroupsByUserId | undefined;
   authMethods?: TypesGen.AuthMethods;
   roles?: TypesGen.AssignableRoles[];
   isUpdatingUserRoles?: boolean;
@@ -72,6 +75,7 @@ export const UsersTableBody: FC<
   isNonInitialPage,
   actorID,
   oidcRoleSyncEnabled,
+  groupsByUserId,
 }) => {
   return (
     <ChooseOne>
@@ -153,7 +157,7 @@ export const UsersTableBody: FC<
               onUserRolesUpdate={onUpdateUserRoles}
             />
 
-            <TableCell>5 Groups</TableCell>
+            <GroupsCell groupsByUserId={groupsByUserId} user={user} />
 
             <TableCell>
               <LoginType authMethods={authMethods!} value={user.login_type} />