fix(app): Fix persistent cancelled state

app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx

@@ -106,6 +106,7 @@ import { RunProgressMeter } from '../../RunProgressMeter'
 import { getIsFixtureMismatch } from '../../../resources/deck_configuration/utils'
 import { useDeckConfigurationCompatibility } from '../../../resources/deck_configuration/hooks'
 import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
+import { useMostRecentRunId } from '../../ProtocolUpload/hooks/useMostRecentRunId'
 
 import type { Run, RunError } from '@opentrons/api-client'
 import type { State } from '../../../redux/types'
@@ -161,6 +162,7 @@ export function ProtocolRunHeader({
   const { analysisErrors } = useProtocolAnalysisErrors(runId)
   const { data: attachedInstruments } = useInstrumentsQuery()
   const isRunCurrent = Boolean(useRunQuery(runId)?.data?.data?.current)
+  const mostRecentRunId = useMostRecentRunId()
   const { closeCurrentRun, isClosingCurrentRun } = useCloseCurrentRun()
   const { startedAt, stoppedAt, completedAt } = useRunTimestamps(runId)
   const [showRunFailedModal, setShowRunFailedModal] = React.useState(false)
@@ -249,8 +251,9 @@ export function ProtocolRunHeader({
           ...robotAnalyticsData,
         },
       })
+      closeCurrentRun()
     }
-  }, [runStatus, isRunCurrent, runId])
+  }, [runStatus, isRunCurrent, runId, closeCurrentRun])
 
   const startedAtTimestamp =
     startedAt != null ? formatTimestamp(startedAt) : EMPTY_TIMESTAMP
@@ -372,7 +375,9 @@ export function ProtocolRunHeader({
             }}
           />
         ) : null}
-        {isRunCurrent && showDropTipBanner && pipettesWithTip.length !== 0 ? (
+        {mostRecentRunId === runId &&
+        showDropTipBanner &&
+        pipettesWithTip.length !== 0 ? (
           <ProtocolDropTipBanner
             onLaunchWizardClick={setShowDropTipWizard}
             onCloseClick={() => {
@@ -786,6 +791,11 @@ function TerminalRunBanner(props: TerminalRunProps): JSX.Element | null {
   } = props
   const { t } = useTranslation('run_details')
 
+  const handleClick = (): void => {
+    handleClearClick()
+    setShowRunFailedModal(true)
+  }
+
   if (runStatus === RUN_STATUS_FAILED || runStatus === RUN_STATUS_SUCCEEDED) {
     return (
       <>
@@ -810,7 +820,7 @@ function TerminalRunBanner(props: TerminalRunProps): JSX.Element | null {
               </StyledText>
 
               <LinkButton
-                onClick={() => setShowRunFailedModal(true)}
+                onClick={handleClick}
                 textDecoration={TYPOGRAPHY.textDecorationUnderline}
               >
                 {t('view_error')}

app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunHeader.test.tsx

@@ -22,6 +22,7 @@ import {
   useRunQuery,
   useModulesQuery,
   usePipettesQuery,
+  useDismissCurrentRunMutation,
   useEstopQuery,
   useDoorQuery,
   useInstrumentsQuery,
@@ -91,6 +92,7 @@ import { getPipettesWithTipAttached } from '../../../DropTipWizard/getPipettesWi
 import { getIsFixtureMismatch } from '../../../../resources/deck_configuration/utils'
 import { useDeckConfigurationCompatibility } from '../../../../resources/deck_configuration/hooks'
 import { useMostRecentCompletedAnalysis } from '../../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
+import { useMostRecentRunId } from '../../../ProtocolUpload/hooks/useMostRecentRunId'
 
 import type { UseQueryResult } from 'react-query'
 import type { Run } from '@opentrons/api-client'
@@ -139,6 +141,7 @@ jest.mock('../../../DropTipWizard/getPipettesWithTipAttached')
 jest.mock('../../../../resources/deck_configuration/utils')
 jest.mock('../../../../resources/deck_configuration/hooks')
 jest.mock('../../../LabwarePositionCheck/useMostRecentCompletedAnalysis')
+jest.mock('../../../ProtocolUpload/hooks/useMostRecentRunId')
 
 const mockGetIsHeaterShakerAttached = getIsHeaterShakerAttached as jest.MockedFunction<
   typeof getIsHeaterShakerAttached
@@ -189,6 +192,9 @@ const mockUsePipettesQuery = usePipettesQuery as jest.MockedFunction<
 const mockConfirmCancelModal = ConfirmCancelModal as jest.MockedFunction<
   typeof ConfirmCancelModal
 >
+const mockUseDismissCurrentRunMutation = useDismissCurrentRunMutation as jest.MockedFunction<
+  typeof useDismissCurrentRunMutation
+>
 const mockHeaterShakerIsRunningModal = HeaterShakerIsRunningModal as jest.MockedFunction<
   typeof HeaterShakerIsRunningModal
 >
@@ -242,6 +248,9 @@ const mockUseDeckConfigurationCompatibility = useDeckConfigurationCompatibility
 const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jest.MockedFunction<
   typeof useMostRecentCompletedAnalysis
 >
+const mockUseMostRecentRunId = useMostRecentRunId as jest.MockedFunction<
+  typeof useMostRecentRunId
+>
 
 const ROBOT_NAME = 'otie'
 const RUN_ID = '95e67900-bc9f-4fbf-92c6-cc4d7226a51b'
@@ -398,6 +407,11 @@ describe('ProtocolRunHeader', () => {
     when(mockUseTrackProtocolRunEvent).calledWith(RUN_ID).mockReturnValue({
       trackProtocolRunEvent: mockTrackProtocolRunEvent,
     })
+    when(mockUseDismissCurrentRunMutation)
+      .calledWith()
+      .mockReturnValue({
+        dismissCurrentRun: jest.fn(),
+      } as any)
     when(mockUseUnmatchedModulesForProtocol)
       .calledWith(ROBOT_NAME, RUN_ID)
       .mockReturnValue({ missingModuleIds: [], remainingAttachedModules: [] })
@@ -429,6 +443,7 @@ describe('ProtocolRunHeader', () => {
       } as any)
     mockUseDeckConfigurationCompatibility.mockReturnValue([])
     when(mockGetIsFixtureMismatch).mockReturnValue(false)
+    when(mockUseMostRecentRunId).mockReturnValue(RUN_ID)
   })
 
   afterEach(() => {
@@ -514,7 +529,7 @@ describe('ProtocolRunHeader', () => {
         data: { data: { ...mockIdleUnstartedRun, current: true } },
       } as UseQueryResult<Run>)
     render()
-    expect(mockCloseCurrentRun).not.toBeCalled()
+    expect(mockCloseCurrentRun).toBeCalled()
     expect(mockTrackProtocolRunEvent).toBeCalled()
     expect(mockTrackProtocolRunEvent).toBeCalledWith({
       name: ANALYTICS_PROTOCOL_RUN_FINISH,
@@ -822,7 +837,7 @@ describe('ProtocolRunHeader', () => {
     const [{ getByText }] = render()
 
     getByText('View error').click()
-    expect(mockCloseCurrentRun).not.toHaveBeenCalled()
+    expect(mockCloseCurrentRun).toBeCalled()
     getByText('mock RunFailedModal')
   })
 

app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx

@@ -10,7 +10,10 @@ import {
   Flex,
   SPACING,
 } from '@opentrons/components'
-import { useStopRunMutation } from '@opentrons/react-api-client'
+import {
+  useStopRunMutation,
+  useDismissCurrentRunMutation,
+} from '@opentrons/react-api-client'
 
 import { StyledText } from '../../../atoms/text'
 import { SmallButton } from '../../../atoms/buttons'
@@ -37,6 +40,10 @@ export function ConfirmCancelRunModal({
 }: ConfirmCancelRunModalProps): JSX.Element {
   const { t } = useTranslation(['run_details', 'shared'])
   const { stopRun } = useStopRunMutation()
+  const {
+    dismissCurrentRun,
+    isLoading: isDismissing,
+  } = useDismissCurrentRunMutation()
   const runStatus = useRunStatus(runId)
   const { trackProtocolRunEvent } = useTrackProtocolRunEvent(runId)
   const history = useHistory()
@@ -61,6 +68,7 @@ export function ConfirmCancelRunModal({
   React.useEffect(() => {
     if (runStatus === RUN_STATUS_STOPPED) {
       trackProtocolRunEvent({ name: ANALYTICS_PROTOCOL_RUN_CANCEL })
+      dismissCurrentRun(runId)
       if (!isActiveRun) {
         if (protocolId != null) {
           history.push(`/protocols/${protocolId}`)
@@ -71,7 +79,7 @@ export function ConfirmCancelRunModal({
     }
   }, [runStatus])
 
-  return isCanceling ? (
+  return isCanceling || isDismissing ? (
     <CancelingRunModal />
   ) : (
     <Modal

app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/ConfirmCancelRunModal.test.tsx

@@ -118,6 +118,15 @@ describe('ConfirmCancelRunModal', () => {
     getByText('Cancel run')
   })
 
+  it('shoudler render the canceling run modal when run is dismissing', () => {
+    mockUseDismissCurrentRunMutation.mockReturnValue({
+      dismissCurrentRun: mockDismissCurrentRun,
+      isLoading: true,
+    } as any)
+    const [{ getByText }] = render(props)
+    getByText('mock CancelingRunModal')
+  })
+
   it('when tapping go back, the mock function is called', () => {
     const [{ getByText }] = render(props)
     const button = getByText('Go back')
@@ -138,7 +147,7 @@ describe('ConfirmCancelRunModal', () => {
       .mockReturnValue(RUN_STATUS_STOPPED)
     render(props)
 
-    expect(mockDismissCurrentRun).not.toHaveBeenCalled()
+    expect(mockDismissCurrentRun).toHaveBeenCalled()
     expect(mockTrackProtocolRunEvent).toHaveBeenCalled()
   })
 
@@ -152,7 +161,7 @@ describe('ConfirmCancelRunModal', () => {
       .mockReturnValue(RUN_STATUS_STOPPED)
     render(props)
 
-    expect(mockDismissCurrentRun).not.toHaveBeenCalled()
+    expect(mockDismissCurrentRun).toHaveBeenCalled()
     expect(mockTrackProtocolRunEvent).toHaveBeenCalled()
     expect(mockPush).toHaveBeenCalledWith('/protocols')
   })

app/src/pages/OnDeviceDisplay/RunSummary.tsx

@@ -63,6 +63,7 @@ import { formatTimeWithUtcLabel } from '../../resources/runs/utils'
 import { handleTipsAttachedModal } from '../../organisms/DropTipWizard/TipsAttachedModal'
 import { getPipettesWithTipAttached } from '../../organisms/DropTipWizard/getPipettesWithTipAttached'
 import { getPipetteModelSpecs, FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+import { useMostRecentRunId } from '../../organisms/ProtocolUpload/hooks/useMostRecentRunId'
 
 import type { OnDeviceRouteParams } from '../../App/types'
 import type { PipetteModelSpecs } from '@opentrons/shared-data'
@@ -79,6 +80,7 @@ export function RunSummary(): JSX.Element {
   const host = useHost()
   const { data: runRecord } = useRunQuery(runId, { staleTime: Infinity })
   const isRunCurrent = Boolean(runRecord?.data?.current)
+  const mostRecentRunId = useMostRecentRunId()
   const { data: attachedInstruments } = useInstrumentsQuery()
   const runStatus = runRecord?.data.status ?? null
   const didRunSucceed = runStatus === RUN_STATUS_SUCCEEDED
@@ -130,7 +132,11 @@ export function RunSummary(): JSX.Element {
 
   const handleReturnToDash = (): void => {
     const { mount, specs } = pipettesWithTip[0] || {}
-    if (isRunCurrent && pipettesWithTip.length !== 0 && specs != null) {
+    if (
+      mostRecentRunId === runId &&
+      pipettesWithTip.length !== 0 &&
+      specs != null
+    ) {
       handleTipsAttachedModal(
         mount,
         specs,