fix(app, api-client): fix choose protocol slideout issue (#14949)

* fix(app, api-client): fix choose protocol slideout issue
Opentrons · May 20, 2024 · a4d0147 · a4d0147
1 parent 2d9ad6d
commit a4d0147
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 38 deletions.
diff --git a/api-client/src/protocols/__fixtures__/simpleAnalysisFile.json b/api-client/src/protocols/__fixtures__/simpleAnalysisFile.json
@@ -3989,5 +3989,6 @@
         }
       ]
     }
-  ]
+  ],
+  "robotType": "OT-2 Standard"
 }
diff --git a/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx b/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx
@@ -3,15 +3,21 @@ import { vi, it, describe, expect, beforeEach } from 'vitest'
 import { StaticRouter } from 'react-router-dom'
 import { fireEvent, screen } from '@testing-library/react'
 
+import { simpleAnalysisFileFixture } from '@opentrons/api-client'
+import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { getStoredProtocols } from '../../../redux/protocol-storage'
 import { mockConnectableRobot } from '../../../redux/discovery/__fixtures__'
-import { storedProtocolData as storedProtocolDataFixture } from '../../../redux/protocol-storage/__fixtures__'
+import {
+  storedProtocolData as storedProtocolDataFixture,
+  storedProtocolDataWithoutRunTimeParameters,
+} from '../../../redux/protocol-storage/__fixtures__'
 import { useTrackCreateProtocolRunEvent } from '../../../organisms/Devices/hooks'
 import { useCreateRunFromProtocol } from '../../ChooseRobotToRunProtocolSlideout/useCreateRunFromProtocol'
 import { ChooseProtocolSlideout } from '../'
 import { useNotifyService } from '../../../resources/useNotifyService'
+import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
 
 vi.mock('../../ChooseRobotToRunProtocolSlideout/useCreateRunFromProtocol')
 vi.mock('../../../redux/protocol-storage')
@@ -30,6 +36,20 @@ const render = (props: React.ComponentProps<typeof ChooseProtocolSlideout>) => {
   )
 }
 
+const modifiedSimpleAnalysisFileFixture = {
+  ...simpleAnalysisFileFixture,
+  robotType: OT2_ROBOT_TYPE,
+}
+const mockStoredProtocolDataFixture = [
+  {
+    ...storedProtocolDataFixture,
+    mostRecentAnalysis: ({
+      ...modifiedSimpleAnalysisFileFixture,
+      runTimeParameters: [],
+    } as any) as ProtocolAnalysisOutput,
+  },
+]
+
 describe('ChooseProtocolSlideout', () => {
   let mockCreateRunFromProtocol = vi.fn()
   let mockTrackCreateProtocolRunEvent = vi.fn()
@@ -38,7 +58,7 @@ describe('ChooseProtocolSlideout', () => {
     mockTrackCreateProtocolRunEvent = vi.fn(
       () => new Promise(resolve => resolve({}))
     )
-    vi.mocked(getStoredProtocols).mockReturnValue([storedProtocolDataFixture])
+    vi.mocked(getStoredProtocols).mockReturnValue(mockStoredProtocolDataFixture)
     vi.mocked(useCreateRunFromProtocol).mockReturnValue({
       createRunFromProtocolSource: mockCreateRunFromProtocol,
       reset: vi.fn(),
@@ -86,34 +106,32 @@ describe('ChooseProtocolSlideout', () => {
     ).toBeInTheDocument()
   })
 
-  // it('calls createRunFromProtocolSource if CTA clicked', () => {
-  //   const protocolDataWithoutRunTimeParameter = {
-  //     ...storedProtocolDataFixture,
-  //     runTimeParameters: [],
-  //   }
-  //   vi.mocked(getStoredProtocols).mockReturnValue([
-  //     protocolDataWithoutRunTimeParameter,
-  //   ])
-  //   render({
-  //     robot: mockConnectableRobot,
-  //     onCloseClick: vi.fn(),
-  //     showSlideout: true,
-  //   })
-  //   const proceedButton = screen.getByRole('button', {
-  //     name: 'Proceed to setup',
-  //   })
-  //   fireEvent.click(proceedButton)
-  //   expect(mockCreateRunFromProtocol).toHaveBeenCalledWith({
-  //     files: [expect.any(File)],
-  //     protocolKey: storedProtocolDataFixture.protocolKey,
-  //   })
-  //   expect(mockTrackCreateProtocolRunEvent).toHaveBeenCalled()
-  // })
+  it('calls createRunFromProtocolSource if CTA clicked', () => {
+    const protocolDataWithoutRunTimeParameter = {
+      ...storedProtocolDataWithoutRunTimeParameters,
+    }
+    vi.mocked(getStoredProtocols).mockReturnValue([
+      protocolDataWithoutRunTimeParameter,
+    ])
+    render({
+      robot: mockConnectableRobot,
+      onCloseClick: vi.fn(),
+      showSlideout: true,
+    })
+    const proceedButton = screen.getByRole('button', {
+      name: 'Proceed to setup',
+    })
+    fireEvent.click(proceedButton)
+    expect(mockCreateRunFromProtocol).toHaveBeenCalledWith({
+      files: [expect.any(File)],
+      protocolKey: storedProtocolDataFixture.protocolKey,
+    })
+    expect(mockTrackCreateProtocolRunEvent).toHaveBeenCalled()
+  })
 
   it('move to the second slideout if CTA clicked', () => {
     const protocolDataWithoutRunTimeParameter = {
       ...storedProtocolDataFixture,
-      runTimeParameters: [],
     }
     vi.mocked(getStoredProtocols).mockReturnValue([
       protocolDataWithoutRunTimeParameter,
@@ -132,7 +150,7 @@ describe('ChooseProtocolSlideout', () => {
     screen.getByText('Restore default values')
   })
 
-  // ToDo (kk:04/08) update test for RTP
+  // ToDo (kk:04/18/2024) I will update test for RTP
   /*
   it('renders error state when there is a run creation error', () => {
     vi.mocked(useCreateRunFromProtocol).mockReturnValue({

diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx
@@ -461,7 +461,7 @@ export function ChooseProtocolSlideoutComponent(
                 setSelectedProtocol(storedProtocol)
               }
             }}
-            robotName={robot.name}
+            robot={robot}
             {...{ selectedProtocol, runCreationError, runCreationErrorCode }}
           />
         ) : (
@@ -483,7 +483,7 @@ interface StoredProtocolListProps {
   handleSelectProtocol: (storedProtocol: StoredProtocolData | null) => void
   runCreationError: string | null
   runCreationErrorCode: number | null
-  robotName: string
+  robot: Robot
 }
 
 function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
@@ -492,11 +492,13 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
     handleSelectProtocol,
     runCreationError,
     runCreationErrorCode,
-    robotName,
+    robot,
   } = props
   const { t } = useTranslation(['device_details', 'protocol_details', 'shared'])
   const storedProtocols = useSelector((state: State) =>
     getStoredProtocols(state)
+  ).filter(
+    protocol => protocol.mostRecentAnalysis?.robotType === robot.robotModel
   )
   React.useEffect(() => {
     handleSelectProtocol(first(storedProtocols) ?? null)
@@ -585,7 +587,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
                             color: ${COLORS.red60};
                             text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
                           `}
-                          to={`/devices/${robotName}`}
+                          to={`/devices/${robot.name}`}
                         />
                       ),
                     }}

diff --git a/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx b/app/src/organisms/Devices/hooks/__tests__/useStoredProtocolAnalysis.test.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'
 import { when } from 'vitest-when'
-import { QueryClient, QueryClientProvider, UseQueryResult } from 'react-query'
+import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
-import { createStore, Store } from 'redux'
+import { createStore } from 'redux'
 import { renderHook } from '@testing-library/react'
 
 import {
@@ -12,12 +12,10 @@ import {
   parsePipetteEntity,
 } from '@opentrons/api-client'
 import { useProtocolQuery } from '@opentrons/react-api-client'
+import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import { storedProtocolData } from '../../../../redux/protocol-storage/__fixtures__'
-import {
-  getStoredProtocol,
-  StoredProtocolData,
-} from '../../../../redux/protocol-storage'
+import { getStoredProtocol } from '../../../../redux/protocol-storage'
 import { useStoredProtocolAnalysis } from '../useStoredProtocolAnalysis'
 import {
   LABWARE_ENTITY,
@@ -27,7 +25,10 @@ import {
 } from '../__fixtures__/storedProtocolAnalysis'
 import { useNotifyRunQuery } from '../../../../resources/runs'
 
+import type { Store } from 'redux'
+import type { UseQueryResult } from 'react-query'
 import type { Protocol, Run } from '@opentrons/api-client'
+import type { StoredProtocolData } from '../../../../redux/protocol-storage'
 
 vi.mock('@opentrons/api-client')
 vi.mock('@opentrons/react-api-client')
@@ -44,6 +45,7 @@ const modifiedStoredProtocolData = {
     errors: storedProtocolData?.mostRecentAnalysis?.errors,
     runTimeParameters:
       storedProtocolData?.mostRecentAnalysis?.runTimeParameters,
+    robotType: OT2_ROBOT_TYPE,
   },
 }
 

diff --git a/app/src/redux/protocol-storage/__fixtures__/index.ts b/app/src/redux/protocol-storage/__fixtures__/index.ts
@@ -11,6 +11,17 @@ export const storedProtocolData: StoredProtocolData = {
   modified: 123456789,
 }
 
+export const storedProtocolDataWithoutRunTimeParameters: StoredProtocolData = {
+  protocolKey: 'protocolKeyStub',
+  mostRecentAnalysis: ({
+    ...simpleAnalysisFileFixture,
+    runTimeParameters: [],
+  } as any) as ProtocolAnalysisOutput,
+  srcFileNames: ['fakeSrcFileName'],
+  srcFiles: ['fakeSrcFile' as any],
+  modified: 123456789,
+}
+
 export const storedProtocolDir: StoredProtocolDir = {
   dirPath: 'path/to/protocol/dir',
   modified: 1234556789,
-Original file line number
+Diff line change
@@ Expand Up / @@ -3989,5 +3989,6 @@ @@
             }
           ]
         }
-      ]
+      ],
+      "robotType": "OT-2 Standard"
     }