Merge branch '14471-bugfix-treepicker-files-subtree-is-flat'
[arvados.git] / src / views / run-process-panel / inputs / file-input.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 {
7     isRequiredInput,
8     FileCommandInputParameter,
9     File,
10     CWLType
11 } from '~/models/workflow';
12 import { Field } from 'redux-form';
13 import { ERROR_MESSAGE } from '~/validators/require';
14 import { Input, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@material-ui/core';
15 import { GenericInputProps, GenericInput } from './generic-input';
16 import { ProjectsTreePicker } from '~/views-components/projects-tree-picker/projects-tree-picker';
17 import { connect, DispatchProp } from 'react-redux';
18 import { initProjectsTreePicker } from '~/store/tree-picker/tree-picker-actions';
19 import { TreeItem } from '~/components/tree/tree';
20 import { ProjectsTreePickerItem } from '~/views-components/projects-tree-picker/generic-projects-tree-picker';
21 import { CollectionFile, CollectionFileType } from '~/models/collection-file';
22
23 export interface FileInputProps {
24     input: FileCommandInputParameter;
25 }
26 export const FileInput = ({ input }: FileInputProps) =>
27     <Field
28         name={input.id}
29         commandInput={input}
30         component={FileInputComponent}
31         format={(value?: File) => value ? value.basename : ''}
32         parse={(file: CollectionFile): File => ({
33             class: CWLType.FILE,
34             location: `keep:${file.id}`,
35             basename: file.name,
36         })}
37         validate={[
38             isRequiredInput(input)
39                 ? (file?: File) => file ? undefined : ERROR_MESSAGE
40                 : () => undefined,
41         ]} />;
42
43
44 interface FileInputComponentState {
45     open: boolean;
46     file?: CollectionFile;
47 }
48
49 const FileInputComponent = connect()(
50     class FileInputComponent extends React.Component<GenericInputProps & DispatchProp, FileInputComponentState> {
51         state: FileInputComponentState = {
52             open: false,
53         };
54
55         componentDidMount() {
56             this.props.dispatch<any>(
57                 initProjectsTreePicker(this.props.commandInput.id));
58         }
59
60         render() {
61             return <>
62                 {this.renderInput()}
63                 {this.renderDialog()}
64             </>;
65         }
66
67         openDialog = () => {
68             this.setState({ open: true });
69         }
70
71         closeDialog = () => {
72             this.setState({ open: false });
73         }
74
75         submit = () => {
76             this.closeDialog();
77             this.props.input.onChange(this.state.file);
78         }
79
80         setFile = (event: React.MouseEvent<HTMLElement>, { data }: TreeItem<ProjectsTreePickerItem>, pickerId: string) => {
81             if ('type' in data && data.type === CollectionFileType.FILE) {
82                 this.setState({ file: data });
83             } else {
84                 this.setState({ file: undefined });
85             }
86         }
87
88         renderInput() {
89             return <GenericInput
90                 component={props =>
91                     <Input
92                         readOnly
93                         fullWidth
94                         disabled={props.commandInput.disabled}
95                         value={props.input.value}
96                         error={props.meta.touched && !!props.meta.error}
97                         onClick={!props.commandInput.disabled ? this.openDialog : undefined}
98                         onKeyPress={!props.commandInput.disabled ? this.openDialog : undefined} />}
99                 {...this.props} />;
100         }
101
102         renderDialog() {
103             return <Dialog
104                 open={this.state.open}
105                 onClose={this.closeDialog}
106                 fullWidth
107                 maxWidth='md'>
108                 <DialogTitle>Choose a file</DialogTitle>
109                 <DialogContent>
110                     <ProjectsTreePicker
111                         pickerId={this.props.commandInput.id}
112                         includeCollections
113                         includeFiles
114                         toggleItemActive={this.setFile} />
115                 </DialogContent>
116                 <DialogActions>
117                     <Button onClick={this.closeDialog}>Cancel</Button>
118                     <Button
119                         disabled={!this.state.file}
120                         variant='contained'
121                         color='primary'
122                         onClick={this.submit}>Ok</Button>
123                 </DialogActions>
124             </Dialog>;
125         }
126
127     });
128
129