Merge branch 'edge' into feat_add-prompt-button

.github/workflows/shared-data-test-lint-deploy.yaml

@@ -237,7 +237,8 @@ jobs:
       - name: 'js deps'
         run: |
           npm config set cache ./.npm-cache
-          yarn config set cache-folder ./.yarn-cache 
+          yarn config set cache-folder ./.yarn-cache
+          make setup-js 
       - name: 'build typescript'
         run: make build-ts
       - name: 'build library'

api-client/src/protocols/__fixtures__/simpleAnalysisFile.json

@@ -3989,5 +3989,6 @@
         }
       ]
     }
-  ]
+  ],
+  "robotType": "OT-2 Standard"
 }

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({

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}`}
                         />
                       ),
                     }}

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,
   },
 }
 

app/src/organisms/QuickTransferFlow/SelectPipette.tsx

@@ -79,9 +79,12 @@ export function SelectPipette(props: SelectPipetteProps): JSX.Element {
         marginTop={SPACING.spacing120}
         flexDirection={DIRECTION_COLUMN}
         padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
-        gridGap={SPACING.spacing16}
+        gridGap={SPACING.spacing4}
       >
-        <StyledText css={TYPOGRAPHY.level4HeaderRegular}>
+        <StyledText
+          css={TYPOGRAPHY.level4HeaderRegular}
+          paddingBottom={SPACING.spacing8}
+        >
           {t('pipette_currently_attached')}
         </StyledText>
         {leftPipetteSpecs != null ? (

app/src/organisms/QuickTransferFlow/SelectTipRack.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Flex, SPACING, DIRECTION_COLUMN } from '@opentrons/components'
+import { getAllDefinitions } from '@opentrons/shared-data'
+import { SmallButton, LargeButton } from '../../atoms/buttons'
+import { ChildNavigation } from '../ChildNavigation'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type {
+  QuickTransferSetupState,
+  QuickTransferWizardAction,
+} from './types'
+
+interface SelectTipRackProps {
+  onNext: () => void
+  onBack: () => void
+  exitButtonProps: React.ComponentProps<typeof SmallButton>
+  state: QuickTransferSetupState
+  dispatch: React.Dispatch<QuickTransferWizardAction>
+}
+
+export function SelectTipRack(props: SelectTipRackProps): JSX.Element {
+  const { onNext, onBack, exitButtonProps, state, dispatch } = props
+  const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
+
+  const allLabwareDefinitionsByUri = getAllDefinitions()
+  const selectedPipetteDefaultTipracks =
+    state.pipette?.liquids.default.defaultTipracks ?? []
+
+  const [selectedTipRack, setSelectedTipRack] = React.useState<
+    LabwareDefinition2 | undefined
+  >(state.tipRack)
+
+  const handleClickNext = (): void => {
+    // the button will be disabled if this values is null
+    if (selectedTipRack != null) {
+      dispatch({
+        type: 'SELECT_TIP_RACK',
+        tipRack: selectedTipRack,
+      })
+      onNext()
+    }
+  }
+  return (
+    <Flex>
+      <ChildNavigation
+        header={t('select_tip_rack')}
+        buttonText={i18n.format(t('shared:continue'), 'capitalize')}
+        onClickBack={onBack}
+        onClickButton={handleClickNext}
+        secondaryButtonProps={exitButtonProps}
+        top={SPACING.spacing8}
+        buttonIsDisabled={selectedTipRack == null}
+      />
+      <Flex
+        marginTop={SPACING.spacing120}
+        flexDirection={DIRECTION_COLUMN}
+        padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
+        gridGap={SPACING.spacing4}
+        width="100%"
+      >
+        {selectedPipetteDefaultTipracks.map(tipRack => {
+          const tipRackDef = allLabwareDefinitionsByUri[tipRack]
+
+          return tipRackDef != null ? (
+            <LargeButton
+              buttonType={
+                selectedTipRack === tipRackDef ? 'primary' : 'secondary'
+              }
+              onClick={() => {
+                setSelectedTipRack(tipRackDef)
+              }}
+              buttonText={tipRackDef.metadata.displayName}
+            />
+          ) : null
+        })}
+      </Flex>
+    </Flex>
+  )
+}