Storage buckets overview

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

@@ -0,0 +1,107 @@
+import React from "react"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { DeleteSvg, formatBytes, 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"
+import { useStorage } from "../../Contexts/StorageContext"
+import { desktopGridSettings, mobileGridSettings }  from "../Pages/BucketsPage"
+import { ROUTE_LINKS } from "../StorageRoutes"
+
+const useStyles = makeStyles(({ animation, constants, breakpoints }: CSSTheme) =>
+  createStyles({
+    dropdownIcon: {
+      "& svg": {
+        fill: constants.fileSystemItemRow.dropdownIcon
+      }
+    },
+    dropdownOptions: {
+      backgroundColor: constants.fileSystemItemRow.optionsBackground,
+      color: constants.fileSystemItemRow.optionsColor,
+      border: `1px solid ${constants.fileSystemItemRow.optionsBorder}`
+    },
+    dropdownItem: {
+      backgroundColor: constants.fileSystemItemRow.itemBackground,
+      color: constants.fileSystemItemRow.itemColor
+    },
+    menuIcon: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      width: 20,
+      marginRight: constants.generalUnit * 1.5,
+      "& svg": {
+        fill: constants.fileSystemItemRow.menuIcon
+      }
+    },
+    name: {
+      textAlign: "left",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      "&.editing": {
+        overflow: "visible"
+      }
+    },
+    tableRow: {
+      border: "2px solid transparent",
+      transitionDuration: `${animation.transform}ms`,
+      [breakpoints.up("md")]: {
+        gridTemplateColumns: desktopGridSettings
+      },
+      [breakpoints.down("md")]: {
+        gridTemplateColumns: mobileGridSettings
+      },
+      cursor: "pointer"
+    }
+  })
+)
+interface Props {
+  bucket: Bucket
+}
+
+const BucketRow = ({ bucket }: Props) => {
+  const classes = useStyles()
+  const { removeBucket } = useStorage()
+  const { redirect } = useHistory()
+  return (
+    <TableRow
+      type="grid"
+      className={classes.tableRow}
+    >
+      <TableCell className={classes.name}
+        onClick={() => redirect(ROUTE_LINKS.Bucket(bucket.id, "/"))}>
+        {bucket.name}
+      </TableCell>
+      <TableCell>
+        {formatBytes(bucket.size)}
+      </TableCell>
+      <TableCell align="right">
+        <MenuDropdown
+          testId='bucketDropdown'
+          animation="none"
+          anchor={"bottom-right"}
+          menuItems={[{
+            contents: (
+              <>
+                <DeleteSvg className={classes.menuIcon} />
+                <span data-cy="menu-share">
+                  <Trans>Delete bucket</Trans>
+                </span>
+              </>
+            ),
+            onClick: () => removeBucket(bucket.id)
+          }]}
+          classNames={{
+            icon: classes.dropdownIcon,
+            options: classes.dropdownOptions,
+            item: classes.dropdownItem
+          }}
+          indicator={MoreIcon}
+        />
+      </TableCell>
+    </TableRow>
+  )
+}
+
+export default BucketRow

packages/storage-ui/src/Components/Layouts/AppHeader.tsx

@@ -174,7 +174,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
 
               <section className={classes.accountControls}>
                 <MenuDropdown
-                  title='TBC'
+                  title=''
                   anchor="bottom-right"
                   classNames={{
                     icon: classes.icon,

packages/storage-ui/src/Components/Layouts/AppNav.tsx

@@ -239,7 +239,7 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
               >
                 <ChainsafeLogo />
                 <Typography variant="body1">
-                  ChainSafe Storage
+                  Storage
                 </Typography>
               </Link>
             </div>

packages/storage-ui/src/Components/Modules/CreateFolderModal/CreateFolderModal.tsx

@@ -0,0 +1,207 @@
+import {
+  Button,
+  FormikTextInput,
+  Grid,
+  Typography
+} from "@chainsafe/common-components"
+import * as yup from "yup"
+import {
+  createStyles,
+  makeStyles,
+  useMediaQuery
+} from "@chainsafe/common-theme"
+import React, { useRef, useEffect, useState } from "react"
+import { Formik, Form } from "formik"
+import CustomModal from "../../Elements/CustomModal"
+import CustomButton from "../../Elements/CustomButton"
+import { t, Trans } from "@lingui/macro"
+import { CSSTheme } from "../../../Themes/types"
+import { useFileBrowser } from "../../../Contexts/FileBrowserContext"
+import { useStorageApi } from "../../../Contexts/StorageApiContext"
+
+
+const useStyles = makeStyles(
+  ({ breakpoints, constants, typography, zIndex }: CSSTheme) => {
+    return createStyles({
+      root: {
+        padding: constants.generalUnit * 4,
+        flexDirection: "column"
+      },
+      modalRoot: {
+        zIndex: zIndex?.blocker,
+        [breakpoints.down("md")]: {}
+      },
+      modalInner: {
+        backgroundColor: constants.createFolder.backgroundColor,
+        color: constants.createFolder.color,
+        [breakpoints.down("md")]: {
+          bottom:
+          Number(constants?.mobileButtonHeight) + constants.generalUnit,
+          borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
+          borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
+          maxWidth: `${breakpoints.width("md")}px !important`
+        }
+      },
+      input: {
+        marginBottom: constants.generalUnit * 2
+      },
+      okButton: {
+        marginLeft: constants.generalUnit
+      },
+      cancelButton: {
+        [breakpoints.down("md")]: {
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          width: "100%",
+          height: constants?.mobileButtonHeight
+        }
+      },
+      label: {
+        fontSize: 14,
+        lineHeight: "22px"
+      },
+      heading: {
+        color: constants.createFolder.color,
+        fontWeight: typography.fontWeight.semibold,
+        textAlign: "center",
+        marginBottom: constants.generalUnit * 4
+      }
+    })
+  }
+)
+
+interface ICreateFolderModalProps {
+  modalOpen: boolean
+  close: () => void
+}
+
+const CreateFolderModal: React.FC<ICreateFolderModalProps> = ({
+  modalOpen,
+  close
+}: ICreateFolderModalProps) => {
+  const classes = useStyles()
+  const { storageApiClient } = useStorageApi()
+  const { currentPath, refreshContents, bucket } = useFileBrowser()
+  const [creatingFolder, setCreatingFolder] = useState(false)
+  const desktop = useMediaQuery("md")
+  const inputRef = useRef<any>(null)
+
+  useEffect(() => {
+    if (modalOpen) {
+      setTimeout(() => inputRef.current?.focus(), 100)
+    }
+  }, [modalOpen])
+
+  const folderNameValidator = yup.object().shape({
+    name: yup
+      .string()
+      .required(t`Folder name is required`)
+      .test(
+        "Invalid name",
+        t`Folder name cannot contain '/' character`,
+        (val: string | null | undefined) => !!val && !val.includes("/")
+      )
+  })
+
+  return (
+    <CustomModal
+      className={classes.modalRoot}
+      injectedClass={{
+        inner: classes.modalInner
+      }}
+      active={modalOpen}
+      closePosition="none"
+      maxWidth="sm"
+    >
+      <Formik
+        initialValues={{
+          name: ""
+        }}
+        validationSchema={folderNameValidator}
+        validateOnChange={false}
+        onSubmit={async (values, helpers) => {
+          if (!bucket) return
+          helpers.setSubmitting(true)
+          try {
+            setCreatingFolder(true)
+            await storageApiClient.addBucketDirectory(bucket.id, { path: `${currentPath}/${values.name}` })
+            refreshContents && await refreshContents()
+            setCreatingFolder(false)
+            helpers.resetForm()
+            close()
+          } catch (errors) {
+            setCreatingFolder(false)
+            if (errors[0].message.includes("Entry with such name can")) {
+              helpers.setFieldError("name", t`Folder name is already in use`)
+            } else {
+              helpers.setFieldError("name", errors[0].message)
+            }
+          }
+          helpers.setSubmitting(false)
+        }}
+      >
+        <Form>
+          <div className={classes.root}>
+            {!desktop && (
+              <Grid
+                item
+                xs={12}
+                sm={12}
+              >
+                <Typography
+                  className={classes.heading}
+                  variant="h5"
+                  component="h5"
+                >
+                  <Trans>Create Folder</Trans>
+                </Typography>
+              </Grid>
+            )}
+            <Grid
+              item
+              xs={12}
+              sm={12}
+              className={classes.input}
+            >
+              <FormikTextInput
+                name="name"
+                size="large"
+                placeholder={t`Name`}
+                labelClassName={classes.label}
+                label={t`Folder Name`}
+                ref={inputRef}
+              />
+            </Grid>
+            <Grid
+              item
+              flexDirection="row"
+              justifyContent="flex-end"
+            >
+              <CustomButton
+                onClick={() => close()}
+                size="medium"
+                className={classes.cancelButton}
+                variant={desktop ? "outline" : "gray"}
+                type="button"
+              >
+                <Trans>Cancel</Trans>
+              </CustomButton>
+              <Button
+                size={desktop ? "medium" : "large"}
+                variant="primary"
+                type="submit"
+                className={classes.okButton}
+                loading={creatingFolder}
+              >
+                {desktop ? <Trans>OK</Trans> : <Trans>Create</Trans>}
+              </Button>
+            </Grid>
+          </div>
+        </Form>
+      </Formik>
+    </CustomModal>
+  )
+}
+
+export default CreateFolderModal