From d1d3c96777bf66da81e4fbfabfd6dd499ab82822 Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Mon, 24 Jan 2022 17:53:47 -0700 Subject: [PATCH] Added Upload Files menu (#1447) Signed-off-by: Benjamin Perez Co-authored-by: Benjamin Perez --- .../Objects/ListObjects/ListObjects.tsx | 197 ++++++++---------- .../Buckets/ListBuckets/UploadFilesButton.tsx | 118 +++++++++++ 2 files changed, 207 insertions(+), 108 deletions(-) create mode 100644 portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx index 595391eed..51a1bc165 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx +++ b/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 }} > - { - setCreateFolderOpen(true); - }} - text={""} - icon={} - color="primary" - disabled={rewindEnabled} - variant={"outlined"} - /> - - - { + { if (fileUpload && fileUpload.current) { fileUpload.current.click(); } + closeMenu(); + }} + uploadFolderFunction={(closeMenu) => { + if (folderUpload && folderUpload.current) { + folderUpload.current.click(); + } + closeMenu(); }} - text={""} - icon={} - color="primary" - disabled={rewindEnabled} - variant={"outlined"} /> - - - - - { - if (folderUpload && folderUpload.current) { - folderUpload.current.click(); - } - }} - text={""} - icon={} - color="primary" - disabled={rewindEnabled} - variant={"outlined"} - /> - - - - - - { - setRewindSelect(true); - }} - text={""} - icon={} - color="primary" - disabled={!isVersioned} - variant={"outlined"} - /> - - - - { - setLoading(true); - }} - text={""} - icon={} - color="primary" - disabled={rewindEnabled} - variant={"contained"} + + @@ -1315,6 +1233,69 @@ const ListObjects = ({ /> + + + + { + setCreateFolderOpen(true); + }} + text={""} + icon={} + color="primary" + disabled={rewindEnabled} + variant={"outlined"} + /> + + + + { + setRewindSelect(true); + }} + text={""} + icon={} + color="primary" + disabled={!isVersioned} + variant={"outlined"} + /> + + + + { + setLoading(true); + }} + text={""} + icon={} + color="primary" + disabled={rewindEnabled} + variant={"contained"} + /> + + +
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx new file mode 100644 index 000000000..549f66525 --- /dev/null +++ b/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 . + +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); + const openUploadMenu = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleCloseUpload = () => { + setAnchorEl(null); + }; + + return ( + + } + color="primary" + variant={"contained"} + disabled={buttonDisabled} + /> + { + handleCloseUpload(); + }} + anchorOrigin={{ + vertical: "bottom", + horizontal: "center", + }} + transformOrigin={{ + vertical: "top", + horizontal: "center", + }} + > + { + uploadFileFunction(handleCloseUpload); + }} + disabled={buttonDisabled} + > + + + {" "} + Upload File + + { + uploadFolderFunction(handleCloseUpload); + }} + disabled={buttonDisabled} + > + + + {" "} + Upload Folder + + + + ); +}; + +export default withStyles(styles)(UploadFilesButton);