src/views/run-process-panel/run-process-inputs-form.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { reduxForm, InjectedFormProps } from 'redux-form';
   7 import { CommandInputParameter, CWLType, IntCommandInputParameter, BooleanCommandInputParameter, FileCommandInputParameter } from '~/models/workflow';
   8 import { IntInput } from '~/views/run-process-panel/inputs/int-input';
   9 import { StringInput } from '~/views/run-process-panel/inputs/string-input';
  10 import { StringCommandInputParameter, FloatCommandInputParameter, isPrimitiveOfType, File, Directory, WorkflowInputsData } from '../../models/workflow';
  11 import { FloatInput } from '~/views/run-process-panel/inputs/float-input';
  12 import { BooleanInput } from './inputs/boolean-input';
  13 import { FileInput } from './inputs/file-input';
  14 import { connect } from 'react-redux';
  15 import { compose } from 'redux';
  16 import { Grid, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
  17
  18 export const RUN_PROCESS_INPUTS_FORM = 'runProcessInputsForm';
  19
  20 export interface RunProcessInputFormProps {
  21     inputs: CommandInputParameter[];
  22 }
  23
  24 export const RunProcessInputsForm = compose(
  25     connect((_: any, props: RunProcessInputFormProps) => ({
  26         initialValues: props.inputs.reduce(
  27             (values, input) => ({ ...values, [input.id]: input.default }),
  28             {}),
  29     })),
  30     reduxForm<WorkflowInputsData, RunProcessInputFormProps>({
  31         form: RUN_PROCESS_INPUTS_FORM
  32     }))(
  33         (props: InjectedFormProps & RunProcessInputFormProps) =>
  34             <form>
  35                 <Grid container spacing={16}>
  36                     {props.inputs.map(input =>
  37                         <InputItem input={input} key={input.id} />)}
  38                 </Grid>
  39             </form>);
  40
  41 type CssRules = 'inputItem';
  42
  43 const styles: StyleRulesCallback<CssRules> = theme => ({
  44     inputItem: {
  45         marginBottom: theme.spacing.unit * 2,
  46     }
  47 });
  48
  49 const InputItem = withStyles(styles)(
  50     (props: WithStyles<CssRules> & { input: CommandInputParameter }) =>
  51         <Grid item xs={12} md={6} className={props.classes.inputItem}>
  52             {getInputComponent(props.input)}
  53         </Grid>);
  54
  55 const getInputComponent = (input: CommandInputParameter) => {
  56     switch (true) {
  57         case isPrimitiveOfType(input, CWLType.BOOLEAN):
  58             return <BooleanInput input={input as BooleanCommandInputParameter} />;
  59
  60         case isPrimitiveOfType(input, CWLType.INT):
  61         case isPrimitiveOfType(input, CWLType.LONG):
  62             return <IntInput input={input as IntCommandInputParameter} />;
  63
  64         case isPrimitiveOfType(input, CWLType.FLOAT):
  65         case isPrimitiveOfType(input, CWLType.DOUBLE):
  66             return <FloatInput input={input as FloatCommandInputParameter} />;
  67
  68         case isPrimitiveOfType(input, CWLType.STRING):
  69             return <StringInput input={input as StringCommandInputParameter} />;
  70
  71         case isPrimitiveOfType(input, CWLType.FILE):
  72             return <FileInput input={input as FileCommandInputParameter} />;
  73
  74         default:
  75             return null;
  76     }
  77 };