X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/51d2defb6f233bb00ef482f98ca975ae693f0e04..91d197b6b7066c3f37b3dbd54b2b3416e6f21bec:/src/views/run-process-panel/inputs/file-array-input.tsx

diff --git a/src/views/run-process-panel/inputs/file-array-input.tsx b/src/views/run-process-panel/inputs/file-array-input.tsx
index 391cc7fe81..a2f884e3e6 100644
--- a/src/views/run-process-panel/inputs/file-array-input.tsx
+++ b/src/views/run-process-panel/inputs/file-array-input.tsx
@@ -2,47 +2,48 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import {
     isRequiredInput,
     FileArrayCommandInputParameter,
     File,
     CWLType
-} from '~/models/workflow';
+} from 'models/workflow';
 import { Field } from 'redux-form';
-import { ERROR_MESSAGE } from '~/validators/require';
-import { Input, Dialog, DialogTitle, DialogContent, DialogActions, Button, Divider, Grid, WithStyles, Typography } from '@material-ui/core';
+import { ERROR_MESSAGE } from 'validators/require';
+import { Input, Dialog, DialogTitle, DialogContent, DialogActions, Button, Divider, WithStyles, Typography } 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, getSelectedNodes, treePickerActions, getProjectsTreePickerIds } from '~/store/tree-picker/tree-picker-actions';
-import { ProjectsTreePickerItem } from '~/views-components/projects-tree-picker/generic-projects-tree-picker';
-import { CollectionFile, CollectionFileType } from '~/models/collection-file';
+import { initProjectsTreePicker, getSelectedNodes, treePickerActions, getProjectsTreePickerIds } from 'store/tree-picker/tree-picker-actions';
+import { ProjectsTreePickerItem } from 'store/tree-picker/tree-picker-middleware';
+import { CollectionFile, CollectionFileType } from 'models/collection-file';
 import { createSelector, createStructuredSelector } from 'reselect';
-import { ChipsInput } from '~/components/chips-input/chips-input';
+import { ChipsInput } from 'components/chips-input/chips-input';
 import { identity, values, noop } from 'lodash';
 import { InputProps } from '@material-ui/core/Input';
-import { TreePicker } from '~/store/tree-picker/tree-picker';
-import { RootState } from '~/store/store';
-import { Chips } from '~/components/chips/chips';
+import { TreePicker } from 'store/tree-picker/tree-picker';
+import { RootState } from 'store/store';
+import { Chips } from 'components/chips/chips';
 import withStyles, { StyleRulesCallback } from '@material-ui/core/styles/withStyles';
 
 export interface FileArrayInputProps {
     input: FileArrayCommandInputParameter;
+    options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
 }
 export const FileArrayInput = ({ input }: FileArrayInputProps) =>
     <Field
         name={input.id}
         commandInput={input}
-        component={FileArrayInputComponent}
+        component={FileArrayInputComponent as any}
         parse={parseFiles}
         format={formatFiles}
         validate={validationSelector(input)} />;
 
-const parseFiles = (files: CollectionFile[]) =>
-    files.length > 0
-        ? files.map(parse)
-        : undefined;
+const parseFiles = (files: CollectionFile[] | string) =>
+    typeof files === 'string'
+        ? undefined
+        : files.map(parse);
 
 const parse = (file: CollectionFile): File => ({
     class: CWLType.FILE,
@@ -51,7 +52,8 @@ const parse = (file: CollectionFile): File => ({
     path: file.path,
 });
 
-const formatFiles = (files: File[] = []) => files.map(format);
+const formatFiles = (files: File[] = []) =>
+    files ? files.map(format) : [];
 
 const format = (file: File): CollectionFile => ({
     id: file.location
@@ -91,7 +93,9 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const FileArrayInputComponent = connect(mapStateToProps)(
-    class FileArrayInputComponent extends React.Component<FileArrayInputComponentProps & GenericInputProps & DispatchProp, FileArrayInputComponentState> {
+    class FileArrayInputComponent extends React.Component<FileArrayInputComponentProps & GenericInputProps & DispatchProp & {
+        options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
+    }, FileArrayInputComponentState> {
         state: FileArrayInputComponentState = {
             open: false,
             files: [],
@@ -116,7 +120,6 @@ const FileArrayInputComponent = connect(mapStateToProps)(
             this.setState({ open: true });
         }
 
-
         closeDialog = () => {
             this.setState({ open: false });
         }
@@ -138,14 +141,12 @@ const FileArrayInputComponent = connect(mapStateToProps)(
             this.setState({ files });
 
             const ids = values(getProjectsTreePickerIds(this.props.commandInput.id));
-            deletedFiles.forEach(({ id }) => {
-                ids.forEach(pickerId => {
-                    this.props.dispatch(
-                        treePickerActions.DESELECT_TREE_PICKER_NODE({
-                            pickerId, id,
-                        })
-                    );
-                });
+            ids.forEach(pickerId => {
+                this.props.dispatch(
+                    treePickerActions.DESELECT_TREE_PICKER_NODE({
+                        pickerId, id: deletedFiles.map(({ id }) => id),
+                    })
+                );
             });
 
         }
@@ -159,24 +160,21 @@ const FileArrayInputComponent = connect(mapStateToProps)(
                         : [...addedFiles, file]
                     , []);
 
-            this.setState({ files });
-
             const ids = values(getProjectsTreePickerIds(this.props.commandInput.id));
-            addedFiles.forEach(({ id }) => {
-                ids.forEach(pickerId => {
-                    this.props.dispatch(
-                        treePickerActions.SELECT_TREE_PICKER_NODE({
-                            pickerId, id,
-                        })
-                    );
-                });
+            ids.forEach(pickerId => {
+                this.props.dispatch(
+                    treePickerActions.SELECT_TREE_PICKER_NODE({
+                        pickerId, id: addedFiles.map(({ id }) => id),
+                    })
+                );
             });
 
+            this.setFiles(files);
         }
 
         refreshFiles = () => {
             clearTimeout(this.fileRefreshTimeout);
-            this.fileRefreshTimeout = setTimeout(this.setSelectedFiles);
+            this.fileRefreshTimeout = window.setTimeout(this.setSelectedFiles);
         }
 
         setSelectedFiles = () => {
@@ -197,7 +195,8 @@ const FileArrayInputComponent = connect(mapStateToProps)(
 
         chipsInput = () =>
             <ChipsInput
-                value={this.props.input.value}
+                values={this.props.input.value}
+                disabled={this.props.commandInput.disabled}
                 onChange={noop}
                 createNewValue={identity}
                 getLabel={(file: CollectionFile) => file.name}
@@ -208,34 +207,22 @@ const FileArrayInputComponent = connect(mapStateToProps)(
                 {...props}
                 error={this.props.meta.touched && !!this.props.meta.error}
                 readOnly
-                onClick={this.openDialog}
-                onKeyPress={this.openDialog}
+                disabled={this.props.commandInput.disabled}
+                onClick={!this.props.commandInput.disabled ? this.openDialog : undefined}
+                onKeyPress={!this.props.commandInput.disabled ? this.openDialog : undefined}
                 onBlur={this.props.input.onBlur} />
 
-        dialog = () =>
-            <Dialog
-                open={this.state.open}
-                onClose={this.closeDialog}
-                fullWidth
-                maxWidth='md' >
-                <DialogTitle>Choose files</DialogTitle>
-                <DialogContent>
-                    <this.dialogContent />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={this.closeDialog}>Cancel</Button>
-                    <Button
-                        variant='contained'
-                        color='primary'
-                        onClick={this.submit}>Ok</Button>
-                </DialogActions>
-            </Dialog>
-
         dialogContentStyles: StyleRulesCallback<DialogContentCssRules> = ({ spacing }) => ({
             root: {
                 display: 'flex',
                 flexDirection: 'column',
-                height: `${spacing.unit * 8}vh`,
+            },
+            pickerWrapper: {
+                display: 'flex',
+                flexDirection: 'column',
+                flexBasis: `${spacing.unit * 8}vh`,
+                flexShrink: 1,
+                minHeight: 0,
             },
             tree: {
                 flex: 3,
@@ -252,33 +239,50 @@ const FileArrayInputComponent = connect(mapStateToProps)(
             },
         })
 
-        dialogContent = withStyles(this.dialogContentStyles)(
+
+        dialog = withStyles(this.dialogContentStyles)(
             ({ classes }: WithStyles<DialogContentCssRules>) =>
-                <div className={classes.root}>
-                    <div className={classes.tree}>
-                        <ProjectsTreePicker
-                            pickerId={this.props.commandInput.id}
-                            includeCollections
-                            includeFiles
-                            showSelection
-                            toggleItemSelection={this.refreshFiles} />
-                    </div>
-                    <Divider />
-                    <div className={classes.chips}>
-                        <Typography variant='subheading'>Selected files ({this.state.files.length}):</Typography>
-                        <Chips
-                            orderable
-                            deletable
-                            values={this.state.files}
-                            onChange={this.setFiles}
-                            getLabel={(file: CollectionFile) => file.name} />
-                    </div>
-                </div>
+                <Dialog
+                    open={this.state.open}
+                    onClose={this.closeDialog}
+                    fullWidth
+                    maxWidth='md' >
+                    <DialogTitle>Choose files</DialogTitle>
+                    <DialogContent className={classes.root}>
+                        <div className={classes.pickerWrapper}>
+                            <div className={classes.tree}>
+                                <ProjectsTreePicker
+                                    pickerId={this.props.commandInput.id}
+                                    includeCollections
+                                    includeFiles
+                                    showSelection
+                                    options={this.props.options}
+                                    toggleItemSelection={this.refreshFiles} />
+                            </div>
+                            <Divider />
+                            <div className={classes.chips}>
+                                <Typography variant='subtitle1'>Selected files ({this.state.files.length}):</Typography>
+                                <Chips
+                                    orderable
+                                    deletable
+                                    values={this.state.files}
+                                    onChange={this.setFiles}
+                                    getLabel={(file: CollectionFile) => file.name} />
+                            </div>
+                        </div>
+
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={this.closeDialog}>Cancel</Button>
+                        <Button
+                            data-cy='ok-button'
+                            variant='contained'
+                            color='primary'
+                            onClick={this.submit}>Ok</Button>
+                    </DialogActions>
+                </Dialog>
         );
 
     });
 
-type DialogContentCssRules = 'root' | 'tree' | 'divider' | 'chips';
-
-
-
+type DialogContentCssRules = 'root' | 'pickerWrapper' | 'tree' | 'divider' | 'chips';