fix(app): fix view error details does nothing (#12732)

closes RQA-814

Co-authored-by: Shlok Amin <[email protected]>

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 [email protected] 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",

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 (
     <Modal
       header={modalHeader}
-      modalSize="large"
-      isError
       onOutsideClick={() => setShowRunFailedModal(false)}
     >
-      <Flex
-        flexDirection={DIRECTION_COLUMN}
-        gridGap={SPACING.spacing16}
-        marginTop={SPACING.spacing32}
-      >
-        <StyledText
-          fontSize={TYPOGRAPHY.fontSize22}
-          lineHeight={TYPOGRAPHY.lineHeight28}
-          fontWeight={TYPOGRAPHY.fontWeightBold}
-        >
-          {t('run_failed_modal_header', {
-            errorName: errorName,
-            errorCode: errorCode,
-            count: failedStep,
-          })}
-        </StyledText>
-        <StyledText
-          fontSize={TYPOGRAPHY.fontSize22}
-          lineHeight={TYPOGRAPHY.lineHeight28}
-          fontWeight={TYPOGRAPHY.fontWeightRegular}
-        >
-          {/* This will be added when we get a new error system */}
-          {'Error message'}
-        </StyledText>
+      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing40}>
         <Flex
           flexDirection={DIRECTION_COLUMN}
-          backgroundColor={COLORS.light1}
-          borderRadius={BORDERS.size3}
-          gridGap={SPACING.spacing8}
-          padding={SPACING.spacing16}
-          overflowY="scroll"
-          maxHeight="7.75rem"
+          gridGap={SPACING.spacing16}
+          alignItems={ALIGN_FLEX_START}
         >
-          <StyledText
-            fontSize={TYPOGRAPHY.fontSize20}
-            lineHeight={TYPOGRAPHY.lineHeight24}
-            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          >
-            {t('run_failed_modal_body', {
-              command: failedCommand,
+          <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightBold}>
+            {t('error_type', {
+              errorType: errors[0].errorType,
             })}
           </StyledText>
-          <StyledText
-            fontSize={TYPOGRAPHY.fontSize20}
-            lineHeight={TYPOGRAPHY.lineHeight24}
-            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+          <Flex
+            flexDirection={DIRECTION_COLUMN}
+            gridGap={SPACING.spacing8}
+            overflowY="scroll"
+            maxHeight="5.375rem"
           >
-            {errorMessages}
+            {errors.map(error => (
+              <StyledText
+                as="p"
+                key={error.id}
+                textAlign={TYPOGRAPHY.textAlignLeft}
+              >
+                {error.detail}
+              </StyledText>
+            ))}
+          </Flex>
+          <StyledText as="p" textAlign={TYPOGRAPHY.textAlignLeft}>
+            {t('contact_information')}
           </StyledText>
         </Flex>
-        <StyledText
-          fontSize={TYPOGRAPHY.fontSize22}
-          lineHeight={TYPOGRAPHY.lineHeight28}
-          fontWeight={TYPOGRAPHY.fontWeightRegular}
-        >
-          {t('run_failed_modal_description')}
-        </StyledText>
-        <Flex marginTop="1.75rem">
-          <SmallButton
-            width="100%"
-            buttonType="alert"
-            buttonText={i18n.format(t('shared:close'), 'titleCase')}
-            onClick={handleClose}
-            disabled={isCanceling}
-          />
-        </Flex>
+        <SmallButton
+          width="100%"
+          buttonType="alert"
+          buttonText={i18n.format(t('shared:close'), 'capitalize')}
+          onClick={handleClose}
+          disabled={isCanceling}
+        />
       </Flex>
     </Modal>
   )

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'
     )

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<boolean>(
+    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 ? (
+              <RunFailedModal
+                runId={runId}
+                setShowRunFailedModal={setShowRunFailedModal}
+                errors={runRecord?.data.errors}
+              />
+            ) : null}
             <Flex
               flexDirection={DIRECTION_COLUMN}
               alignItems={ALIGN_FLEX_START}