[ARVADOS-WORKBENCH2] created: 1.4.1-132-g86b3f9b3
Git user
git at public.curoverse.com
Wed Nov 27 21:56:05 UTC 2019
at 86b3f9b37aaf49fdfb6b6f3f502659ed11b968be (commit)
commit 86b3f9b37aaf49fdfb6b6f3f502659ed11b968be
Author: Eric Biagiotti <ebiagiotti at veritasgenetics.com>
Date: Wed Nov 27 16:54:29 2019 -0500
15256: Simplifies file upload deleting and removes unused code
Arvados-DCO-1.1-Signed-off-by: Eric Biagiotti <ebiagiotti at veritasgenetics.com>
diff --git a/src/components/file-upload-dialog/file-upload-dialog.tsx b/src/components/file-upload-dialog/file-upload-dialog.tsx
deleted file mode 100644
index 81558493..00000000
--- a/src/components/file-upload-dialog/file-upload-dialog.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from 'react';
-import { FileUpload } from "~/components/file-upload/file-upload";
-import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core/';
-import { Button, CircularProgress } from '@material-ui/core';
-import { WithDialogProps } from '~/store/dialog/with-dialog';
-import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
-
-export interface FilesUploadDialogProps {
- files: UploadFile[];
- uploading: boolean;
- onSubmit: () => void;
- onChange: (files: File[]) => void;
- onDelete: (files: File[]) => void;
-}
-
-export const FilesUploadDialog = (props: FilesUploadDialogProps & WithDialogProps<{}>) =>
- <Dialog open={props.open}
- disableBackdropClick={true}
- disableEscapeKeyDown={true}
- fullWidth={true}
- maxWidth='sm'>
- <DialogTitle>Upload data</DialogTitle>
- <DialogContent>
- <FileUpload
- files={props.files}
- disabled={props.uploading}
- onDrop={props.onChange}
- onDelete={props.onDelete}
- />
- </DialogContent>
- <DialogActions>
- <Button
- variant='text'
- color='primary'
- disabled={props.uploading}
- onClick={props.closeDialog}>
- Cancel
- </Button>
- <Button
- variant='contained'
- color='primary'
- type='submit'
- onClick={props.onSubmit}
- disabled={props.uploading}>
- {props.uploading
- ? <CircularProgress size={20} />
- : 'Upload data'}
- </Button>
- </DialogActions>
- </Dialog>;
diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index 23afc0be..f3b673c7 100644
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -98,7 +98,7 @@ interface FileUploadPropsData {
files: UploadFile[];
disabled: boolean;
onDrop: (files: File[]) => void;
- onDelete: (files: File[]) => void;
+ onDelete: (file: UploadFile) => void;
}
interface FileUploadState {
@@ -115,22 +115,22 @@ export const FileUpload = withStyles(styles)(
focused: false
};
}
- onDelete = (event: React.MouseEvent<HTMLTableCellElement>, file: any): void => {
+ onDelete = (event: React.MouseEvent<HTMLTableCellElement>, file: UploadFile): void => {
const { onDelete, disabled } = this.props;
event.stopPropagation();
if (!disabled) {
- onDelete([file]);
+ onDelete(file);
}
}
render() {
const { classes, onDrop, disabled, files } = this.props;
return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
- <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
- <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
- <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
- <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })} />
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })} />
<Dropzone className={classes.dropzone}
onDrop={files => onDrop(files)}
onClick={() => {
@@ -152,7 +152,7 @@ export const FileUpload = withStyles(styles)(
focused: false
});
}
- }}>
+ }}>
{files.length === 0 &&
<Grid container justify="center" alignItems="center" className={classes.container}>
<Grid item component={"span"}>
@@ -180,15 +180,15 @@ export const FileUpload = withStyles(styles)(
<TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
<TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
<TableCell>
- <IconButton
+ <IconButton
aria-label="Remove"
- onClick={(event: React.MouseEvent<HTMLTableCellElement>) => this.onDelete(event, f)}
+ onClick={(event: React.MouseEvent<HTMLTableCellElement>) => this.onDelete(event, f)}
className={disabled ? classnames(classes.deleteButtonDisabled, classes.deleteIcon) : classnames(classes.deleteButton, classes.deleteIcon)}
>
<RemoveIcon />
</IconButton>
</TableCell>
- </TableRow>
+ </TableRow>
)}
</TableBody>
</Table>
diff --git a/src/store/file-uploader/file-uploader-actions.ts b/src/store/file-uploader/file-uploader-actions.ts
index 5a82958d..0d2ff209 100644
--- a/src/store/file-uploader/file-uploader-actions.ts
+++ b/src/store/file-uploader/file-uploader-actions.ts
@@ -17,17 +17,13 @@ export interface UploadFile {
currentTime: number;
}
-export interface FileWithId extends File {
- id: number;
-}
-
export const fileUploaderActions = unionize({
CLEAR_UPLOAD: ofType(),
SET_UPLOAD_FILES: ofType<File[]>(),
UPDATE_UPLOAD_FILES: ofType<File[]>(),
SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>(),
START_UPLOAD: ofType(),
- DELETE_UPLOAD_FILE: ofType<FileWithId[]>(),
+ DELETE_UPLOAD_FILE: ofType<UploadFile>(),
});
export type FileUploaderAction = UnionOf<typeof fileUploaderActions>;
diff --git a/src/store/file-uploader/file-uploader-reducer.ts b/src/store/file-uploader/file-uploader-reducer.ts
index bf24505b..cadafe01 100644
--- a/src/store/file-uploader/file-uploader-reducer.ts
+++ b/src/store/file-uploader/file-uploader-reducer.ts
@@ -37,9 +37,9 @@ export const fileUploaderReducer = (state: UploaderState = initialState, action:
return uniqUpdatedState;
},
- DELETE_UPLOAD_FILE: files => {
- const idToDelete: number = files[0].id;
- const updatedState = state.filter( file => file.id !== idToDelete);
+ DELETE_UPLOAD_FILE: file => {
+ const idToDelete: number = file.id;
+ const updatedState = state.filter(file => file.id !== idToDelete);
return updatedState;
},
diff --git a/src/views-components/file-uploader/file-uploader.tsx b/src/views-components/file-uploader/file-uploader.tsx
index f14c54fe..b8017b39 100644
--- a/src/views-components/file-uploader/file-uploader.tsx
+++ b/src/views-components/file-uploader/file-uploader.tsx
@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
import { RootState } from '~/store/store';
import { FileUploadProps } from '../../components/file-upload/file-upload';
import { Dispatch } from 'redux';
-import { fileUploaderActions, getFileUploaderState, FileWithId } from '~/store/file-uploader/file-uploader-actions';
+import { fileUploaderActions, getFileUploaderState } from '~/store/file-uploader/file-uploader-actions';
import { WrappedFieldProps } from 'redux-form';
import { Typography } from '@material-ui/core';
@@ -30,7 +30,7 @@ const mapDispatchToProps = (dispatch: Dispatch, { onDrop }: FileUploaderProps):
onDrop(files);
}
},
- onDelete: files => dispatch(fileUploaderActions.DELETE_UPLOAD_FILE(files as FileWithId[])),
+ onDelete: file => dispatch(fileUploaderActions.DELETE_UPLOAD_FILE(file)),
});
export const FileUploader = connect(mapStateToProps, mapDispatchToProps)(FileUpload);
commit 938e851630e4dd0094e74313db3c2dc77296b03d
Author: mateuszrojecki <mateusz.rojecki at contractors.roche.com>
Date: Mon Jun 24 01:52:17 2019 +0200
Added removing files during upload feature
Feature #15256
Arvados-DCO-1.1-Signed-off-by: mateuszrojecki <mateusz.rojecki at contractors.roche.com>
diff --git a/src/components/file-upload-dialog/file-upload-dialog.tsx b/src/components/file-upload-dialog/file-upload-dialog.tsx
index b178cdae..81558493 100644
--- a/src/components/file-upload-dialog/file-upload-dialog.tsx
+++ b/src/components/file-upload-dialog/file-upload-dialog.tsx
@@ -14,6 +14,7 @@ export interface FilesUploadDialogProps {
uploading: boolean;
onSubmit: () => void;
onChange: (files: File[]) => void;
+ onDelete: (files: File[]) => void;
}
export const FilesUploadDialog = (props: FilesUploadDialogProps & WithDialogProps<{}>) =>
@@ -28,6 +29,7 @@ export const FilesUploadDialog = (props: FilesUploadDialogProps & WithDialogProp
files={props.files}
disabled={props.uploading}
onDrop={props.onChange}
+ onDelete={props.onDelete}
/>
</DialogContent>
<DialogActions>
diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index 64656e48..23afc0be 100644
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -9,17 +9,18 @@ import {
StyleRulesCallback,
Table, TableBody, TableCell, TableHead, TableRow,
Typography,
- WithStyles
+ WithStyles,
+ IconButton
} from '@material-ui/core';
import { withStyles } from '@material-ui/core';
import Dropzone from 'react-dropzone';
-import { CloudUploadIcon } from "../icon/icon";
+import { CloudUploadIcon, RemoveIcon } from "../icon/icon";
import { formatFileSize, formatProgress, formatUploadSpeed } from "~/common/formatters";
import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
type CssRules = "root" | "dropzone" | "dropzoneWrapper" | "container" | "uploadIcon"
| "dropzoneBorder" | "dropzoneBorderLeft" | "dropzoneBorderRight" | "dropzoneBorderTop" | "dropzoneBorderBottom"
- | "dropzoneBorderHorzActive" | "dropzoneBorderVertActive";
+ | "dropzoneBorderHorzActive" | "dropzoneBorderVertActive" | "deleteButton" | "deleteButtonDisabled" | "deleteIcon";
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
@@ -81,6 +82,15 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
},
uploadIcon: {
verticalAlign: "middle"
+ },
+ deleteButton: {
+ cursor: "pointer"
+ },
+ deleteButtonDisabled: {
+ cursor: "not-allowed"
+ },
+ deleteIcon: {
+ marginLeft: "-6px"
}
});
@@ -88,6 +98,7 @@ interface FileUploadPropsData {
files: UploadFile[];
disabled: boolean;
onDrop: (files: File[]) => void;
+ onDelete: (files: File[]) => void;
}
interface FileUploadState {
@@ -104,6 +115,15 @@ export const FileUpload = withStyles(styles)(
focused: false
};
}
+ onDelete = (event: React.MouseEvent<HTMLTableCellElement>, file: any): void => {
+ const { onDelete, disabled } = this.props;
+
+ event.stopPropagation();
+
+ if (!disabled) {
+ onDelete([file]);
+ }
+ }
render() {
const { classes, onDrop, disabled, files } = this.props;
return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
@@ -149,6 +169,7 @@ export const FileUpload = withStyles(styles)(
<TableCell>File size</TableCell>
<TableCell>Upload speed</TableCell>
<TableCell>Upload progress</TableCell>
+ <TableCell>Delete</TableCell>
</TableRow>
</TableHead>
<TableBody>
@@ -158,7 +179,16 @@ export const FileUpload = withStyles(styles)(
<TableCell>{formatFileSize(f.file.size)}</TableCell>
<TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
<TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
- </TableRow>
+ <TableCell>
+ <IconButton
+ aria-label="Remove"
+ onClick={(event: React.MouseEvent<HTMLTableCellElement>) => this.onDelete(event, f)}
+ className={disabled ? classnames(classes.deleteButtonDisabled, classes.deleteIcon) : classnames(classes.deleteButton, classes.deleteIcon)}
+ >
+ <RemoveIcon />
+ </IconButton>
+ </TableCell>
+ </TableRow>
)}
</TableBody>
</Table>
diff --git a/src/store/file-uploader/file-uploader-actions.ts b/src/store/file-uploader/file-uploader-actions.ts
index f4a30a23..5a82958d 100644
--- a/src/store/file-uploader/file-uploader-actions.ts
+++ b/src/store/file-uploader/file-uploader-actions.ts
@@ -17,12 +17,17 @@ export interface UploadFile {
currentTime: number;
}
+export interface FileWithId extends File {
+ id: number;
+}
+
export const fileUploaderActions = unionize({
CLEAR_UPLOAD: ofType(),
SET_UPLOAD_FILES: ofType<File[]>(),
UPDATE_UPLOAD_FILES: ofType<File[]>(),
SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>(),
START_UPLOAD: ofType(),
+ DELETE_UPLOAD_FILE: ofType<FileWithId[]>(),
});
export type FileUploaderAction = UnionOf<typeof fileUploaderActions>;
diff --git a/src/store/file-uploader/file-uploader-reducer.ts b/src/store/file-uploader/file-uploader-reducer.ts
index 9ea63131..bf24505b 100644
--- a/src/store/file-uploader/file-uploader-reducer.ts
+++ b/src/store/file-uploader/file-uploader-reducer.ts
@@ -37,6 +37,12 @@ export const fileUploaderReducer = (state: UploaderState = initialState, action:
return uniqUpdatedState;
},
+ DELETE_UPLOAD_FILE: files => {
+ const idToDelete: number = files[0].id;
+ const updatedState = state.filter( file => file.id !== idToDelete);
+
+ return updatedState;
+ },
START_UPLOAD: () => {
const startTime = Date.now();
return state.map(f => ({ ...f, startTime, prevTime: startTime }));
diff --git a/src/views-components/file-uploader/file-uploader.tsx b/src/views-components/file-uploader/file-uploader.tsx
index 83808016..f14c54fe 100644
--- a/src/views-components/file-uploader/file-uploader.tsx
+++ b/src/views-components/file-uploader/file-uploader.tsx
@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
import { RootState } from '~/store/store';
import { FileUploadProps } from '../../components/file-upload/file-upload';
import { Dispatch } from 'redux';
-import { fileUploaderActions, getFileUploaderState } from '~/store/file-uploader/file-uploader-actions';
+import { fileUploaderActions, getFileUploaderState, FileWithId } from '~/store/file-uploader/file-uploader-actions';
import { WrappedFieldProps } from 'redux-form';
import { Typography } from '@material-ui/core';
@@ -19,7 +19,7 @@ const mapStateToProps = (state: RootState, { disabled }: FileUploaderProps): Pic
files: state.fileUploader,
});
-const mapDispatchToProps = (dispatch: Dispatch, { onDrop }: FileUploaderProps): Pick<FileUploadProps, 'onDrop'> => ({
+const mapDispatchToProps = (dispatch: Dispatch, { onDrop }: FileUploaderProps): Pick<FileUploadProps, 'onDrop' | 'onDelete'> => ({
onDrop: files => {
const state = dispatch<any>(getFileUploaderState());
if (files.length > 0 && state.length === 0) {
@@ -30,6 +30,7 @@ const mapDispatchToProps = (dispatch: Dispatch, { onDrop }: FileUploaderProps):
onDrop(files);
}
},
+ onDelete: files => dispatch(fileUploaderActions.DELETE_UPLOAD_FILE(files as FileWithId[])),
});
export const FileUploader = connect(mapStateToProps, mapDispatchToProps)(FileUpload);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list