diff --git a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx index e6a57928419..a415559e2c4 100644 --- a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx +++ b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx @@ -25,69 +25,91 @@ import { WizardHeader } from '../../molecules/WizardHeader' import { i18n } from '../../i18n' const SUPPORT_EMAIL = 'support@opentrons.com' - -interface FatalErrorModalProps { +interface FatalErrorProps { errorMessage: string shouldUseMetalProbe: boolean onClose: () => void } + +interface FatalErrorModalProps extends FatalErrorProps { + isOnDevice: boolean +} + export function FatalErrorModal(props: FatalErrorModalProps): JSX.Element { - const { errorMessage, shouldUseMetalProbe, onClose } = props const { t } = useTranslation(['labware_position_check', 'shared', 'branded']) + const { onClose, isOnDevice } = props return createPortal( - - } - > - + + ) : ( + + } > - - - {i18n.format(t('shared:something_went_wrong'), 'sentenceCase')} - - {shouldUseMetalProbe ? ( - - {t('remove_probe_before_exit')} - - ) : null} - - {t('branded:help_us_improve_send_error_report', { - support_email: SUPPORT_EMAIL, - })} - - - - {t('shared:exit')} - - - , + + + ), getTopPortalEl() ) } +export function FatalError(props: FatalErrorProps): JSX.Element { + const { errorMessage, shouldUseMetalProbe, onClose } = props + const { t } = useTranslation(['labware_position_check', 'shared', 'branded']) + return ( + + + + {i18n.format(t('shared:something_went_wrong'), 'sentenceCase')} + + {shouldUseMetalProbe ? ( + + {t('remove_probe_before_exit')} + + ) : null} + + {t('branded:help_us_improve_send_error_report', { + support_email: SUPPORT_EMAIL, + })} + + + + {t('shared:exit')} + + + ) +} + const ErrorHeader = styled.h1` text-align: ${TEXT_ALIGN_CENTER}; ${TYPOGRAPHY.h1Default} diff --git a/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx b/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx index 32662dd7391..c6f91efb66b 100644 --- a/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx +++ b/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx @@ -25,7 +25,7 @@ import { PickUpTip } from './PickUpTip' import { ReturnTip } from './ReturnTip' import { ResultsSummary } from './ResultsSummary' import { useChainMaintenanceCommands } from '../../resources/runs' -import { FatalErrorModal } from './FatalErrorModal' +import { FatalError } from './FatalErrorModal' import { RobotMotionLoader } from './RobotMotionLoader' import { useNotifyCurrentMaintenanceRun } from '../../resources/maintenance_runs' import { getLabwarePositionCheckSteps } from './getLabwarePositionCheckSteps' @@ -334,10 +334,10 @@ export const LabwarePositionCheckComponent = ( ) } else if (fatalError != null) { modalContent = ( - ) } else if (showConfirmation) { @@ -414,18 +414,12 @@ export const LabwarePositionCheckComponent = ( const wizardHeader = ( { - if (fatalError != null) { - handleCleanUpAndClose() - } else { - confirmExitLPC() - } - } + : confirmExitLPC } /> ) diff --git a/app/src/organisms/LabwarePositionCheck/index.tsx b/app/src/organisms/LabwarePositionCheck/index.tsx index abadfa346a1..5648913cfe2 100644 --- a/app/src/organisms/LabwarePositionCheck/index.tsx +++ b/app/src/organisms/LabwarePositionCheck/index.tsx @@ -2,6 +2,8 @@ import * as React from 'react' import { useLogger } from '../../logger' import { LabwarePositionCheckComponent } from './LabwarePositionCheckComponent' import { FatalErrorModal } from './FatalErrorModal' +import { getIsOnDevice } from '../../redux/config' +import { useSelector } from 'react-redux' import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data' import type { @@ -31,12 +33,14 @@ export const LabwarePositionCheck = ( props: LabwarePositionCheckModalProps ): JSX.Element => { const logger = useLogger(new URL('', import.meta.url).pathname) + const isOnDevice = useSelector(getIsOnDevice) return ( @@ -52,7 +56,9 @@ interface ErrorBoundaryProps { errorMessage: string shouldUseMetalProbe: boolean onClose: () => void + isOnDevice: boolean }) => JSX.Element + isOnDevice: boolean } class ErrorBoundary extends React.Component< ErrorBoundaryProps, @@ -74,7 +80,12 @@ class ErrorBoundary extends React.Component< } render(): ErrorBoundaryProps['children'] | JSX.Element { - const { ErrorComponent, children, shouldUseMetalProbe } = this.props + const { + ErrorComponent, + children, + shouldUseMetalProbe, + isOnDevice, + } = this.props const { error } = this.state if (error != null) return ( @@ -82,6 +93,7 @@ class ErrorBoundary extends React.Component< errorMessage={error.message} shouldUseMetalProbe={shouldUseMetalProbe} onClose={this.props.onClose} + isOnDevice={isOnDevice} /> ) // Normally, just render children