disabled-inputs-modal-and-filled-with-proper-values
authorPawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Thu, 8 Nov 2018 13:33:32 +0000 (14:33 +0100)
committerPawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Thu, 8 Nov 2018 13:33:32 +0000 (14:33 +0100)
Feature #14129

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

20 files changed:
src/components/chips-input/chips-input.tsx
src/components/chips/chips.tsx
src/models/workflow.ts
src/store/processes/process-input-actions.ts
src/views-components/process-input-dialog/process-input-dialog.tsx
src/views/process-panel/process-panel-root.tsx
src/views/run-process-panel/inputs/boolean-input.tsx
src/views/run-process-panel/inputs/directory-array-input.tsx
src/views/run-process-panel/inputs/directory-input.tsx
src/views/run-process-panel/inputs/enum-input.tsx
src/views/run-process-panel/inputs/file-array-input.tsx
src/views/run-process-panel/inputs/file-input.tsx
src/views/run-process-panel/inputs/float-array-input.tsx
src/views/run-process-panel/inputs/float-input.tsx
src/views/run-process-panel/inputs/generic-input.tsx
src/views/run-process-panel/inputs/int-array-input.tsx
src/views/run-process-panel/inputs/int-input.tsx
src/views/run-process-panel/inputs/string-array-input.tsx
src/views/run-process-panel/inputs/string-input.tsx
src/views/run-process-panel/run-process-inputs-form.tsx

index fc5fda01be0e7366c9de395b9c38a0b9bafe459d..13699660053824a8f205efc1f8a556ba43d8b106 100644 (file)
@@ -17,6 +17,7 @@ interface ChipsInputProps<Value> {
     inputProps?: InputProps;
     deletable?: boolean;
     orderable?: boolean;
+    disabled?: boolean;
 }
 
 type CssRules = 'chips' | 'input' | 'inputContainer';
@@ -106,6 +107,7 @@ export const ChipsInput = withStyles(styles)(
             return <div className={classes.chips}>
                 <Chips
                     {...props}
+                    clickable={!props.disabled}
                     values={value}
                     filler={<div ref={this.filler} />}
                 />
@@ -118,6 +120,7 @@ export const ChipsInput = withStyles(styles)(
                 {...InputProps}
                 value={this.state.text}
                 onChange={this.setText}
+                disabled={this.props.disabled}
                 onKeyDown={this.handleKeyPress}
                 inputProps={{
                     ...(InputProps && InputProps.inputProps),
index 36cf2412c42d1300340ff6dafa4656c30fc97cfe..75ae00f4cfc52bd1a483c73fdd2753dc8ed0be26 100644 (file)
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { Chip, Grid, StyleRulesCallback, withStyles } from '@material-ui/core';
 import { DragSource, DragSourceSpec, DragSourceCollector, ConnectDragSource, DropTarget, DropTargetSpec, DropTargetCollector, ConnectDropTarget } from 'react-dnd';
-import { compose, noop } from 'lodash/fp';
+import { compose } from 'lodash/fp';
 import { WithStyles } from '@material-ui/core/styles';
 interface ChipsProps<Value> {
     values: Value[];
@@ -14,6 +14,7 @@ interface ChipsProps<Value> {
     deletable?: boolean;
     orderable?: boolean;
     onChange: (value: Value[]) => void;
+    clickable?: boolean;
 }
 
 type CssRules = 'root';
@@ -90,6 +91,7 @@ export const Chips = withStyles(styles)(
                             onDelete={this.props.deletable
                                 ? this.deleteValue(value)
                                 : undefined}
+                            clickable={this.props.clickable}
                             label={this.props.getLabel ?
                                 this.props.getLabel(value)
                                 : typeof value === 'object'
index a342dbbfc5fde437e8dbdfb101f8ae3d612ce559..3a38348ef25751eb147a60c1d7deeacb20b861df 100644 (file)
@@ -92,6 +92,8 @@ export interface GenericCommandInputParameter<Type, Value> {
     doc?: string | string[];
     default?: Value;
     type?: Type | Array<Type | CWLType.NULL>;
+    value?: Value;
+    disabled?: boolean;
 }
 export type GenericArrayCommandInputParameter<Type, Value> = GenericCommandInputParameter<CommandInputArraySchema<Type>, Value[]>;
 
index 7b0ae4c876df67a84a53d068d2a723fe96cb85ea..b67622d3908e394543ae54bd31575048aaa6ad24 100644 (file)
@@ -5,18 +5,15 @@
 import { dialogActions } from '~/store/dialog/dialog-actions';
 import { RootState } from '~/store/store';
 import { Dispatch } from 'redux';
-import { getProcess } from '~/store/processes/process';
+import { getProcess, Process } from '~/store/processes/process';
 
 export const PROCESS_INPUT_DIALOG_NAME = 'processInputDialog';
 
-export interface ProcessInputDialogData {
-}
-
 export const openProcessInputDialog = (processUuid: string) =>
     (dispatch: Dispatch<any>, getState: () => RootState) => {
         const process = getProcess(processUuid)(getState().resources);
         if (process) {
-            const data: ProcessInputDialogData = { process };
+            const data: Process = process;
             dispatch(dialogActions.OPEN_DIALOG({ id: PROCESS_INPUT_DIALOG_NAME, data }));
         }
     }; 
\ No newline at end of file
index 96eab1cfc536f00887fb77c541144c7ea946e369..a639fa88e233550519d7345ee0ef4da046290ba6 100644 (file)
@@ -6,10 +6,11 @@ import * as React from "react";
 import { Dialog, DialogActions, Button, CardHeader, DialogContent } from '@material-ui/core';
 import { WithDialogProps } from '~/store/dialog/with-dialog';
 import { withDialog } from "~/store/dialog/with-dialog";
-import { PROCESS_INPUT_DIALOG_NAME, ProcessInputDialogData } from '~/store/processes/process-input-actions';
+import { PROCESS_INPUT_DIALOG_NAME } from '~/store/processes/process-input-actions';
+import { RunProcessInputsForm } from "~/views/run-process-panel/run-process-inputs-form";
 
 export const ProcessInputDialog = withDialog(PROCESS_INPUT_DIALOG_NAME)(
-    (props: WithDialogProps<ProcessInputDialogData>) =>
+    (props: WithDialogProps<any>) =>
         <Dialog
             open={props.open}
             maxWidth={false}
@@ -17,7 +18,7 @@ export const ProcessInputDialog = withDialog(PROCESS_INPUT_DIALOG_NAME)(
             <CardHeader
                 title="Inputs - Pipeline template that generates a config file from a template" />
             <DialogContent>
-                cos
+                <RunProcessInputsForm inputs={getInputs(props.data.containerRequest)} />
             </DialogContent>
             <DialogActions>
                 <Button
@@ -28,4 +29,54 @@ export const ProcessInputDialog = withDialog(PROCESS_INPUT_DIALOG_NAME)(
                 </Button>
             </DialogActions>
         </Dialog>
-); 
\ No newline at end of file
+);
+
+const getInputs = (data: any) =>
+    data && data.mounts.varLibCwlWorkflowJson ? data.mounts.varLibCwlWorkflowJson.content.graph[1].inputs.map((it: any) => (
+        { type: it.type, id: it.id, label: it.label, value: getValue(it.id, data.mounts.varLibCwlCwlInputJson.content), disabled: true }
+    )) : [];
+
+const getValue = (id: string, data: any) => {
+    switch (id) {
+        case "#main/example_flag":
+            return data.exampleFlag;
+        case "#main/example_directory":
+            return data.exampleDirectory;
+        case "#main/example_double":
+            return data.exampleDouble;
+        case "#main/example_file":
+            return data.exampleFile;
+        case "#main/example_float":
+            return data.exampleFloat;
+        case "#main/example_int":
+            return data.exampleInt;
+        case "#main/example_long":
+            return data.exampleLong;
+        case "#main/example_null":
+            return data.exampleNull;
+        case "#main/example_string":
+            return data.exampleString;
+        case "#main/enum_type":
+            return data.enumType;
+        case "#main/multiple_collections":
+            return data.multipleCollections;
+        case "#main/example_string_array":
+            return data.exampleStringArray;
+        case "#main/example_int_array":
+            return data.exampleIntArray;
+        case "#main/example_float_array":
+            return data.exampleFloatArray;
+        case "#main/multiple_files":
+            return data.multipleFiles;
+        case "#main/collection":
+            return data.collection;
+        case "#main/optional_file_missing_label":
+            return data.optionalFileMissingLabel;
+        case "#main/optional_file":
+            return data.optionalFile;
+        case "#main/single_file":
+            return data.singleFile;
+        default:
+            return data.exampleString;
+    }
+};
\ No newline at end of file
index df0f7a64bfafc78dcbdb2bc541f237cf43f435e7..52c0f4515145120caf1d6f95038323d4f5fdb307 100644 (file)
@@ -27,13 +27,13 @@ export interface ProcessPanelRootActionProps {
 
 export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
 
-export const ProcessPanelRoot = ({process, ...props}: ProcessPanelRootProps) =>
+export const ProcessPanelRoot = ({ process, ...props }: ProcessPanelRootProps) =>
     process
         ? <Grid container spacing={16} alignItems="stretch">
             <Grid item sm={12} md={7}>
                 <ProcessInformationCard
                     process={process}
-                    onContextMenu={event => props.onContextMenu(event, process)} 
+                    onContextMenu={event => props.onContextMenu(event, process)}
                     openProcessInputDialog={props.openProcessInputDialog} />
             </Grid>
             <Grid item sm={12} md={5}>
index e66ec3d7fc493335d12211d897bbce8737aeec11..5da547423bb94155cf825645f52d057ec0c93449 100644 (file)
@@ -28,4 +28,5 @@ const Input = (props: GenericInputProps) =>
     <Switch
         color='primary'
         checked={props.input.value}
-        onChange={() => props.input.onChange(props.input.value)} />;
\ No newline at end of file
+        onChange={() => props.input.onChange(props.input.value)} 
+        disabled={props.commandInput.disabled} />;
\ No newline at end of file
index d4f4cb6d3767e536d53dd180e059eaa972042741..6da3210371490e968a041e9bc90adc59b5f2f8e4 100644 (file)
@@ -119,7 +119,6 @@ const DirectoryArrayInputComponent = connect(mapStateToProps)(
             this.setState({ open: true });
         }
 
-
         closeDialog = () => {
             this.setState({ open: false });
         }
@@ -214,6 +213,7 @@ const DirectoryArrayInputComponent = connect(mapStateToProps)(
             <ChipsInput
                 value={this.props.input.value}
                 onChange={noop}
+                disabled={this.props.commandInput.disabled}
                 createNewValue={identity}
                 getLabel={(data: FormattedDirectory) => data.name}
                 inputComponent={this.textInput} />
@@ -223,9 +223,10 @@ const DirectoryArrayInputComponent = connect(mapStateToProps)(
                 {...props}
                 error={this.props.meta.touched && !!this.props.meta.error}
                 readOnly
-                onClick={this.openDialog}
-                onKeyPress={this.openDialog}
-                onBlur={this.props.input.onBlur} />
+                onClick={!this.props.commandInput.disabled ? this.openDialog : undefined}
+                onKeyPress={!this.props.commandInput.disabled ? this.openDialog : undefined}
+                onBlur={this.props.input.onBlur}
+                disabled={this.props.commandInput.disabled} />
 
         dialog = () =>
             <Dialog
index b85c24f35bdf45858f9ef6fc571eb11237201930..aa25fefc0bfbe9b45213ce220e8a855c8f22b68f 100644 (file)
@@ -94,8 +94,9 @@ const DirectoryInputComponent = connect()(
                         fullWidth
                         value={props.input.value}
                         error={props.meta.touched && !!props.meta.error}
-                        onClick={this.openDialog}
-                        onKeyPress={this.openDialog} />}
+                        disabled={props.commandInput.disabled}
+                        onClick={!this.props.commandInput.disabled ? this.openDialog : undefined}
+                        onKeyPress={!this.props.commandInput.disabled ? this.openDialog : undefined} />}
                 {...this.props} />;
         }
 
index 967d8fc5e8525daa437b33c550b2686c917c2fec..86ff6fb14c2e733b21ed792e5e2ef8fb0dd9f64d 100644 (file)
@@ -27,7 +27,8 @@ const Input = (props: GenericInputProps) => {
     const type = props.commandInput.type as CommandInputEnumSchema;
     return <Select
         value={props.input.value}
-        onChange={props.input.onChange}>
+        onChange={props.input.onChange}
+        disabled={props.commandInput.disabled} >
         {type.symbols.map(symbol =>
             <MenuItem key={symbol} value={symbol.split('/').pop()}>
                 {symbol.split('/').pop()}
index 48fc42da27d334a3eccd86ec56d950d228a03d63..bb85825d232b111d4d59c34fc14468f78677fd92 100644 (file)
@@ -117,7 +117,6 @@ const FileArrayInputComponent = connect(mapStateToProps)(
             this.setState({ open: true });
         }
 
-
         closeDialog = () => {
             this.setState({ open: false });
         }
@@ -195,6 +194,7 @@ const FileArrayInputComponent = connect(mapStateToProps)(
         chipsInput = () =>
             <ChipsInput
                 value={this.props.input.value}
+                disabled={this.props.commandInput.disabled}
                 onChange={noop}
                 createNewValue={identity}
                 getLabel={(file: CollectionFile) => file.name}
@@ -205,8 +205,9 @@ 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 = () =>
index f5d3d9391d44cc5f633ae2332cef1c92939995ad..7e0925e8e9e175481887c1c9988be0eee329f82e 100644 (file)
@@ -91,10 +91,11 @@ const FileInputComponent = connect()(
                     <Input
                         readOnly
                         fullWidth
+                        disabled={props.commandInput.disabled}
                         value={props.input.value}
                         error={props.meta.touched && !!props.meta.error}
-                        onClick={this.openDialog}
-                        onKeyPress={this.openDialog} />}
+                        onClick={!props.commandInput.disabled ? this.openDialog : undefined}
+                        onKeyPress={!props.commandInput.disabled ? this.openDialog : undefined} />}
                 {...this.props} />;
         }
 
index 6e546ec844524c279bb6d1fdb0e17bf57a94cd7a..225a772749cc466b597d94224b62b3a0a02bf742 100644 (file)
@@ -8,7 +8,6 @@ import { Field } from 'redux-form';
 import { ERROR_MESSAGE } from '~/validators/require';
 import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
 import { ChipsInput } from '~/components/chips-input/chips-input';
-import { identity } from 'lodash';
 import { createSelector } from 'reselect';
 import { FloatInput } from '~/components/float-input/float-input';
 
@@ -42,15 +41,17 @@ const FloatArrayInputComponent = (props: GenericInputProps) =>
 
 class InputComponent extends React.PureComponent<GenericInputProps>{
     render() {
+        const { commandInput, input, meta } = this.props;
         return <ChipsInput
-            deletable
-            orderable
-            value={this.props.input.value}
+            deletable={!commandInput.disabled}
+            orderable={!commandInput.disabled}
+            disabled={commandInput.disabled}
+            value={input.value}
             onChange={this.handleChange}
             createNewValue={parseFloat}
             inputComponent={FloatInput}
             inputProps={{
-                error: this.props.meta.error,
+                error: meta.error,
             }} />;
     }
 
index 9558fd8d2f1ab4c7d09cab418ce3edfb0cd8c5cc..56a58012b260bc2b6492671bc760d12f0479e4eb 100644 (file)
@@ -28,6 +28,10 @@ const Input = (props: GenericInputProps) =>
         component={InputComponent}
         {...props} />;
 
-const InputComponent = ({ input, meta }: GenericInputProps) =>
-    <FloatInputComponent fullWidth {...input} error={meta.touched && !!meta.error} />;
+const InputComponent = ({ input, meta, commandInput }: GenericInputProps) =>
+    <FloatInputComponent
+        fullWidth
+        error={meta.touched && !!meta.error}
+        disabled={commandInput.disabled}
+        {...input} />;
 
index a449c657ffe0adb39594ac61249c96e6d34ef1f2..066bf2b8554729e218dc1671cff9975d1d49dfbc 100644 (file)
@@ -4,8 +4,8 @@
 
 import * as React from 'react';
 import { WrappedFieldProps } from 'redux-form';
-import { FormGroup, FormLabel, Input, FormHelperText, FormControl } from '@material-ui/core';
-import { GenericCommandInputParameter, getInputLabel, isRequiredInput } from '../../../models/workflow';
+import { FormGroup, FormLabel, FormHelperText } from '@material-ui/core';
+import { GenericCommandInputParameter, getInputLabel, isRequiredInput } from '~/models/workflow';
 
 export type GenericInputProps = WrappedFieldProps & {
     commandInput: GenericCommandInputParameter<any, any>;
index d1c0273acfcce7f8d3e9d3576b4b117f79666b86..22c069b548fe18c6dd7d9c89e5012a19370017d1 100644 (file)
@@ -8,7 +8,6 @@ import { Field } from 'redux-form';
 import { ERROR_MESSAGE } from '~/validators/require';
 import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
 import { ChipsInput } from '~/components/chips-input/chips-input';
-import { identity } from 'lodash';
 import { createSelector } from 'reselect';
 import { IntInput } from '~/components/int-input/int-input';
 
@@ -42,15 +41,17 @@ const IntArrayInputComponent = (props: GenericInputProps) =>
 
 class InputComponent extends React.PureComponent<GenericInputProps>{
     render() {
+        const { commandInput, input, meta } = this.props;
         return <ChipsInput
-            deletable
-            orderable
-            value={this.props.input.value}
+            deletable={!commandInput.disabled}
+            orderable={!commandInput.disabled}
+            disabled={commandInput.disabled}
+            value={input.value}
             onChange={this.handleChange}
             createNewValue={value => parseInt(value, 10)}
             inputComponent={IntInput}
             inputProps={{
-                error: this.props.meta.error,
+                error: meta.error,
             }} />;
     }
 
index 410d2dfebf7272d7b21035e3a786843a2672eede..413ee49c7abc0eee00961fd66f941e2b71ef19ad 100644 (file)
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { IntCommandInputParameter, getInputLabel, isRequiredInput } from '~/models/workflow';
+import { IntCommandInputParameter, isRequiredInput } from '~/models/workflow';
 import { Field } from 'redux-form';
 import { isInteger } from '~/validators/is-integer';
 import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
@@ -32,5 +32,10 @@ const InputComponent = (props: GenericInputProps) =>
 
 
 const Input = (props: GenericInputProps) =>
-    <IntInputComponent fullWidth type='number' {...props.input} error={props.meta.touched && !!props.meta.error} />;
+    <IntInputComponent
+        fullWidth
+        type='number'
+        error={props.meta.touched && !!props.meta.error}
+        disabled={props.commandInput.disabled}
+        {...props.input} />;
 
index da03f2966149ebe4abd7be9d85588e71b62f8ab5..e560b33778fc7cf0f99a76e0461bf8858192e26a 100644 (file)
@@ -42,15 +42,17 @@ const StringArrayInputComponent = (props: GenericInputProps) =>
 
 class InputComponent extends React.PureComponent<GenericInputProps>{
     render() {
+        const { commandInput, input, meta } = this.props;
         return <ChipsInput
-            deletable
-            orderable
-            value={this.props.input.value}
+            deletable={!commandInput.disabled}
+            orderable={!commandInput.disabled}
+            disabled={commandInput.disabled}
+            value={input.value}
             onChange={this.handleChange}
             createNewValue={identity}
             inputComponent={Input}
             inputProps={{
-                error: this.props.meta.error,
+                error: meta.error
             }} />;
     }
 
index 7f02e1d34338f819d248b2f0ea5472fe9fb1987f..f6b50a7c47dd5bb417e75e503520f0be6ee691d9 100644 (file)
@@ -29,4 +29,8 @@ const StringInputComponent = (props: GenericInputProps) =>
         {...props} />;
 
 const Input = (props: GenericInputProps) =>
-    <MaterialInput fullWidth {...props.input} error={props.meta.touched && !!props.meta.error} />;
\ No newline at end of file
+    <MaterialInput
+        fullWidth
+        error={props.meta.touched && !!props.meta.error}
+        disabled={props.commandInput.disabled}
+        {...props.input} />;
\ No newline at end of file
index 37349a6e369e40ecc74534c886a3534917abefcf..9b3379a385264d2edb58f5ad6da91e109577ae31 100644 (file)
@@ -35,7 +35,7 @@ const inputsSelector = (props: RunProcessInputFormProps) =>
 const initialValuesSelector = createSelector(
     inputsSelector,
     inputs => inputs.reduce(
-        (values, input) => ({ ...values, [input.id]: input.default }),
+        (values, input) => ({ ...values, [input.id]: input.value || input.default }),
         {}));
 
 const propsSelector = createStructuredSelector({