From 6dbc215b2e5e3b8cd1038a5568def7c1afc197bb Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Mon, 28 Oct 2024 15:28:10 -0400
Subject: [PATCH] feat(protocol-designer): update logic for form error
 rendering (#16611)

AUTH-989
---
 .../molecules/InputStepFormField/index.tsx    |  4 +-
 .../ToggleExpandStepFormField/index.tsx       |  1 +
 .../molecules/ToggleStepFormField/index.tsx   |  8 +-
 .../src/organisms/Alerts/FormAlerts.tsx       | 14 +++-
 .../StepForm/StepFormToolbox.tsx              |  3 +
 .../StepTools/HeaterShakerTools/index.tsx     | 29 ++++++-
 .../StepForm/StepTools/PauseTools/index.tsx   | 26 +++++-
 .../ThermocyclerTools/ProfileSettings.tsx     | 27 +++++-
 .../ThermocyclerTools/ThermocyclerState.tsx   | 29 ++++++-
 .../StepTools/ThermocyclerTools/index.tsx     | 25 +++++-
 .../StepTools/__tests__/MagnetTools.test.tsx  |  1 +
 .../__tests__/TemperatureTools.test.tsx       |  1 +
 .../StepForm/__tests__/utils.test.ts          | 76 +++++++++++++++++
 .../Designer/ProtocolSteps/StepForm/types.ts  |  3 +
 .../Designer/ProtocolSteps/StepForm/utils.ts  | 40 +++++++++
 .../Designer/ProtocolSteps/StepSummary.tsx    |  9 +-
 .../src/steplist/formLevel/errors.ts          | 84 ++++++++++++++++++-
 .../src/steplist/formLevel/index.ts           |  5 +-
 18 files changed, 362 insertions(+), 23 deletions(-)

diff --git a/protocol-designer/src/molecules/InputStepFormField/index.tsx b/protocol-designer/src/molecules/InputStepFormField/index.tsx
index 93dde06295f..1f5e5223f0b 100644
--- 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
index 05e3883e575..3bb253dca9d 100644
--- 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
index 9ce244c7d57..eaa7c371310 100644
--- 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
index d08e25e1ec6..7897d86782d 100644
--- 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
index d18bee31915..2f7ae836581 100644
--- 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/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
index 0d1213db9f0..6a0315bb3bf 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
+++ b/protocol-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
index 1ab9d90ce44..98175175218 100644
--- 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/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ProfileSettings.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ProfileSettings.tsx
index f31f77f00c4..59d94469fd1 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ProfileSettings.tsx
+++ b/protocol-designer/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/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerState.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerState.tsx
index a5f1676f2c8..0b00c140f65 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerState.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerState.tsx
@@ -10,8 +10,10 @@ 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 {
@@ -19,12 +21,25 @@ interface ThermocyclerStateProps {
   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}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx
index 834306b7b76..a35e977aa46 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx
@@ -18,7 +18,15 @@ import type { StepFormProps } from '../../types'
 type ThermocyclerContentType = 'thermocyclerState' | 'thermocyclerProfile'
 
 export function ThermocyclerTools(props: StepFormProps): JSX.Element {
-  const { propsForFields, formData, toolboxStep } = props
+  const {
+    propsForFields,
+    formData,
+    toolboxStep,
+    showFormErrors = true,
+    visibleFormErrors,
+    focusedField,
+    setShowFormErrorsAndWarnings,
+  } = props
   const { t } = useTranslation('form')
 
   const [contentType, setContentType] = useState<ThermocyclerContentType>(
@@ -42,6 +50,7 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element {
           onChange={() => {
             setContentType('thermocyclerState')
             propsForFields.thermocyclerFormType.updateValue('thermocyclerState')
+            setShowFormErrorsAndWarnings?.(false)
           }}
           isSelected={contentType === 'thermocyclerState'}
         />
@@ -56,6 +65,7 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element {
             propsForFields.thermocyclerFormType.updateValue(
               'thermocyclerProfile'
             )
+            setShowFormErrorsAndWarnings?.(false)
           }}
           isSelected={contentType === 'thermocyclerProfile'}
         />
@@ -67,12 +77,20 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element {
         title={t('step_edit_form.field.thermocyclerState.state')}
         propsForFields={propsForFields}
         formData={formData}
+        showFormErrors={showFormErrors}
+        visibleFormErrors={visibleFormErrors}
+        focusedField={focusedField}
       />
     )
   } else {
     return (
       <Flex flexDirection={DIRECTION_COLUMN}>
-        <ProfileSettings propsForFields={propsForFields} />
+        <ProfileSettings
+          propsForFields={propsForFields}
+          showFormErrors={showFormErrors}
+          visibleFormErrors={visibleFormErrors}
+          focusedField={focusedField}
+        />
         <Divider marginY="0" />
         <ProfileStepsSummary
           propsForFields={propsForFields}
@@ -84,6 +102,9 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element {
           propsForFields={propsForFields}
           formData={formData}
           isHold
+          showFormErrors={showFormErrors}
+          visibleFormErrors={visibleFormErrors}
+          focusedField={focusedField}
         />
       </Flex>
     )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
index c6cb5f13383..368bfb1d1ee 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
@@ -69,6 +69,7 @@ describe('MagnetTools', () => {
           value: 10,
         },
       },
+      showFormErrors: false,
     }
     vi.mocked(getMagneticLabwareOptions).mockReturnValue([
       { name: 'mock labware in mock module in slot abc', value: 'mockValue' },
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx
index 8edd87af457..498e6b2e1db 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/TemperatureTools.test.tsx
@@ -71,6 +71,7 @@ describe('TemperatureTools', () => {
           value: null,
         },
       },
+      showFormErrors: false,
     }
 
     vi.mocked(getTemperatureModuleIds).mockReturnValue(['mockId'])
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts
index 3d3e3a47393..6007eae6d0c 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts
@@ -6,8 +6,24 @@ import {
 import {
   capitalizeFirstLetter,
   getBlowoutLocationOptionsForForm,
+  getFormErrorsMappedToField,
+  getFormLevelError,
 } from '../utils'
 
+const BASE_VISIBLE_FORM_ERROR = {
+  title: 'form level error title',
+  dependentFields: ['field1', 'field2'],
+}
+
+const MAPPED_ERRORS = {
+  field1: {
+    title: 'form level error title',
+    dependentFields: ['field1', 'field2'],
+    showAtField: true,
+    showAtForm: true,
+  },
+}
+
 describe('getBlowoutLocationOptionsForForm', () => {
   const destOption = {
     name: 'Destination Well',
@@ -69,3 +85,63 @@ describe('capitalizeFirstLetter', () => {
     )
   })
 })
+
+describe('getFormErrorsMappedToField', () => {
+  it('should flatten form-level errors to an object keyed by each implicated field with form-level error as the value', () => {
+    const result = getFormErrorsMappedToField([BASE_VISIBLE_FORM_ERROR])
+    expect(result).toEqual({
+      field1: {
+        ...BASE_VISIBLE_FORM_ERROR,
+        showAtField: true,
+        showAtForm: true,
+      },
+      field2: {
+        ...BASE_VISIBLE_FORM_ERROR,
+        showAtField: true,
+        showAtForm: true,
+      },
+    })
+  })
+  it('should maintain booleans for showAtForm and showAtField', () => {
+    const result = getFormErrorsMappedToField([
+      { ...BASE_VISIBLE_FORM_ERROR, showAtForm: false },
+    ])
+    expect(result).toEqual({
+      field1: {
+        ...BASE_VISIBLE_FORM_ERROR,
+        showAtField: true,
+        showAtForm: false,
+      },
+      field2: {
+        ...BASE_VISIBLE_FORM_ERROR,
+        showAtField: true,
+        showAtForm: false,
+      },
+    })
+  })
+})
+
+describe('getFormLevelError', () => {
+  it('shows form-level error at field when field is not focused and showAtField is true', () => {
+    const result = getFormLevelError(true, 'field1', MAPPED_ERRORS)
+    expect(result).toEqual('form level error title')
+  })
+
+  it('shows no form-level error at field when field is focused and showAtField is true', () => {
+    const result = getFormLevelError(true, 'field1', MAPPED_ERRORS, 'field1')
+    expect(result).toBeNull()
+  })
+
+  it('shows no form-level error at field when field is not focused and showAtField is false', () => {
+    const result = getFormLevelError(
+      true,
+      'field1',
+      {
+        ...MAPPED_ERRORS,
+        field1: { ...MAPPED_ERRORS.field1, showAtField: false },
+      },
+      'field2'
+    )
+    expect(result).toBeNull()
+  })
+})
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts
index c7b063c4731..f0bd6970e73 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts
@@ -26,4 +26,7 @@ export interface StepFormProps {
   propsForFields: FieldPropsByName
   toolboxStep: number
   visibleFormErrors: StepFormErrors
+  showFormErrors: boolean
+  focusedField?: string | null
+  setShowFormErrorsAndWarnings?: React.Dispatch<React.SetStateAction<boolean>>
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
index 00f4749a71b..563308f1238 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
@@ -25,6 +25,7 @@ import type {
   StepType,
   PathOption,
 } from '../../../../form-types'
+import type { FormError } from '../../../../steplist/formLevel'
 import type { NozzleType } from '../../../../types'
 import type { FieldProps, FieldPropsByName, FocusHandlers } from './types'
 
@@ -325,3 +326,42 @@ export const getSaveStepSnackbarText = (
 
 export const capitalizeFirstLetter = (stepName: string): string =>
   `${stepName.charAt(0).toUpperCase()}${stepName.slice(1)}`
+
+type ErrorMappedToField = Record<string, FormError>
+
+export const getFormErrorsMappedToField = (
+  formErrors: StepFormErrors
+): ErrorMappedToField => {
+  return formErrors.reduce<ErrorMappedToField>((acc, error) => {
+    const { dependentFields } = error
+    for (const field of dependentFields) {
+      const { showAtField, showAtForm, title } = error
+      if (showAtField == null || showAtForm == null) {
+        console.error(
+          `${title} should wire up where to show error (at form and/or field)`
+        )
+      }
+      // map each field to only one one error
+      acc[field] = {
+        ...error,
+        showAtField: error.showAtField ?? true,
+        showAtForm: error.showAtForm ?? true,
+      }
+    }
+    return acc
+  }, {})
+}
+
+export const getFormLevelError = (
+  showFormErrors: boolean,
+  fieldName: string,
+  mappedErrorsToField: ErrorMappedToField,
+  focusedField?: string | null
+): string | null => {
+  return showFormErrors &&
+    focusedField !== fieldName &&
+    mappedErrorsToField[fieldName] &&
+    mappedErrorsToField[fieldName].showAtField
+    ? mappedErrorsToField[fieldName].title
+    : null
+}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
index 7d76fc02ae2..3b231529243 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -148,6 +148,7 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
         lidOpen,
         thermocyclerFormType,
         lidOpenHold,
+        blockTargetTempHold,
         profileTargetLidTemp,
         profileVolume,
       } = currentStep
@@ -192,7 +193,7 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
             <Flex gridGap={SPACING.spacing20}>
               <StyledTrans
                 i18nKey="protocol_steps:thermocycler_module.thermocycler_profile.end_hold.block"
-                tagText={`${profileTargetLidTemp}${t(
+                tagText={`${blockTargetTempHold}${t(
                   'application:units.degrees'
                 )}`}
               />
@@ -215,9 +216,6 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
         pauseTime,
         pauseTemperature,
       } = currentStep
-      const pauseModuleDisplayName = getModuleDisplayName(
-        modules[pauseModuleId].model
-      )
       switch (pauseAction) {
         case 'untilResume':
           stepSummaryContent = (
@@ -227,6 +225,9 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
           )
           break
         case 'untilTemperature':
+          const pauseModuleDisplayName = getModuleDisplayName(
+            modules[pauseModuleId].model
+          )
           stepSummaryContent = (
             <StyledTrans
               i18nKey="protocol_steps:pause.untilTemperature"
diff --git a/protocol-designer/src/steplist/formLevel/errors.ts b/protocol-designer/src/steplist/formLevel/errors.ts
index 9bf495b3134..95a2fdd2a3d 100644
--- a/protocol-designer/src/steplist/formLevel/errors.ts
+++ b/protocol-designer/src/steplist/formLevel/errors.ts
@@ -44,10 +44,17 @@ export type FormErrorKey =
   | 'PROFILE_LID_TEMPERATURE_REQUIRED'
   | 'BLOCK_TEMPERATURE_HOLD_REQUIRED'
   | 'LID_TEMPERATURE_HOLD_REQUIRED'
+  | 'PAUSE_TIME_REQUIRED'
+  | 'PAUSE_TEMP_REQUIRED'
+  | 'LABWARE_TO_MOVE_REQUIRED'
+  | 'NEW_LABWARE_LOCATION_REQUIRED'
+
 export interface FormError {
   title: string
   body?: React.ReactNode
   dependentFields: StepFieldName[]
+  showAtField?: boolean
+  showAtForm?: boolean
 }
 const INCOMPATIBLE_ASPIRATE_LABWARE: FormError = {
   title: 'Selected aspirate labware is incompatible with pipette',
@@ -112,38 +119,68 @@ const MODULE_ID_REQUIRED: FormError = {
 const TARGET_TEMPERATURE_REQUIRED: FormError = {
   title: 'Temperature is required',
   dependentFields: ['setTemperature', 'targetTemperature'],
+  showAtForm: false,
+  showAtField: true,
 }
 const PROFILE_VOLUME_REQUIRED: FormError = {
   title: 'Volume is required',
   dependentFields: ['thermocyclerFormType', 'profileVolume'],
+  showAtForm: false,
+  showAtField: true,
 }
 const PROFILE_LID_TEMPERATURE_REQUIRED: FormError = {
   title: 'Temperature is required',
   dependentFields: ['thermocyclerFormType', 'profileTargetLidTemp'],
+  showAtForm: false,
+  showAtField: true,
 }
 const LID_TEMPERATURE_REQUIRED: FormError = {
   title: 'Temperature is required',
   dependentFields: ['lidIsActive', 'lidTargetTemp'],
+  showAtForm: false,
+  showAtField: true,
 }
 const BLOCK_TEMPERATURE_REQUIRED: FormError = {
   title: 'Temperature is required',
   dependentFields: ['blockIsActive', 'blockTargetTemp'],
+  showAtForm: false,
+  showAtField: true,
 }
 const BLOCK_TEMPERATURE_HOLD_REQUIRED: FormError = {
   title: 'Temperature is required',
   dependentFields: ['blockIsActiveHold', 'blockTargetTempHold'],
+  showAtForm: false,
+  showAtField: true,
 }
 const LID_TEMPERATURE_HOLD_REQUIRED: FormError = {
   title: 'Temperature is required',
   dependentFields: ['lidIsActiveHold', 'lidTargetTempHold'],
+  showAtForm: false,
+  showAtField: true,
 }
 const SHAKE_SPEED_REQUIRED: FormError = {
-  title: 'Shake speed required',
+  title: 'Speed required',
   dependentFields: ['setShake', 'targetSpeed'],
+  showAtForm: false,
+  showAtField: true,
 }
 const SHAKE_TIME_REQUIRED: FormError = {
-  title: 'Shake duration required',
+  title: 'Duration required',
   dependentFields: ['heaterShakerSetTimer', 'heaterShakerTimer'],
+  showAtForm: false,
+  showAtField: true,
+}
+const PAUSE_TEMP_REQUIRED: FormError = {
+  title: 'Pause temperature required',
+  dependentFields: ['pauseTemperature', 'pauseAction'],
+  showAtForm: false,
+  showAtField: true,
+}
+const PAUSE_TIME_REQUIRED: FormError = {
+  title: 'Pause duration required',
+  dependentFields: ['pauseTime', 'pauseAction'],
+  showAtForm: false,
+  showAtField: true,
 }
 const HS_TEMPERATURE_REQUIRED: FormError = {
   title: 'Temperature required',
@@ -151,6 +188,20 @@ const HS_TEMPERATURE_REQUIRED: FormError = {
     'targetHeaterShakerTemperature',
     'setHeaterShakerTemperature',
   ],
+  showAtForm: false,
+  showAtField: true,
+}
+const LABWARE_TO_MOVE_REQUIRED: FormError = {
+  title: 'Labware to move required',
+  dependentFields: ['labware'],
+  showAtForm: false,
+  showAtField: true,
+}
+const NEW_LABWARE_LOCATION_REQUIRED: FormError = {
+  title: 'New location required',
+  dependentFields: ['newLocation'],
+  showAtForm: false,
+  showAtField: true,
 }
 
 export interface HydratedFormData {
@@ -384,6 +435,35 @@ export const temperatureRequired = (
     ? HS_TEMPERATURE_REQUIRED
     : null
 }
+export const pauseTimeRequired = (
+  fields: HydratedFormData
+): FormError | null => {
+  const { pauseTime, pauseAction } = fields
+  return pauseAction === PAUSE_UNTIL_TIME && !pauseTime
+    ? PAUSE_TIME_REQUIRED
+    : null
+}
+export const pauseTemperatureRequired = (
+  fields: HydratedFormData
+): FormError | null => {
+  const { pauseTemperature, pauseAction } = fields
+  return pauseAction === PAUSE_UNTIL_TEMP && !pauseTemperature
+    ? PAUSE_TEMP_REQUIRED
+    : null
+}
+export const labwareToMoveRequired = (
+  fields: HydratedFormData
+): FormError | null => {
+  const { labware } = fields
+  return labware == null ? LABWARE_TO_MOVE_REQUIRED : null
+}
+export const newLabwareLocationRequired = (
+  fields: HydratedFormData
+): FormError | null => {
+  const { newLocation } = fields
+  console.log(fields)
+  return newLocation == null ? NEW_LABWARE_LOCATION_REQUIRED : null
+}
 export const engageHeightRangeExceeded = (
   fields: HydratedFormData
 ): FormError | null => {
diff --git a/protocol-designer/src/steplist/formLevel/index.ts b/protocol-designer/src/steplist/formLevel/index.ts
index 1d67206c82b..dd7b9fea36c 100644
--- a/protocol-designer/src/steplist/formLevel/index.ts
+++ b/protocol-designer/src/steplist/formLevel/index.ts
@@ -3,7 +3,6 @@ import {
   incompatibleAspirateLabware,
   incompatibleDispenseLabware,
   incompatibleLabware,
-  pauseForTimeOrUntilTold,
   wellRatioMoveLiquid,
   magnetActionRequired,
   engageHeightRequired,
@@ -20,6 +19,8 @@ import {
   shakeSpeedRequired,
   temperatureRequired,
   shakeTimeRequired,
+  pauseTimeRequired,
+  pauseTemperatureRequired,
 } from './errors'
 
 import {
@@ -69,7 +70,7 @@ const stepFormHelperMap: Partial<Record<StepType, FormHelpers>> = {
     ),
   },
   pause: {
-    getErrors: composeErrors(pauseForTimeOrUntilTold),
+    getErrors: composeErrors(pauseTimeRequired, pauseTemperatureRequired),
   },
   moveLiquid: {
     getErrors: composeErrors(