refactor: extract UserRoleCell into separate component

Parkreiner · Parkreiner · commit cb51aa8c227b · 2023-10-15T21:32:22.000Z
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -12,10 +12,10 @@ export interface UsersPageViewProps {
   users?: TypesGen.User[];
   roles?: TypesGen.AssignableRoles[];
   isUpdatingUserRoles?: boolean;
-  canEditUsers?: boolean;
+  canEditUsers: boolean;
   oidcRoleSyncEnabled: boolean;
   canViewActivity?: boolean;
-  isLoading?: boolean;
+  isLoading: boolean;
   authMethods?: TypesGen.AuthMethods;
   onSuspendUser: (user: TypesGen.User) => void;
   onDeleteUser: (user: TypesGen.User) => void;
diff --git a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
@@ -0,0 +1,90 @@
+import { makeStyles } from "@mui/styles";
+import { type User, type Role } from "api/typesGenerated";
+import { combineClasses } from "utils/combineClasses";
+
+import { EditRolesButton } from "./EditRolesButton";
+import { Pill } from "components/Pill/Pill";
+import TableCell from "@mui/material/TableCell";
+import Stack from "@mui/material/Stack";
+
+const useStyles = makeStyles((theme) => ({
+  rolePill: {
+    backgroundColor: theme.palette.background.paperLight,
+    borderColor: theme.palette.divider,
+  },
+  rolePillOwner: {
+    backgroundColor: theme.palette.info.dark,
+    borderColor: theme.palette.info.light,
+  },
+}));
+
+const roleOrder = ["owner", "user-admin", "template-admin", "auditor"];
+
+const sortRoles = (roles: readonly Role[]) => {
+  return [...roles].sort(
+    (a, b) => roleOrder.indexOf(a.name) - roleOrder.indexOf(b.name),
+  );
+};
+
+type Props = {
+  canEditUsers: boolean;
+  roles: undefined | readonly Role[];
+  user: User;
+  isLoading: boolean;
+  oidcRoleSyncEnabled: boolean;
+  onUserRolesUpdate: (user: User, newRoleNames: string[]) => void;
+};
+
+// When the user has no role we want to show they are a Member
+const fallbackRole: Role = {
+  name: "member",
+  display_name: "Member",
+} as const;
+
+export function UserRoleCell({
+  canEditUsers,
+  roles,
+  user,
+  isLoading,
+  oidcRoleSyncEnabled,
+  onUserRolesUpdate,
+}: Props) {
+  const styles = useStyles();
+
+  const userRoles =
+    user.roles.length === 0 ? [fallbackRole] : sortRoles(user.roles);
+
+  return (
+    <TableCell>
+      <Stack direction="row" spacing={1}>
+        {canEditUsers && (
+          <EditRolesButton
+            roles={roles ? sortRoles(roles) : []}
+            selectedRoles={userRoles}
+            isLoading={isLoading}
+            userLoginType={user.login_type}
+            oidcRoleSync={oidcRoleSyncEnabled}
+            onChange={(roles) => {
+              // Remove the fallback role because it is only for the UI
+              const rolesWithoutFallback = roles.filter(
+                (role) => role !== fallbackRole.name,
+              );
+              onUserRolesUpdate(user, rolesWithoutFallback);
+            }}
+          />
+        )}
+
+        {userRoles.map((role) => (
+          <Pill
+            key={role.name}
+            text={role.display_name}
+            className={combineClasses({
+              [styles.rolePill]: true,
+              [styles.rolePillOwner]: role.name === "owner",
+            })}
+          />
+        ))}
+      </Stack>
+    </TableCell>
+  );
+}
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTable.tsx b/site/src/pages/UsersPage/UsersTable/UsersTable.tsx
@@ -16,15 +16,15 @@ export const Language = {
   statusLabel: "Status",
   lastSeenLabel: "Last Seen",
   loginTypeLabel: "Login Type",
-};
+} as const;
 
 export interface UsersTableProps {
   users?: TypesGen.User[];
   roles?: TypesGen.AssignableRoles[];
   isUpdatingUserRoles?: boolean;
-  canEditUsers?: boolean;
+  canEditUsers: boolean;
   canViewActivity?: boolean;
-  isLoading?: boolean;
+  isLoading: boolean;
   onSuspendUser: (user: TypesGen.User) => void;
   onActivateUser: (user: TypesGen.User) => void;
   onDeleteUser: (user: TypesGen.User) => void;
@@ -78,6 +78,7 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
             {canEditUsers && <TableCell width="1%" />}
           </TableRow>
         </TableHead>
+
         <TableBody>
           <UsersTableBody
             users={users}
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
