feat(protocol-designer): update logic for form error rendering (#16611)

AUTH-989
Opentrons · Oct 28, 2024 · 6dbc215 · 6dbc215
1 parent e88d6f2
commit 6dbc215
Show file tree

Hide file tree

Showing 18 changed files with 362 additions and 23 deletions.
diff --git a/protocol-designer/src/molecules/InputStepFormField/index.tsx b/protocol-designer/src/molecules/InputStepFormField/index.tsx
@@ -8,6 +8,7 @@ interface InputStepFormFieldProps extends FieldProps {
   padding?: string
   showTooltip?: boolean
   caption?: string
+  formLevelError?: string | null
 }
 
 export function InputStepFormField(
@@ -26,6 +27,7 @@ export function InputStepFormField(
     padding = SPACING.spacing16,
     tooltipContent,
     caption,
+    formLevelError,
     ...otherProps
   } = props
   const { t } = useTranslation('tooltip')
@@ -40,7 +42,7 @@ export function InputStepFormField(
         title={title}
         caption={caption}
         name={name}
-        error={errorToShow}
+        error={formLevelError ?? errorToShow}
         onBlur={onFieldBlur}
         onFocus={onFieldFocus}
         onChange={e => {

diff --git a/protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx b/protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx
@@ -26,6 +26,7 @@ interface ToggleExpandStepFormFieldProps extends FieldProps {
   offLabel?: string
   caption?: string
   toggleElement?: 'toggle' | 'checkbox'
+  formLevelError?: string | null
 }
 export function ToggleExpandStepFormField(
   props: ToggleExpandStepFormFieldProps

diff --git a/protocol-designer/src/molecules/ToggleStepFormField/index.tsx b/protocol-designer/src/molecules/ToggleStepFormField/index.tsx
@@ -52,13 +52,16 @@ export function ToggleStepFormField(
           <Flex
             justifyContent={JUSTIFY_SPACE_BETWEEN}
             alignItems={ALIGN_CENTER}
-            {...targetProps}
           >
             <StyledText desktopStyle="bodyDefaultRegular">{title}</StyledText>
             <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing4}>
+              {tooltipContent != null ? (
+                <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
+              ) : null}
               <StyledText
                 desktopStyle="bodyDefaultRegular"
                 color={COLORS.grey60}
+                {...targetProps}
               >
                 {isSelected ? onLabel : offLabel}
               </StyledText>
@@ -76,9 +79,6 @@ export function ToggleStepFormField(
           </Flex>
         </Flex>
       </ListItem>
-      {tooltipContent != null ? (
-        <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
-      ) : null}
     </>
   )
 }
diff --git a/protocol-designer/src/organisms/Alerts/FormAlerts.tsx b/protocol-designer/src/organisms/Alerts/FormAlerts.tsx
@@ -121,10 +121,16 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null {
     </Flex>
   )
   const formErrors = [
-    ...visibleFormErrors.map(error => ({
-      title: error.title,
-      description: error.body || null,
-    })),
+    ...visibleFormErrors.reduce((acc, error) => {
+      return error.showAtForm ?? true
+        ? {
+            ...acc,
+            title: error.title,
+            description: error.body || null,
+            showAtForm: error.showAtForm ?? true,
+          }
+        : acc
+    }, []),
     ...visibleDynamicFieldFormErrors.map(error => ({
       title: error.title,
       description: error.body || null,

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -254,6 +254,9 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
             focusHandlers,
             toolboxStep,
             visibleFormErrors,
+            showFormErrors: showFormErrorsAndWarnings,
+            focusedField,
+            setShowFormErrorsAndWarnings,
           }}
         />
       </Toolbox>

diff --git a/...-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx b/...-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
@@ -16,10 +16,17 @@ import {
   ToggleExpandStepFormField,
   ToggleStepFormField,
 } from '../../../../../../molecules'
+import { getFormErrorsMappedToField, getFormLevelError } from '../../utils'
 import type { StepFormProps } from '../../types'
 
 export function HeaterShakerTools(props: StepFormProps): JSX.Element {
-  const { propsForFields, formData } = props
+  const {
+    propsForFields,
+    formData,
+    showFormErrors = false,
+    focusedField = null,
+    visibleFormErrors,
+  } = props
   const { t } = useTranslation(['application', 'form', 'protocol_steps'])
   const moduleLabwareOptions = useSelector(getHeaterShakerLabwareOptions)
 
@@ -29,6 +36,8 @@ export function HeaterShakerTools(props: StepFormProps): JSX.Element {
     }
   }, [])
 
+  const mappedErrorsToField = getFormErrorsMappedToField(visibleFormErrors)
+
   return (
     <Flex flexDirection={DIRECTION_COLUMN}>
       {moduleLabwareOptions.length > 1 ? (
@@ -82,6 +91,12 @@ export function HeaterShakerTools(props: StepFormProps): JSX.Element {
           offLabel={t(
             'form:step_edit_form.field.heaterShaker.temperature.toggleOff'
           )}
+          formLevelError={getFormLevelError(
+            showFormErrors,
+            'targetHeaterShakerTemperature',
+            mappedErrorsToField,
+            focusedField
+          )}
         />
         <ToggleExpandStepFormField
           {...propsForFields.targetSpeed}
@@ -95,6 +110,12 @@ export function HeaterShakerTools(props: StepFormProps): JSX.Element {
           offLabel={t(
             'form:step_edit_form.field.heaterShaker.shaker.toggleOff'
           )}
+          formLevelError={getFormLevelError(
+            showFormErrors,
+            'targetSpeed',
+            mappedErrorsToField,
+            focusedField
+          )}
         />
         <ToggleStepFormField
           isDisabled={propsForFields.latchOpen.disabled}
@@ -121,6 +142,12 @@ export function HeaterShakerTools(props: StepFormProps): JSX.Element {
           isSelected={formData.heaterShakerSetTimer === true}
           units={t('application:units.time')}
           toggleElement="checkbox"
+          formLevelError={getFormLevelError(
+            showFormErrors,
+            'heaterShakerTimer',
+            mappedErrorsToField,
+            focusedField
+          )}
         />
       </Flex>
     </Flex>

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PauseTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/PauseTools/index.tsx
@@ -28,12 +28,19 @@ import {
 import { InputStepFormField } from '../../../../../../molecules'
 import { getInitialDeckSetup } from '../../../../../../step-forms/selectors'
 import { selectors as uiModuleSelectors } from '../../../../../../ui/modules'
+import { getFormErrorsMappedToField, getFormLevelError } from '../../utils'
 
 import type { ChangeEvent } from 'react'
 import type { StepFormProps } from '../../types'
 
 export function PauseTools(props: StepFormProps): JSX.Element {
-  const { propsForFields } = props
+  const {
+    propsForFields,
+    visibleFormErrors,
+    focusedField,
+    showFormErrors,
+    setShowFormErrorsAndWarnings,
+  } = props
 
   const tempModuleLabwareOptions = useSelector(
     uiModuleSelectors.getTemperatureLabwareOptions
@@ -75,6 +82,8 @@ export function PauseTools(props: StepFormProps): JSX.Element {
 
   const { pauseAction } = props.formData
 
+  const mappedErrorsToField = getFormErrorsMappedToField(visibleFormErrors)
+
   return (
     <>
       <Flex flexDirection={DIRECTION_COLUMN}>
@@ -88,6 +97,7 @@ export function PauseTools(props: StepFormProps): JSX.Element {
             <RadioButton
               onChange={(e: ChangeEvent<any>) => {
                 propsForFields.pauseAction.updateValue(e.currentTarget.value)
+                setShowFormErrorsAndWarnings?.(false)
               }}
               buttonLabel={t(
                 'form:step_edit_form.field.pauseAction.options.untilResume'
@@ -101,6 +111,7 @@ export function PauseTools(props: StepFormProps): JSX.Element {
             <RadioButton
               onChange={(e: ChangeEvent<any>) => {
                 propsForFields.pauseAction.updateValue(e.currentTarget.value)
+                setShowFormErrorsAndWarnings?.(false)
               }}
               buttonLabel={t(
                 'form:step_edit_form.field.pauseAction.options.untilTime'
@@ -112,6 +123,7 @@ export function PauseTools(props: StepFormProps): JSX.Element {
             <RadioButton
               onChange={(e: ChangeEvent<any>) => {
                 propsForFields.pauseAction.updateValue(e.currentTarget.value)
+                setShowFormErrorsAndWarnings?.(false)
               }}
               buttonLabel={t(
                 'form:step_edit_form.field.pauseAction.options.untilTemperature'
@@ -146,6 +158,12 @@ export function PauseTools(props: StepFormProps): JSX.Element {
                     units={t('application:units.time_hms')}
                     padding="0"
                     showTooltip={false}
+                    formLevelError={getFormLevelError(
+                      showFormErrors,
+                      'pauseTime',
+                      mappedErrorsToField,
+                      focusedField
+                    )}
                   />
                 </Flex>
               </Flex>
@@ -184,6 +202,12 @@ export function PauseTools(props: StepFormProps): JSX.Element {
                     errorToShow={propsForFields.pauseTemperature.errorToShow}
                     padding="0"
                     showTooltip={false}
+                    formLevelError={getFormLevelError(
+                      showFormErrors,
+                      'pauseTemperature',
+                      mappedErrorsToField,
+                      focusedField
+                    )}
                   />
                 </Flex>
               </>

diff --git a/...src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ProfileSettings.tsx b/...src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ProfileSettings.tsx
@@ -6,14 +6,27 @@ import {
   StyledText,
 } from '@opentrons/components'
 import { InputStepFormField } from '../../../../../../molecules'
+import { getFormErrorsMappedToField, getFormLevelError } from '../../utils'
 
+import type { StepFormErrors } from '../../../../../../steplist'
 import type { FieldPropsByName } from '../../types'
 
 interface ProfileSettingsProps {
   propsForFields: FieldPropsByName
+  showFormErrors: boolean
+  visibleFormErrors: StepFormErrors
+  focusedField?: string | null
 }
 export function ProfileSettings(props: ProfileSettingsProps): JSX.Element {
-  const { propsForFields } = props
+  const {
+    propsForFields,
+    showFormErrors,
+    visibleFormErrors,
+    focusedField,
+  } = props
+
+  const mappedErrorsToField = getFormErrorsMappedToField(visibleFormErrors)
+
   const { i18n, t } = useTranslation(['application', 'form'])
   return (
     <Flex
@@ -30,6 +43,12 @@ export function ProfileSettings(props: ProfileSettingsProps): JSX.Element {
         units={t('units.microliter')}
         padding="0"
         showTooltip={false}
+        formLevelError={getFormLevelError(
+          showFormErrors,
+          'profileVolume',
+          mappedErrorsToField,
+          focusedField
+        )}
       />
       <InputStepFormField
         {...propsForFields.profileTargetLidTemp}
@@ -40,6 +59,12 @@ export function ProfileSettings(props: ProfileSettingsProps): JSX.Element {
         units={t('units.degrees')}
         padding="0"
         showTooltip={false}
+        formLevelError={getFormLevelError(
+          showFormErrors,
+          'profileTargetLidTemp',
+          mappedErrorsToField,
+          focusedField
+        )}
       />
     </Flex>
   )

diff --git a/...c/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerState.tsx b/...c/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerState.tsx
@@ -10,21 +10,36 @@ import {
   ToggleExpandStepFormField,
   ToggleStepFormField,
 } from '../../../../../../molecules'
+import { getFormErrorsMappedToField, getFormLevelError } from '../../utils'
 
 import type { FormData } from '../../../../../../form-types'
+import type { StepFormErrors } from '../../../../../../steplist'
 import type { FieldPropsByName } from '../../types'
 
 interface ThermocyclerStateProps {
   title: string
   formData: FormData
   propsForFields: FieldPropsByName
   isHold?: boolean
+  visibleFormErrors: StepFormErrors
+  showFormErrors?: boolean
+  focusedField?: string | null
 }
 
 export function ThermocyclerState(props: ThermocyclerStateProps): JSX.Element {
-  const { title, propsForFields, formData, isHold = false } = props
+  const {
+    title,
+    propsForFields,
+    formData,
+    isHold = false,
+    visibleFormErrors,
+    showFormErrors = true,
+    focusedField,
+  } = props
   const { i18n, t } = useTranslation(['application', 'form'])
 
+  const mappedErrorsToField = getFormErrorsMappedToField(visibleFormErrors)
+
   const {
     blockFieldActive,
     lidFieldActive,
@@ -68,6 +83,12 @@ export function ThermocyclerState(props: ThermocyclerStateProps): JSX.Element {
         isSelected={formData[blockFieldActive] === true}
         onLabel={t('form:step_edit_form.field.heaterShaker.shaker.toggleOn')}
         offLabel={t('form:step_edit_form.field.heaterShaker.shaker.toggleOff')}
+        formLevelError={getFormLevelError(
+          showFormErrors,
+          blockTempField,
+          mappedErrorsToField,
+          focusedField
+        )}
       />
       <ToggleExpandStepFormField
         {...propsForFields[lidTempField]}
@@ -81,6 +102,12 @@ export function ThermocyclerState(props: ThermocyclerStateProps): JSX.Element {
         offLabel={t(
           'form:step_edit_form.field.thermocyclerState.lid.toggleOff'
         )}
+        formLevelError={getFormLevelError(
+          showFormErrors,
+          lidTempField,
+          mappedErrorsToField,
+          focusedField
+        )}
       />
       <ToggleStepFormField
         isDisabled={propsForFields[lidPositionField].disabled}