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" | "dialog" | "dialogTitle" | "createProgress" | "dialogActions";
19 const styles: StyleRulesCallback<CssRules> = theme => ({
21 marginLeft: theme.spacing.unit
24 marginLeft: theme.spacing.unit,
29 flexDirection: "column",
51 interface DialogCollectionCreateProps {
53 handleClose: () => void;
54 onSubmit: (data: { name: string, description: string }) => void;
61 interface TextFieldProps {
63 floatinglabeltext: string;
69 export const DialogCollectionCreate = compose(
70 reduxForm({ form: 'collectionCreateDialog' }),
72 class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & WithStyles<CssRules>> {
74 const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
80 disableBackdropClick={true}
81 disableEscapeKeyDown={true}>
82 <div className={classes.dialog}>
83 <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
84 <DialogTitle id="form-dialog-title" className={classes.dialogTitle}>Create a collection</DialogTitle>
85 <DialogContent className={classes.formContainer}>
87 component={this.renderTextField}
88 floatinglabeltext="Collection Name"
89 validate={COLLECTION_NAME_VALIDATION}
90 className={classes.textField}
91 label="Collection Name"/>
92 <Field name="description"
93 component={this.renderTextField}
94 floatinglabeltext="Description - optional"
95 validate={COLLECTION_DESCRIPTION_VALIDATION}
96 className={classes.textField}
97 label="Description - optional"/>
99 <DialogActions className={classes.dialogActions}>
100 <Button onClick={handleClose} className={classes.button} color="primary"
101 disabled={submitting}>CANCEL</Button>
102 <Button type="submit"
103 className={classes.lastButton}
105 disabled={invalid|| submitting || pristine}
109 {submitting && <CircularProgress size={20} className={classes.createProgress}/>}
117 renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
119 helperText={touched && error}
121 className={this.props.classes.textField}
122 error={touched && !!error}