1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { reduxForm, Field } from 'redux-form';
7 import { compose } from 'redux';
8 import TextField from '@material-ui/core/TextField';
9 import Dialog from '@material-ui/core/Dialog';
10 import DialogActions from '@material-ui/core/DialogActions';
11 import DialogContent from '@material-ui/core/DialogContent';
12 import DialogTitle from '@material-ui/core/DialogTitle';
13 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
15 import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '../../validators/create-project/create-project-validator';
16 import { FileUpload } from "../../components/file-upload/file-upload";
18 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "createProgress" | "dialogActions";
20 const styles: StyleRulesCallback<CssRules> = theme => ({
22 marginLeft: theme.spacing.unit
25 marginLeft: theme.spacing.unit,
30 flexDirection: "column",
33 marginBottom: theme.spacing.unit * 3
41 marginBottom: theme.spacing.unit * 3
44 interface DialogCollectionCreateProps {
46 handleClose: () => void;
47 onSubmit: (data: { name: string, description: string }) => void;
54 interface TextFieldProps {
56 floatinglabeltext: string;
62 export const DialogCollectionCreate = compose(
63 reduxForm({ form: 'collectionCreateDialog' }),
65 class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & WithStyles<CssRules>> {
67 const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
75 disableBackdropClick={true}
76 disableEscapeKeyDown={true}>
77 <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
78 <DialogTitle id="form-dialog-title">Create a collection</DialogTitle>
79 <DialogContent className={classes.formContainer}>
82 component={this.renderTextField}
83 floatinglabeltext="Collection Name"
84 validate={COLLECTION_NAME_VALIDATION}
85 className={classes.textField}
86 label="Collection Name"/>
87 <Field name="description"
89 component={this.renderTextField}
90 floatinglabeltext="Description - optional"
91 validate={COLLECTION_DESCRIPTION_VALIDATION}
92 className={classes.textField}
93 label="Description - optional"/>
96 <DialogActions className={classes.dialogActions}>
97 <Button onClick={handleClose} className={classes.button} color="primary"
98 disabled={submitting}>CANCEL</Button>
100 className={classes.lastButton}
102 disabled={invalid || submitting || pristine}
106 {submitting && <CircularProgress size={20} className={classes.createProgress}/>}
113 renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
115 helperText={touched && error}
117 className={this.props.classes.textField}
118 error={touched && !!error}