Merge branch '21128-toolbar-context-menu'
[arvados-workbench2.git] / src / views / run-process-panel / inputs / enum-input.tsx
index 3b0289e79f4a8fee08ecde6546f99f7cf853b5d0..207a30acd0f6f0d28691fcf0d0db74e2e075efdc 100644 (file)
@@ -2,20 +2,40 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { Field } from 'redux-form';
+import { memoize } from 'lodash/fp';
+import { require } from 'validators/require';
 import { Select, MenuItem } from '@material-ui/core';
-import { EnumCommandInputParameter, CommandInputEnumSchema } from '~/models/workflow';
+import { EnumCommandInputParameter, CommandInputEnumSchema, isRequiredInput, getEnumType } from 'models/workflow';
 import { GenericInputProps, GenericInput } from './generic-input';
 
 export interface EnumInputProps {
     input: EnumCommandInputParameter;
 }
+
+const getValidation = memoize(
+    (input: EnumCommandInputParameter) => ([
+        isRequiredInput(input)
+            ? require
+            : () => undefined,
+    ]));
+
+const emptyToNull = value => {
+    if (value === '') {
+        return null;
+    } else {
+        return value;
+    }
+};
+
 export const EnumInput = ({ input }: EnumInputProps) =>
     <Field
         name={input.id}
         commandInput={input}
         component={EnumInputComponent}
+        validate={getValidation(input)}
+        normalize={emptyToNull}
     />;
 
 const EnumInputComponent = (props: GenericInputProps) =>
@@ -24,26 +44,26 @@ const EnumInputComponent = (props: GenericInputProps) =>
         {...props} />;
 
 const Input = (props: GenericInputProps) => {
-    const type = props.commandInput.type as CommandInputEnumSchema;
+    const type = getEnumType(props.commandInput) as CommandInputEnumSchema;
     return <Select
         value={props.input.value}
         onChange={props.input.onChange}
         disabled={props.commandInput.disabled} >
-        {type.symbols.map(symbol =>
+        {(isRequiredInput(props.commandInput) ? [] : [<MenuItem key={'_empty'} value={''} />]).concat(type.symbols.map(symbol =>
             <MenuItem key={symbol} value={extractValue(symbol)}>
                 {extractValue(symbol)}
-            </MenuItem>)}
+            </MenuItem>))}
     </Select>;
 };
 
 /**
- * Values in workflow definition have an absolute form, for example: 
- * 
+ * Values in workflow definition have an absolute form, for example:
+ *
  * ```#input_collector.cwl/enum_type/Pathway table```
- * 
+ *
  * We want a value that is in form accepted by backend.
  * According to the example above, the correct value is:
- * 
+ *
  * ```Pathway table```
  */
 const extractValue = (symbol: string) => symbol.split('/').pop();