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 '~/components/text-field/text-field';
9 import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core/';
10 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
12 import { PROJECT_NAME_VALIDATION, PROJECT_DESCRIPTION_VALIDATION } from '~/validators/validators';
13 import { PROJECT_CREATE_DIALOG } from '~/store/project/project-action';
15 type CssRules = "button" | "lastButton" | "formContainer" | "dialog" | "dialogTitle" | "createProgress" | "dialogActions";
17 const styles: StyleRulesCallback<CssRules> = theme => ({
19 marginLeft: theme.spacing.unit
22 marginLeft: theme.spacing.unit,
27 flexDirection: "column",
46 interface DialogProjectProps {
48 handleClose: () => void;
49 onSubmit: (data: { name: string, description: string }) => void;
56 export const DialogProjectCreate = compose(
57 reduxForm({ form: PROJECT_CREATE_DIALOG }),
59 class DialogProjectCreate extends React.Component<DialogProjectProps & WithStyles<CssRules>> {
61 const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
67 disableBackdropClick={true}
68 disableEscapeKeyDown={true}>
69 <div className={classes.dialog}>
70 <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
71 <DialogTitle id="form-dialog-title" className={classes.dialogTitle}>Create a
73 <DialogContent className={classes.formContainer}>
76 validate={PROJECT_NAME_VALIDATION}
77 label="Project Name"/>
78 <Field name="description"
80 validate={PROJECT_DESCRIPTION_VALIDATION}
81 label="Description - optional"/>
83 <DialogActions className={classes.dialogActions}>
84 <Button onClick={handleClose} className={classes.button} color="primary"
85 disabled={submitting}>CANCEL</Button>
87 className={classes.lastButton}
89 disabled={invalid || submitting || pristine}
93 {submitting && <CircularProgress size={20} className={classes.createProgress}/>}