18169: Post review changes, Cypress tests added
[arvados-workbench2.git] / src / components / file-upload / file-upload.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import classnames from 'classnames';
7 import {
8     Grid,
9     StyleRulesCallback,
10     Table, TableBody, TableCell, TableHead, TableRow,
11     Typography,
12     WithStyles,
13     IconButton
14 } from '@material-ui/core';
15 import { withStyles } from '@material-ui/core';
16 import Dropzone from 'react-dropzone';
17 import { CloudUploadIcon, RemoveIcon } from "../icon/icon";
18 import { formatFileSize, formatProgress, formatUploadSpeed } from "common/formatters";
19 import { UploadFile } from 'store/file-uploader/file-uploader-actions';
20
21 type CssRules = "root" | "dropzone" | "dropzoneWrapper" | "container" | "uploadIcon"
22     | "dropzoneBorder" | "dropzoneBorderLeft" | "dropzoneBorderRight" | "dropzoneBorderTop" | "dropzoneBorderBottom"
23     | "dropzoneBorderHorzActive" | "dropzoneBorderVertActive" | "deleteButton" | "deleteButtonDisabled" | "deleteIcon";
24
25 const styles: StyleRulesCallback<CssRules> = theme => ({
26     root: {
27     },
28     dropzone: {
29         width: "100%",
30         height: "100%",
31         overflow: "auto"
32     },
33     dropzoneWrapper: {
34         width: "100%",
35         height: "200px",
36         position: "relative",
37         border: "1px solid rgba(0, 0, 0, 0.42)"
38     },
39     dropzoneBorder: {
40         content: "",
41         position: "absolute",
42         transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
43         pointerEvents: "none",
44         backgroundColor: "#6a1b9a"
45     },
46     dropzoneBorderLeft: {
47         left: -1,
48         top: -1,
49         bottom: -1,
50         width: 2,
51         transform: "scaleY(0)",
52     },
53     dropzoneBorderRight: {
54         right: -1,
55         top: -1,
56         bottom: -1,
57         width: 2,
58         transform: "scaleY(0)",
59     },
60     dropzoneBorderTop: {
61         left: 0,
62         right: 0,
63         top: -1,
64         height: 2,
65         transform: "scaleX(0)",
66     },
67     dropzoneBorderBottom: {
68         left: 0,
69         right: 0,
70         bottom: -1,
71         height: 2,
72         transform: "scaleX(0)",
73     },
74     dropzoneBorderHorzActive: {
75         transform: "scaleY(1)"
76     },
77     dropzoneBorderVertActive: {
78         transform: "scaleX(1)"
79     },
80     container: {
81         height: "100%"
82     },
83     uploadIcon: {
84         verticalAlign: "middle"
85     },
86     deleteButton: {
87         cursor: "pointer"
88     },
89     deleteButtonDisabled: {
90         cursor: "not-allowed"
91     },
92     deleteIcon: {
93         marginLeft: "-6px"
94     }
95 });
96
97 interface FileUploadPropsData {
98     files: UploadFile[];
99     disabled: boolean;
100     onDrop: (files: File[]) => void;
101     onDelete: (file: UploadFile) => void;
102 }
103
104 interface FileUploadState {
105     focused: boolean;
106 }
107
108 export type FileUploadProps = FileUploadPropsData & WithStyles<CssRules>;
109
110 export const FileUpload = withStyles(styles)(
111     class extends React.Component<FileUploadProps, FileUploadState> {
112         constructor(props: FileUploadProps) {
113             super(props);
114             this.state = {
115                 focused: false
116             };
117         }
118         onDelete = (event: React.MouseEvent<HTMLTableCellElement>, file: UploadFile): void => {
119             const { onDelete, disabled } = this.props;
120
121             event.stopPropagation();
122
123             if (!disabled) {
124                 onDelete(file);
125             }
126         }
127         render() {
128             const { classes, onDrop, disabled, files } = this.props;
129             return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
130                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
131                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
132                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
133                 <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
134                 <Dropzone className={classes.dropzone}
135                     onDrop={files => onDrop(files)}
136                     onClick={() => {
137                         const el = document.getElementsByClassName("file-upload-dropzone")[0];
138                         const inputs = el.getElementsByTagName("input");
139                         if (inputs.length > 0) {
140                             inputs[0].focus();
141                         }
142                     }}
143                     data-cy="drag-and-drop"
144                     disabled={disabled}
145                     inputProps={{
146                         onFocus: () => {
147                             this.setState({
148                                 focused: true
149                             });
150                         },
151                         onBlur: () => {
152                             this.setState({
153                                 focused: false
154                             });
155                         }
156                     }}>
157                     {files.length === 0 &&
158                         <Grid container justify="center" alignItems="center" className={classes.container}>
159                             <Grid item component={"span"}>
160                                 <Typography variant='subtitle1'>
161                                     <CloudUploadIcon className={classes.uploadIcon} /> Drag and drop data or click to browse
162                             </Typography>
163                             </Grid>
164                         </Grid>}
165                     {files.length > 0 &&
166                         <Table style={{ width: "100%" }}>
167                             <TableHead>
168                                 <TableRow>
169                                     <TableCell>File name</TableCell>
170                                     <TableCell>File size</TableCell>
171                                     <TableCell>Upload speed</TableCell>
172                                     <TableCell>Upload progress</TableCell>
173                                     <TableCell>Delete</TableCell>
174                                 </TableRow>
175                             </TableHead>
176                             <TableBody>
177                                 {files.map(f =>
178                                     <TableRow key={f.id}>
179                                         <TableCell>{f.file.name}</TableCell>
180                                         <TableCell>{formatFileSize(f.file.size)}</TableCell>
181                                         <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
182                                         <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
183                                         <TableCell>
184                                             <IconButton
185                                                 aria-label="Remove"
186                                                 onClick={(event: React.MouseEvent<HTMLTableCellElement>) => this.onDelete(event, f)}
187                                                 className={disabled ? classnames(classes.deleteButtonDisabled, classes.deleteIcon) : classnames(classes.deleteButton, classes.deleteIcon)}
188                                             >
189                                                 <RemoveIcon />
190                                             </IconButton>
191                                         </TableCell>
192                                     </TableRow>
193                                 )}
194                             </TableBody>
195                         </Table>
196                     }
197                 </Dropzone>
198             </div>;
199         }
200     }
201 );