Skip to content

Commit d1d3c96

Browse files
bexsoftBenjamin Perez
bexsoft
and
Benjamin Perez
authored
Added Upload Files menu (#1447)
Signed-off-by: Benjamin Perez <[email protected]> Co-authored-by: Benjamin Perez <[email protected]>
1 parent 2d975eb commit d1d3c96

File tree

2 files changed

+207
-108
lines changed

2 files changed

+207
-108
lines changed

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

Lines changed: 89 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,9 @@ import SearchBox from "../../../../Common/SearchBox";
8989

9090
import withSuspense from "../../../../Common/Components/withSuspense";
9191
import { displayName } from "./utils";
92-
import { DownloadIcon, UploadFolderIcon } from "../../../../../../icons";
92+
import { DownloadIcon } from "../../../../../../icons";
9393
import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
94+
import UploadFilesButton from "../../UploadFilesButton";
9495

9596
const AddFolderIcon = React.lazy(
9697
() => import("../../../../../../icons/AddFolderIcon")
@@ -104,9 +105,6 @@ const FolderIcon = React.lazy(
104105
const RefreshIcon = React.lazy(
105106
() => import("../../../../../../icons/RefreshIcon")
106107
);
107-
const UploadIcon = React.lazy(
108-
() => import("../../../../../../icons/UploadIcon")
109-
);
110108

111109
const DeleteIcon = React.lazy(
112110
() => import("../../../../../../icons/DeleteIcon")
@@ -791,7 +789,6 @@ const ListObjects = ({
791789

792790
xhr.onerror = () => {
793791
setSnackBarMessage(errorMessage);
794-
console.log("GONNA REJECT");
795792
reject(errorMessage);
796793
};
797794
xhr.onloadend = () => {
@@ -812,10 +809,10 @@ const ListObjects = ({
812809
if (nextFile) {
813810
uploadPromise(nextFile!)
814811
.then(() => {
815-
console.log("done uploading file!");
812+
console.info("done uploading file");
816813
})
817814
.catch((err) => {
818-
console.log("error uploading file!", err);
815+
console.error("error uploading file,", err);
819816
});
820817
}
821818
}
@@ -1161,113 +1158,34 @@ const ListObjects = ({
11611158
scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
11621159
errorProps={{ disabled: true }}
11631160
>
1164-
<RBIconButton
1165-
tooltip={"Choose or create a new path"}
1166-
onClick={() => {
1167-
setCreateFolderOpen(true);
1168-
}}
1169-
text={""}
1170-
icon={<AddFolderIcon />}
1171-
color="primary"
1172-
disabled={rewindEnabled}
1173-
variant={"outlined"}
1174-
/>
1175-
</SecureComponent>
1176-
<SecureComponent
1177-
resource={bucketName}
1178-
scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
1179-
errorProps={{ disabled: true }}
1180-
>
1181-
<RBIconButton
1182-
tooltip={"Upload file"}
1183-
onClick={() => {
1161+
<UploadFilesButton
1162+
uploadFileFunction={(closeMenu) => {
11841163
if (fileUpload && fileUpload.current) {
11851164
fileUpload.current.click();
11861165
}
1166+
closeMenu();
1167+
}}
1168+
uploadFolderFunction={(closeMenu) => {
1169+
if (folderUpload && folderUpload.current) {
1170+
folderUpload.current.click();
1171+
}
1172+
closeMenu();
11871173
}}
1188-
text={""}
1189-
icon={<UploadIcon />}
1190-
color="primary"
1191-
disabled={rewindEnabled}
1192-
variant={"outlined"}
11931174
/>
1194-
</SecureComponent>
1195-
<input
1196-
type="file"
1197-
multiple
1198-
onChange={handleUploadButton}
1199-
style={{ display: "none" }}
1200-
ref={fileUpload}
1201-
/>
1202-
<SecureComponent
1203-
resource={bucketName}
1204-
scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
1205-
errorProps={{ disabled: true }}
1206-
>
1207-
<Fragment>
1208-
<RBIconButton
1209-
tooltip={"Upload folder"}
1210-
onClick={() => {
1211-
if (folderUpload && folderUpload.current) {
1212-
folderUpload.current.click();
1213-
}
1214-
}}
1215-
text={""}
1216-
icon={<UploadFolderIcon />}
1217-
color="primary"
1218-
disabled={rewindEnabled}
1219-
variant={"outlined"}
1220-
/>
1221-
<input
1222-
type="file"
1223-
multiple
1224-
onChange={handleUploadButton}
1225-
style={{ display: "none" }}
1226-
ref={folderUpload}
1227-
/>
1228-
</Fragment>
1229-
</SecureComponent>
12301175

1231-
<SecureComponent
1232-
resource={bucketName}
1233-
scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
1234-
errorProps={{ disabled: true }}
1235-
>
1236-
<Badge
1237-
badgeContent=" "
1238-
color="secondary"
1239-
variant="dot"
1240-
invisible={!rewindEnabled}
1241-
className={classes.badgeOverlap}
1242-
>
1243-
<RBIconButton
1244-
tooltip={"Rewind"}
1245-
onClick={() => {
1246-
setRewindSelect(true);
1247-
}}
1248-
text={""}
1249-
icon={<HistoryIcon />}
1250-
color="primary"
1251-
disabled={!isVersioned}
1252-
variant={"outlined"}
1253-
/>
1254-
</Badge>
1255-
</SecureComponent>
1256-
<SecureComponent
1257-
scopes={[IAM_SCOPES.S3_LIST_BUCKET]}
1258-
resource={bucketName}
1259-
errorProps={{ disabled: true }}
1260-
>
1261-
<RBIconButton
1262-
tooltip={"Refresh list"}
1263-
onClick={() => {
1264-
setLoading(true);
1265-
}}
1266-
text={""}
1267-
icon={<RefreshIcon />}
1268-
color="primary"
1269-
disabled={rewindEnabled}
1270-
variant={"contained"}
1176+
<input
1177+
type="file"
1178+
multiple
1179+
onChange={handleUploadButton}
1180+
style={{ display: "none" }}
1181+
ref={fileUpload}
1182+
/>
1183+
<input
1184+
type="file"
1185+
multiple
1186+
onChange={handleUploadButton}
1187+
style={{ display: "none" }}
1188+
ref={folderUpload}
12711189
/>
12721190
</SecureComponent>
12731191
</Fragment>
@@ -1315,6 +1233,69 @@ const ListObjects = ({
13151233
/>
13161234
</div>
13171235
</Grid>
1236+
<Grid item xs={12}>
1237+
<Fragment>
1238+
<SecureComponent
1239+
resource={bucketName}
1240+
scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
1241+
errorProps={{ disabled: true }}
1242+
>
1243+
<RBIconButton
1244+
tooltip={"Choose or create a new path"}
1245+
onClick={() => {
1246+
setCreateFolderOpen(true);
1247+
}}
1248+
text={""}
1249+
icon={<AddFolderIcon />}
1250+
color="primary"
1251+
disabled={rewindEnabled}
1252+
variant={"outlined"}
1253+
/>
1254+
</SecureComponent>
1255+
<SecureComponent
1256+
resource={bucketName}
1257+
scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
1258+
errorProps={{ disabled: true }}
1259+
>
1260+
<Badge
1261+
badgeContent=" "
1262+
color="secondary"
1263+
variant="dot"
1264+
invisible={!rewindEnabled}
1265+
className={classes.badgeOverlap}
1266+
>
1267+
<RBIconButton
1268+
tooltip={"Rewind"}
1269+
onClick={() => {
1270+
setRewindSelect(true);
1271+
}}
1272+
text={""}
1273+
icon={<HistoryIcon />}
1274+
color="primary"
1275+
disabled={!isVersioned}
1276+
variant={"outlined"}
1277+
/>
1278+
</Badge>
1279+
</SecureComponent>
1280+
<SecureComponent
1281+
scopes={[IAM_SCOPES.S3_LIST_BUCKET]}
1282+
resource={bucketName}
1283+
errorProps={{ disabled: true }}
1284+
>
1285+
<RBIconButton
1286+
tooltip={"Refresh list"}
1287+
onClick={() => {
1288+
setLoading(true);
1289+
}}
1290+
text={""}
1291+
icon={<RefreshIcon />}
1292+
color="primary"
1293+
disabled={rewindEnabled}
1294+
variant={"contained"}
1295+
/>
1296+
</SecureComponent>
1297+
</Fragment>
1298+
</Grid>
13181299
<Grid item xs={12}>
13191300
<br />
13201301
</Grid>

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2022 MinIO, Inc.
3+
//
4+
// This program is free software: you can redistribute it and/or modify
5+
// it under the terms of the GNU Affero General Public License as published by
6+
// the Free Software Foundation, either version 3 of the License, or
7+
// (at your option) any later version.
8+
//
9+
// This program is distributed in the hope that it will be useful,
10+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
// GNU Affero General Public License for more details.
13+
//
14+
// You should have received a copy of the GNU Affero General Public License
15+
// along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
17+
import React, { Fragment } from "react";
18+
import { Theme } from "@mui/material/styles";
19+
import { Menu, MenuItem } from "@mui/material";
20+
import createStyles from "@mui/styles/createStyles";
21+
import withStyles from "@mui/styles/withStyles";
22+
import ListItemText from "@mui/material/ListItemText";
23+
import ListItemIcon from "@mui/material/ListItemIcon";
24+
import { UploadFolderIcon, UploadIcon } from "../../../../icons";
25+
import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
26+
27+
interface IUploadFilesButton {
28+
buttonDisabled?: boolean;
29+
uploadFileFunction: (closeFunction: () => void) => void;
30+
uploadFolderFunction: (closeFunction: () => void) => void;
31+
classes: any;
32+
}
33+
34+
const styles = (theme: Theme) =>
35+
createStyles({
36+
listUploadIcons: {
37+
"& .min-icon": {
38+
width: 18,
39+
fill: "rgba(0,0,0,0.87)"
40+
},
41+
},
42+
});
43+
44+
const UploadFilesButton = ({
45+
buttonDisabled = false,
46+
uploadFileFunction,
47+
uploadFolderFunction,
48+
classes,
49+
}: IUploadFilesButton) => {
50+
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
51+
const openUploadMenu = Boolean(anchorEl);
52+
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
53+
setAnchorEl(event.currentTarget);
54+
};
55+
const handleCloseUpload = () => {
56+
setAnchorEl(null);
57+
};
58+
59+
return (
60+
<Fragment>
61+
<RBIconButton
62+
id={"upload-main"}
63+
tooltip={"Upload Files"}
64+
aria-controls={`upload-main-menu`}
65+
aria-haspopup="true"
66+
aria-expanded={openUploadMenu ? "true" : undefined}
67+
onClick={handleClick}
68+
text={"Upload Files"}
69+
icon={<UploadIcon />}
70+
color="primary"
71+
variant={"contained"}
72+
disabled={buttonDisabled}
73+
/>
74+
<Menu
75+
id={`upload-main-menu`}
76+
aria-labelledby={`upload-main`}
77+
anchorEl={anchorEl}
78+
open={openUploadMenu}
79+
onClose={() => {
80+
handleCloseUpload();
81+
}}
82+
anchorOrigin={{
83+
vertical: "bottom",
84+
horizontal: "center",
85+
}}
86+
transformOrigin={{
87+
vertical: "top",
88+
horizontal: "center",
89+
}}
90+
>
91+
<MenuItem
92+
onClick={() => {
93+
uploadFileFunction(handleCloseUpload);
94+
}}
95+
disabled={buttonDisabled}
96+
>
97+
<ListItemIcon className={classes.listUploadIcons}>
98+
<UploadIcon />
99+
</ListItemIcon>{" "}
100+
<ListItemText>Upload File</ListItemText>
101+
</MenuItem>
102+
<MenuItem
103+
onClick={() => {
104+
uploadFolderFunction(handleCloseUpload);
105+
}}
106+
disabled={buttonDisabled}
107+
>
108+
<ListItemIcon className={classes.listUploadIcons}>
109+
<UploadFolderIcon />
110+
</ListItemIcon>{" "}
111+
<ListItemText>Upload Folder</ListItemText>
112+
</MenuItem>
113+
</Menu>
114+
</Fragment>
115+
);
116+
};
117+
118+
export default withStyles(styles)(UploadFilesButton);

0 commit comments

Comments
 (0)