src/views-components/dialog-create/dialog-collection-create-selected.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { InjectedFormProps, Field, WrappedFieldProps } from "redux-form";
   7 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, FormHelperText } from "@material-ui/core";
   8 import { WithDialogProps } from "../../store/dialog/with-dialog";
   9 import { TextField } from "../../components/text-field/text-field";
  10 import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION, COLLECTION_PROJECT_VALIDATION } from "../../validators/create-project/create-project-validator";
  11 import { ProjectTreePicker } from "../project-tree-picker/project-tree-picker";
  12
  13 export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
  14     <form>
  15         <Dialog open={props.open}
  16             disableBackdropClick={true}
  17             disableEscapeKeyDown={true}>
  18             <DialogTitle>Create a collection</DialogTitle>
  19             <DialogContent style={{ display: 'flex' }}>
  20                 <div>
  21                     <Field
  22                         name='name'
  23                         component={TextField}
  24                         validate={COLLECTION_NAME_VALIDATION}
  25                         label="Collection Name" />
  26                     <Field
  27                         name='description'
  28                         component={TextField}
  29                         validate={COLLECTION_DESCRIPTION_VALIDATION}
  30                         label="Description - optional" />
  31                 </div>
  32                 <Field
  33                     name="projectUuid"
  34                     component={Picker}
  35                     validate={COLLECTION_PROJECT_VALIDATION} />
  36             </DialogContent>
  37             <DialogActions>
  38                 <Button
  39                     variant='flat'
  40                     color='primary'
  41                     disabled={props.submitting}
  42                     onClick={props.closeDialog}>
  43                     Cancel
  44                     </Button>
  45                 <Button
  46                     variant='contained'
  47                     color='primary'
  48                     type='submit'
  49                     onClick={props.handleSubmit}
  50                     disabled={props.pristine || props.invalid || props.submitting}>
  51                     {props.submitting
  52                         ? <CircularProgress size={20} />
  53                         : 'Create a collection'}
  54                 </Button>
  55             </DialogActions>
  56         </Dialog>
  57     </form>;
  58
  59 const Picker = (props: WrappedFieldProps) =>
  60     <div style={{ width: '400px', height: '144px', display: 'flex', flexDirection: 'column' }}>
  61         <ProjectTreePicker onChange={projectUuid => props.input.onChange(projectUuid)} />
  62     </div>;