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 } from "redux-form";
   7 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress } 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 } from "../../validators/create-project/create-project-validator";
  11
  12 export const DialogCollectionCreateWithSelected = (props: WithDialogProps<string> & InjectedFormProps<{ name: string }>) =>
  13     <form>
  14         <Dialog open={props.open}
  15             disableBackdropClick={true}
  16             disableEscapeKeyDown={true}>
  17             <DialogTitle>Create a collection</DialogTitle>
  18             <DialogContent style={{ display: 'flex' }}>
  19                 <div>
  20                     <Field
  21                         name='name'
  22                         component={TextField}
  23                         validate={COLLECTION_NAME_VALIDATION}
  24                         label="Collection Name" />
  25                     <Field
  26                         name='description'
  27                         component={TextField}
  28                         validate={COLLECTION_DESCRIPTION_VALIDATION}
  29                         label="Description - optional" />
  30                 </div>
  31                 <div style={{ overflowY: 'auto' }}>TREE</div>
  32             </DialogContent>
  33             <DialogActions>
  34                 <Button
  35                     variant='flat'
  36                     color='primary'
  37                     disabled={props.submitting}
  38                     onClick={props.closeDialog}>
  39                     Cancel
  40                     </Button>
  41                 <Button
  42                     variant='contained'
  43                     color='primary'
  44                     type='submit'
  45                     onClick={props.handleSubmit}
  46                     disabled={props.pristine || props.invalid || props.submitting}>
  47                     {props.submitting
  48                         ? <CircularProgress size={20} />
  49                         : 'Create a collection'}
  50                 </Button>
  51             </DialogActions>
  52         </Dialog>
  53     </form>;