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 { ArvadosTheme } from '~/common/custom-theme';
9 import { StyleRulesCallback, WithStyles, withStyles, Dialog, DialogTitle, DialogContent, DialogActions, CircularProgress, Button } from '../../../node_modules/@material-ui/core';
10 import { TextField } from '~/components/text-field/text-field';
11 import { PROJECT_FORM_NAME } from '~/store/project/project-action';
12 import { PROJECT_NAME_VALIDATION, PROJECT_DESCRIPTION_VALIDATION } from '~/validators/validators';
14 type CssRules = 'content' | 'actions' | 'buttonWrapper' | 'saveButton' | 'circularProgress';
16 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
19 flexDirection: 'column'
23 padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3 - theme.spacing.unit / 2}px
24 ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`
42 interface DialogProjectDataProps {
50 interface DialogProjectActionProps {
51 handleClose: () => void;
52 onSubmit: (data: { name: string, description: string }) => void;
55 type DialogProjectProps = DialogProjectDataProps & DialogProjectActionProps & WithStyles<CssRules>;
57 export const DialogProjectUpdate = compose(
58 reduxForm({ form: PROJECT_FORM_NAME }),
61 class DialogProjectUpdate extends React.Component<DialogProjectProps> {
63 const { handleSubmit, handleClose, onSubmit, open, classes, submitting, invalid, pristine } = this.props;
64 return <Dialog open={open}
68 disableBackdropClick={true}
69 disableEscapeKeyDown={true}>
70 <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
71 <DialogTitle>Edit Collection</DialogTitle>
72 <DialogContent className={classes.content}>
76 validate={PROJECT_NAME_VALIDATION}
77 label="Project Name" />
78 <Field name='description'
81 validate={PROJECT_DESCRIPTION_VALIDATION}
82 label="Description - optional" />
84 <DialogActions className={classes.actions}>
85 <Button onClick={handleClose} color="primary"
86 disabled={submitting}>CANCEL</Button>
87 <div className={classes.buttonWrapper}>
88 <Button type="submit" className={classes.saveButton}
90 disabled={invalid || submitting || pristine}
94 {submitting && <CircularProgress size={20} className={classes.circularProgress} />}