refactor: Improve users table view for non admins (#5547)

site/src/components/RoleSelect/RoleSelect.tsx

@@ -69,7 +69,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     margin: 0,
     // Set a fixed width for the select. It avoids selects having different sizes
     // depending on how many roles they have selected.
-    width: theme.spacing(25),
+    width: theme.spacing(32),
     "& .MuiSelect-root": {
       // Adjusting padding because it does not have label
       paddingTop: theme.spacing(1.5),

site/src/components/UsersTable/UsersTable.tsx

@@ -54,10 +54,10 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell width="50%">{Language.usernameLabel}</TableCell>
-            <TableCell width="25%">{Language.statusLabel}</TableCell>
-            <TableCell width="50%">{Language.lastSeenLabel}</TableCell>
-            <TableCell width="25%">
+            <TableCell width="35%">{Language.usernameLabel}</TableCell>
+            <TableCell width="15%">{Language.statusLabel}</TableCell>
+            <TableCell width="15%">{Language.lastSeenLabel}</TableCell>
+            <TableCell width="35%">
               <Stack direction="row" spacing={1} alignItems="center">
                 <span>{Language.rolesLabel}</span>
                 <UserRoleHelpTooltip />

site/src/components/UsersTable/UsersTableBody.tsx

@@ -4,6 +4,7 @@ import TableCell from "@material-ui/core/TableCell"
 import TableRow from "@material-ui/core/TableRow"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { LastUsed } from "components/LastUsed/LastUsed"
+import { Pill } from "components/Pill/Pill"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
 import * as TypesGen from "../../api/typesGenerated"
@@ -136,9 +137,15 @@ export const UsersTableBody: FC<
                         }}
                       />
                     ) : (
-                      <>
-                        {userRoles.map((role) => role.display_name).join(", ")}
-                      </>
+                      <div className={styles.roles}>
+                        {userRoles.map((role) => (
+                          <Pill
+                            key={role.name}
+                            text={role.display_name}
+                            className={styles.rolePill}
+                          />
+                        ))}
+                      </div>
                     )}
                   </TableCell>
                   {canEditUsers && (
@@ -199,4 +206,13 @@ const useStyles = makeStyles((theme) => ({
     height: theme.spacing(4.5),
     borderRadius: "100%",
   },
+  roles: {
+    display: "flex",
+    gap: theme.spacing(1),
+    flexWrap: "wrap",
+  },
+  rolePill: {
+    backgroundColor: theme.palette.background.paperLight,
+    borderColor: theme.palette.divider,
+  },
 }))