refactor: extract user menu to be TableRowMenu

BrunoQuaresma · BrunoQuaresma · commit 1f562a339e05 · 2022-05-02T14:49:21.000Z
diff --git a/site/src/components/TableRowMenu/TableRowMenu.stories.tsx b/site/src/components/TableRowMenu/TableRowMenu.stories.tsx
@@ -0,0 +1,24 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { TableRowMenu, TableRowMenuProps } from "./TableRowMenu"
+
+export default {
+  title: "components/TableRowMenu",
+  component: TableRowMenu,
+} as ComponentMeta<typeof TableRowMenu>
+
+type DataType = {
+  id: string
+}
+
+const Template: Story<TableRowMenuProps<DataType>> = (args) => <TableRowMenu {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  data: { id: "123" },
+  menuItems: [
+    { label: "Suspend", onClick: (data) => alert(data.id) },
+    { label: "Update", onClick: (data) => alert(data.id) },
+    { label: "Delete", onClick: (data) => alert(data.id) },
+  ],
+}
diff --git a/site/src/components/TableRowMenu/TableRowMenu.tsx b/site/src/components/TableRowMenu/TableRowMenu.tsx
@@ -3,9 +3,16 @@ 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 }> = () => {
+export interface TableRowMenuProps<TData> {
+  data: TData
+  menuItems: Array<{
+    label: string
+    onClick: (data: TData) => void
+  }>
+}
+
+export const TableRowMenu = <T,>({ data, menuItems }: TableRowMenuProps<T>): JSX.Element => {
   const [anchorEl, setAnchorEl] = React.useState<MenuProps["anchorEl"]>(null)
 
   const handleClick = (event: React.MouseEvent) => {
@@ -22,7 +29,17 @@ export const UserMenu: React.FC<{ user: UserResponse }> = () => {
         <MoreVertIcon />
       </IconButton>
       <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
-        <MenuItem onClick={handleClose}>Suspend</MenuItem>
+        {menuItems.map((item) => (
+          <MenuItem
+            key={item.label}
+            onClick={() => {
+              handleClose()
+              item.onClick(data)
+            }}
+          >
+            {item.label}
+          </MenuItem>
+        ))}
       </Menu>
     </>
   )
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
@@ -2,14 +2,15 @@ import React from "react"
 import { UserResponse } from "../../api/types"
 import { EmptyState } from "../EmptyState/EmptyState"
 import { Column, Table } from "../Table/Table"
+import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
 import { UserCell } from "../UserCell/UserCell"
-import { UserMenu } from "./UserMenu"
 
 const Language = {
   pageTitle: "Users",
   usersTitle: "All users",
   emptyMessage: "No users found",
   usernameLabel: "User",
+  suspendMenuItem: "Suspend",
 }
 
 const emptyState = <EmptyState message={Language.emptyMessage} />
@@ -35,7 +36,19 @@ export const UsersTable: React.FC<UsersTableProps> = ({ users }) => {
       data={users}
       title={Language.usersTitle}
       emptyState={emptyState}
-      rowMenu={(user) => <UserMenu user={user} />}
+      rowMenu={(user) => (
+        <TableRowMenu
+          data={user}
+          menuItems={[
+            {
+              label: Language.suspendMenuItem,
+              onClick: () => {
+                // TO-DO: Add suspend action here
+              },
+            },
+          ]}
+        />
+      )}
     />
   )
 }
