Added Upload Files menu (#1447)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -89,8 +89,9 @@ import SearchBox from "../../../../Common/SearchBox";
 
 import withSuspense from "../../../../Common/Components/withSuspense";
 import { displayName } from "./utils";
-import { DownloadIcon, UploadFolderIcon } from "../../../../../../icons";
+import { DownloadIcon } from "../../../../../../icons";
 import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
+import UploadFilesButton from "../../UploadFilesButton";
 
 const AddFolderIcon = React.lazy(
   () => import("../../../../../../icons/AddFolderIcon")
@@ -104,9 +105,6 @@ const FolderIcon = React.lazy(
 const RefreshIcon = React.lazy(
   () => import("../../../../../../icons/RefreshIcon")
 );
-const UploadIcon = React.lazy(
-  () => import("../../../../../../icons/UploadIcon")
-);
 
 const DeleteIcon = React.lazy(
   () => import("../../../../../../icons/DeleteIcon")
@@ -791,7 +789,6 @@ const ListObjects = ({
 
               xhr.onerror = () => {
                 setSnackBarMessage(errorMessage);
-                console.log("GONNA REJECT");
                 reject(errorMessage);
               };
               xhr.onloadend = () => {
@@ -812,10 +809,10 @@ const ListObjects = ({
           if (nextFile) {
             uploadPromise(nextFile!)
               .then(() => {
-                console.log("done uploading file!");
+                console.info("done uploading file");
               })
               .catch((err) => {
-                console.log("error uploading file!", err);
+                console.error("error uploading file,", err);
               });
           }
         }
@@ -1161,113 +1158,34 @@ const ListObjects = ({
                   scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
                   errorProps={{ disabled: true }}
                 >
-                  <RBIconButton
-                    tooltip={"Choose or create a new path"}
-                    onClick={() => {
-                      setCreateFolderOpen(true);
-                    }}
-                    text={""}
-                    icon={<AddFolderIcon />}
-                    color="primary"
-                    disabled={rewindEnabled}
-                    variant={"outlined"}
-                  />
-                </SecureComponent>
-                <SecureComponent
-                  resource={bucketName}
-                  scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
-                  errorProps={{ disabled: true }}
-                >
-                  <RBIconButton
-                    tooltip={"Upload file"}
-                    onClick={() => {
+                  <UploadFilesButton
+                    uploadFileFunction={(closeMenu) => {
                       if (fileUpload && fileUpload.current) {
                         fileUpload.current.click();
                       }
+                      closeMenu();
+                    }}
+                    uploadFolderFunction={(closeMenu) => {
+                      if (folderUpload && folderUpload.current) {
+                        folderUpload.current.click();
+                      }
+                      closeMenu();
                     }}
-                    text={""}
-                    icon={<UploadIcon />}
-                    color="primary"
-                    disabled={rewindEnabled}
-                    variant={"outlined"}
                   />
-                </SecureComponent>
-                <input
-                  type="file"
-                  multiple
-                  onChange={handleUploadButton}
-                  style={{ display: "none" }}
-                  ref={fileUpload}
-                />
-                <SecureComponent
-                  resource={bucketName}
-                  scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
-                  errorProps={{ disabled: true }}
-                >
-                  <Fragment>
-                    <RBIconButton
-                      tooltip={"Upload folder"}
-                      onClick={() => {
-                        if (folderUpload && folderUpload.current) {
-                          folderUpload.current.click();
-                        }
-                      }}
-                      text={""}
-                      icon={<UploadFolderIcon />}
-                      color="primary"
-                      disabled={rewindEnabled}
-                      variant={"outlined"}
-                    />
-                    <input
-                      type="file"
-                      multiple
-                      onChange={handleUploadButton}
-                      style={{ display: "none" }}
-                      ref={folderUpload}
-                    />
-                  </Fragment>
-                </SecureComponent>
 
-                <SecureComponent
-                  resource={bucketName}
-                  scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
-                  errorProps={{ disabled: true }}
-                >
-                  <Badge
-                    badgeContent=" "
-                    color="secondary"
-                    variant="dot"
-                    invisible={!rewindEnabled}
-                    className={classes.badgeOverlap}
-                  >
-                    <RBIconButton
-                      tooltip={"Rewind"}
-                      onClick={() => {
-                        setRewindSelect(true);
-                      }}
-                      text={""}
-                      icon={<HistoryIcon />}
-                      color="primary"
-                      disabled={!isVersioned}
-                      variant={"outlined"}
-                    />
-                  </Badge>
-                </SecureComponent>
-                <SecureComponent
-                  scopes={[IAM_SCOPES.S3_LIST_BUCKET]}
-                  resource={bucketName}
-                  errorProps={{ disabled: true }}
-                >
-                  <RBIconButton
-                    tooltip={"Refresh list"}
-                    onClick={() => {
-                      setLoading(true);
-                    }}
-                    text={""}
-                    icon={<RefreshIcon />}
-                    color="primary"
-                    disabled={rewindEnabled}
-                    variant={"contained"}
+                  <input
+                    type="file"
+                    multiple
+                    onChange={handleUploadButton}
+                    style={{ display: "none" }}
+                    ref={fileUpload}
+                  />
+                  <input
+                    type="file"
+                    multiple
+                    onChange={handleUploadButton}
+                    style={{ display: "none" }}
+                    ref={folderUpload}
                   />
                 </SecureComponent>
               </Fragment>
@@ -1315,6 +1233,69 @@ const ListObjects = ({
             />
           </div>
         </Grid>
+        <Grid item xs={12}>
+          <Fragment>
+            <SecureComponent
+              resource={bucketName}
+              scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
+              errorProps={{ disabled: true }}
+            >
+              <RBIconButton
+                tooltip={"Choose or create a new path"}
+                onClick={() => {
+                  setCreateFolderOpen(true);
+                }}
+                text={""}
+                icon={<AddFolderIcon />}
+                color="primary"
+                disabled={rewindEnabled}
+                variant={"outlined"}
+              />
+            </SecureComponent>
+            <SecureComponent
+              resource={bucketName}
+              scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
+              errorProps={{ disabled: true }}
+            >
+              <Badge
+                badgeContent=" "
+                color="secondary"
+                variant="dot"
+                invisible={!rewindEnabled}
+                className={classes.badgeOverlap}
+              >
+                <RBIconButton
+                  tooltip={"Rewind"}
+                  onClick={() => {
+                    setRewindSelect(true);
+                  }}
+                  text={""}
+                  icon={<HistoryIcon />}
+                  color="primary"
+                  disabled={!isVersioned}
+                  variant={"outlined"}
+                />
+              </Badge>
+            </SecureComponent>
+            <SecureComponent
+              scopes={[IAM_SCOPES.S3_LIST_BUCKET]}
+              resource={bucketName}
+              errorProps={{ disabled: true }}
+            >
+              <RBIconButton
+                tooltip={"Refresh list"}
+                onClick={() => {
+                  setLoading(true);
+                }}
+                text={""}
+                icon={<RefreshIcon />}
+                color="primary"
+                disabled={rewindEnabled}
+                variant={"contained"}
+              />
+            </SecureComponent>
+          </Fragment>
+        </Grid>
         <Grid item xs={12}>
           <br />
         </Grid>

portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx

@@ -0,0 +1,118 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Fragment } from "react";
+import { Theme } from "@mui/material/styles";
+import { Menu, MenuItem } from "@mui/material";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import { UploadFolderIcon, UploadIcon } from "../../../../icons";
+import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
+
+interface IUploadFilesButton {
+  buttonDisabled?: boolean;
+  uploadFileFunction: (closeFunction: () => void) => void;
+  uploadFolderFunction: (closeFunction: () => void) => void;
+  classes: any;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    listUploadIcons: {
+      "& .min-icon": {
+        width: 18,
+        fill: "rgba(0,0,0,0.87)"
+      },
+    },
+  });
+
+const UploadFilesButton = ({
+  buttonDisabled = false,
+  uploadFileFunction,
+  uploadFolderFunction,
+  classes,
+}: IUploadFilesButton) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const openUploadMenu = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCloseUpload = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Fragment>
+      <RBIconButton
+        id={"upload-main"}
+        tooltip={"Upload Files"}
+        aria-controls={`upload-main-menu`}
+        aria-haspopup="true"
+        aria-expanded={openUploadMenu ? "true" : undefined}
+        onClick={handleClick}
+        text={"Upload Files"}
+        icon={<UploadIcon />}
+        color="primary"
+        variant={"contained"}
+        disabled={buttonDisabled}
+      />
+      <Menu
+        id={`upload-main-menu`}
+        aria-labelledby={`upload-main`}
+        anchorEl={anchorEl}
+        open={openUploadMenu}
+        onClose={() => {
+          handleCloseUpload();
+        }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center",
+        }}
+      >
+        <MenuItem
+          onClick={() => {
+            uploadFileFunction(handleCloseUpload);
+          }}
+          disabled={buttonDisabled}
+        >
+          <ListItemIcon className={classes.listUploadIcons}>
+            <UploadIcon />
+          </ListItemIcon>{" "}
+          <ListItemText>Upload File</ListItemText>
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            uploadFolderFunction(handleCloseUpload);
+          }}
+          disabled={buttonDisabled}
+        >
+          <ListItemIcon className={classes.listUploadIcons}>
+            <UploadFolderIcon />
+          </ListItemIcon>{" "}
+          <ListItemText>Upload Folder</ListItemText>
+        </MenuItem>
+      </Menu>
+    </Fragment>
+  );
+};
+
+export default withStyles(styles)(UploadFilesButton);