diff --git a/protocol-designer/src/organisms/Alerts/FormAlerts.tsx b/protocol-designer/src/organisms/Alerts/FormAlerts.tsx index f9d7166943d..d51d34ff5d8 100644 --- a/protocol-designer/src/organisms/Alerts/FormAlerts.tsx +++ b/protocol-designer/src/organisms/Alerts/FormAlerts.tsx @@ -29,7 +29,7 @@ import type { ProfileFormError } from '../../steplist/formLevel/profileErrors' import type { MakeAlert } from './types' interface FormAlertsProps { - showFormErrorsAndWarnings: boolean + showFormErrors: boolean focusedField?: StepFieldName | null dirtyFields?: StepFieldName[] page: number @@ -41,7 +41,7 @@ interface WarningType { } function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null { - const { showFormErrorsAndWarnings, focusedField, dirtyFields, page } = props + const { showFormErrors, focusedField, dirtyFields, page } = props const { t } = useTranslation('alert') const dispatch = useDispatch() @@ -78,7 +78,7 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null { dirtyFields: dirtyFields ?? [], errors: formLevelErrorsForUnsavedForm, page, - showErrors: showFormErrorsAndWarnings, + showErrors: showFormErrors, }) const profileItemsById: Record | null | undefined = @@ -180,28 +180,19 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null { } } - if (showFormErrorsAndWarnings) { - return [...formErrors, ...formWarnings].length > 0 ? ( - - {formErrors.map((error, key) => makeAlert('error', error, key))} - {formWarnings.map((warning, key) => makeAlert('warning', warning, key))} - - ) : null - } - - return timelineWarnings.length > 0 ? ( + return [...formErrors, ...timelineWarnings, ...formWarnings].length > 0 ? ( + {showFormErrors + ? formErrors.map((error, key) => makeAlert('error', error, key)) + : null} {timelineWarnings.map((warning, key) => makeAlert('warning', warning, key) )} + {formWarnings.map((warning, key) => makeAlert('warning', warning, key))} ) : null } diff --git a/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx b/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx index 5c7428d6996..14110951a76 100644 --- a/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx +++ b/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx @@ -37,7 +37,7 @@ describe('FormAlerts', () => { props = { focusedField: null, dirtyFields: [], - showFormErrorsAndWarnings: false, + showFormErrors: false, page: 0, } vi.mocked(getFormLevelErrorsForUnsavedForm).mockReturnValue([]) @@ -64,7 +64,6 @@ describe('FormAlerts', () => { expect(vi.mocked(dismissTimelineWarning)).toHaveBeenCalled() }) it('renders a form level warning that is dismissible', () => { - props.showFormErrorsAndWarnings = true vi.mocked(getFormWarningsForSelectedStep).mockReturnValue([ { type: 'TIP_POSITIONED_LOW_IN_TUBE', diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx index f8cffb8f6a5..b930af715cb 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx @@ -122,10 +122,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { })) const timeline = useSelector(getRobotStateTimeline) const [toolboxStep, setToolboxStep] = useState(0) - const [ - showFormErrorsAndWarnings, - setShowFormErrorsAndWarnings, - ] = useState(false) + const [showFormErrors, setShowFormErrors] = useState(false) const [tab, setTab] = useState('aspirate') const visibleFormWarnings = getVisibleFormWarnings({ focusedField, @@ -140,7 +137,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { ...dynamicFormLevelErrorsForUnsavedForm, ], page: toolboxStep, - showErrors: showFormErrorsAndWarnings, + showErrors: showFormErrors, }) const [isRename, setIsRename] = useState(false) const icon = stepIconsByType[formData.stepType] @@ -187,7 +184,6 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { }) } } - const handleSaveClick = (): void => { if (canSave) { const duration = new Date().getTime() - analyticsStartTime.getTime() @@ -212,7 +208,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { ) dispatch(analyticsEvent(stepDuration)) } else { - setShowFormErrorsAndWarnings(true) + setShowFormErrors(true) if (tab === 'aspirate' && isDispenseError && !isAspirateError) { setTab('dispense') } @@ -227,9 +223,9 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { if (isMultiStepToolbox && toolboxStep === 0) { if (!isErrorOnCurrentPage) { setToolboxStep(1) - setShowFormErrorsAndWarnings(false) + setShowFormErrors(false) } else { - setShowFormErrorsAndWarnings(true) + setShowFormErrors(true) handleScrollToTop() } } else { @@ -279,7 +275,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { width="100%" onClick={() => { setToolboxStep(0) - setShowFormErrorsAndWarnings(false) + setShowFormErrors(false) }} > {i18n.format(t('shared:back'), 'capitalize')} @@ -308,7 +304,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { { setTab('aspirate') - setShowFormErrorsAndWarnings?.(false) + setShowFormErrors?.(false) }, } const dispenseTab = { @@ -110,7 +110,7 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element { isActive: tab === 'dispense', onClick: () => { setTab('dispense') - setShowFormErrorsAndWarnings?.(false) + setShowFormErrors?.(false) }, } const hideWellOrderField = 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 df3e86b2bcb..0da95e20e01 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 @@ -34,11 +34,7 @@ import type { ChangeEvent } from 'react' import type { StepFormProps } from '../../types' export function PauseTools(props: StepFormProps): JSX.Element { - const { - propsForFields, - visibleFormErrors, - setShowFormErrorsAndWarnings, - } = props + const { propsForFields, visibleFormErrors, setShowFormErrors } = props const tempModuleLabwareOptions = useSelector( uiModuleSelectors.getTemperatureLabwareOptions @@ -101,7 +97,7 @@ export function PauseTools(props: StepFormProps): JSX.Element { ) => { propsForFields.pauseAction.updateValue(e.currentTarget.value) - setShowFormErrorsAndWarnings?.(false) + setShowFormErrors?.(false) }} buttonLabel={t( 'form:step_edit_form.field.pauseAction.options.untilResume' @@ -113,7 +109,7 @@ export function PauseTools(props: StepFormProps): JSX.Element { ) => { propsForFields.pauseAction.updateValue(e.currentTarget.value) - setShowFormErrorsAndWarnings?.(false) + setShowFormErrors?.(false) }} buttonLabel={t( 'form:step_edit_form.field.pauseAction.options.untilTime' @@ -125,7 +121,7 @@ export function PauseTools(props: StepFormProps): JSX.Element { ) => { propsForFields.pauseAction.updateValue(e.currentTarget.value) - setShowFormErrorsAndWarnings?.(false) + setShowFormErrors?.(false) }} buttonLabel={t( 'form:step_edit_form.field.pauseAction.options.untilTemperature' 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 96707eaf2f1..3e85004549e 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 @@ -25,7 +25,7 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element { showFormErrors = true, visibleFormErrors, focusedField, - setShowFormErrorsAndWarnings, + setShowFormErrors, } = props const { t } = useTranslation('form') @@ -49,7 +49,7 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element { onChange={() => { setContentType('thermocyclerState') propsForFields.thermocyclerFormType.updateValue('thermocyclerState') - setShowFormErrorsAndWarnings?.(false) + setShowFormErrors?.(false) }} isSelected={contentType === 'thermocyclerState'} /> @@ -64,7 +64,7 @@ export function ThermocyclerTools(props: StepFormProps): JSX.Element { propsForFields.thermocyclerFormType.updateValue( 'thermocyclerProfile' ) - setShowFormErrorsAndWarnings?.(false) + setShowFormErrors?.(false) }} isSelected={contentType === 'thermocyclerProfile'} /> diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts index ac05085fa31..ffbfd8b32c3 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/types.ts @@ -30,7 +30,7 @@ export interface StepFormProps { visibleFormErrors: StepFormErrors showFormErrors: boolean focusedField?: string | null - setShowFormErrorsAndWarnings?: React.Dispatch> + setShowFormErrors?: React.Dispatch> tab: LiquidHandlingTab setTab: React.Dispatch> }