Merge branch '18123-group-edit-page-rebase1' into main. Closes #18123

[arvados-workbench2.git] / src / views / run-process-panel / inputs / generic-input.tsx

diff --git a/src/views/run-process-panel/inputs/generic-input.tsx b/src/views/run-process-panel/inputs/generic-input.tsx
index 8eb1ca3e29413213fe8c8503b0c0b8983f733f46..8ca4ec89502f045b544c00cc64b0ee84778e382c 100644 (file)
--- a/src/views/run-process-panel/inputs/generic-input.tsx
+++ b/src/views/run-process-panel/inputs/generic-input.tsx
@@ -2,10 +2,10 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { WrappedFieldProps } from 'redux-form';
-import { FormGroup, FormLabel, Input, FormHelperText } from '@material-ui/core';
-import { GenericCommandInputParameter, getInputLabel } from '../../../models/workflow';
+import { FormGroup, FormLabel, FormHelperText } from '@material-ui/core';
+import { GenericCommandInputParameter, getInputLabel, isRequiredInput } from 'models/workflow';
 
 export type GenericInputProps = WrappedFieldProps & {
     commandInput: GenericCommandInputParameter<any, any>;
@@ -16,9 +16,14 @@ type GenericInputContainerProps = GenericInputProps & {
 };
 export const GenericInput = ({ component: Component, ...props }: GenericInputContainerProps) => {
     return <FormGroup>
-        <FormLabel error={props.meta.touched && props.meta.error}>{getInputLabel(props.commandInput)}</FormLabel>
+        <FormLabel
+            focused={props.meta.active}
+            required={isRequiredInput(props.commandInput)}
+            error={props.meta.touched && !!props.meta.error}>
+            {getInputLabel(props.commandInput)}
+        </FormLabel>
         <Component {...props} />
-        <FormHelperText error={props.meta.touched && props.meta.error}>
+        <FormHelperText error={props.meta.touched && !!props.meta.error}>
             {
                 props.meta.touched && props.meta.error
                     ? props.meta.error