refactor(protocol-designer): deprecate field-level form errors and refactor form errors (#18437)

closes AUTH-1300 AUTH-1301 AUTH-1320

Author: jerader

protocol-designer/docs/STEP_FORMS_AND_PROTOCOL_TIMELINE.md

@@ -32,7 +32,7 @@ The lightweight mapping function `compoundCommandCreatorFromStepArgs` determines
 
 ### Timeline warnings & errors
 
-Before we talked about form/field-level errors & warnings. These can be purely generated from the form values, without taking Timeline/RobotState concerns into account.
+Before we talked about form-level errors & warnings. These can be purely generated from the form values, without taking Timeline/RobotState concerns into account.
 
 Timeline warnings and errors are for situations when information from the timeline is relevant. For example: the error when running out of tips mid-protocol, or the warning when aspirating from a well that doesn't have enough liquid.
 
@@ -68,13 +68,11 @@ The rest of this doc will describe the PD-specific side of things: how Step Form
 
 **Masking values**: Masking is a behavior where a field rejects updates when they fail to meet a certain condition -- for example, a field only intended for integers will reject changes to add a decimal point. Maskers are used in the presentational layer (specifically, in the `FieldConnector` component) where they should be applied to all updates.
 
-**Field-level errors**: `steplist/fieldLevel` allows you to specify a `getErrors` function for each field. A field can have multiple "error checker" functions that can be composed together; the final result is an array of strings where each represents an error in the field. ~~(NOTE: if there are multiple field-level errors, `FieldConnector` will just join them with `', '`.)~~
-
 **Form-level errors & warnings**: When an error is related to the value of more than one field, it should be specified in `steplist/formLevel` under `getErrors` for that form's `stepType`. Also, there's no such thing as field-level warnings in PD; if need a warning in a form, go to `formLevel` and specify a `getWarnings` function. Form-level errors have a `dependentFields` array associated with them, which is used to ensure that all fields have been touched (are not pristine) before showing the error.
 
 ## Effects of field/form errors
 
-- **Blocking Form Save:** Forms with field-level or form-level errors cannot be saved. The "Save" button will be disabled.
+- **Blocking Form Save:** Forms with form-level errors cannot be saved. The "Save" button will be disabled.
 
 - **Timeline truncation:** If a saved step form has field/form errors, it will not be passed to `{formName}ToArgs` and when the timeline is built it will stop before the error-containing step form.
 

protocol-designer/src/assets/localization/en/protocol_steps.json

@@ -69,7 +69,7 @@
       "open": "open"
     }
   },
-  "heater_shaker_settings": "Heater-Shaker Settings",
+  "heater_shaker_state": "Heater-Shaker state",
   "in": "in",
   "into": "into",
   "labware_to": "{{labware}} to",

protocol-designer/src/components/molecules/ToggleExpandStepFormField/index.tsx

@@ -48,7 +48,6 @@ export function ToggleExpandStepFormField(
   const resetFieldValue = (): void => {
     restProps.updateValue(null)
   }
-
   //  TODO: refactor this, it is messy
   const onToggleUpdateValue = (): void => {
     if (toggleValue === 'engage' || toggleValue === 'disengage') {

protocol-designer/src/components/organisms/Alerts/FormAlerts.tsx

@@ -138,7 +138,7 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null {
 
   const filteredFormErrorsForBanner = visibleFormErrors.reduce<WarningType[]>(
     (acc, error) => {
-      return error.showAtForm ?? true
+      return error.location === 'form'
         ? [
             ...acc,
             {

protocol-designer/src/components/organisms/Alerts/__tests__/FormAlerts.test.tsx

@@ -73,6 +73,7 @@ describe('FormAlerts', () => {
         type: 'TIP_POSITIONED_LOW_IN_TUBE',
         title: 'mockTitle',
         dependentFields: [],
+        location: 'form',
       },
     ])
     render(props)

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/DisposalField.tsx

@@ -11,12 +11,11 @@ import {
 import { selectors as stepFormSelectors } from '../../../../../step-forms'
 import { getMaxDisposalVolumeForMultidispense } from '../../../../../steplist/formLevel/handleFormChange/utils'
 import { selectors as uiLabwareSelectors } from '../../../../../ui/labware'
-import { getBlowoutLocationOptionsForForm, getFormLevelError } from '../utils'
+import { getBlowoutLocationOptionsForForm } from '../utils'
 import { BlowoutOffsetField } from './BlowoutOffsetField'
 import { FlowRateField } from './FlowRateField'
 
 import type { FormData, PathOption, StepType } from '../../../../../form-types'
-import type { FormError } from '../../../../../steplist/formLevel/errors'
 import type { FieldPropsByName } from '../types'
 
 interface DisposalFieldProps {
@@ -26,7 +25,6 @@ interface DisposalFieldProps {
   propsForFields: FieldPropsByName
   stepType: StepType
   volume: string | null
-  mappedErrorsToField: Record<string, FormError>
   aspirate_airGap_checkbox?: boolean | null
   aspirate_airGap_volume?: string | null
   tipRack?: string | null
@@ -42,7 +40,6 @@ export function DisposalField(props: DisposalFieldProps): JSX.Element {
     aspirate_airGap_checkbox,
     aspirate_airGap_volume,
     tipRack,
-    mappedErrorsToField,
     formData,
   } = props
   const { t } = useTranslation(['application', 'form'])
@@ -95,10 +92,6 @@ export function DisposalField(props: DisposalFieldProps): JSX.Element {
           />
           <DropdownStepFormField
             {...propsForFields.blowout_location}
-            errorToShow={getFormLevelError(
-              'blowout_location',
-              mappedErrorsToField
-            )}
             options={disposalDestinationOptions}
             title={t('protocol_steps:blowout_location')}
             padding="0"

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx

@@ -45,10 +45,11 @@ import {
   getCurrentFormIsPresaved,
   getDynamicFieldFormErrorsForUnsavedForm,
   getFormLevelErrorsForUnsavedForm,
-  getLabwareEntities,
-  getPipetteEntities,
+  getInvariantContext,
   getSavedStepForms,
 } from '../../../../step-forms/selectors'
+import { actions } from '../../../../steplist'
+import { maskField } from '../../../../steplist/fieldLevel'
 import { updateFieldsForLiquidClass } from '../../../../steplist/formLevel/handleFormChange/utils'
 import { getTimelineWarningsForSelectedStep } from '../../../../top-selectors/timelineWarnings'
 import {
@@ -74,20 +75,20 @@ import {
   getSaveStepSnackbarText,
   getVisibleFormErrors,
   getVisibleFormWarnings,
+  makeSingleEditFieldProps,
 } from './utils'
 
 import type { ComponentType } from 'react'
 import type { RobotType } from '@opentrons/shared-data'
 import type { AnalyticsEvent } from '../../../../analytics/mixpanel'
-import type { FormData, StepType } from '../../../../form-types'
+import type {
+  FormData,
+  HydratedFormData,
+  StepType,
+} from '../../../../form-types'
 import type { FormWarningType } from '../../../../steplist'
 import type { StepFieldName } from '../../../../steplist/fieldLevel'
-import type {
-  FieldPropsByName,
-  FocusHandlers,
-  LiquidHandlingTab,
-  StepFormProps,
-} from './types'
+import type { FocusHandlers, LiquidHandlingTab, StepFormProps } from './types'
 
 type StepFormMap = {
   [K in StepType]?: ComponentType<StepFormProps> | null
@@ -121,7 +122,7 @@ interface StepFormToolboxProps {
   focusHandlers: FocusHandlers
   focusedField: StepFieldName | null
   formData: FormData
-  propsForFields: FieldPropsByName
+  hydratedForm: HydratedFormData
   handleClose: () => void
   handleSave: () => void
 }
@@ -133,9 +134,9 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
     canSave,
     handleClose,
     handleSave,
-    propsForFields,
     dirtyFields,
     focusedField,
+    hydratedForm,
   } = props
   const { t, i18n } = useTranslation([
     'application',
@@ -149,8 +150,13 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
   const [showConfirmationModal, setShowConfirmationModal] = useState<boolean>(
     false
   )
-  const pipetteEntities = useSelector(getPipetteEntities)
-  const labwareEntities = useSelector(getLabwareEntities)
+
+  const handleChangeFormInput = (name: string, value: unknown): void => {
+    const maskedValue = maskField(name, value)
+    dispatch(actions.changeFormInput({ update: { [name]: maskedValue } }))
+  }
+
+  const { pipetteEntities, labwareEntities } = useSelector(getInvariantContext)
   const additionalEquipmentEntities = useSelector(
     getAdditionalEquipmentEntities
   )
@@ -169,6 +175,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
     title: error.title,
     body: error.body,
     dependentFields: error.dependentProfileFields,
+    location: error.location,
   }))
   const timeline = useSelector(getRobotStateTimeline)
   const enableLiquidClasses = useSelector(getEnableLiquidClasses)
@@ -226,8 +233,17 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
       ...dynamicFormLevelErrorsForUnsavedForm,
     ],
     page: toolboxStep,
-    showErrors: showFormErrors,
+    showErrors: !currentFormIsPresaved || showFormErrors,
   })
+  const propsForFields = makeSingleEditFieldProps(
+    focusHandlers,
+    formData,
+    handleChangeFormInput,
+    hydratedForm,
+    t,
+    visibleFormErrors
+  )
+
   const [isRename, setIsRename] = useState<boolean>(false)
   const icon = stepIconsByType[formData.stepType]
 
@@ -491,7 +507,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
           <FormAlerts
             focusedField={focusedField}
             dirtyFields={dirtyFields}
-            showFormErrors={showFormErrors}
+            showFormErrors={!currentFormIsPresaved || showFormErrors}
             page={toolboxStep}
           />
           <ToolsComponent
@@ -500,7 +516,6 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
               propsForFields,
               focusHandlers,
               toolboxStep,
-              visibleFormErrors,
               showFormErrors,
               focusedField,
               setShowFormErrors,

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/AbsorbanceReaderTools/Initialization.tsx

@@ -32,16 +32,13 @@ import {
   ABSORBANCE_READER_MIN_WAVELENGTH_NM,
 } from '../../../../../../constants'
 import { maskToInteger } from '../../../../../../steplist/fieldLevel/processing'
-import { getFormErrorsMappedToField } from '../../utils'
 
 import type { TFunction } from 'i18next'
 import type { Dispatch, SetStateAction } from 'react'
 import type { DropdownOption } from '@opentrons/components'
 import type { FormData } from '../../../../../../form-types'
 import type { InitializationMode } from '../../../../../../step-forms/types'
-import type { StepFormErrors } from '../../../../../../steplist'
 import type { FieldProps, FieldPropsByName } from '../../types'
-import type { ErrorMappedToField } from '../../utils'
 
 const MAX_WAVELENGTHS = 6
 const CUSTOM_OPTION: DropdownOption = { name: 'Other', value: '' }
@@ -62,7 +59,6 @@ const WAVELENGTH_OPTIONS = [...DEFINED_OPTIONS, CUSTOM_OPTION]
 interface InitializationProps {
   formData: FormData
   propsForFields: FieldPropsByName
-  visibleFormErrors: StepFormErrors
   showFormErrors: boolean
 }
 
@@ -90,12 +86,10 @@ const getBadWavelengthError = (
 }
 
 export function Initialization(props: InitializationProps): JSX.Element {
-  const { formData, propsForFields, visibleFormErrors, showFormErrors } = props
+  const { formData, propsForFields, showFormErrors } = props
   const [numWavelengths, setNumWavelengths] = useState<number>(
     (formData.wavelengths?.length as number) ?? 1
   )
-  const mappedErrorsToField = getFormErrorsMappedToField(visibleFormErrors)
-
   return (
     <Flex
       gridGap={SPACING.spacing4}
@@ -112,7 +106,6 @@ export function Initialization(props: InitializationProps): JSX.Element {
         mode={formData.mode}
         numWavelengths={numWavelengths}
         setNumWavelengths={setNumWavelengths}
-        mappedErrorsToField={mappedErrorsToField}
         showFormErrors={showFormErrors}
       />
     </Flex>
@@ -160,7 +153,6 @@ interface InitializationEditorProps {
   wavelengthsProps: FieldProps
   numWavelengths: number
   setNumWavelengths: Dispatch<SetStateAction<number>>
-  mappedErrorsToField: ErrorMappedToField
   showFormErrors: boolean
 }
 
@@ -173,7 +165,6 @@ function IntializationEditor(props: InitializationEditorProps): JSX.Element {
     wavelengthsProps,
     numWavelengths,
     setNumWavelengths,
-    mappedErrorsToField,
     showFormErrors,
   } = props
   const { t } = useTranslation('form')
@@ -259,7 +250,6 @@ function IntializationEditor(props: InitializationEditorProps): JSX.Element {
             <ReferenceWavelength
               formData={formData}
               propsForFields={propsForFields}
-              error={mappedErrorsToField.referenceWavelength?.title ?? null}
             />
           </Flex>
         </>
@@ -359,19 +349,17 @@ function WavelengthItem(props: WavelengthItemProps): JSX.Element {
 interface ReferenceWavelengthProps {
   formData: FormData
   propsForFields: FieldPropsByName
-  error: string | null
 }
 
 function ReferenceWavelength(props: ReferenceWavelengthProps): JSX.Element {
-  const { formData, propsForFields, error } = props
+  const { formData, propsForFields } = props
   const { t } = useTranslation('form')
   const isExpanded = formData.referenceWavelengthActive === true
   const referenceWavelength = formData.referenceWavelength
   const showCustom = !DEFINED_OPTIONS.some(
     ({ value }) => value === referenceWavelength
   )
 
-  const [isFocused, setIsFocused] = useState<boolean>(false)
   const [targetProps, tooltipProps] = useHoverTooltip()
 
   return (
@@ -458,13 +446,7 @@ function ReferenceWavelength(props: ReferenceWavelengthProps): JSX.Element {
                 onClick={e => {
                   e.stopPropagation()
                 }}
-                onBlur={() => {
-                  setIsFocused(false)
-                }}
-                onFocus={() => {
-                  setIsFocused(true)
-                }}
-                error={!isFocused ? error : null}
+                error={propsForFields.referenceWavelength.errorToShow}
               />
             ) : null}
           </>

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/AbsorbanceReaderTools/ReadSettings.tsx

@@ -8,20 +8,15 @@ import {
 } from '@opentrons/components'
 
 import { InputStepFormField } from '../../../../../../components/molecules'
-import { getFormErrorsMappedToField } from '../../utils'
 
-import type { StepFormErrors } from '../../../../../../steplist'
 import type { FieldPropsByName } from '../../types'
 
 interface ReadSettingsProps {
   propsForFields: FieldPropsByName
-  visibleFormErrors: StepFormErrors
 }
 
 export function ReadSettings(props: ReadSettingsProps): JSX.Element {
-  const { propsForFields, visibleFormErrors } = props
-
-  const mappedErrorsToField = getFormErrorsMappedToField(visibleFormErrors)
+  const { propsForFields } = props
 
   const { t } = useTranslation('form')
   return (
@@ -43,7 +38,6 @@ export function ReadSettings(props: ReadSettingsProps): JSX.Element {
         padding="0"
         {...propsForFields.fileName}
         title={t('step_edit_form.field.absorbanceReader.fileName')}
-        errorToShow={mappedErrorsToField.fileName?.title}
         showTooltip={false}
       />
     </Flex>