feat: Add update user roles action (#1361)

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],
+}

site/src/components/RoleSelect/RoleSelect.tsx

@@ -0,0 +1,59 @@
+import Checkbox from "@material-ui/core/Checkbox"
+import MenuItem from "@material-ui/core/MenuItem"
+import Select from "@material-ui/core/Select"
+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[]
+  onChange: (roles: Role["name"][]) => void
+  loading?: boolean
+  open?: boolean
+}
+
+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(", ")
+  const sortedRoles = roles.sort((a, b) => a.display_name.localeCompare(b.display_name))
+
+  return (
+    <Select
+      aria-label={Language.label}
+      open={open}
+      multiple
+      value={value}
+      renderValue={renderValue}
+      variant="outlined"
+      className={styles.select}
+      onChange={(e) => {
+        const { value } = e.target
+        onChange(value as string[])
+      }}
+    >
+      {sortedRoles.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((theme: Theme) => ({
+  select: {
+    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),
+  },
+}))

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>
   )
 }
 

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,
 }

site/src/components/UsersTable/UsersTable.tsx

@@ -1,8 +1,17 @@
+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 * as TypesGen from "../../api/typesGenerated"
 import { EmptyState } from "../EmptyState/EmptyState"
-import { Column, Table } from "../Table/Table"
+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"
 
 export const Language = {
@@ -12,48 +21,79 @@ 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
+  onUpdateUserRoles: (user: UserResponse, roles: TypesGen.Role["name"][]) => void
+  roles: TypesGen.Role[]
+  isUpdatingUserRoles?: boolean
 }
 
-export const UsersTable: React.FC<UsersTableProps> = ({ users, onSuspendUser, onResetUserPassword }) => {
+export const UsersTable: React.FC<UsersTableProps> = ({
+  users,
+  roles,
+  onSuspendUser,
+  onResetUserPassword,
+  onUpdateUserRoles,
+  isUpdatingUserRoles,
+}) => {
   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>
+              <RoleSelect
+                roles={roles}
+                selectedRoles={u.roles}
+                loading={isUpdatingUserRoles}
+                onChange={(roles) => onUpdateUserRoles(u, 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>
   )
 }