src/views-components/move-to-dialog/move-to-dialog.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 { WithDialogProps } from '~/store/dialog/with-dialog';
   8 import { FormDialog } from '~/components/form-dialog/form-dialog';
   9 import { ProjectTreePicker } from '~/views-components/project-tree-picker/project-tree-picker';
  10 import { Typography } from "@material-ui/core";
  11 import { ResourceKind } from '~/models/resource';
  12 import { MOVE_TO_VALIDATION } from '../../validators/validators';
  13
  14 export interface MoveToFormDialogData {
  15     name: string;
  16     uuid: string;
  17     ownerUuid: string;
  18     kind: ResourceKind;
  19 }
  20
  21 export const MoveToFormDialog = (props: WithDialogProps<string> & InjectedFormProps<MoveToFormDialogData>) =>
  22     <FormDialog
  23         dialogTitle='Move to'
  24         formFields={MoveToDialogFields}
  25         submitLabel='Move'
  26         {...props}
  27     />;
  28
  29 const MoveToDialogFields = () =>
  30     <Field
  31         name="ownerUuid"
  32         component={ProjectPicker}
  33         validate={MOVE_TO_VALIDATION} />;
  34
  35 const ProjectPicker = (props: WrappedFieldProps) =>
  36     <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
  37         <ProjectTreePicker onChange={handleChange(props)} />
  38         {props.meta.dirty && props.meta.error &&
  39             <Typography variant='caption' color='error'>
  40                 {props.meta.error}
  41             </Typography>}
  42     </div>;
  43
  44 const handleChange = (props: WrappedFieldProps) => (value: string) =>
  45     props.input.value === value
  46         ? props.input.onChange('')
  47         : props.input.onChange(value);