// 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;
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
// 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;
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} />;
// 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={[
? isNumber
: () => undefined,]} />;
-class DecimalInput extends React.Component<WrappedFieldProps & { label?: string }> {
+class FloatInputComponent extends React.Component<GenericInputProps> {
state = {
endsWithDecimalSeparator: false,
};
onChange: this.handleChange,
},
};
- return <TextField {...props} />;
+ return <GenericInput
+ component={Input}
+ {...props} />;
}
}
+
+const Input = (props: GenericInputProps) =>
+ <MaterialInput {...props.input} />;
--- /dev/null
+// 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
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;
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={[
: () => undefined,
]} />;
+const IntInputComponent = (props: GenericInputProps) =>
+ <GenericInput
+ component={Input}
+ {...props} />;
+
+
+const Input = (props: GenericInputProps) =>
+ <MaterialInput type='number' {...props.input} />;
+
// 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;
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
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';
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>);