diff --git a/protocol-designer/src/organisms/Alerts/FormAlerts.tsx b/protocol-designer/src/organisms/Alerts/FormAlerts.tsx index 7897d86782d..ad470253e69 100644 --- a/protocol-designer/src/organisms/Alerts/FormAlerts.tsx +++ b/protocol-designer/src/organisms/Alerts/FormAlerts.tsx @@ -28,12 +28,14 @@ import type { ProfileFormError } from '../../steplist/formLevel/profileErrors' import type { MakeAlert } from './types' interface FormAlertsProps { + showFormErrorsAndWarnings: boolean focusedField?: StepFieldName | null dirtyFields?: StepFieldName[] } function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null { - const { focusedField, dirtyFields } = props + const { showFormErrorsAndWarnings, focusedField, dirtyFields } = props + const { t } = useTranslation('alert') const dispatch = useDispatch() const formLevelErrorsForUnsavedForm = useSelector( @@ -120,17 +122,13 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null { ) + const formErrors = [ - ...visibleFormErrors.reduce((acc, error) => { - return error.showAtForm ?? true - ? { - ...acc, - title: error.title, - description: error.body || null, - showAtForm: error.showAtForm ?? true, - } - : acc - }, []), + ...visibleFormErrors.map(error => ({ + title: error.title, + description: error.body ?? null, + showAtForm: error.showAtForm ?? true, + })), ...visibleDynamicFieldFormErrors.map(error => ({ title: error.title, description: error.body || null, @@ -161,14 +159,26 @@ function FormAlertsComponent(props: FormAlertsProps): JSX.Element | null { ) } } - return [...formErrors, ...formWarnings, ...timelineWarnings].length > 0 ? ( + + 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 ? ( - {formErrors.map((error, key) => makeAlert('error', error, key))} - {formWarnings.map((warning, key) => makeAlert('warning', warning, key))} {timelineWarnings.map((warning, key) => makeAlert('warning', warning, key) )} diff --git a/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx b/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx index b069da5534f..26c5cdb02ce 100644 --- a/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx +++ b/protocol-designer/src/organisms/Alerts/__tests__/FormAlerts.test.tsx @@ -37,6 +37,7 @@ describe('FormAlerts', () => { props = { focusedField: null, dirtyFields: [], + showFormErrorsAndWarnings: false, } vi.mocked(getFormLevelErrorsForUnsavedForm).mockReturnValue([]) vi.mocked(getFormWarningsForSelectedStep).mockReturnValue([]) @@ -62,6 +63,7 @@ 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 2f7ae836581..634bb422ecb 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx @@ -244,9 +244,11 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { } > - {showFormErrorsAndWarnings ? ( - - ) : null} + - error.dependentFields.includes('aspirate_labware') + error.dependentFields.includes('aspirate_wells') ) ?? false } />