From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Mon, 15 Oct 2018 07:58:04 +0000 (+0200)
Subject: Create directory-array-input
X-Git-Tag: 1.3.0~64^2^2^2~2
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/f3ce859fafc0a4ac1496c0848ceb4f648a2f7dc2

Create directory-array-input

Feature #14231

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---

diff --git a/src/store/tree-picker/tree-picker-actions.ts b/src/store/tree-picker/tree-picker-actions.ts
index 22a31c10..a988e896 100644
--- a/src/store/tree-picker/tree-picker-actions.ts
+++ b/src/store/tree-picker/tree-picker-actions.ts
@@ -36,8 +36,8 @@ export const getProjectsTreePickerIds = (pickerId: string) => ({
     favorites: `${pickerId}_favorites`,
 });
 
-export const getSelectedNodes = <Value>(pickerId: string) => (state: TreePicker) => {
-    return pipe(
+export const getAllNodes = <Value>(pickerId: string, filter = (node: TreeNode<Value>) => true) => (state: TreePicker) =>
+    pipe(
         () => values(getProjectsTreePickerIds(pickerId)),
 
         ids => ids
@@ -48,14 +48,17 @@ export const getSelectedNodes = <Value>(pickerId: string) => (state: TreePicker)
             .reduce((allNodes, nodes) => allNodes.concat(nodes), []),
 
         allNodes => allNodes
-            .reduce((map, node) => node.selected
-                ? map.set(node.id, node)
-                : map, new Map<string, TreeNode<Value>>())
+            .reduce((map, node) =>
+                filter(node)
+                    ? map.set(node.id, node)
+                    : map, new Map<string, TreeNode<Value>>())
             .values(),
 
         uniqueNodes => Array.from(uniqueNodes),
     )();
-};
+export const getSelectedNodes = <Value>(pickerId: string) => (state: TreePicker) =>
+    getAllNodes<Value>(pickerId, node => node.selected)(state);
+    
 export const initProjectsTreePicker = (pickerId: string) =>
     async (dispatch: Dispatch, _: () => RootState, services: ServiceRepository) => {
         const { home, shared, favorites } = getProjectsTreePickerIds(pickerId);
diff --git a/src/views/run-process-panel/inputs/directory-array-input.tsx b/src/views/run-process-panel/inputs/directory-array-input.tsx
new file mode 100644
index 00000000..8a6a7295
--- /dev/null
+++ b/src/views/run-process-panel/inputs/directory-array-input.tsx
@@ -0,0 +1,299 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import {
+    isRequiredInput,
+    DirectoryArrayCommandInputParameter,
+    Directory,
+    CWLType
+} 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 { GenericInputProps, GenericInput } from './generic-input';
+import { ProjectsTreePicker } from '~/views-components/projects-tree-picker/projects-tree-picker';
+import { connect, DispatchProp } from 'react-redux';
+import { initProjectsTreePicker, getSelectedNodes, treePickerActions, getProjectsTreePickerIds, getAllNodes } 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 { createSelector, createStructuredSelector } from 'reselect';
+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 withStyles, { StyleRulesCallback } from '@material-ui/core/styles/withStyles';
+import { CollectionResource } from '~/models/collection';
+import { ResourceKind } from '~/models/resource';
+
+export interface DirectoryArrayInputProps {
+    input: DirectoryArrayCommandInputParameter;
+}
+
+export const DirectoryArrayInput = ({ input }: DirectoryArrayInputProps) =>
+    <Field
+        name={input.id}
+        commandInput={input}
+        component={DirectoryArrayInputComponent}
+        parse={parseDirectories}
+        format={formatDirectories}
+        validate={validationSelector(input)} />;
+
+interface FormattedDirectory {
+    name: string;
+    portableDataHash: string;
+}
+
+const parseDirectories = (directories: CollectionResource[] | string) =>
+    typeof directories === 'string'
+        ? undefined
+        : directories.map(parse);
+
+const parse = (directory: CollectionResource): Directory => ({
+    class: CWLType.DIRECTORY,
+    basename: directory.name,
+    location: `keep:${directory.portableDataHash}`,
+});
+
+const formatDirectories = (directories: Directory[] = []) =>
+    directories.map(format);
+
+const format = ({ location = '', basename = '' }: Directory): FormattedDirectory => ({
+    portableDataHash: location.replace('keep:', ''),
+    name: basename,
+});
+
+const validationSelector = createSelector(
+    isRequiredInput,
+    isRequired => isRequired
+        ? [required]
+        : undefined
+);
+
+const required = (value?: Directory[]) =>
+    value && value.length > 0
+        ? undefined
+        : ERROR_MESSAGE;
+interface DirectoryArrayInputComponentState {
+    open: boolean;
+    directories: CollectionResource[];
+    prevDirectories: CollectionResource[];
+}
+
+interface DirectoryArrayInputComponentProps {
+    treePickerState: TreePicker;
+}
+
+const treePickerSelector = (state: RootState) => state.treePicker;
+
+const mapStateToProps = createStructuredSelector({
+    treePickerState: treePickerSelector,
+});
+
+const DirectoryArrayInputComponent = connect(mapStateToProps)(
+    class DirectoryArrayInputComponent extends React.Component<DirectoryArrayInputComponentProps & GenericInputProps & DispatchProp, DirectoryArrayInputComponentState> {
+        state: DirectoryArrayInputComponentState = {
+            open: false,
+            directories: [],
+            prevDirectories: [],
+        };
+
+        directoryRefreshTimeout = -1;
+
+        componentDidMount() {
+            this.props.dispatch<any>(
+                initProjectsTreePicker(this.props.commandInput.id));
+        }
+
+        render() {
+            return <>
+                <this.input />
+                <this.dialog />
+            </>;
+        }
+
+        openDialog = () => {
+            this.setDirectoriesFromProps(this.props.input.value);
+            this.setState({ open: true });
+        }
+
+
+        closeDialog = () => {
+            this.setState({ open: false });
+        }
+
+        submit = () => {
+            this.closeDialog();
+            this.props.input.onChange(this.state.directories);
+        }
+
+        setDirectories = (directories: CollectionResource[]) => {
+
+            const deletedDirectories = this.state.directories
+                .reduce((deletedDirectories, directory) =>
+                    directories.some(({ uuid }) => uuid === directory.uuid)
+                        ? deletedDirectories
+                        : [...deletedDirectories, directory]
+                    , []);
+
+            this.setState({ directories });
+
+            const ids = values(getProjectsTreePickerIds(this.props.commandInput.id));
+            ids.forEach(pickerId => {
+                this.props.dispatch(
+                    treePickerActions.DESELECT_TREE_PICKER_NODE({
+                        pickerId, id: deletedDirectories.map(({ uuid }) => uuid),
+                    })
+                );
+            });
+
+        }
+
+        setDirectoriesFromProps = (formattedDirectories: FormattedDirectory[]) => {
+            const nodes = getAllNodes<ProjectsTreePickerItem>(this.props.commandInput.id)(this.props.treePickerState);
+            const initialDirectories: CollectionResource[] = [];
+            const directories = nodes
+                .reduce((directories, { value }) =>
+                    'kind' in value &&
+                        value.kind === ResourceKind.COLLECTION &&
+                        formattedDirectories.find(({ portableDataHash }) => value.portableDataHash === portableDataHash)
+                        ? directories.concat(value)
+                        : directories, initialDirectories);
+
+            const addedDirectories = directories
+                .reduce((addedDirectories, directory) =>
+                    this.state.directories.find(({ uuid }) =>
+                        uuid === directory.uuid)
+                        ? addedDirectories
+                        : [...addedDirectories, directory]
+                    , []);
+
+            const ids = values(getProjectsTreePickerIds(this.props.commandInput.id));
+            ids.forEach(pickerId => {
+                this.props.dispatch(
+                    treePickerActions.SELECT_TREE_PICKER_NODE({
+                        pickerId, id: addedDirectories.map(({ uuid }) => uuid),
+                    })
+                );
+            });
+
+            const orderedDirectories = formattedDirectories.reduce((dirs, formattedDir) => {
+                const dir = directories.find(({ portableDataHash }) => portableDataHash === formattedDir.portableDataHash);
+                return dir
+                    ? [...dirs, dir]
+                    : dirs;
+            }, []);
+
+            this.setDirectories(orderedDirectories);
+
+        }
+
+        refreshDirectories = () => {
+            clearTimeout(this.directoryRefreshTimeout);
+            this.directoryRefreshTimeout = setTimeout(this.setSelectedFiles);
+        }
+
+        setSelectedFiles = () => {
+            const nodes = getSelectedNodes<ProjectsTreePickerItem>(this.props.commandInput.id)(this.props.treePickerState);
+            const initialDirectories: CollectionResource[] = [];
+            const directories = nodes
+                .reduce((directories, { value }) =>
+                    'kind' in value && value.kind === ResourceKind.COLLECTION
+                        ? directories.concat(value)
+                        : directories, initialDirectories);
+            this.setDirectories(directories);
+        }
+        input = () =>
+            <GenericInput
+                component={this.chipsInput}
+                {...this.props} />
+
+        chipsInput = () =>
+            <ChipsInput
+                value={this.props.input.value}
+                onChange={noop}
+                createNewValue={identity}
+                getLabel={(data: FormattedDirectory) => data.name}
+                inputComponent={this.textInput} />
+
+        textInput = (props: InputProps) =>
+            <Input
+                {...props}
+                error={this.props.meta.touched && !!this.props.meta.error}
+                readOnly
+                onClick={this.openDialog}
+                onKeyPress={this.openDialog}
+                onBlur={this.props.input.onBlur} />
+
+        dialog = () =>
+            <Dialog
+                open={this.state.open}
+                onClose={this.closeDialog}
+                fullWidth
+                maxWidth='md' >
+                <DialogTitle>Choose collections</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`,
+            },
+            tree: {
+                flex: 3,
+                overflow: 'auto',
+            },
+            divider: {
+                margin: `${spacing.unit}px 0`,
+            },
+            chips: {
+                flex: 1,
+                overflow: 'auto',
+                padding: `${spacing.unit}px 0`,
+                overflowX: 'hidden',
+            },
+        })
+
+        dialogContent = withStyles(this.dialogContentStyles)(
+            ({ classes }: WithStyles<DialogContentCssRules>) =>
+                <div className={classes.root}>
+                    <div className={classes.tree}>
+                        <ProjectsTreePicker
+                            pickerId={this.props.commandInput.id}
+                            includeCollections
+                            showSelection
+                            toggleItemSelection={this.refreshDirectories} />
+                    </div>
+                    <Divider />
+                    <div className={classes.chips}>
+                        <Typography variant='subheading'>Selected collections ({this.state.directories.length}):</Typography>
+                        <Chips
+                            orderable
+                            deletable
+                            values={this.state.directories}
+                            onChange={this.setDirectories}
+                            getLabel={(directory: CollectionResource) => directory.name} />
+                    </div>
+                </div>
+        );
+
+    });
+
+type DialogContentCssRules = 'root' | 'tree' | 'divider' | 'chips';
+
+
+
diff --git a/src/views/run-process-panel/run-process-inputs-form.tsx b/src/views/run-process-panel/run-process-inputs-form.tsx
index f8c6c1be..8ec51f6b 100644
--- a/src/views/run-process-panel/run-process-inputs-form.tsx
+++ b/src/views/run-process-panel/run-process-inputs-form.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import { reduxForm, InjectedFormProps } from 'redux-form';
-import { CommandInputParameter, CWLType, IntCommandInputParameter, BooleanCommandInputParameter, FileCommandInputParameter, DirectoryCommandInputParameter } from '~/models/workflow';
+import { CommandInputParameter, CWLType, IntCommandInputParameter, BooleanCommandInputParameter, FileCommandInputParameter, DirectoryCommandInputParameter, DirectoryArrayCommandInputParameter } from '~/models/workflow';
 import { IntInput } from '~/views/run-process-panel/inputs/int-input';
 import { StringInput } from '~/views/run-process-panel/inputs/string-input';
 import { StringCommandInputParameter, FloatCommandInputParameter, isPrimitiveOfType, File, Directory, WorkflowInputsData, EnumCommandInputParameter, isArrayOfType, StringArrayCommandInputParameter, FileArrayCommandInputParameter } from '../../models/workflow';
@@ -19,6 +19,7 @@ import { DirectoryInput } from './inputs/directory-input';
 import { StringArrayInput } from './inputs/string-array-input';
 import { createStructuredSelector, createSelector } from 'reselect';
 import { FileArrayInput } from './inputs/file-array-input';
+import { DirectoryArrayInput } from './inputs/directory-array-input';
 
 export const RUN_PROCESS_INPUTS_FORM = 'runProcessInputsForm';
 
@@ -101,6 +102,9 @@ const getInputComponent = (input: CommandInputParameter) => {
 
         case isArrayOfType(input, CWLType.FILE):
             return <FileArrayInput input={input as FileArrayCommandInputParameter} />;
+        
+        case isArrayOfType(input, CWLType.DIRECTORY):
+            return <DirectoryArrayInput input={input as DirectoryArrayCommandInputParameter} />;
 
         default:
             return null;