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( {title} + {tooltipContent != null ? ( + {tooltipContent} + ) : null} {isSelected ? onLabel : offLabel} @@ -76,9 +79,6 @@ export function ToggleStepFormField( - {tooltipContent != null ? ( - {tooltipContent} - ) : 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 { ) 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, }} /> 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 ( {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 + )} /> 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 ( <> @@ -88,6 +97,7 @@ export function PauseTools(props: StepFormProps): JSX.Element { ) => { 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 { ) => { 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 { ) => { 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 + )} /> @@ -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 + )} /> 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 ( ) 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 + )} /> ( @@ -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 ( - + ) 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> } 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 + +export const getFormErrorsMappedToField = ( + formErrors: StepFormErrors +): ErrorMappedToField => { + return formErrors.reduce((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 { @@ -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 = ( { + 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> = { ), }, pause: { - getErrors: composeErrors(pauseForTimeOrUntilTold), + getErrors: composeErrors(pauseTimeRequired, pauseTemperatureRequired), }, moveLiquid: { getErrors: composeErrors(