fix(app): fix cancel run freezing issue in ConfirmCancelRunModal (#12660

)

fix cancel run freezing issue in ConfirmCancelRunModal

app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx

@@ -12,15 +12,14 @@ import {
   DIRECTION_COLUMN,
   BORDERS,
 } from '@opentrons/components'
-import { useAllRunsQuery } from '@opentrons/react-api-client'
 
 import { StyledText } from '../../../atoms/text'
 import { Chip } from '../../../atoms/Chip'
 import { ODD_FOCUS_VISIBLE } from '../../../atoms/buttons//constants'
-import { useRunControls } from '../../RunTimeControl/hooks'
 import { useTrackEvent } from '../../../redux/analytics'
 import { useTrackProtocolRunEvent } from '../../Devices/hooks'
 import { useMissingProtocolHardware } from '../../../pages/Protocols/hooks'
+import { useCloneRun } from '../../ProtocolUpload/hooks'
 
 import type { Run } from '@opentrons/api-client'
 
@@ -30,28 +29,25 @@ interface RecentRunProtocolCardProps {
   /** protocol id that was run recently  */
   protocolId: string
   /** the time that this recent run was created  */
-  lastRun?: string
+  lastRun: string
+  runId: string
 }
 
 export function RecentRunProtocolCard({
   protocolName,
   protocolId,
   lastRun,
+  runId,
 }: RecentRunProtocolCardProps): JSX.Element {
   const { t, i18n } = useTranslation('device_details')
   const missingProtocolHardware = useMissingProtocolHardware(protocolId)
   const history = useHistory()
   const isReadyToBeReRun = missingProtocolHardware.length === 0
-  const { data: allRuns } = useAllRunsQuery()
-  const runId =
-    allRuns?.data.find(run => run.protocolId === protocolId)?.id ?? null
   const trackEvent = useTrackEvent()
   const { trackProtocolRunEvent } = useTrackProtocolRunEvent(runId)
   const onResetSuccess = (createRunResponse: Run): void =>
-    runId != null
-      ? history.push(`protocols/${runId}/setup`)
-      : history.push(`protocols/${createRunResponse.data.id}`)
-  const { reset } = useRunControls(runId, onResetSuccess)
+    history.push(`protocols/${createRunResponse.data.id}/setup`)
+  const { cloneRun } = useCloneRun(runId, onResetSuccess)
 
   const PROTOCOL_CARD_STYLE = css`
     &:active {
@@ -116,7 +112,7 @@ export function RecentRunProtocolCard({
     chipText = t('missing_both')
   }
   const handleCardClick = (): void => {
-    reset()
+    cloneRun()
     trackEvent({
       name: 'proceedToRun',
       properties: { sourceLocation: 'RecentRunProtocolCard' },
@@ -136,8 +132,6 @@ export function RecentRunProtocolCard({
       borderRadius={BORDERS.size_four}
       onClick={handleCardClick}
     >
-      {/* marginLeft is needed to cancel chip's padding */}
-      {/* <Flex marginLeft={`-${SPACING.spacing4}`}> */}
       <Flex>
         <Chip
           paddingLeft="0"

app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCarousel.tsx

@@ -69,19 +69,23 @@ export function RecentRunProtocolCarousel({
     >
       <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing3}>
         {sortedProtocols.map((protocol: ProtocolResource) => {
-          const lastRun = runs.data?.data.find(
+          const run = runs.data?.data.find(
             run => run.protocolId === protocol.id
-          )?.createdAt
+          )
           const protocolId = protocol.id
           const protocolName =
             protocol.metadata.protocolName ?? protocol.files[0].name
+
           return (
             <React.Fragment key={protocolId}>
-              <RecentRunProtocolCard
-                lastRun={lastRun}
-                protocolId={protocolId}
-                protocolName={protocolName}
-              />
+              {run ? (
+                <RecentRunProtocolCard
+                  lastRun={run?.createdAt}
+                  protocolId={protocolId}
+                  protocolName={protocolName}
+                  runId={run?.id}
+                />
+              ) : null}
             </React.Fragment>
           )
         })}

app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentProtocolRunCard.test.tsx → app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx

@@ -9,17 +9,18 @@ import { useAllRunsQuery } from '@opentrons/react-api-client'
 
 import { i18n } from '../../../../i18n'
 import { useMissingProtocolHardware } from '../../../../pages/Protocols/hooks'
-import { useTrackProtocolRunEvent } from '../../../../organisms/Devices/hooks'
+import { useTrackProtocolRunEvent } from '../../../Devices/hooks'
 import { useTrackEvent } from '../../../../redux/analytics'
-import { useRunControls } from '../../../../organisms/RunTimeControl/hooks'
-import { RecentRunProtocolCard } from '../'
+import { useCloneRun } from '../../../ProtocolUpload/hooks'
+import { RecentRunProtocolCard } from '..'
 
 import type { ProtocolHardware } from '../../../../pages/Protocols/hooks'
 
 jest.mock('@opentrons/react-api-client')
 jest.mock('../../../../pages/Protocols/hooks')
 jest.mock('../../../../organisms/Devices/hooks')
 jest.mock('../../../../organisms/RunTimeControl/hooks')
+jest.mock('../../../../organisms/ProtocolUpload/hooks')
 jest.mock('../../../../redux/analytics')
 
 const mockProtocolName = 'mockProtocol'
@@ -61,13 +62,15 @@ const missingBoth = [
 ] as ProtocolHardware[]
 
 const mockRunData = {
-  id: 'mockRunId',
+  id: RUN_ID,
   createdAt: '2022-05-03T21:36:12.494778+00:00',
   completedAt: 'thistime',
   startedAt: 'thistime',
   protocolId: 'mockProtocolId',
 } as any
 
+let mockCloneRun: jest.Mock
+
 const mockUseMissingProtocolHardware = useMissingProtocolHardware as jest.MockedFunction<
   typeof useMissingProtocolHardware
 >
@@ -80,9 +83,7 @@ const mockUseTrackProtocolRunEvent = useTrackProtocolRunEvent as jest.MockedFunc
 const mockUseTrackEvent = useTrackEvent as jest.MockedFunction<
   typeof useTrackEvent
 >
-const mockUseRunControls = useRunControls as jest.MockedFunction<
-  typeof useRunControls
->
+const mockUseCloneRun = useCloneRun as jest.MockedFunction<typeof useCloneRun>
 
 const render = (props: React.ComponentProps<typeof RecentRunProtocolCard>) => {
   return renderWithProviders(
@@ -106,6 +107,7 @@ describe('RecentRunProtocolCard', () => {
       protocolName: mockProtocolName,
       protocolId: mockProtocolId,
       lastRun: mockLastRun,
+      runId: RUN_ID,
     }
     mockTrackEvent = jest.fn()
     mockTrackProtocolRunEvent = jest.fn(
@@ -119,18 +121,10 @@ describe('RecentRunProtocolCard', () => {
     when(mockUseTrackProtocolRunEvent).calledWith(RUN_ID).mockReturnValue({
       trackProtocolRunEvent: mockTrackProtocolRunEvent,
     })
-    when(mockUseRunControls)
+    mockCloneRun = jest.fn()
+    when(mockUseCloneRun)
       .calledWith(RUN_ID, expect.anything())
-      .mockReturnValue({
-        play: () => {},
-        pause: () => {},
-        stop: () => {},
-        reset: () => {},
-        isPlayRunActionLoading: false,
-        isPauseRunActionLoading: false,
-        isStopRunActionLoading: false,
-        isResetRunLoading: false,
-      })
+      .mockReturnValue({ cloneRun: mockCloneRun, isLoading: false })
   })
 
   afterEach(() => {

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

@@ -54,18 +54,15 @@ export function ConfirmCancelRunModal({
   }
 
   const handleCancelRun = (): void => {
+    setIsCanceling(true)
     stopRun(runId, {
       onSuccess: () => {
         trackProtocolRunEvent({ name: ANALYTICS_PROTOCOL_RUN_CANCEL })
         dismissCurrentRun(runId)
         if (isActiveRun) {
           history.push(`/protocols/${runId}/summary`)
         } else {
-          if (protocolId != null) {
-            history.push(`/protocols/${protocolId}`)
-          } else {
-            history.push(`/protocols`)
-          }
+          history.push('/dashboard')
         }
       },
       onError: () => {

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

@@ -18,6 +18,7 @@ import { ConfirmCancelRunModal } from '../ConfirmCancelRunModal'
 jest.mock('@opentrons/react-api-client')
 jest.mock('../../../../organisms/Devices/hooks')
 jest.mock('../../../../redux/analytics')
+jest.mock('../../../ProtocolUpload/hooks')
 
 const mockPush = jest.fn()
 let mockStopRun: jest.Mock
@@ -134,14 +135,13 @@ describe('ConfirmCancelRunModal', () => {
     props = {
       ...props,
       isActiveRun: false,
-      protocolId: 'mockProtocolId',
     }
     const [{ getByText }] = render(props)
     const button = getByText('Cancel run')
     fireEvent.click(button)
     expect(mockStopRun).toHaveBeenCalled()
     expect(mockDismissCurrentRun).toHaveBeenCalled()
     expect(mockTrackProtocolRunEvent).toHaveBeenCalled()
-    expect(mockPush).toHaveBeenCalledWith('/protocols/mockProtocolId')
+    expect(mockPush).toHaveBeenCalledWith('/dashboard')
   })
 })

app/src/pages/OnDeviceDisplay/ProtocolSetup.tsx

@@ -189,12 +189,13 @@ function PrepareToRun({
 
   const { play } = useRunControls(runId)
 
+  console.log('runId - ProtocolSetup: ', runId)
+
   const onPlay = (): void => {
     play()
     history.push(`/protocols/${runId}/run`)
   }
 
-  // TODO(bh, 2023-02-24): cancel run functionality - replace modal with OOD-specific pop-up
   const onConfirmCancelClose = (): void => {
     setShowConfirmCancelModal(false)
     history.goBack()