Improve validation

Feature #13863

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

diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index 076889eabb4b9af6acb630d243e9db9829a47950..4d8c012f9edec158ada5549b9b3cfde0dde3b368 100644 (file)
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -16,7 +16,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
 });
 
-export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyles<CssRules> & { label?: string, autoFocus?: boolean }) =>
+export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyles<CssRules> & { label?: string, autoFocus?: boolean, required?: boolean }) =>
     <MaterialTextField
         helperText={props.meta.touched && props.meta.error}
         className={props.classes.textField}
@@ -26,6 +26,7 @@ export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyl
         autoComplete='off'
         autoFocus={props.autoFocus}
         fullWidth={true}
+        required={props.required}
         {...props.input}
     />);
 

diff --git a/src/index.tsx b/src/index.tsx
index 2f8e73c4a112035804e2d9623bdc152683c518cc..71d10fe26546d7b234678ed6f7e10536d3f3b60a 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -113,10 +113,18 @@ const initListener = (history: History, store: RootStore, services: ServiceRepos
             initWebSocket(config, services.authService, store);
             await store.dispatch(loadWorkbench());
             addRouteChangeHandlers(history, store);
+            
         }
     };
 };
 
+const createSampleWorkflow = ({workflowService}:ServiceRepository) => {
+    workflowService.create({
+            name: 'Primitive values collector',
+            description: 'Workflow for collecting primitive values',
+            definition: "cwlVersion: v1.0\n$graph:\n- class: CommandLineTool\n  requirements:\n  - listing:\n    - entryname: input_collector.log\n      entry: |\n        \"flag\":\n          $(inputs.example_flag)\n        \"string\":\n          $(inputs.example_string)\n        \"int\":\n          $(inputs.example_int)\n        \"long\":\n          $(inputs.example_long)\n        \"float\":\n          $(inputs.example_float)\n        \"double\":\n          $(inputs.example_double)\n    class: InitialWorkDirRequirement\n  inputs:\n  - type: double\n    id: '#input_collector.cwl/example_double'\n  - type: boolean\n    id: '#input_collector.cwl/example_flag'\n  - type: float\n    id: '#input_collector.cwl/example_float'\n  - type: int\n    id: '#input_collector.cwl/example_int'\n  - type: long\n    id: '#input_collector.cwl/example_long'\n  - type: string\n    id: '#input_collector.cwl/example_string'\n  outputs:\n  - type: File\n    outputBinding:\n      glob: '*'\n    id: '#input_collector.cwl/output'\n  baseCommand: [echo]\n  id: '#input_collector.cwl'\n- class: Workflow\n  doc: Workflw for collecting primitive values\n  inputs:\n  - type: double\n    label: Double value\n    doc: This should allow for entering a decimal number (64-bit).\n    id: '#main/example_double'\n    default: 0.3333333333333333\n  - type: boolean\n    label: Boolean Flag\n    doc: This should render as in checkbox.\n    id: '#main/example_flag'\n    default: true\n  - type: float\n    label: Float value\n    doc: This should allow for entering a decimal number (32-bit).\n    id: '#main/example_float'\n    default: 0.15625\n  - type: int\n    label: Integer Number\n    doc: This should allow for entering a number (32-bit signed).\n    id: '#main/example_int'\n    default: 2147483647\n  - type: long\n    label: Long Number\n    doc: This should allow for entering a number (64-bit signed).\n    id: '#main/example_long'\n    default: 9223372036854775807\n  - type: string\n    label: Freetext\n    doc: This should allow for entering an arbitrary char sequence.\n    id: '#main/example_string'\n    default: This is a string\n  outputs:\n  - type: File\n    outputSource: '#main/input_collector/output'\n    id: '#main/log_file'\n  steps:\n  - run: '#input_collector.cwl'\n    in:\n    - source: '#main/example_double'\n      id: '#main/input_collector/example_double'\n    - source: '#main/example_flag'\n      id: '#main/input_collector/example_flag'\n    - source: '#main/example_float'\n      id: '#main/input_collector/example_float'\n    - source: '#main/example_int'\n      id: '#main/input_collector/example_int'\n    - source: '#main/example_long'\n      id: '#main/input_collector/example_long'\n    - source: '#main/example_string'\n      id: '#main/input_collector/example_string'\n    out: ['#main/input_collector/output']\n    id: '#main/input_collector'\n  id: '#main'\n",
+        });
+};
 
 const createSampleProcess = ({ containerRequestService }: ServiceRepository) => {
     containerRequestService.create({

diff --git a/src/views/run-process-panel/inputs/file-input.tsx b/src/views/run-process-panel/inputs/file-input.tsx
index b018584ab3a1a1a73be75488826e80c7c50d37c6..7c4402fecd30432ec89441bbb3b11b68a89d21a3 100644 (file)
--- a/src/views/run-process-panel/inputs/file-input.tsx
+++ b/src/views/run-process-panel/inputs/file-input.tsx
@@ -38,5 +38,5 @@ export const FileInput = ({ input }: FileInputProps) =>
 const FileInputComponent = (props: GenericInputProps) =>
     <GenericInput
         component={props =>
-            <Input readOnly fullWidth value={props.input.value} />}
+            <Input readOnly fullWidth value={props.input.value} error={props.meta.touched && !!props.meta.error}/>}
         {...props} />;

diff --git a/src/views/run-process-panel/inputs/float-input.tsx b/src/views/run-process-panel/inputs/float-input.tsx
index 31a7ca59a61b21c19ed67937a7ccb8538ac33587..aeaf6cdd48dd8aa4bb0d420b7a7d24e314bad7ff 100644 (file)
--- a/src/views/run-process-panel/inputs/float-input.tsx
+++ b/src/views/run-process-panel/inputs/float-input.tsx
@@ -51,4 +51,4 @@ class FloatInputComponent extends React.Component<GenericInputProps> {
 }
 
 const Input = (props: GenericInputProps) =>
-    <MaterialInput fullWidth {...props.input} />;
+    <MaterialInput fullWidth {...props.input} error={props.meta.touched && !!props.meta.error} />;

diff --git a/src/views/run-process-panel/inputs/generic-input.tsx b/src/views/run-process-panel/inputs/generic-input.tsx
index 4ed2654e61ba04de5f0e76e2519eea5e780c324e..a449c657ffe0adb39594ac61249c96e6d34ef1f2 100644 (file)
--- a/src/views/run-process-panel/inputs/generic-input.tsx
+++ b/src/views/run-process-panel/inputs/generic-input.tsx
@@ -22,9 +22,7 @@ export const GenericInput = ({ component: Component, ...props }: GenericInputCon
             error={props.meta.touched && !!props.meta.error}>
             {getInputLabel(props.commandInput)}
         </FormLabel>
-        <FormControl>
-            <Component {...props} />
-        </FormControl>
+        <Component {...props} />
         <FormHelperText error={props.meta.touched && !!props.meta.error}>
             {
                 props.meta.touched && props.meta.error

diff --git a/src/views/run-process-panel/inputs/int-input.tsx b/src/views/run-process-panel/inputs/int-input.tsx
index 1e4c17cb9cf6a48622960d77ffb5e92ea1b364e9..193de26ccb2d3e224d4ba120eea524a03ded87b3 100644 (file)
--- a/src/views/run-process-panel/inputs/int-input.tsx
+++ b/src/views/run-process-panel/inputs/int-input.tsx
@@ -32,5 +32,5 @@ const IntInputComponent = (props: GenericInputProps) =>
 
 
 const Input = (props: GenericInputProps) =>
-    <MaterialInput fullWidth type='number' {...props.input} />;
+    <MaterialInput fullWidth type='number' {...props.input} error={props.meta.touched && !!props.meta.error} />;
 

diff --git a/src/views/run-process-panel/inputs/string-input.tsx b/src/views/run-process-panel/inputs/string-input.tsx
index dc7075cf198d25f2c273aab497aabd14dae3b566..7f02e1d34338f819d248b2f0ea5472fe9fb1987f 100644 (file)
--- a/src/views/run-process-panel/inputs/string-input.tsx
+++ b/src/views/run-process-panel/inputs/string-input.tsx
@@ -29,4 +29,4 @@ const StringInputComponent = (props: GenericInputProps) =>
         {...props} />;
 
 const Input = (props: GenericInputProps) =>
-    <MaterialInput fullWidth {...props.input} />;
\ No newline at end of file
+    <MaterialInput fullWidth {...props.input} error={props.meta.touched && !!props.meta.error} />;
\ No newline at end of file

diff --git a/src/views/run-process-panel/run-process-basic-form.tsx b/src/views/run-process-panel/run-process-basic-form.tsx
index ef4a9cc7fd2dd0f10382b193eb09e21e567c3b62..2739824edc0c4faeba387d25e282ba5687822b5f 100644 (file)
--- a/src/views/run-process-panel/run-process-basic-form.tsx
+++ b/src/views/run-process-panel/run-process-basic-form.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { reduxForm, Field } from 'redux-form';
 import { Grid } from '@material-ui/core';
 import { TextField } from '~/components/text-field/text-field';
+import { PROCESS_NAME_VALIDATION } from '~/validators/validators';
 
 export const RUN_PROCESS_BASIC_FORM = 'runProcessBasicForm';
 
@@ -18,12 +19,14 @@ export const RunProcessBasicForm =
         form: RUN_PROCESS_BASIC_FORM
     })(() =>
         <form>
-            <Grid container spacing={16}>
+            <Grid container spacing={32}>
                 <Grid item xs={12} md={6}>
                     <Field
                         name='name'
                         component={TextField}
-                        label="Enter a new name for run process" />
+                        label="Enter a new name for run process"
+                        required
+                        validate={PROCESS_NAME_VALIDATION} />
                 </Grid>
                 <Grid item xs={12} md={6}>
                     <Field

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 5c3818879a5aede420b33f17df9f0b8756659a9c..9e6f5907f847279903df93ceb0c45658018bf756 100644 (file)
--- a/src/views/run-process-panel/run-process-inputs-form.tsx
+++ b/src/views/run-process-panel/run-process-inputs-form.tsx
@@ -32,7 +32,7 @@ export const RunProcessInputsForm = compose(
     }))(
         (props: InjectedFormProps & RunProcessInputFormProps) =>
             <form>
-                <Grid container spacing={16}>
+                <Grid container spacing={32}>
                     {props.inputs.map(input =>
                         <InputItem input={input} key={input.id} />)}
                 </Grid>

diff --git a/src/views/run-process-panel/run-process-second-step.tsx b/src/views/run-process-panel/run-process-second-step.tsx
index 89092c8c1d63f023f39f85a6ae9384de96f6a5fe..d66576c2671dce55a048038624edf5640551c0a1 100644 (file)
--- a/src/views/run-process-panel/run-process-second-step.tsx
+++ b/src/views/run-process-panel/run-process-second-step.tsx
@@ -24,8 +24,8 @@ export interface RunProcessSecondStepFormActionProps {
 
 const mapStateToProps = (state: RootState): RunProcessSecondStepFormDataProps => ({
     inputs: state.runProcessPanel.inputs,
-    valid: isValid(RUN_PROCESS_BASIC_FORM)(state.form) &&
-        isValid(RUN_PROCESS_INPUTS_FORM)(state.form),
+    valid: isValid(RUN_PROCESS_BASIC_FORM)(state) &&
+        isValid(RUN_PROCESS_INPUTS_FORM)(state),
 });
 
 export type RunProcessSecondStepFormProps = RunProcessSecondStepFormDataProps & RunProcessSecondStepFormActionProps;