Right click on shared folder overview ans Storage bucket overview

packages/common-components/src/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react"
+import React, { ReactNode, TableHTMLAttributes } from "react"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
 import clsx from "clsx"
 
@@ -57,7 +57,7 @@ const useStyles = makeStyles(
     })
 )
 
-export interface ITableProps {
+export interface ITableProps extends TableHTMLAttributes<HTMLTableElement> {
   className?: string
   children: ReactNode | ReactNode[]
   striped?: boolean

packages/common-components/src/Table/TableHead.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles(({ palette, typography, overrides }: ITheme) =>
   })
 )
 
-export interface ITableHeadProps {
+export interface ITableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement>{
   className?: string
   children: ReactNode | ReactNode[]
 }

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx

@@ -11,7 +11,9 @@ import {
   Button,
   PlusIcon,
   useHistory,
-  Dialog
+  Dialog,
+  IMenuItem,
+  PlusSvg
 } from "@chainsafe/common-components"
 import { BucketKeyPermission, useFiles } from "../../../Contexts/FilesContext"
 import { t, Trans } from "@lingui/macro"
@@ -28,6 +30,7 @@ import clsx from "clsx"
 import CreateSharedFolderModal from "./CreateSharedFolderModal"
 import CreateOrManageSharedFolderModal from "./ManageSharedFolderModal"
 import { useLanguageContext } from "../../../Contexts/LanguageContext"
+import AnchorMenu, { AnchoreMenuPosition } from "../../../UI-components/AnchorMenu"
 
 export const desktopSharedGridSettings = "50px 3fr 90px 140px 140px 45px !important"
 export const mobileSharedGridSettings = "3fr 80px 45px !important"
@@ -112,6 +115,14 @@ const useStyles = makeStyles(
       },
       buttonWrap: {
         whiteSpace: "nowrap"
+      },
+      menuIcon: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: 20,
+        marginRight: constants.generalUnit * 1.5,
+        fill: constants.previewModal.menuItemIconColor
       }
     })
   }
@@ -135,6 +146,22 @@ const SharedFolderOverview = () => {
   const [isSharedFolderCreationModalOpen, setIsSharedFolderCreationModalOpen] = useState(false)
   const [bucketToEdit, setBucketToEdit] = useState<BucketKeyPermission | undefined>(undefined)
   const { selectedLocale } = useLanguageContext()
+  const [contextMenuPosition, setContextMenuPosition] = useState<AnchoreMenuPosition | null>(null)
+  const [contextMenuOptions, setContextMenuOptions] = useState<IMenuItem[]>([])
+  const generalContextMenuOptions: IMenuItem[] = useMemo(() => [
+    {
+      contents: (
+        <>
+          <PlusSvg className={classes.menuIcon} />
+          <span>
+            <Trans>Create</Trans>
+          </span>
+        </>
+      ),
+      onClick: () => setIsSharedFolderCreationModalOpen(true)
+    }
+  ], [classes])
+
   const sortedBuckets = useMemo(() => {
     let temp: BucketKeyPermission[]
 
@@ -202,14 +229,31 @@ const SharedFolderOverview = () => {
   const openSharedFolder = useCallback((bucketId: string) => {
     redirect(ROUTE_LINKS.SharedFolderExplorer(bucketId, "/"))
   }, [redirect])
+
+  const handleContextMenu = useCallback((e: React.MouseEvent, options?: IMenuItem[]) => {
+    e.preventDefault()
+    if(options){
+      setContextMenuOptions(options)
+    } else {
+      setContextMenuOptions(generalContextMenuOptions)
+    }
+    setContextMenuPosition({
+      left: e.clientX - 2,
+      top: e.clientY - 4
+    })
+  }, [generalContextMenuOptions])
+
   return (
     <>
       <article
         className={clsx(classes.root, {
           bottomBanner: accountRestricted
         })}
       >
-        <header className={classes.header}>
+        <header
+          className={classes.header}
+          onContextMenu={handleContextMenu}
+        >
           <Typography
             variant="h1"
             component="h1"
@@ -230,6 +274,13 @@ const SharedFolderOverview = () => {
             </Button>
           </div>
         </header>
+        {contextMenuPosition && (
+          <AnchorMenu
+            options={contextMenuOptions}
+            onClose={() => setContextMenuPosition(null)}
+            anchorPosition={contextMenuPosition}
+          />
+        )}
         {isLoadingBuckets && (
           <div className={classes.loadingContainer}>
             <Loading
@@ -250,7 +301,10 @@ const SharedFolderOverview = () => {
             striped={true}
             hover={true}
           >
-            <TableHead className={classes.tableHead}>
+            <TableHead
+              className={classes.tableHead}
+              onContextMenu={handleContextMenu}
+            >
               <TableRow
                 type="grid"
                 className={classes.tableRow}
@@ -303,6 +357,7 @@ const SharedFolderOverview = () => {
                     setBucketToDelete(bucket)
                     setIsDeleteBucketModalOpen(true)
                   }}
+                  handleContextMenu={handleContextMenu}
                 />
               )}
             </TableBody>

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx

@@ -154,9 +154,17 @@ interface Props {
   openSharedFolder: (bucketId: string) => void
   onEditSharedFolder: () => void
   handleDeleteSharedFolder: () => void
+  handleContextMenu: (e: React.MouseEvent, items?: IMenuItem[]) => void
 }
 
-const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteSharedFolder, onEditSharedFolder }: Props) => {
+const SharedFolderRow = ({
+  bucket,
+  handleRename,
+  openSharedFolder,
+  handleDeleteSharedFolder,
+  handleContextMenu,
+  onEditSharedFolder
+}: Props) => {
   const classes = useStyles()
   const { name, size } = bucket
   const { desktop } = useThemeSwitcher()
@@ -290,6 +298,7 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
         data-cy="row-shared-folder-item"
         className={classes.tableRow}
         type="grid"
+        onContextMenu={(e) => handleContextMenu(e, menuItems)}
       >
         {desktop &&
         <TableCell

packages/storage-ui/src/Components/Elements/BucketRow.tsx

@@ -1,6 +1,6 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { makeStyles, createStyles } from "@chainsafe/common-theme"
-import { DeleteSvg, formatBytes, MenuDropdown, MoreIcon, TableCell, TableRow, useHistory  } from "@chainsafe/common-components"
+import { DeleteSvg, formatBytes, IMenuItem, MenuDropdown, MoreIcon, TableCell, TableRow, useHistory  } from "@chainsafe/common-components"
 import { Trans } from "@lingui/macro"
 import { Bucket } from "@chainsafe/files-api-client"
 import { CSSTheme } from "../../Themes/types"
@@ -63,19 +63,33 @@ const useStyles = makeStyles(({ animation, constants, breakpoints }: CSSTheme) =
 )
 interface Props {
   bucket: Bucket
+  handleContextMenu: (e: React.MouseEvent, items?: IMenuItem[]) => void
 }
 
-const BucketRow = ({ bucket }: Props) => {
+const BucketRow = ({ bucket, handleContextMenu }: Props) => {
   const classes = useStyles()
   const { removeBucket } = useStorage()
   const { redirect } = useHistory()
+  const menuItems = useMemo(() => [{
+    contents: (
+      <>
+        <DeleteSvg className={classes.menuIcon} />
+        <span data-cy="menu-delete-bucket">
+          <Trans>Delete bucket</Trans>
+        </span>
+      </>
+    ),
+    onClick: () => removeBucket(bucket.id)
+  }], [bucket, classes, removeBucket])
+
   return (
     <TableRow
       type="grid"
       className={clsx(classes.tableRow, {
         deleting: bucket.status === "deleting"
       })}
       data-cy="row-bucket-item"
+      onContextMenu={(e) => handleContextMenu(e, menuItems)}
     >
       <TableCell
         className={classes.name}
@@ -95,17 +109,7 @@ const BucketRow = ({ bucket }: Props) => {
           testId='bucket-kebab'
           animation="none"
           anchor={"bottom-right"}
-          menuItems={[{
-            contents: (
-              <>
-                <DeleteSvg className={classes.menuIcon} />
-                <span data-cy="menu-delete-bucket">
-                  <Trans>Delete bucket</Trans>
-                </span>
-              </>
-            ),
-            onClick: () => removeBucket(bucket.id)
-          }]}
+          menuItems={menuItems}
           classNames={{
             icon: classes.dropdownIcon,
             options: classes.dropdownOptions,

packages/storage-ui/src/Components/Pages/BucketsPage.tsx

@@ -5,7 +5,9 @@ import {
   FormikRadioInput,
   FormikTextInput,
   Grid,
+  IMenuItem,
   PlusIcon,
+  PlusSvg,
   Table,
   TableBody,
   TableHead,
@@ -26,6 +28,7 @@ import { useStorageApi } from "../../Contexts/StorageApiContext"
 import { usePageTrack } from "../../Contexts/PosthogContext"
 import { FileSystemType } from "@chainsafe/files-api-client"
 import { Helmet } from "react-helmet-async"
+import AnchorMenu, { AnchoreMenuPosition } from "../UI-components/AnchorMenu"
 
 export const desktopGridSettings = "3fr 110px 150px 70px !important"
 export const mobileGridSettings = "3fr 100px 100px 70px !important"
@@ -105,6 +108,14 @@ const useStyles = makeStyles(({ breakpoints, animation, constants, typography }:
         display: "flex",
         flexDirection: "row"
       }
+    },
+    menuIcon: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      width: 20,
+      marginRight: constants.generalUnit * 1.5,
+      fill: constants.previewModal.menuItemIconColor
     }
   })
 )
@@ -115,6 +126,22 @@ const BucketsPage = () => {
   const { accountRestricted } = useStorageApi()
   const [isCreateBucketModalOpen, setIsCreateBucketModalOpen] = useState(false)
   const bucketsToShow = useMemo(() => storageBuckets.filter(b => b.status === "created"), [storageBuckets])
+  const [contextMenuPosition, setContextMenuPosition] = useState<AnchoreMenuPosition | null>(null)
+  const [contextMenuOptions, setContextMenuOptions] = useState<IMenuItem[]>([])
+  const generalContextMenuOptions: IMenuItem[] = useMemo(() => [
+    {
+      contents: (
+        <>
+          <PlusSvg className={classes.menuIcon} />
+          <span>
+            <Trans>Create Bucket</Trans>
+          </span>
+        </>
+      ),
+      onClick: () => setIsCreateBucketModalOpen(true)
+    }
+  ], [classes])
+
   const bucketNameValidationSchema = useMemo(
     () => bucketNameValidator(bucketsToShow.map(b => b.name))
     , [bucketsToShow]
@@ -153,6 +180,19 @@ const BucketsPage = () => {
     setIsCreateBucketModalOpen(false)
   }, [formik])
 
+  const handleContextMenu = useCallback((e: React.MouseEvent, options?: IMenuItem[]) => {
+    e.preventDefault()
+    if(options){
+      setContextMenuOptions(options)
+    } else {
+      setContextMenuOptions(generalContextMenuOptions)
+    }
+    setContextMenuPosition({
+      left: e.clientX - 2,
+      top: e.clientY - 4
+    })
+  }, [generalContextMenuOptions])
+
   return (
     <div className={classes.root}>
       <Helmet>
@@ -161,6 +201,7 @@ const BucketsPage = () => {
       <header
         className={classes.header}
         data-cy="header-buckets"
+        onContextMenu={handleContextMenu}
       >
         <Typography variant='h1'>
           <Trans>
@@ -179,12 +220,22 @@ const BucketsPage = () => {
           </Button>
         </div>
       </header>
+      {contextMenuPosition && (
+        <AnchorMenu
+          options={contextMenuOptions}
+          onClose={() => setContextMenuPosition(null)}
+          anchorPosition={contextMenuPosition}
+        />
+      )}
       <Table
         fullWidth={true}
         striped={true}
         hover={true}
       >
-        <TableHead className={classes.tableHead}>
+        <TableHead
+          className={classes.tableHead}
+          onContextMenu={handleContextMenu}
+        >
           <TableRow
             type="grid"
             className={classes.tableRow}
@@ -219,6 +270,7 @@ const BucketsPage = () => {
               <BucketRow
                 bucket={bucket}
                 key={bucket.id}
+                handleContextMenu={handleContextMenu}
               />
             )}
         </TableBody>