feat: Add user menu on users table

BrunoQuaresma · BrunoQuaresma · commit c1d612f93d4a · 2022-04-29T16:58:46.000Z
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
@@ -40,17 +40,21 @@ export interface TableProps<T> {
    * Optional empty state UI when the data is empty
    */
   emptyState?: React.ReactElement
+  /**
+   * Optional element to render row actions like delete, update, etc
+   */
+  rowMenu?: (data: T) => React.ReactElement
 }
 
-export const Table = <T,>({ columns, data, emptyState, title }: TableProps<T>): React.ReactElement => {
+export const Table = <T,>({ columns, data, emptyState, title, rowMenu }: TableProps<T>): React.ReactElement => {
   const columnNames = columns.map(({ name }) => name)
-  const body = renderTableBody(data, columns, emptyState)
+  const body = renderTableBody(data, columns, emptyState, rowMenu)
 
   return (
     <MuiTable>
       <TableHead>
         {title && <TableTitle title={title} />}
-        <TableHeaders columns={columnNames} />
+        <TableHeaders columns={columnNames} hasMenu={!!rowMenu} />
       </TableHead>
       {body}
     </MuiTable>
@@ -60,7 +64,12 @@ export const Table = <T,>({ columns, data, emptyState, title }: TableProps<T>):
 /**
  * Helper function to render the table data, falling back to an empty state if available
  */
-const renderTableBody = <T,>(data: T[], columns: Column<T>[], emptyState?: React.ReactElement) => {
+const renderTableBody = <T,>(
+  data: T[],
+  columns: Column<T>[],
+  emptyState?: React.ReactElement,
+  rowMenu?: (data: T) => React.ReactElement,
+) => {
   if (data.length > 0) {
     const rows = data.map((item: T, index) => {
       const cells = columns.map((column) => {
@@ -70,7 +79,12 @@ const renderTableBody = <T,>(data: T[], columns: Column<T>[], emptyState?: React
           return <TableCell key={String(column.key)}>{String(item[column.key]).toString()}</TableCell>
         }
       })
-      return <TableRow key={index}>{cells}</TableRow>
+      return (
+        <TableRow key={index}>
+          {cells}
+          {rowMenu && <TableCell>{rowMenu(item)}</TableCell>}
+        </TableRow>
+      )
     })
     return <TableBody>{rows}</TableBody>
   } else {
diff --git a/site/src/components/TableHeaders/TableHeaders.tsx b/site/src/components/TableHeaders/TableHeaders.tsx
@@ -5,9 +5,10 @@ import React from "react"
 
 export interface TableHeadersProps {
   columns: string[]
+  hasMenu?: boolean
 }
 
-export const TableHeaders: React.FC<TableHeadersProps> = ({ columns }) => {
+export const TableHeaders: React.FC<TableHeadersProps> = ({ columns, hasMenu }) => {
   const styles = useStyles()
   return (
     <TableRow className={styles.root}>
@@ -16,6 +17,8 @@ export const TableHeaders: React.FC<TableHeadersProps> = ({ columns }) => {
           {c}
         </TableCell>
       ))}
+      {/* 1% is a hack to make the table cell width fits the content */}
+      {hasMenu && <TableCell width="1%" />}
     </TableRow>
   )
 }
diff --git a/site/src/components/UsersTable/UserMenu.tsx b/site/src/components/UsersTable/UserMenu.tsx
@@ -0,0 +1,29 @@
+import IconButton from "@material-ui/core/IconButton"
+import Menu, { MenuProps } from "@material-ui/core/Menu"
+import MenuItem from "@material-ui/core/MenuItem"
+import MoreVertIcon from "@material-ui/icons/MoreVert"
+import React from "react"
+import { UserResponse } from "../../api/types"
+
+export const UserMenu: React.FC<{ user: UserResponse }> = () => {
+  const [anchorEl, setAnchorEl] = React.useState<MenuProps["anchorEl"]>(null)
+
+  const handleClick = (event: React.MouseEvent) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <IconButton size="small" aria-label="more" aria-controls="long-menu" aria-haspopup="true" onClick={handleClick}>
+        <MoreVertIcon />
+      </IconButton>
+      <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+        <MenuItem onClick={handleClose}>Suspend</MenuItem>
+      </Menu>
+    </>
+  )
+}
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
@@ -3,6 +3,7 @@ import { UserResponse } from "../../api/types"
 import { EmptyState } from "../EmptyState/EmptyState"
 import { Column, Table } from "../Table/Table"
 import { UserCell } from "../UserCell/UserCell"
+import { UserMenu } from "./UserMenu"
 
 const Language = {
   pageTitle: "Users",
@@ -28,5 +29,13 @@ export interface UsersTableProps {
 }
 
 export const UsersTable: React.FC<UsersTableProps> = ({ users }) => {
-  return <Table columns={columns} data={users} title={Language.usersTitle} emptyState={emptyState} />
+  return (
+    <Table
+      columns={columns}
+      data={users}
+      title={Language.usersTitle}
+      emptyState={emptyState}
+      rowMenu={(user) => <UserMenu user={user} />}
+    />
+  )
 }

Original file line number	Diff line number	Diff line change
`@@ -5,9 +5,10 @@ import React from "react"`
`5`	`5`
`6`	`6`	`export interface TableHeadersProps {`
`7`	`7`	`columns: string[]`
	`8`	`+ hasMenu?: boolean`
`8`	`9`	`}`
`9`	`10`
`10`		`-export const TableHeaders: React.FC<TableHeadersProps> = ({ columns }) => {`
	`11`	`+export const TableHeaders: React.FC<TableHeadersProps> = ({ columns, hasMenu }) => {`
`11`	`12`	`const styles = useStyles()`
`12`	`13`	`return (`
`13`	`14`	`<TableRow className={styles.root}>`
`@@ -16,6 +17,8 @@ export const TableHeaders: React.FC<TableHeadersProps> = ({ columns }) => {`
`16`	`17`	`{c}`
`17`	`18`	`</TableCell>`
`18`	`19`	`))}`
	`20`	`+ {/* 1% is a hack to make the table cell width fits the content */}`
	`21`	`+ {hasMenu && <TableCell width="1%" />}`
`19`	`22`	`</TableRow>`
`20`	`23`	`)`
`21`	`24`	`}`