diff --git a/app/src/assets/localization/en/run_details.json b/app/src/assets/localization/en/run_details.json index 037f214f4a7..b4ab3a540f8 100644 --- a/app/src/assets/localization/en/run_details.json +++ b/app/src/assets/localization/en/run_details.json @@ -19,6 +19,7 @@ "comment_step": "Comment", "comment": "Comment", "complete_protocol_to_download": "Complete the protocol to download the run log", + "contact_information": "Please contact support@opentrons.com with relevant information for assistance with troubleshooting.", "current_step_pause_timer": "Timer", "current_step_pause": "Current Step - Paused by User", "current_step": "Current Step", @@ -32,6 +33,7 @@ "end_of_protocol": "End of protocol", "end_step_time": "End", "end": "End", + "error_type": "Error: {{errorType}}", "failed_step": "Failed step", "ignore_stored_data": "Ignore stored data", "labware_offset_data": "labware offset data", diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx index a80c5efe1f6..97b7a69e624 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx @@ -5,13 +5,11 @@ import { useHistory } from 'react-router-dom' import { Flex, SPACING, - COLORS, TYPOGRAPHY, DIRECTION_COLUMN, - BORDERS, + ALIGN_FLEX_START, } from '@opentrons/components' import { useStopRunMutation } from '@opentrons/react-api-client' -import { RunTimeCommand } from '@opentrons/shared-data' import { StyledText } from '../../../atoms/text' import { SmallButton } from '../../../atoms/buttons' @@ -29,17 +27,12 @@ interface RunError { interface RunFailedModalProps { runId: string setShowRunFailedModal: (showRunFailedModal: boolean) => void - failedStep?: number - failedCommand?: RunTimeCommand errors?: RunError[] } -// ToDo (kj:05/03/2023) This component is needed to refactor to handle error messages export function RunFailedModal({ runId, setShowRunFailedModal, - failedStep, - failedCommand, errors, }: RunFailedModalProps): JSX.Element | null { const { t, i18n } = useTranslation(['run_details', 'shared']) @@ -50,16 +43,8 @@ export function RunFailedModal({ if (errors == null) return null const modalHeader: ModalHeaderBaseProps = { title: t('run_failed_modal_title'), - iconName: 'ot-alert', - iconColor: COLORS.white, } - // Note (kj:04/12/2023) Error code hasn't been defined yet - // for now we use run's errors data - const errorName = errors[0].errorType - const errorCode = 'error-1000' - const errorMessages = errors.map((error: RunError) => error.detail) - const handleClose = (): void => { setIsCanceling(true) setShowRunFailedModal(false) @@ -78,76 +63,46 @@ export function RunFailedModal({ return ( setShowRunFailedModal(false)} > - - - {t('run_failed_modal_header', { - errorName: errorName, - errorCode: errorCode, - count: failedStep, - })} - - - {/* This will be added when we get a new error system */} - {'Error message'} - + - - {t('run_failed_modal_body', { - command: failedCommand, + + {t('error_type', { + errorType: errors[0].errorType, })} - - {errorMessages} + {errors.map(error => ( + + {error.detail} + + ))} + + + {t('contact_information')} - - {t('run_failed_modal_description')} - - - - + ) diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunFailedModal.test.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunFailedModal.test.tsx index e986c61131e..312aeb28ae4 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunFailedModal.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunFailedModal.test.tsx @@ -54,7 +54,6 @@ describe('RunFailedModal', () => { props = { runId: RUN_ID, setShowRunFailedModal: mockFn, - failedStep: 1, errors: mockErrors, } mockStopRun = jest.fn((_runId, opts) => opts.onSuccess()) @@ -64,7 +63,6 @@ describe('RunFailedModal', () => { it('should render text and button', () => { const [{ getByText }] = render(props) getByText('Run failed') - getByText('ExceptionInProtocolError: error-1000 at protocol step 1') getByText( 'ProtocolEngineError [line 16]: ModuleNotAttachedError: No available' ) diff --git a/app/src/pages/OnDeviceDisplay/RunSummary.tsx b/app/src/pages/OnDeviceDisplay/RunSummary.tsx index ff227e11e0c..3796b6a7223 100644 --- a/app/src/pages/OnDeviceDisplay/RunSummary.tsx +++ b/app/src/pages/OnDeviceDisplay/RunSummary.tsx @@ -48,6 +48,7 @@ import { ANALYTICS_PROTOCOL_RUN_AGAIN, ANALYTICS_PROTOCOL_RUN_FINISH, } from '../../redux/analytics' +import { RunFailedModal } from '../../organisms/OnDeviceDisplay/RunningProtocol' import type { Run } from '@opentrons/api-client' import type { OnDeviceRouteParams } from '../../App/types' @@ -89,6 +90,9 @@ export function RunSummary(): JSX.Element { const localRobot = useSelector(getLocalRobot) const robotName = localRobot?.name ?? 'no name' const robotAnalyticsData = useRobotAnalyticsData(robotName) + const [showRunFailedModal, setShowRunFailedModal] = React.useState( + false + ) const runStatusText = isRunSucceeded ? t('run_complete') @@ -109,8 +113,7 @@ export function RunSummary(): JSX.Element { } const handleViewErrorDetails = (): void => { - // Note (kj:04/28/2023) the current RunFailedModal is needed to refactor before hooking up - console.log('will be added') + setShowRunFailedModal(true) } const handleClickSplash = (): void => { @@ -167,6 +170,13 @@ export function RunSummary(): JSX.Element { justifyContent={JUSTIFY_SPACE_BETWEEN} padding={SPACING.spacing40} > + {showRunFailedModal ? ( + + ) : null}