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 { Dialog, DialogActions, DialogContent, DialogTitle, TextField, StyleRulesCallback, withStyles, WithStyles, Button, CircularProgress } from '../../../node_modules/@material-ui/core';
10 import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '../../validators/create-collection/create-collection-validator';
11 import { COLLECTION_FORM_NAME } from '../../store/collections/updator/collection-updator-action';
13 type CssRules = 'content' | 'actions' | 'textField' | 'buttonWrapper' | 'saveButton' | 'circularProgress';
15 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
18 flexDirection: 'column'
22 padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3 - theme.spacing.unit / 2}px
23 ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`
26 marginBottom: theme.spacing.unit * 3
44 interface DialogCollectionDataProps {
52 interface DialogCollectionAction {
53 handleClose: () => void;
54 onSubmit: (data: { name: string, description: string }) => void;
57 type DialogCollectionProps = DialogCollectionDataProps & DialogCollectionAction & WithStyles<CssRules>;
59 interface TextFieldProps {
61 floatinglabeltext: string;
67 export const DialogCollectionUpdate = compose(
68 reduxForm({ form: COLLECTION_FORM_NAME }),
71 class DialogCollectionUpdate extends React.Component<DialogCollectionProps> {
74 const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
80 disableBackdropClick={true}
81 disableEscapeKeyDown={true}>
83 <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
84 <DialogTitle>Edit Collection</DialogTitle>
85 <DialogContent className={classes.content}>
88 component={this.renderTextField}
89 floatinglabeltext="Collection Name"
90 validate={COLLECTION_NAME_VALIDATION}
91 className={classes.textField}
92 label="Collection Name" />
93 <Field name="description"
95 component={this.renderTextField}
96 floatinglabeltext="Description - optional"
97 validate={COLLECTION_DESCRIPTION_VALIDATION}
98 className={classes.textField}
99 label="Description - optional" />
101 <DialogActions className={classes.actions}>
102 <Button onClick={handleClose} color="primary"
103 disabled={submitting}>CANCEL</Button>
104 <div className={classes.buttonWrapper}>
105 <Button type="submit" className={classes.saveButton}
107 disabled={invalid || submitting || pristine}
111 {submitting && <CircularProgress size={20} className={classes.circularProgress} />}
119 renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
121 helperText={touched && error}
123 className={this.props.classes.textField}
124 error={touched && !!error}