project-copy-using-form-dialog
[arvados-workbench2.git] / src / views-components / project-copy-dialog / project-copy-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 { COPY_NAME_VALIDATION, MAKE_A_COPY_VALIDATION } from '~/validators/validators';
12 import { TextField } from "~/components/text-field/text-field";
13 import { ProjectCopyFormDialogData } from "~/store/project-copy-dialog/project-copy-dialog";
14
15 export const ProjectCopyFormDialog = (props: WithDialogProps<string> & InjectedFormProps<ProjectCopyFormDialogData>) =>
16     <FormDialog
17         dialogTitle='Make a copy'
18         formFields={ProjectCopyFields}
19         submitLabel='Copy'
20         {...props}
21     />;
22
23 const ProjectCopyFields = () => <div>
24     <ProjectCopyNameField />
25     <ProjectCopyDialogFields />
26 </div>;
27
28 const ProjectCopyNameField = () =>
29     <Field
30         name='name'
31         component={TextField}
32         validate={COPY_NAME_VALIDATION}
33         label="Enter a new name for the copy" />;
34
35 const ProjectCopyDialogFields = () =>
36     <Field
37         name="projectUuid"
38         component={ProjectPicker}
39         validate={MAKE_A_COPY_VALIDATION} />;
40
41 const ProjectPicker = (props: WrappedFieldProps) =>
42     <div style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
43         <ProjectTreePicker onChange={handleChange(props)} />
44         {props.meta.dirty && props.meta.error &&
45             <Typography variant='caption' color='error'>
46                 {props.meta.error}
47             </Typography>}
48     </div>;
49
50 const handleChange = (props: WrappedFieldProps) => (value: string) =>
51     props.input.value === value
52         ? props.input.onChange('')
53         : props.input.onChange(value);