From 130750fc503e0a1c4e76fff2b2343146622aa513 Mon Sep 17 00:00:00 2001
From: tamarzanzouri <tamar.zanzouri@opentrons.com>
Date: Tue, 6 Aug 2024 16:13:10 -0400
Subject: [PATCH] WIP odd run commands list

---
 .../Devices/ProtocolRun/RunFailedModal.tsx    |  8 +-
 .../RunningProtocol/RunFailedModal.tsx        | 74 ++++++++++++++++++-
 app/src/pages/RunSummary/index.tsx            | 10 +++
 3 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx
index 395b9d73f24..10ef0b8bd3c 100644
--- a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx
@@ -25,7 +25,6 @@ import { useDownloadRunLog } from '../hooks'
 
 import type { RunError, RunCommandErrors } from '@opentrons/api-client'
 import type { LegacyModalProps } from '../../../molecules/LegacyModal'
-import { RunCommandError } from '@opentrons/shared-data'
 
 /**
  * This modal is for Desktop app
@@ -126,17 +125,14 @@ export function RunFailedModal({
             {commandErrorList?.pageLength} errors
           </LegacyStyledText>
           <Flex css={ERROR_MESSAGE_STYLE}>
-            {commandErrorList?.data.map((error: RunCommandError, index) => {
+            {commandErrorList?.data.map((error: RunError, index) => {
               return (
                 <LegacyStyledText
                   as="p"
                   textAlign={TYPOGRAPHY.textAlignLeft}
                   key={index}
                 >
-                  {t('error_info', {
-                    errorCode: error.errorCode,
-                    errorType: error.detail
-                  })}
+                  {error.errorCode}: {error.detail}
                 </LegacyStyledText>
               )
             })}
diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx
index c4db8a35360..6b0c8b7c033 100644
--- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx
+++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx
@@ -20,25 +20,27 @@ import { SmallButton } from '../../../atoms/buttons'
 import { Modal } from '../../../molecules/Modal'
 
 import type { ModalHeaderBaseProps } from '../../../molecules/Modal/types'
-import type { RunError } from '@opentrons/api-client'
+import type { RunCommandErrors, RunError } from '@opentrons/api-client'
 
 interface RunFailedModalProps {
   runId: string
   setShowRunFailedModal: (showRunFailedModal: boolean) => void
   errors?: RunError[]
+  commandErrorList?: RunCommandErrors
 }
 
 export function RunFailedModal({
   runId,
   setShowRunFailedModal,
   errors,
+  commandErrorList
 }: RunFailedModalProps): JSX.Element | null {
   const { t, i18n } = useTranslation(['run_details', 'shared', 'branded'])
   const navigate = useNavigate()
   const { stopRun } = useStopRunMutation()
   const [isCanceling, setIsCanceling] = React.useState(false)
 
-  if (errors == null || errors.length === 0) return null
+  if ((errors == null || errors.length === 0) && (commandErrorList == null || commandErrorList.data.length === 0)) return null
   const modalHeader: ModalHeaderBaseProps = {
     title: t('run_failed_modal_title'),
   }
@@ -60,6 +62,10 @@ export function RunFailedModal({
       },
     })
   }
+  if (
+    highestPriorityError != null &&
+    (commandErrorList == null || commandErrorList?.data?.length === 0)
+  ) {
   return (
     <Modal
       header={modalHeader}
@@ -122,6 +128,70 @@ export function RunFailedModal({
     </Modal>
   )
 }
+else{
+  return (
+    <Modal
+    header={modalHeader}
+    onOutsideClick={() => {
+      setShowRunFailedModal(false)
+    }}
+  >
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing40}
+      width="100%"
+      css={css`
+        word-break: break-all;
+      `}
+    >
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing16}
+        alignItems={ALIGN_FLEX_START}
+      >
+        <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightBold}>
+          {commandErrorList?.pageLength} errors
+        </LegacyStyledText>
+        <Flex
+          width="100%"
+          flexDirection={DIRECTION_COLUMN}
+          gridGap={SPACING.spacing8}
+          maxHeight="11rem"
+          backgroundColor={COLORS.grey35}
+          borderRadius={BORDERS.borderRadius8}
+          padding={`${SPACING.spacing16} ${SPACING.spacing20}`}
+        >
+          <Flex flexDirection={DIRECTION_COLUMN} css={SCROLL_BAR_STYLE}>
+          {commandErrorList?.data.map((error: RunError, index) => {
+              return (
+            <LegacyStyledText as="p" textAlign={TYPOGRAPHY.textAlignLeft} key={index}>
+                {error.errorCode}: {error.detail}
+            </LegacyStyledText>
+              )})}
+          </Flex>
+        </Flex>
+        <LegacyStyledText
+          as="p"
+          textAlign={TYPOGRAPHY.textAlignLeft}
+          css={css`
+            word-break: break-word;
+          `}
+        >
+          {t('branded:contact_information')}
+        </LegacyStyledText>
+      </Flex>
+      <SmallButton
+        width="100%"
+        buttonType="alert"
+        buttonText={i18n.format(t('shared:close'), 'capitalize')}
+        onClick={handleClose}
+        disabled={isCanceling}
+      />
+    </Flex>
+  </Modal>
+  )
+}
+}
 
 const SCROLL_BAR_STYLE = css`
   overflow-y: ${OVERFLOW_AUTO};
diff --git a/app/src/pages/RunSummary/index.tsx b/app/src/pages/RunSummary/index.tsx
index 5a9ec110fea..4a13b1018c6 100644
--- a/app/src/pages/RunSummary/index.tsx
+++ b/app/src/pages/RunSummary/index.tsx
@@ -38,6 +38,7 @@ import {
   useProtocolQuery,
   useInstrumentsQuery,
   useDeleteRunMutation,
+  useAllRunCommandErrorsQuery,
 } from '@opentrons/react-api-client'
 
 import { LargeButton } from '../../atoms/buttons'
@@ -145,6 +146,14 @@ export function RunSummary(): JSX.Element {
     localRobot?.serverHealth?.serialNumber ??
     null
 
+  const { data: commandErrorList } = useAllRunCommandErrorsQuery(runId, null, {
+      enabled:
+        runStatus != null &&
+        // @ts-expect-error runStatus expected to possibly not be terminal
+        RUN_STATUSES_TERMINAL.includes(runStatus) &&
+        isRunCurrent,
+    })
+
   let headerText = t('run_complete_splash')
   if (runStatus === RUN_STATUS_FAILED) {
     headerText = t('run_failed_splash')
@@ -321,6 +330,7 @@ export function RunSummary(): JSX.Element {
               runId={runId}
               setShowRunFailedModal={setShowRunFailedModal}
               errors={runRecord?.data.errors}
+              commandErrorList={commandErrorList}
             />
           ) : null}
           <Flex