From 376583b1c6f4fc309fd0b88b16f950f36528a9fe Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 3 Jan 2023 13:50:46 +0000
Subject: [PATCH] refactor: Improve users table view for non admins

---
 site/src/components/RoleSelect/RoleSelect.tsx |  2 +-
 site/src/components/UsersTable/UsersTable.tsx |  8 +++----
 .../components/UsersTable/UsersTableBody.tsx  | 22 ++++++++++++++++---
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/site/src/components/RoleSelect/RoleSelect.tsx b/site/src/components/RoleSelect/RoleSelect.tsx
index cee23c904e519..6a029a69456ae 100644
--- a/site/src/components/RoleSelect/RoleSelect.tsx
+++ b/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),
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
index 1226d8591fbf0..d5210f803a8a4 100644
--- a/site/src/components/UsersTable/UsersTable.tsx
+++ b/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 />
diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx
index b97dbc05c2e7e..5a7c0dc3144c4 100644
--- a/site/src/components/UsersTable/UsersTableBody.tsx
+++ b/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,
+  },
 }))