X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/4f5fdd49c0c9866fbb613c6c82641d686b0b8ad5..e257a39cf400e4c454f71d7f02a5c483571f2907:/src/views/run-process-panel/inputs/file-input.tsx diff --git a/src/views/run-process-panel/inputs/file-input.tsx b/src/views/run-process-panel/inputs/file-input.tsx index f5d3d939..c2e17c95 100644 --- a/src/views/run-process-panel/inputs/file-input.tsx +++ b/src/views/run-process-panel/inputs/file-input.tsx @@ -2,44 +2,55 @@ // // SPDX-License-Identifier: AGPL-3.0 -import * as React from 'react'; +import React from 'react'; +import { memoize } from 'lodash/fp'; import { isRequiredInput, FileCommandInputParameter, File, CWLType -} from '~/models/workflow'; +} from 'models/workflow'; import { Field } from 'redux-form'; -import { ERROR_MESSAGE } from '~/validators/require'; +import { ERROR_MESSAGE } from 'validators/require'; import { Input, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@material-ui/core'; import { GenericInputProps, GenericInput } from './generic-input'; -import { ProjectsTreePicker } from '~/views-components/projects-tree-picker/projects-tree-picker'; +import { ProjectsTreePicker } from 'views-components/projects-tree-picker/projects-tree-picker'; import { connect, DispatchProp } from 'react-redux'; -import { initProjectsTreePicker } from '~/store/tree-picker/tree-picker-actions'; -import { TreeItem } from '~/components/tree/tree'; -import { ProjectsTreePickerItem } from '~/views-components/projects-tree-picker/generic-projects-tree-picker'; -import { CollectionFile, CollectionFileType } from '~/models/collection-file'; +import { initProjectsTreePicker } from 'store/tree-picker/tree-picker-actions'; +import { TreeItem } from 'components/tree/tree'; +import { ProjectsTreePickerItem } from 'views-components/projects-tree-picker/generic-projects-tree-picker'; +import { CollectionFile, CollectionFileType } from 'models/collection-file'; export interface FileInputProps { input: FileCommandInputParameter; + options?: { showOnlyOwned: boolean, showOnlyWritable: boolean }; } -export const FileInput = ({ input }: FileInputProps) => +export const FileInput = ({ input, options }: FileInputProps) => value ? value.basename : ''} - parse={(file: CollectionFile): File => ({ - class: CWLType.FILE, - location: `keep:${file.id}`, - basename: file.name, - })} - validate={[ - isRequiredInput(input) - ? (file?: File) => file ? undefined : ERROR_MESSAGE - : () => undefined, - ]} />; - + component={FileInputComponent as any} + format={format} + parse={parse} + {...{ + options + }} + validate={getValidation(input)} />; + +const format = (value?: File) => value ? value.basename : ''; + +const parse = (file: CollectionFile): File => ({ + class: CWLType.FILE, + location: `keep:${file.id}`, + basename: file.name, +}); + +const getValidation = memoize( + (input: FileCommandInputParameter) => ([ + isRequiredInput(input) + ? (file?: File) => file ? undefined : ERROR_MESSAGE + : () => undefined, + ])); interface FileInputComponentState { open: boolean; @@ -47,7 +58,9 @@ interface FileInputComponentState { } const FileInputComponent = connect()( - class FileInputComponent extends React.Component { + class FileInputComponent extends React.Component { state: FileInputComponentState = { open: false, }; @@ -77,7 +90,7 @@ const FileInputComponent = connect()( this.props.input.onChange(this.state.file); } - setFile = (event: React.MouseEvent, { data }: TreeItem, pickerId: string) => { + setFile = (_: {}, { data }: TreeItem) => { if ('type' in data && data.type === CollectionFileType.FILE) { this.setState({ file: data }); } else { @@ -91,10 +104,11 @@ const FileInputComponent = connect()( } + onClick={!props.commandInput.disabled ? this.openDialog : undefined} + onKeyPress={!props.commandInput.disabled ? this.openDialog : undefined} />} {...this.props} />; } @@ -103,6 +117,7 @@ const FileInputComponent = connect()( open={this.state.open} onClose={this.closeDialog} fullWidth + data-cy="choose-a-file-dialog" maxWidth='md'> Choose a file @@ -110,6 +125,7 @@ const FileInputComponent = connect()( pickerId={this.props.commandInput.id} includeCollections includeFiles + options={this.props.options} toggleItemActive={this.setFile} />