From 32cba8367ce1d6cce65edfe68c7ca3dd30f3fa3e Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Fri, 6 May 2022 17:24:03 +0000
Subject: [PATCH 01/17] Load roles and show them in the table

---
 site/src/api/index.ts                         |  5 +
 .../components/TableHeaders/TableHeaders.tsx  | 10 +-
 site/src/components/UsersTable/UsersTable.tsx | 92 ++++++++++++-------
 site/src/pages/UsersPage/UsersPage.tsx        | 27 +++++-
 site/src/pages/UsersPage/UsersPageView.tsx    |  9 +-
 site/src/xServices/StateContext.tsx           |  3 +
 site/src/xServices/roles/rolesXService.ts     | 82 +++++++++++++++++
 7 files changed, 188 insertions(+), 40 deletions(-)
 create mode 100644 site/src/xServices/roles/rolesXService.ts

diff --git a/site/src/api/index.ts b/site/src/api/index.ts
index 5384d95304b63..d4508d590652b 100644
--- a/site/src/api/index.ts
+++ b/site/src/api/index.ts
@@ -158,3 +158,8 @@ export const suspendUser = async (userId: TypesGen.User["id"]): Promise<TypesGen
 
 export const updateUserPassword = async (password: string, userId: TypesGen.User["id"]): Promise<undefined> =>
   axios.put(`/api/v2/users/${userId}/password`, { password })
+
+export const getOrganizationRoles = async (organizationId: string): Promise<Array<string>> => {
+  const response = await axios.get<Array<string>>(`/api/v2/organizations/${organizationId}/members/roles`)
+  return response.data
+}
diff --git a/site/src/components/TableHeaders/TableHeaders.tsx b/site/src/components/TableHeaders/TableHeaders.tsx
index 6004939e449ba..eafcac500206c 100644
--- a/site/src/components/TableHeaders/TableHeaders.tsx
+++ b/site/src/components/TableHeaders/TableHeaders.tsx
@@ -8,10 +8,14 @@ export interface TableHeadersProps {
   hasMenu?: boolean
 }
 
-export const TableHeaders: React.FC<TableHeadersProps> = ({ columns, hasMenu }) => {
+export const TableHeaderRow: React.FC = ({ children }) => {
   const styles = useStyles()
+  return <TableRow className={styles.root}>{children}</TableRow>
+}
+
+export const TableHeaders: React.FC<TableHeadersProps> = ({ columns, hasMenu }) => {
   return (
-    <TableRow className={styles.root}>
+    <TableHeaderRow>
       {columns.map((c, idx) => (
         <TableCell key={idx} size="small">
           {c}
@@ -19,7 +23,7 @@ export const TableHeaders: React.FC<TableHeadersProps> = ({ columns, hasMenu })
       ))}
       {/* 1% is a trick to make the table cell width fit the content */}
       {hasMenu && <TableCell width="1%" />}
-    </TableRow>
+    </TableHeaderRow>
   )
 }
 
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
index bf5fb2298dd10..d5305ffc3e80b 100644
--- a/site/src/components/UsersTable/UsersTable.tsx
+++ b/site/src/components/UsersTable/UsersTable.tsx
@@ -1,8 +1,15 @@
+import Box from "@material-ui/core/Box"
+import Table from "@material-ui/core/Table"
+import TableBody from "@material-ui/core/TableBody"
+import TableCell from "@material-ui/core/TableCell"
+import TableHead from "@material-ui/core/TableHead"
+import TableRow from "@material-ui/core/TableRow"
 import React from "react"
 import { UserResponse } from "../../api/types"
 import { EmptyState } from "../EmptyState/EmptyState"
-import { Column, Table } from "../Table/Table"
+import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
+import { TableTitle } from "../TableTitle/TableTitle"
 import { UserCell } from "../UserCell/UserCell"
 
 export const Language = {
@@ -12,48 +19,63 @@ export const Language = {
   usernameLabel: "User",
   suspendMenuItem: "Suspend",
   resetPasswordMenuItem: "Reset password",
+  rolesLabel: "Roles",
 }
 
-const emptyState = <EmptyState message={Language.emptyMessage} />
-
-const columns: Column<UserResponse>[] = [
-  {
-    key: "username",
-    name: Language.usernameLabel,
-    renderer: (field, data) => {
-      return <UserCell Avatar={{ username: data.username }} primaryText={data.username} caption={data.email} />
-    },
-  },
-]
-
 export interface UsersTableProps {
   users: UserResponse[]
   onSuspendUser: (user: UserResponse) => void
   onResetUserPassword: (user: UserResponse) => void
+  roles: string[]
 }
 
-export const UsersTable: React.FC<UsersTableProps> = ({ users, onSuspendUser, onResetUserPassword }) => {
+export const UsersTable: React.FC<UsersTableProps> = ({ users, roles, onSuspendUser, onResetUserPassword }) => {
   return (
-    <Table
-      columns={columns}
-      data={users}
-      title={Language.usersTitle}
-      emptyState={emptyState}
-      rowMenu={(user) => (
-        <TableRowMenu
-          data={user}
-          menuItems={[
-            {
-              label: Language.suspendMenuItem,
-              onClick: onSuspendUser,
-            },
-            {
-              label: Language.resetPasswordMenuItem,
-              onClick: onResetUserPassword,
-            },
-          ]}
-        />
-      )}
-    />
+    <Table>
+      <TableHead>
+        <TableTitle title={Language.usersTitle} />
+        <TableHeaderRow>
+          <TableCell size="small">{Language.usernameLabel}</TableCell>
+          <TableCell size="small">{Language.rolesLabel}</TableCell>
+          {/* 1% is a trick to make the table cell width fit the content */}
+          <TableCell size="small" width="1%" />
+        </TableHeaderRow>
+      </TableHead>
+      <TableBody>
+        {users.map((u) => (
+          <TableRow key={u.id}>
+            <TableCell>
+              <UserCell Avatar={{ username: u.username }} primaryText={u.username} caption={u.email} />{" "}
+            </TableCell>
+            <TableCell>{roles}</TableCell>
+            <TableCell>
+              <TableRowMenu
+                data={u}
+                menuItems={[
+                  {
+                    label: Language.suspendMenuItem,
+                    onClick: onSuspendUser,
+                  },
+                  {
+                    label: Language.resetPasswordMenuItem,
+                    onClick: onResetUserPassword,
+                  },
+                ]}
+              />
+            </TableCell>
+          </TableRow>
+        ))}
+
+        {users.length === 0 && (
+          <TableRow>
+            <TableCell colSpan={999}>
+              <Box p={4}>
+                <EmptyState message={Language.emptyMessage} />
+              </Box>
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
   )
 }
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
index 0ce09831728f7..d70d8fdac305f 100644
--- a/site/src/pages/UsersPage/UsersPage.tsx
+++ b/site/src/pages/UsersPage/UsersPage.tsx
@@ -13,6 +13,29 @@ export const Language = {
   suspendDialogMessagePrefix: "Do you want to suspend the user",
 }
 
+const useRoles = () => {
+  const xServices = useContext(XServiceContext)
+  const [authState] = useActor(xServices.authXService)
+  const [rolesState, rolesSend] = useActor(xServices.rolesXService)
+  const { roles } = rolesState.context
+  const { me } = authState.context
+
+  useEffect(() => {
+    if (!me) {
+      throw new Error("User is not logged in")
+    }
+
+    const organizationId = me.organization_ids[0]
+
+    rolesSend({
+      type: "GET_ROLES",
+      organizationId,
+    })
+  }, [me, rolesSend])
+
+  return roles
+}
+
 export const UsersPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [usersState, usersSend] = useActor(xServices.usersXService)
@@ -20,6 +43,7 @@ export const UsersPage: React.FC = () => {
   const navigate = useNavigate()
   const userToBeSuspended = users?.find((u) => u.id === userIdToSuspend)
   const userToResetPassword = users?.find((u) => u.id === userIdToResetPassword)
+  const roles = useRoles()
 
   /**
    * Fetch users on component mount
@@ -28,12 +52,13 @@ export const UsersPage: React.FC = () => {
     usersSend("GET_USERS")
   }, [usersSend])
 
-  if (!users) {
+  if (!users || !roles) {
     return <FullScreenLoader />
   } else {
     return (
       <>
         <UsersPageView
+          roles={roles}
           users={users}
           openUserCreationDialog={() => {
             navigate("/users/create")
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
index 4872e02d76085..7bf7abc0bf06b 100644
--- a/site/src/pages/UsersPage/UsersPageView.tsx
+++ b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -16,11 +16,13 @@ export interface UsersPageViewProps {
   openUserCreationDialog: () => void
   onSuspendUser: (user: UserResponse) => void
   onResetUserPassword: (user: UserResponse) => void
+  roles: string[]
   error?: unknown
 }
 
 export const UsersPageView: React.FC<UsersPageViewProps> = ({
   users,
+  roles,
   openUserCreationDialog,
   onSuspendUser,
   onResetUserPassword,
@@ -33,7 +35,12 @@ export const UsersPageView: React.FC<UsersPageViewProps> = ({
         {error ? (
           <ErrorSummary error={error} />
         ) : (
-          <UsersTable users={users} onSuspendUser={onSuspendUser} onResetUserPassword={onResetUserPassword} />
+          <UsersTable
+            users={users}
+            onSuspendUser={onSuspendUser}
+            onResetUserPassword={onResetUserPassword}
+            roles={roles}
+          />
         )}
       </Margins>
     </Stack>
diff --git a/site/src/xServices/StateContext.tsx b/site/src/xServices/StateContext.tsx
index a94c4ced3494d..716dfb52fdabb 100644
--- a/site/src/xServices/StateContext.tsx
+++ b/site/src/xServices/StateContext.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router"
 import { ActorRefFrom } from "xstate"
 import { authMachine } from "./auth/authXService"
 import { buildInfoMachine } from "./buildInfo/buildInfoXService"
+import { rolesMachine } from "./roles/rolesXService"
 import { usersMachine } from "./users/usersXService"
 import { workspaceMachine } from "./workspace/workspaceXService"
 
@@ -12,6 +13,7 @@ interface XServiceContextType {
   buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
   usersXService: ActorRefFrom<typeof usersMachine>
   workspaceXService: ActorRefFrom<typeof workspaceMachine>
+  rolesXService: ActorRefFrom<typeof rolesMachine>
 }
 
 /**
@@ -37,6 +39,7 @@ export const XServiceProvider: React.FC = ({ children }) => {
         buildInfoXService: useInterpret(buildInfoMachine),
         usersXService: useInterpret(() => usersMachine.withConfig({ actions: { redirectToUsersPage } })),
         workspaceXService: useInterpret(workspaceMachine),
+        rolesXService: useInterpret(rolesMachine),
       }}
     >
       {children}
diff --git a/site/src/xServices/roles/rolesXService.ts b/site/src/xServices/roles/rolesXService.ts
new file mode 100644
index 0000000000000..4f70fe9621cd0
--- /dev/null
+++ b/site/src/xServices/roles/rolesXService.ts
@@ -0,0 +1,82 @@
+import { assign, createMachine } from "xstate"
+import * as API from "../../api"
+import { displayError } from "../../components/GlobalSnackbar/utils"
+
+type RolesContext = {
+  roles?: string[]
+  getRolesError: Error | unknown
+  organizationId?: string
+}
+
+type RolesEvent = {
+  type: "GET_ROLES"
+  organizationId: string
+}
+
+export const rolesMachine = createMachine(
+  {
+    id: "rolesState",
+    initial: "idle",
+    schema: {
+      context: {} as RolesContext,
+      events: {} as RolesEvent,
+      services: {
+        getRoles: {
+          data: {} as string[],
+        },
+      },
+    },
+    tsTypes: {} as import("./rolesXService.typegen").Typegen0,
+    states: {
+      idle: {
+        on: {
+          GET_ROLES: {
+            target: "gettingRoles",
+            actions: ["assignOrganizationId"],
+          },
+        },
+      },
+      gettingRoles: {
+        invoke: {
+          id: "getRoles",
+          src: "getRoles",
+          onDone: {
+            target: "idle",
+            actions: ["assignRoles"],
+          },
+          onError: {
+            target: "idle",
+            actions: ["assignGetRolesError", "displayGetRolesError"],
+          },
+        },
+      },
+    },
+  },
+  {
+    actions: {
+      assignRoles: assign({
+        roles: (_, event) => event.data,
+      }),
+      assignGetRolesError: assign({
+        getRolesError: (_, event) => event.data,
+      }),
+      assignOrganizationId: assign({
+        organizationId: (_, event) => event.organizationId,
+      }),
+      displayGetRolesError: () => {
+        displayError("Error on get the roles.")
+      },
+    },
+    services: {
+      getRoles: (ctx) => {
+        const { organizationId } = ctx
+
+        if (!organizationId) {
+          throw new Error("organizationId not defined")
+        }
+
+        return API.getOrganizationRoles(organizationId)
+      },
+    },
+  },
+)

From b1679959ff9cd38d13a47bef6aafbafbc193edc2 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Fri, 6 May 2022 19:26:31 +0000
Subject: [PATCH 02/17] Update types

---
 site/src/api/typesGenerated.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
index e3fa4e53fc0d5..3f9577878632c 100644
--- a/site/src/api/typesGenerated.ts
+++ b/site/src/api/typesGenerated.ts
@@ -195,6 +195,12 @@ export interface ProvisionerJobLog {
   readonly output: string
 }
 
+// From codersdk/roles.go:13:6
+export interface Role {
+  readonly name: string
+  readonly display_name: string
+}
+
 // From codersdk/templates.go:17:6
 export interface Template {
   readonly id: string

From cabe38559c2c8390fd8b7230f7e7a371e72ed0f7 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Fri, 6 May 2022 19:29:38 +0000
Subject: [PATCH 03/17] Update API

---
 site/src/api/index.ts                         | 4 ++--
 site/src/components/UsersTable/UsersTable.tsx | 5 +++--
 site/src/pages/UsersPage/UsersPageView.tsx    | 3 ++-
 site/src/xServices/roles/rolesXService.ts     | 5 +++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/site/src/api/index.ts b/site/src/api/index.ts
index d4508d590652b..4cbc4852a5640 100644
--- a/site/src/api/index.ts
+++ b/site/src/api/index.ts
@@ -159,7 +159,7 @@ export const suspendUser = async (userId: TypesGen.User["id"]): Promise<TypesGen
 export const updateUserPassword = async (password: string, userId: TypesGen.User["id"]): Promise<undefined> =>
   axios.put(`/api/v2/users/${userId}/password`, { password })
 
-export const getOrganizationRoles = async (organizationId: string): Promise<Array<string>> => {
-  const response = await axios.get<Array<string>>(`/api/v2/organizations/${organizationId}/members/roles`)
+export const getOrganizationRoles = async (organizationId: string): Promise<Array<TypesGen.Role>> => {
+  const response = await axios.get<Array<TypesGen.Role>>(`/api/v2/organizations/${organizationId}/members/roles`)
   return response.data
 }
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
index d5305ffc3e80b..352f5dec97dc8 100644
--- a/site/src/components/UsersTable/UsersTable.tsx
+++ b/site/src/components/UsersTable/UsersTable.tsx
@@ -6,6 +6,7 @@ import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import React from "react"
 import { UserResponse } from "../../api/types"
+import * as TypesGen from "../../api/typesGenerated"
 import { EmptyState } from "../EmptyState/EmptyState"
 import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
@@ -26,7 +27,7 @@ export interface UsersTableProps {
   users: UserResponse[]
   onSuspendUser: (user: UserResponse) => void
   onResetUserPassword: (user: UserResponse) => void
-  roles: string[]
+  roles: TypesGen.Role[]
 }
 
 export const UsersTable: React.FC<UsersTableProps> = ({ users, roles, onSuspendUser, onResetUserPassword }) => {
@@ -47,7 +48,7 @@ export const UsersTable: React.FC<UsersTableProps> = ({ users, roles, onSuspendU
             <TableCell>
               <UserCell Avatar={{ username: u.username }} primaryText={u.username} caption={u.email} />{" "}
             </TableCell>
-            <TableCell>{roles}</TableCell>
+            <TableCell>{roles.map((r) => r.display_name)}</TableCell>
             <TableCell>
               <TableRowMenu
                 data={u}
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
index 7bf7abc0bf06b..fe1a7aa93508b 100644
--- a/site/src/pages/UsersPage/UsersPageView.tsx
+++ b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import { UserResponse } from "../../api/types"
+import * as TypesGen from "../../api/typesGenerated"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { Header } from "../../components/Header/Header"
 import { Margins } from "../../components/Margins/Margins"
@@ -16,7 +17,7 @@ export interface UsersPageViewProps {
   openUserCreationDialog: () => void
   onSuspendUser: (user: UserResponse) => void
   onResetUserPassword: (user: UserResponse) => void
-  roles: string[]
+  roles: TypesGen.Role[]
   error?: unknown
 }
 
diff --git a/site/src/xServices/roles/rolesXService.ts b/site/src/xServices/roles/rolesXService.ts
index 4f70fe9621cd0..98edfd99fcc23 100644
--- a/site/src/xServices/roles/rolesXService.ts
+++ b/site/src/xServices/roles/rolesXService.ts
@@ -1,9 +1,10 @@
 import { assign, createMachine } from "xstate"
 import * as API from "../../api"
+import * as TypesGen from "../../api/typesGenerated"
 import { displayError } from "../../components/GlobalSnackbar/utils"
 
 type RolesContext = {
-  roles?: string[]
+  roles?: TypesGen.Role[]
   getRolesError: Error | unknown
   organizationId?: string
 }
@@ -22,7 +23,7 @@ export const rolesMachine = createMachine(
       events: {} as RolesEvent,
       services: {
         getRoles: {
-          data: {} as string[],
+          data: {} as TypesGen.Role[],
         },
       },
     },

From b71ede5e2bc5f6642499c457d9e536176d5b00cb Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Fri, 6 May 2022 19:45:49 +0000
Subject: [PATCH 04/17] Update roles to fetch the site roles

---
 site/src/api/index.ts                         |  4 +--
 site/src/components/UsersTable/UsersTable.tsx | 12 ++++++-
 site/src/pages/UsersPage/UsersPage.tsx        |  2 +-
 site/src/xServices/StateContext.tsx           |  6 ++--
 ...{rolesXService.ts => siteRolesXService.ts} | 33 +++++--------------
 5 files changed, 26 insertions(+), 31 deletions(-)
 rename site/src/xServices/roles/{rolesXService.ts => siteRolesXService.ts} (62%)

diff --git a/site/src/api/index.ts b/site/src/api/index.ts
index 4cbc4852a5640..d1a3615959563 100644
--- a/site/src/api/index.ts
+++ b/site/src/api/index.ts
@@ -159,7 +159,7 @@ export const suspendUser = async (userId: TypesGen.User["id"]): Promise<TypesGen
 export const updateUserPassword = async (password: string, userId: TypesGen.User["id"]): Promise<undefined> =>
   axios.put(`/api/v2/users/${userId}/password`, { password })
 
-export const getOrganizationRoles = async (organizationId: string): Promise<Array<TypesGen.Role>> => {
-  const response = await axios.get<Array<TypesGen.Role>>(`/api/v2/organizations/${organizationId}/members/roles`)
+export const getSiteRoles = async (): Promise<Array<TypesGen.Role>> => {
+  const response = await axios.get<Array<TypesGen.Role>>(`/api/v2/users/roles`)
   return response.data
 }
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
index 352f5dec97dc8..4c2c5f2040097 100644
--- a/site/src/components/UsersTable/UsersTable.tsx
+++ b/site/src/components/UsersTable/UsersTable.tsx
@@ -1,4 +1,6 @@
 import Box from "@material-ui/core/Box"
+import MenuItem from "@material-ui/core/MenuItem"
+import Select from "@material-ui/core/Select"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
@@ -48,7 +50,15 @@ export const UsersTable: React.FC<UsersTableProps> = ({ users, roles, onSuspendU
             <TableCell>
               <UserCell Avatar={{ username: u.username }} primaryText={u.username} caption={u.email} />{" "}
             </TableCell>
-            <TableCell>{roles.map((r) => r.display_name)}</TableCell>
+            <TableCell>
+              <Select multiple value={[]}>
+                {roles.map((r) => (
+                  <MenuItem key={r.name} value={r.name}>
+                    {r.display_name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </TableCell>
             <TableCell>
               <TableRowMenu
                 data={u}
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
index d70d8fdac305f..d8c68561640ff 100644
--- a/site/src/pages/UsersPage/UsersPage.tsx
+++ b/site/src/pages/UsersPage/UsersPage.tsx
@@ -16,7 +16,7 @@ export const Language = {
 const useRoles = () => {
   const xServices = useContext(XServiceContext)
   const [authState] = useActor(xServices.authXService)
-  const [rolesState, rolesSend] = useActor(xServices.rolesXService)
+  const [rolesState, rolesSend] = useActor(xServices.siteRolesXService)
   const { roles } = rolesState.context
   const { me } = authState.context
 
diff --git a/site/src/xServices/StateContext.tsx b/site/src/xServices/StateContext.tsx
index 716dfb52fdabb..7606b626c881b 100644
--- a/site/src/xServices/StateContext.tsx
+++ b/site/src/xServices/StateContext.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from "react-router"
 import { ActorRefFrom } from "xstate"
 import { authMachine } from "./auth/authXService"
 import { buildInfoMachine } from "./buildInfo/buildInfoXService"
-import { rolesMachine } from "./roles/rolesXService"
+import { siteRolesMachine } from "./roles/siteRolesXService"
 import { usersMachine } from "./users/usersXService"
 import { workspaceMachine } from "./workspace/workspaceXService"
 
@@ -13,7 +13,7 @@ interface XServiceContextType {
   buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
   usersXService: ActorRefFrom<typeof usersMachine>
   workspaceXService: ActorRefFrom<typeof workspaceMachine>
-  rolesXService: ActorRefFrom<typeof rolesMachine>
+  siteRolesXService: ActorRefFrom<typeof siteRolesMachine>
 }
 
 /**
@@ -39,7 +39,7 @@ export const XServiceProvider: React.FC = ({ children }) => {
         buildInfoXService: useInterpret(buildInfoMachine),
         usersXService: useInterpret(() => usersMachine.withConfig({ actions: { redirectToUsersPage } })),
         workspaceXService: useInterpret(workspaceMachine),
-        rolesXService: useInterpret(rolesMachine),
+        siteRolesXService: useInterpret(siteRolesMachine),
       }}
     >
       {children}
diff --git a/site/src/xServices/roles/rolesXService.ts b/site/src/xServices/roles/siteRolesXService.ts
similarity index 62%
rename from site/src/xServices/roles/rolesXService.ts
rename to site/src/xServices/roles/siteRolesXService.ts
index 98edfd99fcc23..f2e002b6f0e2b 100644
--- a/site/src/xServices/roles/rolesXService.ts
+++ b/site/src/xServices/roles/siteRolesXService.ts
@@ -3,38 +3,34 @@ import * as API from "../../api"
 import * as TypesGen from "../../api/typesGenerated"
 import { displayError } from "../../components/GlobalSnackbar/utils"
 
-type RolesContext = {
+type SiteRolesContext = {
   roles?: TypesGen.Role[]
   getRolesError: Error | unknown
-  organizationId?: string
 }
 
-type RolesEvent = {
+type SiteRolesEvent = {
   type: "GET_ROLES"
   organizationId: string
 }
 
-export const rolesMachine = createMachine(
+export const siteRolesMachine = createMachine(
   {
-    id: "rolesState",
+    id: "siteRolesState",
     initial: "idle",
     schema: {
-      context: {} as RolesContext,
-      events: {} as RolesEvent,
+      context: {} as SiteRolesContext,
+      events: {} as SiteRolesEvent,
       services: {
         getRoles: {
           data: {} as TypesGen.Role[],
         },
       },
     },
-    tsTypes: {} as import("./rolesXService.typegen").Typegen0,
+    tsTypes: {} as import("./siteRolesXService.typegen").Typegen0,
     states: {
       idle: {
         on: {
-          GET_ROLES: {
-            target: "gettingRoles",
-            actions: ["assignOrganizationId"],
-          },
+          GET_ROLES: "gettingRoles",
         },
       },
       gettingRoles: {
@@ -61,23 +57,12 @@ export const rolesMachine = createMachine(
       assignGetRolesError: assign({
         getRolesError: (_, event) => event.data,
       }),
-      assignOrganizationId: assign({
-        organizationId: (_, event) => event.organizationId,
-      }),
       displayGetRolesError: () => {
         displayError("Error on get the roles.")
       },
     },
     services: {
-      getRoles: (ctx) => {
-        const { organizationId } = ctx
-
-        if (!organizationId) {
-          throw new Error("organizationId not defined")
-        }
-
-        return API.getOrganizationRoles(organizationId)
-      },
+      getRoles: () => API.getSiteRoles(),
     },
   },
 )

From 1e99a0406d3b32b7a6c21897bbef35bf7e4e480c Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Mon, 9 May 2022 17:45:11 +0000
Subject: [PATCH 05/17] Add UI for update user roles

---
 site/src/api/index.ts                         |  5 ++
 site/src/components/UsersTable/RoleSelect.tsx | 49 +++++++++++++++
 site/src/components/UsersTable/UsersTable.tsx | 27 +++++---
 site/src/pages/UsersPage/UsersPage.tsx        |  8 +++
 site/src/pages/UsersPage/UsersPageView.tsx    |  6 ++
 site/src/xServices/users/usersXService.ts     | 61 +++++++++++++++++++
 6 files changed, 146 insertions(+), 10 deletions(-)
 create mode 100644 site/src/components/UsersTable/RoleSelect.tsx

diff --git a/site/src/api/index.ts b/site/src/api/index.ts
index d1a3615959563..3825c5631d048 100644
--- a/site/src/api/index.ts
+++ b/site/src/api/index.ts
@@ -163,3 +163,8 @@ export const getSiteRoles = async (): Promise<Array<TypesGen.Role>> => {
   const response = await axios.get<Array<TypesGen.Role>>(`/api/v2/users/roles`)
   return response.data
 }
+
+export const updateUserRoles = async (
+  roles: TypesGen.Role["name"][],
+  userId: TypesGen.User["id"],
+): Promise<TypesGen.User> => axios.put(`/api/v2/users/${userId}/roles`, { roles })
diff --git a/site/src/components/UsersTable/RoleSelect.tsx b/site/src/components/UsersTable/RoleSelect.tsx
new file mode 100644
index 0000000000000..3214e7d754b32
--- /dev/null
+++ b/site/src/components/UsersTable/RoleSelect.tsx
@@ -0,0 +1,49 @@
+import Checkbox from "@material-ui/core/Checkbox"
+import MenuItem from "@material-ui/core/MenuItem"
+import Select from "@material-ui/core/Select"
+import makeStyles from "@material-ui/styles/makeStyles"
+import React from "react"
+import { Role } from "../../api/typesGenerated"
+
+export interface RoleSelectProps {
+  roles: Role[]
+  selectedRoles: Role[]
+  onChange: (roles: Role["name"][]) => void
+  loading?: boolean
+}
+
+export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, loading, onChange }) => {
+  const styles = useStyles()
+  const value = selectedRoles.map((r) => r.name)
+  const renderValue = () => selectedRoles.map((r) => r.display_name).join(", ")
+
+  return (
+    <Select
+      multiple
+      value={value}
+      renderValue={renderValue}
+      variant="outlined"
+      className={styles.select}
+      onChange={(e) => {
+        const { value } = e.currentTarget
+        onChange(value as string[])
+      }}
+    >
+      {roles.map((r) => {
+        const isChecked = selectedRoles.some((selectedRole) => selectedRole.name === r.name)
+
+        return (
+          <MenuItem key={r.name} value={r.name} disabled={loading}>
+            <Checkbox color="primary" checked={isChecked} /> {r.display_name}
+          </MenuItem>
+        )
+      })}
+    </Select>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  select: {
+    margin: 0,
+  },
+}))
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
index 4c2c5f2040097..a0b0b2c8c1781 100644
--- a/site/src/components/UsersTable/UsersTable.tsx
+++ b/site/src/components/UsersTable/UsersTable.tsx
@@ -1,6 +1,4 @@
 import Box from "@material-ui/core/Box"
-import MenuItem from "@material-ui/core/MenuItem"
-import Select from "@material-ui/core/Select"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
@@ -14,6 +12,7 @@ import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
 import { TableTitle } from "../TableTitle/TableTitle"
 import { UserCell } from "../UserCell/UserCell"
+import { RoleSelect } from "./RoleSelect"
 
 export const Language = {
   pageTitle: "Users",
@@ -29,10 +28,19 @@ export interface UsersTableProps {
   users: UserResponse[]
   onSuspendUser: (user: UserResponse) => void
   onResetUserPassword: (user: UserResponse) => void
+  onUpdateUserRoles: (user: UserResponse, roles: TypesGen.Role["name"][]) => void
   roles: TypesGen.Role[]
+  isUpdatingUserRoles?: boolean
 }
 
-export const UsersTable: React.FC<UsersTableProps> = ({ users, roles, onSuspendUser, onResetUserPassword }) => {
+export const UsersTable: React.FC<UsersTableProps> = ({
+  users,
+  roles,
+  onSuspendUser,
+  onResetUserPassword,
+  onUpdateUserRoles,
+  isUpdatingUserRoles,
+}) => {
   return (
     <Table>
       <TableHead>
@@ -51,13 +59,12 @@ export const UsersTable: React.FC<UsersTableProps> = ({ users, roles, onSuspendU
               <UserCell Avatar={{ username: u.username }} primaryText={u.username} caption={u.email} />{" "}
             </TableCell>
             <TableCell>
-              <Select multiple value={[]}>
-                {roles.map((r) => (
-                  <MenuItem key={r.name} value={r.name}>
-                    {r.display_name}
-                  </MenuItem>
-                ))}
-              </Select>
+              <RoleSelect
+                roles={roles}
+                selectedRoles={u.roles}
+                loading={isUpdatingUserRoles}
+                onChange={(roles) => onUpdateUserRoles(u, roles)}
+              />
             </TableCell>
             <TableCell>
               <TableRowMenu
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
index d8c68561640ff..1f242d682693f 100644
--- a/site/src/pages/UsersPage/UsersPage.tsx
+++ b/site/src/pages/UsersPage/UsersPage.tsx
@@ -69,7 +69,15 @@ export const UsersPage: React.FC = () => {
           onResetUserPassword={(user) => {
             usersSend({ type: "RESET_USER_PASSWORD", userId: user.id })
           }}
+          onUpdateUserRoles={(user, roles) => {
+            usersSend({
+              type: "UPDATE_USER_ROLES",
+              userId: user.id,
+              roles,
+            })
+          }}
           error={getUsersError}
+          isUpdatingUserRoles={usersState.matches("updatingUserRoles")}
         />
 
         <ConfirmDialog
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
index fe1a7aa93508b..45964eb3a412a 100644
--- a/site/src/pages/UsersPage/UsersPageView.tsx
+++ b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -17,8 +17,10 @@ export interface UsersPageViewProps {
   openUserCreationDialog: () => void
   onSuspendUser: (user: UserResponse) => void
   onResetUserPassword: (user: UserResponse) => void
+  onUpdateUserRoles: (user: UserResponse, roles: TypesGen.Role["name"][]) => void
   roles: TypesGen.Role[]
   error?: unknown
+  isUpdatingUserRoles?: boolean
 }
 
 export const UsersPageView: React.FC<UsersPageViewProps> = ({
@@ -27,7 +29,9 @@ export const UsersPageView: React.FC<UsersPageViewProps> = ({
   openUserCreationDialog,
   onSuspendUser,
   onResetUserPassword,
+  onUpdateUserRoles,
   error,
+  isUpdatingUserRoles,
 }) => {
   return (
     <Stack spacing={4}>
@@ -40,7 +44,9 @@ export const UsersPageView: React.FC<UsersPageViewProps> = ({
             users={users}
             onSuspendUser={onSuspendUser}
             onResetUserPassword={onResetUserPassword}
+            onUpdateUserRoles={onUpdateUserRoles}
             roles={roles}
+            isUpdatingUserRoles={isUpdatingUserRoles}
           />
         )}
       </Margins>
diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts
index e1493bfaa139c..63182e19e1101 100644
--- a/site/src/xServices/users/usersXService.ts
+++ b/site/src/xServices/users/usersXService.ts
@@ -12,6 +12,8 @@ export const Language = {
   suspendUserError: "Error on suspend the user.",
   resetUserPasswordSuccess: "Successfully updated the user password.",
   resetUserPasswordError: "Error on reset the user password.",
+  updateUserRolesSuccess: "Successfully updated the user roles.",
+  updateUserRolesError: "Error on update the user roles.",
 }
 
 export interface UsersContext {
@@ -27,6 +29,9 @@ export interface UsersContext {
   userIdToResetPassword?: TypesGen.User["id"]
   resetUserPasswordError?: Error | unknown
   newUserPassword?: string
+  // Update user roles
+  userIdToUpdateRoles?: TypesGen.User["id"]
+  updateUserRolesError?: Error | unknown
 }
 
 export type UsersEvent =
@@ -40,6 +45,8 @@ export type UsersEvent =
   | { type: "RESET_USER_PASSWORD"; userId: TypesGen.User["id"] }
   | { type: "CONFIRM_USER_PASSWORD_RESET" }
   | { type: "CANCEL_USER_PASSWORD_RESET" }
+  // Update roles events
+  | { type: "UPDATE_USER_ROLES"; userId: TypesGen.User["id"]; roles: TypesGen.Role["name"][] }
 
 export const usersMachine = createMachine(
   {
@@ -60,6 +67,9 @@ export const usersMachine = createMachine(
         updateUserPassword: {
           data: undefined
         }
+        updateUserRoles: {
+          data: TypesGen.User
+        }
       },
     },
     id: "usersState",
@@ -80,6 +90,10 @@ export const usersMachine = createMachine(
             target: "confirmUserPasswordReset",
             actions: ["assignUserIdToResetPassword", "generateRandomPassword"],
           },
+          UPDATE_USER_ROLES: {
+            target: "updatingUserRoles",
+            actions: ["assignUserIdToUpdateRoles"],
+          },
         },
       },
       gettingUsers: {
@@ -166,6 +180,21 @@ export const usersMachine = createMachine(
           },
         },
       },
+      updatingUserRoles: {
+        entry: "clearUpdateUserRolesError",
+        invoke: {
+          src: "updateUserRoles",
+          id: "updateUserRoles",
+          onDone: {
+            target: "idle",
+            actions: ["displayUpdateRolesSuccess", "updateUserRolesInTheList"],
+          },
+          onError: {
+            target: "idle",
+            actions: ["assignUpdateRolesError", "displayUpdateRolesErrorMessage"],
+          },
+        },
+      },
       error: {
         on: {
           GET_USERS: "gettingUsers",
@@ -198,6 +227,13 @@ export const usersMachine = createMachine(
 
         return API.updateUserPassword(context.newUserPassword, context.userIdToResetPassword)
       },
+      updateUserRoles: (context, event) => {
+        if (!context.userIdToUpdateRoles) {
+          throw new Error("userIdToUpdateRoles is undefined")
+        }
+
+        return API.updateUserRoles(event.roles, context.userIdToUpdateRoles)
+      },
     },
     guards: {
       isFormError: (_, event) => isApiError(event.data),
@@ -215,6 +251,9 @@ export const usersMachine = createMachine(
       assignUserIdToResetPassword: assign({
         userIdToResetPassword: (_, event) => event.userId,
       }),
+      assignUserIdToUpdateRoles: assign({
+        userIdToUpdateRoles: (_, event) => event.userId,
+      }),
       clearGetUsersError: assign((context: UsersContext) => ({
         ...context,
         getUsersError: undefined,
@@ -232,6 +271,9 @@ export const usersMachine = createMachine(
       assignResetUserPasswordError: assign({
         resetUserPasswordError: (_, event) => event.data,
       }),
+      assignUpdateRolesError: assign({
+        updateUserRolesError: (_, event) => event.data,
+      }),
       clearCreateUserError: assign((context: UsersContext) => ({
         ...context,
         createUserError: undefined,
@@ -242,6 +284,9 @@ export const usersMachine = createMachine(
       clearResetUserPasswordError: assign({
         resetUserPasswordError: (_) => undefined,
       }),
+      clearUpdateUserRolesError: assign({
+        updateUserRolesError: (_) => undefined,
+      }),
       displayCreateUserSuccess: () => {
         displaySuccess(Language.createUserSuccess)
       },
@@ -257,9 +302,25 @@ export const usersMachine = createMachine(
       displayResetPasswordErrorMessage: () => {
         displayError(Language.resetUserPasswordError)
       },
+      displayUpdateRolesSuccess: () => {
+        displayError(Language.updateUserRolesSuccess)
+      },
+      displayUpdateRolesErrorMessage: () => {
+        displayError(Language.updateUserRolesError)
+      },
       generateRandomPassword: assign({
         newUserPassword: (_) => generateRandomString(12),
       }),
+      updateUserRolesInTheList: assign({
+        users: ({ users }, event) => {
+          if (!users) {
+            return users
+          }
+
+          const updatedUser = event.data
+          return users.map((u) => (u.id === updatedUser.id ? updatedUser : u))
+        },
+      }),
     },
   },
 )

From 46add4173af26d7521a1bab5e918edee41eea9fb Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Mon, 9 May 2022 17:49:46 +0000
Subject: [PATCH 06/17] Set fixed RoleSelect width

---
 site/src/components/UsersTable/RoleSelect.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/src/components/UsersTable/RoleSelect.tsx b/site/src/components/UsersTable/RoleSelect.tsx
index 3214e7d754b32..8f0dbb7d5fe77 100644
--- a/site/src/components/UsersTable/RoleSelect.tsx
+++ b/site/src/components/UsersTable/RoleSelect.tsx
@@ -1,7 +1,7 @@
 import Checkbox from "@material-ui/core/Checkbox"
 import MenuItem from "@material-ui/core/MenuItem"
 import Select from "@material-ui/core/Select"
-import makeStyles from "@material-ui/styles/makeStyles"
+import { makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
 import { Role } from "../../api/typesGenerated"
 
@@ -42,8 +42,11 @@ export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, lo
   )
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme: Theme) => ({
   select: {
     margin: 0,
+    // Set a fix width for the select. It avoids selects having different sizes
+    // depending on how much roles they have selected.
+    width: theme.spacing(25),
   },
 }))

From 16d1e7b0b54e08c86ce1a31eb500696e5f90c118 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Mon, 9 May 2022 18:26:20 +0000
Subject: [PATCH 07/17] Fix UI to update user roles

---
 site/src/components/UsersTable/RoleSelect.tsx | 5 +++--
 site/src/xServices/users/usersXService.ts     | 5 ++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/components/UsersTable/RoleSelect.tsx b/site/src/components/UsersTable/RoleSelect.tsx
index 8f0dbb7d5fe77..9278120939165 100644
--- a/site/src/components/UsersTable/RoleSelect.tsx
+++ b/site/src/components/UsersTable/RoleSelect.tsx
@@ -16,6 +16,7 @@ export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, lo
   const styles = useStyles()
   const value = selectedRoles.map((r) => r.name)
   const renderValue = () => selectedRoles.map((r) => r.display_name).join(", ")
+  const sortedRoles = roles.sort((a, b) => a.display_name.localeCompare(b.display_name))
 
   return (
     <Select
@@ -25,11 +26,11 @@ export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, lo
       variant="outlined"
       className={styles.select}
       onChange={(e) => {
-        const { value } = e.currentTarget
+        const { value } = e.target
         onChange(value as string[])
       }}
     >
-      {roles.map((r) => {
+      {sortedRoles.map((r) => {
         const isChecked = selectedRoles.some((selectedRole) => selectedRole.name === r.name)
 
         return (
diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts
index 63182e19e1101..e9fd32ccf9a07 100644
--- a/site/src/xServices/users/usersXService.ts
+++ b/site/src/xServices/users/usersXService.ts
@@ -303,7 +303,7 @@ export const usersMachine = createMachine(
         displayError(Language.resetUserPasswordError)
       },
       displayUpdateRolesSuccess: () => {
-        displayError(Language.updateUserRolesSuccess)
+        displaySuccess(Language.updateUserRolesSuccess)
       },
       displayUpdateRolesErrorMessage: () => {
         displayError(Language.updateUserRolesError)
@@ -317,8 +317,7 @@ export const usersMachine = createMachine(
             return users
           }
 
-          const updatedUser = event.data
-          return users.map((u) => (u.id === updatedUser.id ? updatedUser : u))
+          return users.map((u) => (u.id === event.data.id ? event.data : u))
         },
       }),
     },

From 1e93bd2e04772a380a2a890760697a39c0d5e8ac Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Mon, 9 May 2022 18:41:36 +0000
Subject: [PATCH 08/17] Do not display the success notification

---
 site/src/api/index.ts                     | 5 ++++-
 site/src/xServices/users/usersXService.ts | 9 ++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/site/src/api/index.ts b/site/src/api/index.ts
index 3825c5631d048..d300c7aa8a660 100644
--- a/site/src/api/index.ts
+++ b/site/src/api/index.ts
@@ -167,4 +167,7 @@ export const getSiteRoles = async (): Promise<Array<TypesGen.Role>> => {
 export const updateUserRoles = async (
   roles: TypesGen.Role["name"][],
   userId: TypesGen.User["id"],
-): Promise<TypesGen.User> => axios.put(`/api/v2/users/${userId}/roles`, { roles })
+): Promise<TypesGen.User> => {
+  const response = await axios.put<TypesGen.User>(`/api/v2/users/${userId}/roles`, { roles })
+  return response.data
+}
diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts
index e9fd32ccf9a07..dd3d63277072f 100644
--- a/site/src/xServices/users/usersXService.ts
+++ b/site/src/xServices/users/usersXService.ts
@@ -187,7 +187,7 @@ export const usersMachine = createMachine(
           id: "updateUserRoles",
           onDone: {
             target: "idle",
-            actions: ["displayUpdateRolesSuccess", "updateUserRolesInTheList"],
+            actions: ["updateUserRolesInTheList"],
           },
           onError: {
             target: "idle",
@@ -302,9 +302,6 @@ export const usersMachine = createMachine(
       displayResetPasswordErrorMessage: () => {
         displayError(Language.resetUserPasswordError)
       },
-      displayUpdateRolesSuccess: () => {
-        displaySuccess(Language.updateUserRolesSuccess)
-      },
       displayUpdateRolesErrorMessage: () => {
         displayError(Language.updateUserRolesError)
       },
@@ -317,7 +314,9 @@ export const usersMachine = createMachine(
             return users
           }
 
-          return users.map((u) => (u.id === event.data.id ? event.data : u))
+          return users.map((u) => {
+            return u.id === event.data.id ? event.data : u
+          })
         },
       }),
     },

From 82a60f81575b1326391a835a6a4a7c0f0b51f5ff Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 10 May 2022 13:24:27 +0000
Subject: [PATCH 09/17] Add role select storybook

---
 .../UsersTable/RoleSelect.stories.tsx         | 67 +++++++++++++++++++
 site/src/components/UsersTable/RoleSelect.tsx |  4 +-
 2 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 site/src/components/UsersTable/RoleSelect.stories.tsx

diff --git a/site/src/components/UsersTable/RoleSelect.stories.tsx b/site/src/components/UsersTable/RoleSelect.stories.tsx
new file mode 100644
index 0000000000000..a0602f9fbd047
--- /dev/null
+++ b/site/src/components/UsersTable/RoleSelect.stories.tsx
@@ -0,0 +1,67 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { RoleSelect, RoleSelectProps } from "./RoleSelect"
+
+export default {
+  title: "components/RoleSelect",
+  component: RoleSelect,
+} as ComponentMeta<typeof RoleSelect>
+
+const Template: Story<RoleSelectProps> = (args) => <RoleSelect {...args} />
+
+export const Close = Template.bind({})
+Close.args = {
+  roles: [
+    {
+      name: "admin",
+      display_name: "Admin",
+    },
+    {
+      name: "auditor",
+      display_name: "Auditor",
+    },
+    {
+      name: "member",
+      display_name: "Member",
+    },
+  ],
+  selectedRoles: [
+    {
+      name: "admin",
+      display_name: "Admin",
+    },
+    {
+      name: "member",
+      display_name: "Member",
+    },
+  ],
+}
+
+export const Open = Template.bind({})
+Open.args = {
+  open: true,
+  roles: [
+    {
+      name: "admin",
+      display_name: "Admin",
+    },
+    {
+      name: "auditor",
+      display_name: "Auditor",
+    },
+    {
+      name: "member",
+      display_name: "Member",
+    },
+  ],
+  selectedRoles: [
+    {
+      name: "admin",
+      display_name: "Admin",
+    },
+    {
+      name: "member",
+      display_name: "Member",
+    },
+  ],
+}
diff --git a/site/src/components/UsersTable/RoleSelect.tsx b/site/src/components/UsersTable/RoleSelect.tsx
index 9278120939165..63c27a5c67cd8 100644
--- a/site/src/components/UsersTable/RoleSelect.tsx
+++ b/site/src/components/UsersTable/RoleSelect.tsx
@@ -10,9 +10,10 @@ export interface RoleSelectProps {
   selectedRoles: Role[]
   onChange: (roles: Role["name"][]) => void
   loading?: boolean
+  open?: boolean
 }
 
-export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, loading, onChange }) => {
+export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, loading, onChange, open }) => {
   const styles = useStyles()
   const value = selectedRoles.map((r) => r.name)
   const renderValue = () => selectedRoles.map((r) => r.display_name).join(", ")
@@ -20,6 +21,7 @@ export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, lo
 
   return (
     <Select
+      open={open}
       multiple
       value={value}
       renderValue={renderValue}

From 9c0587ecf3f3721701ade54d7ba93c52d95b1846 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 10 May 2022 14:20:45 +0000
Subject: [PATCH 10/17] Add missing tests

---
 .../RoleSelect/RoleSelect.stories.tsx         | 24 +++++++
 .../{UsersTable => RoleSelect}/RoleSelect.tsx |  4 ++
 .../UsersTable/RoleSelect.stories.tsx         | 67 -------------------
 site/src/components/UsersTable/UsersTable.tsx |  2 +-
 site/src/pages/UsersPage/UsersPage.test.tsx   | 60 ++++++++++++++++-
 site/src/pages/UsersPage/UsersPage.tsx        | 11 +--
 site/src/testHelpers/entities.ts              | 23 ++++++-
 site/src/testHelpers/handlers.ts              |  3 +
 site/src/xServices/roles/siteRolesXService.ts |  1 -
 9 files changed, 112 insertions(+), 83 deletions(-)
 create mode 100644 site/src/components/RoleSelect/RoleSelect.stories.tsx
 rename site/src/components/{UsersTable => RoleSelect}/RoleSelect.tsx (95%)
 delete mode 100644 site/src/components/UsersTable/RoleSelect.stories.tsx

diff --git a/site/src/components/RoleSelect/RoleSelect.stories.tsx b/site/src/components/RoleSelect/RoleSelect.stories.tsx
new file mode 100644
index 0000000000000..3fe6134a81580
--- /dev/null
+++ b/site/src/components/RoleSelect/RoleSelect.stories.tsx
@@ -0,0 +1,24 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { MockAdminRole, MockMemberRole, MockSiteRoles } from "../../testHelpers"
+import { RoleSelect, RoleSelectProps } from "./RoleSelect"
+
+export default {
+  title: "components/RoleSelect",
+  component: RoleSelect,
+} as ComponentMeta<typeof RoleSelect>
+
+const Template: Story<RoleSelectProps> = (args) => <RoleSelect {...args} />
+
+export const Close = Template.bind({})
+Close.args = {
+  roles: MockSiteRoles,
+  selectedRoles: [MockAdminRole, MockMemberRole],
+}
+
+export const Open = Template.bind({})
+Open.args = {
+  open: true,
+  roles: MockSiteRoles,
+  selectedRoles: [MockAdminRole, MockMemberRole],
+}
diff --git a/site/src/components/UsersTable/RoleSelect.tsx b/site/src/components/RoleSelect/RoleSelect.tsx
similarity index 95%
rename from site/src/components/UsersTable/RoleSelect.tsx
rename to site/src/components/RoleSelect/RoleSelect.tsx
index 63c27a5c67cd8..e016a6563804e 100644
--- a/site/src/components/UsersTable/RoleSelect.tsx
+++ b/site/src/components/RoleSelect/RoleSelect.tsx
@@ -5,6 +5,9 @@ import { makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
 import { Role } from "../../api/typesGenerated"
 
+export const Language = {
+  label: "Roles",
+}
 export interface RoleSelectProps {
   roles: Role[]
   selectedRoles: Role[]
@@ -21,6 +24,7 @@ export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, lo
 
   return (
     <Select
+      aria-label={Language.label}
       open={open}
       multiple
       value={value}
diff --git a/site/src/components/UsersTable/RoleSelect.stories.tsx b/site/src/components/UsersTable/RoleSelect.stories.tsx
deleted file mode 100644
index a0602f9fbd047..0000000000000
--- a/site/src/components/UsersTable/RoleSelect.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
-import { RoleSelect, RoleSelectProps } from "./RoleSelect"
-
-export default {
-  title: "components/RoleSelect",
-  component: RoleSelect,
-} as ComponentMeta<typeof RoleSelect>
-
-const Template: Story<RoleSelectProps> = (args) => <RoleSelect {...args} />
-
-export const Close = Template.bind({})
-Close.args = {
-  roles: [
-    {
-      name: "admin",
-      display_name: "Admin",
-    },
-    {
-      name: "auditor",
-      display_name: "Auditor",
-    },
-    {
-      name: "member",
-      display_name: "Member",
-    },
-  ],
-  selectedRoles: [
-    {
-      name: "admin",
-      display_name: "Admin",
-    },
-    {
-      name: "member",
-      display_name: "Member",
-    },
-  ],
-}
-
-export const Open = Template.bind({})
-Open.args = {
-  open: true,
-  roles: [
-    {
-      name: "admin",
-      display_name: "Admin",
-    },
-    {
-      name: "auditor",
-      display_name: "Auditor",
-    },
-    {
-      name: "member",
-      display_name: "Member",
-    },
-  ],
-  selectedRoles: [
-    {
-      name: "admin",
-      display_name: "Admin",
-    },
-    {
-      name: "member",
-      display_name: "Member",
-    },
-  ],
-}
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
index a0b0b2c8c1781..913ec85ea7c08 100644
--- a/site/src/components/UsersTable/UsersTable.tsx
+++ b/site/src/components/UsersTable/UsersTable.tsx
@@ -8,11 +8,11 @@ import React from "react"
 import { UserResponse } from "../../api/types"
 import * as TypesGen from "../../api/typesGenerated"
 import { EmptyState } from "../EmptyState/EmptyState"
+import { RoleSelect } from "../RoleSelect/RoleSelect"
 import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
 import { TableTitle } from "../TableTitle/TableTitle"
 import { UserCell } from "../UserCell/UserCell"
-import { RoleSelect } from "./RoleSelect"
 
 export const Language = {
   pageTitle: "Users",
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
index 2aeb7f21ba31f..b0c1c9dced9c2 100644
--- a/site/src/pages/UsersPage/UsersPage.test.tsx
+++ b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -1,10 +1,12 @@
 import { fireEvent, screen, waitFor, within } from "@testing-library/react"
 import React from "react"
 import * as API from "../../api"
+import { Role } from "../../api/typesGenerated"
 import { GlobalSnackbar } from "../../components/GlobalSnackbar/GlobalSnackbar"
 import { Language as ResetPasswordDialogLanguage } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
+import { Language as RoleSelectLanguage } from "../../components/RoleSelect/RoleSelect"
 import { Language as UsersTableLanguage } from "../../components/UsersTable/UsersTable"
-import { MockUser, MockUser2, render } from "../../testHelpers"
+import { MockAuditorRole, MockUser, MockUser2, render } from "../../testHelpers"
 import { Language as usersXServiceLanguage } from "../../xServices/users/usersXService"
 import { Language as UsersPageLanguage, UsersPage } from "./UsersPage"
 
@@ -62,6 +64,34 @@ const resetUserPassword = async (setupActionSpies: () => void) => {
   fireEvent.click(confirmButton)
 }
 
+const updateUserRole = async (setupActionSpies: () => void, role: Role) => {
+  // Get the first user in the table
+  const users = await screen.findAllByText(/.*@coder.com/)
+  const firstUserRow = users[0].closest("tr")
+  if (!firstUserRow) {
+    throw new Error("Error on get the first user row")
+  }
+
+  // Click on the "roles" menu to display the role options
+  const rolesLabel = within(firstUserRow).getByLabelText(RoleSelectLanguage.label)
+  const rolesMenuTrigger = within(rolesLabel).getByRole("button")
+  // For v4, the Select was changed to open on mouseDown instead of click
+  // https://github.com/mui-org/material-ui/pull/17978
+  fireEvent.mouseDown(rolesMenuTrigger)
+
+  // Setup spies to check the actions after
+  setupActionSpies()
+
+  // Click on the role option
+  const listBox = screen.getByRole("listbox")
+  const auditorOption = within(listBox).getByRole("option", { name: role.display_name })
+  fireEvent.click(auditorOption)
+
+  return {
+    rolesMenuTrigger,
+  }
+}
+
 describe("Users Page", () => {
   it("shows users", async () => {
     render(<UsersPage />)
@@ -164,4 +194,32 @@ describe("Users Page", () => {
       })
     })
   })
+
+  describe("Update user role", () => {
+    describe("when it is success", () => {
+      it("updates the roles", async () => {
+        render(
+          <>
+            <UsersPage />
+            <GlobalSnackbar />
+          </>,
+        )
+
+        const { rolesMenuTrigger } = await updateUserRole(() => {
+          jest.spyOn(API, "updateUserRoles").mockResolvedValueOnce({
+            ...MockUser,
+            roles: [...MockUser.roles, MockAuditorRole],
+          })
+        }, MockAuditorRole)
+
+        // Check if the select text was updated with the Auditor role
+        await waitFor(() => expect(rolesMenuTrigger).toHaveTextContent("Admin, Member, Auditor"))
+
+        // Check if the API was called correctly
+        const currentRoles = MockUser.roles.map((r) => r.name)
+        expect(API.updateUserRoles).toBeCalledTimes(1)
+        expect(API.updateUserRoles).toBeCalledWith([...currentRoles, MockAuditorRole.name], MockUser.id)
+      })
+    })
+  })
 })
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
index 1f242d682693f..1a6835c3a744a 100644
--- a/site/src/pages/UsersPage/UsersPage.tsx
+++ b/site/src/pages/UsersPage/UsersPage.tsx
@@ -15,23 +15,14 @@ export const Language = {
 
 const useRoles = () => {
   const xServices = useContext(XServiceContext)
-  const [authState] = useActor(xServices.authXService)
   const [rolesState, rolesSend] = useActor(xServices.siteRolesXService)
   const { roles } = rolesState.context
-  const { me } = authState.context
 
   useEffect(() => {
-    if (!me) {
-      throw new Error("User is not logged in")
-    }
-
-    const organizationId = me.organization_ids[0]
-
     rolesSend({
       type: "GET_ROLES",
-      organizationId,
     })
-  }, [me, rolesSend])
+  }, [rolesSend])
 
   return roles
 }
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
index 1ac27313d6092..cb978bc43cad2 100644
--- a/site/src/testHelpers/entities.ts
+++ b/site/src/testHelpers/entities.ts
@@ -10,7 +10,7 @@ import {
   WorkspaceAutostartRequest,
   WorkspaceResource,
 } from "../api/types"
-import { AuthMethods } from "../api/typesGenerated"
+import { AuthMethods, Role } from "../api/typesGenerated"
 
 export const MockSessionToken = { session_token: "my-session-token" }
 
@@ -21,6 +21,23 @@ export const MockBuildInfo: BuildInfoResponse = {
   version: "v99.999.9999+c9cdf14",
 }
 
+export const MockAdminRole: Role = {
+  name: "admin",
+  display_name: "Admin",
+}
+
+export const MockMemberRole: Role = {
+  name: "member",
+  display_name: "Member",
+}
+
+export const MockAuditorRole: Role = {
+  name: "auditor",
+  display_name: "Auditor",
+}
+
+export const MockSiteRoles = [MockAdminRole, MockAuditorRole, MockMemberRole]
+
 export const MockUser: UserResponse = {
   id: "test-user",
   username: "TestUser",
@@ -28,7 +45,7 @@ export const MockUser: UserResponse = {
   created_at: "",
   status: "active",
   organization_ids: ["fc0774ce-cc9e-48d4-80ae-88f7a4d4a8b0"],
-  roles: [],
+  roles: [MockAdminRole, MockMemberRole],
 }
 
 export const MockUser2: UserResponse = {
@@ -38,7 +55,7 @@ export const MockUser2: UserResponse = {
   created_at: "",
   status: "active",
   organization_ids: ["fc0774ce-cc9e-48d4-80ae-88f7a4d4a8b0"],
-  roles: [],
+  roles: [MockMemberRole],
 }
 
 export const MockOrganization: Organization = {
diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
index dbc2334c1385d..1f708476f1149 100644
--- a/site/src/testHelpers/handlers.ts
+++ b/site/src/testHelpers/handlers.ts
@@ -51,6 +51,9 @@ export const handlers = [
   rest.get("/api/v2/users/authmethods", async (req, res, ctx) => {
     return res(ctx.status(200), ctx.json(M.MockAuthMethods))
   }),
+  rest.get("/api/v2/users/roles", async (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(M.MockSiteRoles))
+  }),
 
   // workspaces
   rest.get("/api/v2/organizations/:organizationId/workspaces/:userName/:workspaceName", (req, res, ctx) => {
diff --git a/site/src/xServices/roles/siteRolesXService.ts b/site/src/xServices/roles/siteRolesXService.ts
index f2e002b6f0e2b..1948172687451 100644
--- a/site/src/xServices/roles/siteRolesXService.ts
+++ b/site/src/xServices/roles/siteRolesXService.ts
@@ -10,7 +10,6 @@ type SiteRolesContext = {
 
 type SiteRolesEvent = {
   type: "GET_ROLES"
-  organizationId: string
 }
 
 export const siteRolesMachine = createMachine(

From c7c7b95e0aa8a61f0d082216040ffbb23ecc02b1 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 10 May 2022 14:26:50 +0000
Subject: [PATCH 11/17] Add fail test case

---
 site/src/pages/UsersPage/UsersPage.test.tsx   | 23 +++++++++++++++++++
 site/src/xServices/roles/siteRolesXService.ts |  6 ++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
index b0c1c9dced9c2..044c01d3a4910 100644
--- a/site/src/pages/UsersPage/UsersPage.test.tsx
+++ b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -221,5 +221,28 @@ describe("Users Page", () => {
         expect(API.updateUserRoles).toBeCalledWith([...currentRoles, MockAuditorRole.name], MockUser.id)
       })
     })
+
+    describe("when it fails", () => {
+      it("shows an error message", async () => {
+        render(
+          <>
+            <UsersPage />
+            <GlobalSnackbar />
+          </>,
+        )
+
+        await updateUserRole(() => {
+          jest.spyOn(API, "updateUserRoles").mockRejectedValueOnce({})
+        }, MockAuditorRole)
+
+        // Check if the error message is displayed
+        await screen.findByText(usersXServiceLanguage.updateUserRolesError)
+
+        // Check if the API was called correctly
+        const currentRoles = MockUser.roles.map((r) => r.name)
+        expect(API.updateUserRoles).toBeCalledTimes(1)
+        expect(API.updateUserRoles).toBeCalledWith([...currentRoles, MockAuditorRole.name], MockUser.id)
+      })
+    })
   })
 })
diff --git a/site/src/xServices/roles/siteRolesXService.ts b/site/src/xServices/roles/siteRolesXService.ts
index 1948172687451..61c89ef3315bd 100644
--- a/site/src/xServices/roles/siteRolesXService.ts
+++ b/site/src/xServices/roles/siteRolesXService.ts
@@ -3,6 +3,10 @@ import * as API from "../../api"
 import * as TypesGen from "../../api/typesGenerated"
 import { displayError } from "../../components/GlobalSnackbar/utils"
 
+export const Language = {
+  getRolesError: "Error on get the roles.",
+}
+
 type SiteRolesContext = {
   roles?: TypesGen.Role[]
   getRolesError: Error | unknown
@@ -57,7 +61,7 @@ export const siteRolesMachine = createMachine(
         getRolesError: (_, event) => event.data,
       }),
       displayGetRolesError: () => {
-        displayError("Error on get the roles.")
+        displayError(Language.getRolesError)
       },
     },
     services: {

From a01cb8784178a30f8a98aa7cc96e69761b1ff214 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 10 May 2022 13:32:41 -0300
Subject: [PATCH 12/17] Update site/src/components/RoleSelect/RoleSelect.tsx

Co-authored-by: Presley Pizzo <1290996+presleyp@users.noreply.github.com>
---
 site/src/components/RoleSelect/RoleSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/RoleSelect/RoleSelect.tsx b/site/src/components/RoleSelect/RoleSelect.tsx
index e016a6563804e..e1f27ad0b3272 100644
--- a/site/src/components/RoleSelect/RoleSelect.tsx
+++ b/site/src/components/RoleSelect/RoleSelect.tsx
@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   select: {
     margin: 0,
     // Set a fix width for the select. It avoids selects having different sizes
-    // depending on how much roles they have selected.
+    // depending on how many roles they have selected.
     width: theme.spacing(25),
   },
 }))

From f402da0562f5981582fbf688edbeee68ac30516a Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 10 May 2022 13:32:50 -0300
Subject: [PATCH 13/17] Update site/src/components/RoleSelect/RoleSelect.tsx

Co-authored-by: Presley Pizzo <1290996+presleyp@users.noreply.github.com>
---
 site/src/components/RoleSelect/RoleSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/RoleSelect/RoleSelect.tsx b/site/src/components/RoleSelect/RoleSelect.tsx
index e1f27ad0b3272..2527521e4d794 100644
--- a/site/src/components/RoleSelect/RoleSelect.tsx
+++ b/site/src/components/RoleSelect/RoleSelect.tsx
@@ -52,7 +52,7 @@ export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, lo
 const useStyles = makeStyles((theme: Theme) => ({
   select: {
     margin: 0,
-    // Set a fix width for the select. It avoids selects having different sizes
+    // 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),
   },

From 9f47873c836f33f5956f53745eae4a0e11a02653 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 10 May 2022 13:41:50 -0500
Subject: [PATCH 14/17] Update site/src/pages/UsersPage/UsersPage.test.tsx

Co-authored-by: Presley Pizzo <1290996+presleyp@users.noreply.github.com>
---
 site/src/pages/UsersPage/UsersPage.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
index 044c01d3a4910..04a9ef6e41c2c 100644
--- a/site/src/pages/UsersPage/UsersPage.test.tsx
+++ b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -75,7 +75,7 @@ const updateUserRole = async (setupActionSpies: () => void, role: Role) => {
   // Click on the "roles" menu to display the role options
   const rolesLabel = within(firstUserRow).getByLabelText(RoleSelectLanguage.label)
   const rolesMenuTrigger = within(rolesLabel).getByRole("button")
-  // For v4, the Select was changed to open on mouseDown instead of click
+  // For MUI v4, the Select was changed to open on mouseDown instead of click
   // https://github.com/mui-org/material-ui/pull/17978
   fireEvent.mouseDown(rolesMenuTrigger)
 

From 6cf12b5947289b4994f69f51c65ae745e86e1fa4 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 10 May 2022 18:50:54 +0000
Subject: [PATCH 15/17] Clear get roles error

---
 site/src/xServices/roles/siteRolesXService.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/src/xServices/roles/siteRolesXService.ts b/site/src/xServices/roles/siteRolesXService.ts
index 61c89ef3315bd..d99ba3db8a235 100644
--- a/site/src/xServices/roles/siteRolesXService.ts
+++ b/site/src/xServices/roles/siteRolesXService.ts
@@ -37,6 +37,7 @@ export const siteRolesMachine = createMachine(
         },
       },
       gettingRoles: {
+        entry: "clearGetRolesError",
         invoke: {
           id: "getRoles",
           src: "getRoles",
@@ -63,6 +64,9 @@ export const siteRolesMachine = createMachine(
       displayGetRolesError: () => {
         displayError(Language.getRolesError)
       },
+      clearGetRolesError: assign({
+        getRolesError: (_) => undefined,
+      }),
     },
     services: {
       getRoles: () => API.getSiteRoles(),

From 16c3fe36215a069b7f99b2e4e57e666cc8a2aed8 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 10 May 2022 18:52:49 +0000
Subject: [PATCH 16/17] Fix storybook

---
 site/src/components/UsersTable/UsersTable.stories.tsx | 4 +++-
 site/src/pages/UsersPage/UsersPageView.stories.tsx    | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/site/src/components/UsersTable/UsersTable.stories.tsx b/site/src/components/UsersTable/UsersTable.stories.tsx
index e64e8163e1879..448a11cac0680 100644
--- a/site/src/components/UsersTable/UsersTable.stories.tsx
+++ b/site/src/components/UsersTable/UsersTable.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
-import { MockUser, MockUser2 } from "../../testHelpers"
+import { MockSiteRoles, MockUser, MockUser2 } from "../../testHelpers"
 import { UsersTable, UsersTableProps } from "./UsersTable"
 
 export default {
@@ -13,9 +13,11 @@ const Template: Story<UsersTableProps> = (args) => <UsersTable {...args} />
 export const Example = Template.bind({})
 Example.args = {
   users: [MockUser, MockUser2],
+  roles: MockSiteRoles,
 }
 
 export const Empty = Template.bind({})
 Empty.args = {
   users: [],
+  roles: MockSiteRoles,
 }
diff --git a/site/src/pages/UsersPage/UsersPageView.stories.tsx b/site/src/pages/UsersPage/UsersPageView.stories.tsx
index fceaef07ce420..266a29acc24ac 100644
--- a/site/src/pages/UsersPage/UsersPageView.stories.tsx
+++ b/site/src/pages/UsersPage/UsersPageView.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
-import { MockUser, MockUser2 } from "../../testHelpers"
+import { MockSiteRoles, MockUser, MockUser2 } from "../../testHelpers"
 import { UsersPageView, UsersPageViewProps } from "./UsersPageView"
 
 export default {
@@ -13,8 +13,10 @@ const Template: Story<UsersPageViewProps> = (args) => <UsersPageView {...args} /
 export const Ready = Template.bind({})
 Ready.args = {
   users: [MockUser, MockUser2],
+  roles: MockSiteRoles,
 }
 export const Empty = Template.bind({})
 Empty.args = {
   users: [],
+  roles: MockSiteRoles,
 }

From 9bd6ca5e40fd2e46c2e9890f71974690208c65fd Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 10 May 2022 19:05:30 +0000
Subject: [PATCH 17/17] Add comment about fetch the roles

---
 site/src/pages/UsersPage/UsersPage.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
index 1a6835c3a744a..5c7d4c0e968e8 100644
--- a/site/src/pages/UsersPage/UsersPage.tsx
+++ b/site/src/pages/UsersPage/UsersPage.tsx
@@ -18,6 +18,9 @@ const useRoles = () => {
   const [rolesState, rolesSend] = useActor(xServices.siteRolesXService)
   const { roles } = rolesState.context
 
+  /**
+   * Fetch roles on component mount
+   */
   useEffect(() => {
     rolesSend({
       type: "GET_ROLES",