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';
17 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "createProgress" | "dialogActions";
19 const styles: StyleRulesCallback<CssRules> = theme => ({
21 marginLeft: theme.spacing.unit
24 marginLeft: theme.spacing.unit,
29 flexDirection: "column",
32 marginBottom: theme.spacing.unit * 3
40 marginBottom: theme.spacing.unit * 3
43 interface DialogCollectionCreateProps {
45 handleClose: () => void;
46 onSubmit: (data: { name: string, description: string }) => void;
53 interface TextFieldProps {
55 floatinglabeltext: string;
61 export const DialogCollectionCreate = compose(
62 reduxForm({ form: 'collectionCreateDialog' }),
64 class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & WithStyles<CssRules>> {
66 const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
74 disableBackdropClick={true}
75 disableEscapeKeyDown={true}>
76 <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
77 <DialogTitle id="form-dialog-title">Create a collection</DialogTitle>
78 <DialogContent className={classes.formContainer}>
81 component={this.renderTextField}
82 floatinglabeltext="Collection Name"
83 validate={COLLECTION_NAME_VALIDATION}
84 className={classes.textField}
85 label="Collection Name"/>
86 <Field name="description"
88 component={this.renderTextField}
89 floatinglabeltext="Description - optional"
90 validate={COLLECTION_DESCRIPTION_VALIDATION}
91 className={classes.textField}
92 label="Description - optional"/>
94 <DialogActions className={classes.dialogActions}>
95 <Button onClick={handleClose} className={classes.button} color="primary"
96 disabled={submitting}>CANCEL</Button>
98 className={classes.lastButton}
100 disabled={invalid || submitting || pristine}
104 {submitting && <CircularProgress size={20} className={classes.createProgress}/>}
111 renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
113 helperText={touched && error}
115 className={this.props.classes.textField}
116 error={touched && !!error}