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>