From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Tue, 2 Oct 2018 00:16:33 +0000 (+0200)
Subject: Extract GenericInput component
X-Git-Tag: 1.3.0~72^2~11
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/9c15617f293ab41ea8b8e2962ecd1d109b80a026

Extract GenericInput component

Feature #13863

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

diff --git a/src/views/run-process-panel/inputs/boolean-input.tsx b/src/views/run-process-panel/inputs/boolean-input.tsx
index 2d0d8c66..e66ec3d7 100644
--- a/src/views/run-process-panel/inputs/boolean-input.tsx
+++ b/src/views/run-process-panel/inputs/boolean-input.tsx
@@ -3,10 +3,10 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { BooleanCommandInputParameter, getInputLabel, isRequiredInput } from '~/models/workflow';
-import { Field, WrappedFieldProps } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
-import { FormGroup, FormLabel, FormHelperText, Switch } from '@material-ui/core';
+import { BooleanCommandInputParameter } from '~/models/workflow';
+import { Field } from 'redux-form';
+import { Switch } from '@material-ui/core';
+import { GenericInputProps, GenericInput } from './generic-input';
 
 export interface BooleanInputProps {
     input: BooleanCommandInputParameter;
@@ -14,16 +14,18 @@ export interface BooleanInputProps {
 export const BooleanInput = ({ input }: BooleanInputProps) =>
     <Field
         name={input.id}
-        label={getInputLabel(input)}
+        commandInput={input}
         component={BooleanInputComponent}
         normalize={(value, prevValue) => !prevValue}
     />;
 
-const BooleanInputComponent = (props: WrappedFieldProps & { label?: string }) =>
-    <FormGroup>
-        <FormLabel>{props.label}</FormLabel>
-        <Switch
-            color='primary'
-            checked={props.input.value}
-            onChange={() => props.input.onChange(props.input.value)} />
-    </FormGroup>;
\ No newline at end of file
+const BooleanInputComponent = (props: GenericInputProps) =>
+    <GenericInput
+        component={Input}
+        {...props} />;
+
+const Input = (props: GenericInputProps) =>
+    <Switch
+        color='primary'
+        checked={props.input.value}
+        onChange={() => props.input.onChange(props.input.value)} />;
\ No newline at end of file
diff --git a/src/views/run-process-panel/inputs/file-input.tsx b/src/views/run-process-panel/inputs/file-input.tsx
index 6b001b20..a356d829 100644
--- a/src/views/run-process-panel/inputs/file-input.tsx
+++ b/src/views/run-process-panel/inputs/file-input.tsx
@@ -3,10 +3,17 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { getInputLabel, isRequiredInput, FileCommandInputParameter, File } from '~/models/workflow';
+import {
+    getInputLabel,
+    isRequiredInput,
+    FileCommandInputParameter,
+    File,
+    CWLType
+} from '~/models/workflow';
 import { Field } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
 import { require } from '~/validators/require';
+import { Input } from '@material-ui/core';
+import { GenericInputProps, GenericInput } from './generic-input';
 
 export interface FileInputProps {
     input: FileCommandInputParameter;
@@ -14,12 +21,22 @@ export interface FileInputProps {
 export const FileInput = ({ input }: FileInputProps) =>
     <Field
         name={input.id}
-        label={getInputLabel(input)}
-        component={TextField}
+        commandInput={input}        
+        component={FileInputComponent}
         format={(value?: File) => value ? value.location : ''}
+        parse={(value: string): File => ({
+            class: CWLType.FILE,
+            location: value,
+            basename: value.split('/').slice(1).join('/')
+        })}
         validate={[
             isRequiredInput(input)
                 ? require
                 : () => undefined,
         ]} />;
 
+const FileInputComponent = (props: GenericInputProps) =>
+    <GenericInput
+        component={props =>
+            <Input readOnly value={props.input.value} />}
+        {...props} />;
diff --git a/src/views/run-process-panel/inputs/float-input.tsx b/src/views/run-process-panel/inputs/float-input.tsx
index f6fffedc..62093ac0 100644
--- a/src/views/run-process-panel/inputs/float-input.tsx
+++ b/src/views/run-process-panel/inputs/float-input.tsx
@@ -3,18 +3,20 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { getInputLabel, FloatCommandInputParameter, isRequiredInput } from '~/models/workflow';
-import { Field, WrappedFieldProps } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
+import { FloatCommandInputParameter, isRequiredInput } from '~/models/workflow';
+import { Field } from 'redux-form';
 import { isNumber } from '~/validators/is-number';
+import { GenericInput } from '~/views/run-process-panel/inputs/generic-input';
+import { Input as MaterialInput } from '@material-ui/core';
+import { GenericInputProps } from './generic-input';
 export interface FloatInputProps {
     input: FloatCommandInputParameter;
 }
 export const FloatInput = ({ input }: FloatInputProps) =>
     <Field
         name={input.id}
-        label={getInputLabel(input)}
-        component={DecimalInput}
+        commandInput={input}
+        component={FloatInputComponent}
         parse={parseFloat}
         format={value => isNaN(value) ? '' : JSON.stringify(value)}
         validate={[
@@ -22,7 +24,7 @@ export const FloatInput = ({ input }: FloatInputProps) =>
                 ? isNumber
                 : () => undefined,]} />;
 
-class DecimalInput extends React.Component<WrappedFieldProps & { label?: string }> {
+class FloatInputComponent extends React.Component<GenericInputProps> {
     state = {
         endsWithDecimalSeparator: false,
     };
@@ -42,6 +44,11 @@ class DecimalInput extends React.Component<WrappedFieldProps & { label?: string
                 onChange: this.handleChange,
             },
         };
-        return <TextField {...props} />;
+        return <GenericInput
+            component={Input}
+            {...props} />;
     }
 }
+
+const Input = (props: GenericInputProps) =>
+    <MaterialInput {...props.input} />;
diff --git a/src/views/run-process-panel/inputs/generic-input.tsx b/src/views/run-process-panel/inputs/generic-input.tsx
new file mode 100644
index 00000000..8eb1ca3e
--- /dev/null
+++ b/src/views/run-process-panel/inputs/generic-input.tsx
@@ -0,0 +1,29 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { WrappedFieldProps } from 'redux-form';
+import { FormGroup, FormLabel, Input, FormHelperText } from '@material-ui/core';
+import { GenericCommandInputParameter, getInputLabel } from '../../../models/workflow';
+
+export type GenericInputProps = WrappedFieldProps & {
+    commandInput: GenericCommandInputParameter<any, any>;
+};
+
+type GenericInputContainerProps = GenericInputProps & {
+    component: React.ComponentType<GenericInputProps>;
+};
+export const GenericInput = ({ component: Component, ...props }: GenericInputContainerProps) => {
+    return <FormGroup>
+        <FormLabel error={props.meta.touched && props.meta.error}>{getInputLabel(props.commandInput)}</FormLabel>
+        <Component {...props} />
+        <FormHelperText error={props.meta.touched && props.meta.error}>
+            {
+                props.meta.touched && props.meta.error
+                    ? props.meta.error
+                    : props.commandInput.doc
+            }
+        </FormHelperText>
+    </FormGroup>;
+};
\ No newline at end of file
diff --git a/src/views/run-process-panel/inputs/int-input.tsx b/src/views/run-process-panel/inputs/int-input.tsx
index 60a49b61..6d0307a8 100644
--- a/src/views/run-process-panel/inputs/int-input.tsx
+++ b/src/views/run-process-panel/inputs/int-input.tsx
@@ -5,8 +5,9 @@
 import * as React from 'react';
 import { IntCommandInputParameter, getInputLabel, isRequiredInput } from '~/models/workflow';
 import { Field } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
 import { isInteger } from '~/validators/is-integer';
+import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
+import { Input as MaterialInput } from '@material-ui/core';
 
 export interface IntInputProps {
     input: IntCommandInputParameter;
@@ -14,8 +15,8 @@ export interface IntInputProps {
 export const IntInput = ({ input }: IntInputProps) =>
     <Field
         name={input.id}
-        label={getInputLabel(input)}
-        component={TextField}
+        commandInput={input}
+        component={IntInputComponent}
         parse={value => parseInt(value, 10)}
         format={value => isNaN(value) ? '' : JSON.stringify(value)}
         validate={[
@@ -24,3 +25,12 @@ export const IntInput = ({ input }: IntInputProps) =>
                 : () => undefined,
         ]} />;
 
+const IntInputComponent = (props: GenericInputProps) =>
+    <GenericInput
+        component={Input}
+        {...props} />;
+
+
+const Input = (props: GenericInputProps) =>
+    <MaterialInput type='number' {...props.input} />;
+
diff --git a/src/views/run-process-panel/inputs/string-input.tsx b/src/views/run-process-panel/inputs/string-input.tsx
index 8c72a469..e9525930 100644
--- a/src/views/run-process-panel/inputs/string-input.tsx
+++ b/src/views/run-process-panel/inputs/string-input.tsx
@@ -3,10 +3,11 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { getInputLabel, isRequiredInput, StringCommandInputParameter } from '~/models/workflow';
+import { isRequiredInput, StringCommandInputParameter } from '~/models/workflow';
 import { Field } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
 import { require } from '~/validators/require';
+import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
+import { Input as MaterialInput } from '@material-ui/core';
 
 export interface StringInputProps {
     input: StringCommandInputParameter;
@@ -14,11 +15,18 @@ export interface StringInputProps {
 export const StringInput = ({ input }: StringInputProps) =>
     <Field
         name={input.id}
-        label={getInputLabel(input)}
-        component={TextField}
+        commandInput={input}
+        component={StringInputComponent}
         validate={[
             isRequiredInput(input)
                 ? require
                 : () => undefined,
         ]} />;
 
+const StringInputComponent = (props: GenericInputProps) =>
+    <GenericInput
+        component={Input}
+        {...props} />;
+
+const Input = (props: GenericInputProps) =>
+    <MaterialInput {...props.input} />;
\ No newline at end of file
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 90bb8c2e..de5903b2 100644
--- a/src/views/run-process-panel/run-process-inputs-form.tsx
+++ b/src/views/run-process-panel/run-process-inputs-form.tsx
@@ -12,6 +12,7 @@ import { FloatInput } from '~/views/run-process-panel/inputs/float-input';
 import { BooleanInput } from './inputs/boolean-input';
 import { FileInput } from './inputs/file-input';
 import { connect } from 'react-redux';
+import { compose } from 'redux';
 
 const RUN_PROCESS_INPUTS_FORM = 'runProcessInputsForm';
 
@@ -19,32 +20,37 @@ export interface RunProcessInputFormProps {
     inputs: CommandInputParameter[];
 }
 
-export const RunProcessInputsForm = connect(
-    (_: any, props: RunProcessInputFormProps) => ({
+export const RunProcessInputsForm = compose(
+    connect((_: any, props: RunProcessInputFormProps) => ({
         initialValues: props.inputs.reduce(
             (values, input) => ({ ...values, [input.id]: input.default }),
             {}),
-    }))(
-        reduxForm<any, RunProcessInputFormProps>({
-            form: RUN_PROCESS_INPUTS_FORM
-        })((props: InjectedFormProps & RunProcessInputFormProps) =>
-            <form>
-                {props.inputs.map(input => {
-                    switch (true) {
-                        case input.type === CWLType.BOOLEAN:
-                            return <BooleanInput key={input.id} input={input as BooleanCommandInputParameter} />;
-                        case input.type === CWLType.INT:
-                        case input.type === CWLType.LONG:
-                            return <IntInput key={input.id} input={input as IntCommandInputParameter} />;
-                        case input.type === CWLType.FLOAT:
-                        case input.type === CWLType.DOUBLE:
-                            return <FloatInput key={input.id} input={input as FloatCommandInputParameter} />;
-                        case input.type === CWLType.STRING:
-                            return <StringInput key={input.id} input={input as StringCommandInputParameter} />;
-                        case input.type === CWLType.FILE:
-                            return <FileInput key={input.id} input={input as FileCommandInputParameter} />;
-                        default:
-                            return null;
-                    }
-                })}
-            </form>));
\ No newline at end of file
+    })),
+    reduxForm<any, RunProcessInputFormProps>({
+        form: RUN_PROCESS_INPUTS_FORM
+    }))((props: InjectedFormProps & RunProcessInputFormProps) =>
+        <form>
+            {props.inputs.map(input => {
+                switch (true) {
+                    case input.type === CWLType.BOOLEAN:
+                        return <BooleanInput key={input.id} input={input as BooleanCommandInputParameter} />;
+
+                    case input.type === CWLType.INT:
+                    case input.type === CWLType.LONG:
+                        return <IntInput key={input.id} input={input as IntCommandInputParameter} />;
+
+                    case input.type === CWLType.FLOAT:
+                    case input.type === CWLType.DOUBLE:
+                        return <FloatInput key={input.id} input={input as FloatCommandInputParameter} />;
+
+                    case input.type === CWLType.STRING:
+                        return <StringInput key={input.id} input={input as StringCommandInputParameter} />;
+
+                    case input.type === CWLType.FILE:
+                        return <FileInput key={input.id} input={input as FileCommandInputParameter} />;
+
+                    default:
+                        return null;
+                }
+            })}
+        </form>);