fix(app): dismiss run on AnalysisFailedModal CTA (#16054)

# Overview

On ODD, because `TopLevelRedirects` navigates to the current run route
if such a run exists, we need to be sure to explicitly clear the current
run when navigating away, or we will be immediately bounced back to the
current run screen. With the introduction of RTPs that will cause
reanalysis to fail at the run, we show a new `AnalysisFailedModal`
component. The CTA button should first dismiss the current run, then
navigate to protocol details or protocols landing, ensuring this bounce
does not occur.

Closes RQA-3004

app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx

@@ -9,6 +9,7 @@ import {
   SPACING,
   LegacyStyledText,
 } from '@opentrons/components'
+import { useDismissCurrentRunMutation } from '@opentrons/react-api-client'
 
 import { SmallButton } from '../../atoms/buttons'
 import { Modal } from '../../molecules/Modal'
@@ -18,12 +19,14 @@ import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
 interface AnalysisFailedModalProps {
   errors: string[]
   protocolId: string | null
+  runId: string
   setShowAnalysisFailedModal: (showAnalysisFailedModal: boolean) => void
 }
 
 export function AnalysisFailedModal({
   errors,
   protocolId,
+  runId,
   setShowAnalysisFailedModal,
 }: AnalysisFailedModalProps): JSX.Element {
   const { t } = useTranslation('protocol_setup')
@@ -35,8 +38,15 @@ export function AnalysisFailedModal({
     hasExitIcon: true,
   }
 
+  const {
+    isLoading: isDismissing,
+    mutateAsync: dismissCurrentRunAsync,
+  } = useDismissCurrentRunMutation()
+
   const handleRestartSetup = (): void => {
-    navigate(protocolId != null ? `/protocols/${protocolId}` : '/protocols')
+    dismissCurrentRunAsync(runId).then(() => {
+      navigate(protocolId != null ? `/protocols/${protocolId}` : '/protocols')
+    })
   }
 
   return (
@@ -76,6 +86,9 @@ export function AnalysisFailedModal({
           onClick={handleRestartSetup}
           buttonText={t('restart_setup')}
           buttonType="alert"
+          iconName={isDismissing ? 'ot-spinner' : null}
+          iconPlacement="startIcon"
+          disabled={isDismissing}
         />
       </Flex>
     </Modal>

app/src/organisms/ProtocolSetupParameters/__tests__/AnalysisFailedModal.test.tsx

@@ -1,16 +1,23 @@
 import * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
+import { when } from 'vitest-when'
 import { fireEvent, screen } from '@testing-library/react'
+import { useDismissCurrentRunMutation } from '@opentrons/react-api-client'
 
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { AnalysisFailedModal } from '../AnalysisFailedModal'
 import type { NavigateFunction } from 'react-router-dom'
 
-const mockNavigate = vi.fn()
-const PROTOCOL_ID = 'mockId'
+const PROTOCOL_ID = 'mockProtocolId'
+const RUN_ID = 'mockRunId'
 const mockSetShowAnalysisFailedModal = vi.fn()
+const mockNavigate = vi.fn()
+const mockDismissCurrentRunAsync = vi.fn(
+  () => new Promise(resolve => resolve({}))
+)
 
+vi.mock('@opentrons/react-api-client')
 vi.mock('react-router-dom', async importOriginal => {
   const reactRouterDom = await importOriginal<NavigateFunction>()
   return {
@@ -28,13 +35,19 @@ const render = (props: React.ComponentProps<typeof AnalysisFailedModal>) => {
 describe('AnalysisFailedModal', () => {
   let props: React.ComponentProps<typeof AnalysisFailedModal>
 
+  when(vi.mocked(useDismissCurrentRunMutation))
+    .calledWith()
+    .thenReturn({
+      mutateAsync: mockDismissCurrentRunAsync,
+    } as any)
   beforeEach(() => {
     props = {
       errors: [
         'analysis failed reason message 1',
         'analysis failed reason message 2',
       ],
       protocolId: PROTOCOL_ID,
+      runId: RUN_ID,
       setShowAnalysisFailedModal: mockSetShowAnalysisFailedModal,
     }
   })
@@ -55,15 +68,10 @@ describe('AnalysisFailedModal', () => {
     expect(mockSetShowAnalysisFailedModal).toHaveBeenCalled()
   })
 
-  it('should call a mock function when tapping restart setup button', () => {
+  it('should call mock dismiss current run function when tapping restart setup button', () => {
     render(props)
     fireEvent.click(screen.getByText('Restart setup'))
-    expect(mockNavigate).toHaveBeenCalledWith(`/protocols/${PROTOCOL_ID}`)
-  })
-
-  it('should push to protocols dashboard when tapping restart setup button and protocol ID is null', () => {
-    render({ ...props, protocolId: null })
-    fireEvent.click(screen.getByText('Restart setup'))
-    expect(mockNavigate).toHaveBeenCalledWith('/protocols')
+    console.log(mockDismissCurrentRunAsync)
+    expect(mockDismissCurrentRunAsync).toBeCalled()
   })
 })

app/src/pages/ProtocolSetup/index.tsx

@@ -1044,6 +1044,7 @@ export function ProtocolSetup(): JSX.Element {
         <AnalysisFailedModal
           setShowAnalysisFailedModal={setShowAnalysisFailedModal}
           protocolId={runRecord?.data.protocolId ?? null}
+          runId={runId}
           errors={analysisErrors.map(error => error.detail)}
         />
       ) : null}