src/components/make-a-copy/make-a-copy.tsx

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