feat(Protocol-designer, components, step-generation): multi tiprack support

components/src/instrument/InfoItem.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 
 import styles from './instrument.css'
-
 export interface InfoItemProps {
-  title: string
+  title: string | null
   value: string
   className?: string
 }
@@ -17,7 +16,7 @@ export function InfoItem(props: InfoItemProps): JSX.Element {
 
   return (
     <div className={className}>
-      <h2 className={styles.title}>{title}</h2>
+      {title != null ? <h2 className={styles.title}>{title}</h2> : null}
       <span className={styles.value}>{value}</span>
     </div>
   )

components/src/instrument/InstrumentInfo.tsx

@@ -19,7 +19,7 @@
   /** human-readable description, eg 'p300 Single-channel' */
   description: string
   /** paired tiprack model */
-  tiprackModel?: string
+  tiprackModels?: string[]
   /** if disabled, pipette & its info are grayed out */
   isDisabled: boolean
   /** specs of mounted pipette */
@@ -47,9 +47,14 @@
           title={props.showMountLabel ? `${props.mount} pipette` : 'pipette'}
           value={props.description}
         />
-        {props.tiprackModel && (
-          <InfoItem title="tip rack" value={props.tiprackModel} />
-        )}
+        {props.tiprackModels &&
+          props.tiprackModels.map((model, index) => (
+            <InfoItem
+              key={index}
+              title={index === 0 ? 'tip racks' : null}
+              value={model}
+            />
+          ))}
       </Flex>
       {props.children}
       {props.mount === LEFT && props.pipetteSpecs && (

protocol-designer/src/components/FileSidebar/__tests__/FileSidebar.test.tsx

@@ -67,16 +67,16 @@ describe('FileSidebar', () => {
       pipetteLeftId: {
         name: 'string' as any,
         id: pipetteLeftId,
-        tiprackDefURI: 'test',
-        tiprackLabwareDef: fixture_tiprack_10_ul as LabwareDefinition2,
+        tiprackDefURI: ['test'],
+        tiprackLabwareDef: [fixture_tiprack_10_ul as LabwareDefinition2],
         spec: fixtureP10Single,
         mount: 'left',
       },
       pipetteRightId: {
         name: 'string' as any,
         id: pipetteRightId,
-        tiprackDefURI: 'test',
-        tiprackLabwareDef: fixture_tiprack_10_ul as LabwareDefinition2,
+        tiprackDefURI: ['test'],
+        tiprackLabwareDef: [fixture_tiprack_10_ul as LabwareDefinition2],
         spec: fixtureP300Single,
         mount: 'right',
       },

protocol-designer/src/components/StepEditForm/StepEditForm.css

@@ -36,7 +36,7 @@
 }
 
 .large_field {
-  width: 12rem;
+  width: 13rem;
 }
 
 .small_field {

protocol-designer/src/components/StepEditForm/fields/DisposalVolumeField.tsx

@@ -50,6 +50,7 @@ interface OP {
   propsForFields: FieldPropsByName
   stepType: StepType
   volume: string | null
+  tipRack?: string | null
 }
 type Props = SP & OP
 
@@ -114,6 +115,7 @@ const mapSTP = (state: BaseState, ownProps: OP): SP => {
     pipette,
     stepType,
     volume,
+    tipRack,
   } = ownProps
 
   const blowoutLocationOptions = getBlowoutLocationOptionsForForm({
@@ -132,6 +134,7 @@ const mapSTP = (state: BaseState, ownProps: OP): SP => {
       path,
       pipette,
       volume,
+      tipRack,
     },
     stepFormSelectors.getPipetteEntities(state)
   )

protocol-designer/src/components/StepEditForm/fields/PathField/getDisabledPathMap.ts

@@ -16,6 +16,7 @@ export interface ValuesForPath {
   dispense_wells?: string[] | null
   pipette?: string | null
   volume?: string | null
+  tipRack?: string | null
 }
 export function getDisabledPathMap(
   values: ValuesForPath,
@@ -27,6 +28,7 @@ export function getDisabledPathMap(
     changeTip,
     dispense_wells,
     pipette,
+    tipRack,
   } = values
   if (!pipette) return null
   const wellRatio = getWellRatio(aspirate_wells, dispense_wells)
@@ -51,7 +53,8 @@ export function getDisabledPathMap(
 
   // transfer volume overwrites change tip disable reasoning
   const pipetteEntity = pipetteEntities[pipette]
-  const pipetteCapacity = pipetteEntity && getPipetteCapacity(pipetteEntity)
+  const pipetteCapacity =
+    pipetteEntity && getPipetteCapacity(pipetteEntity, tipRack)
   const volume = Number(values.volume)
   const airGapChecked = aspirate_airGap_checkbox
   let airGapVolume = airGapChecked ? Number(values.aspirate_airGap_volume) : 0

protocol-designer/src/components/StepEditForm/fields/PathField/index.ts

@@ -19,6 +19,7 @@ function mapSTP(state: BaseState, ownProps: OP): SP {
     dispense_wells,
     pipette,
     volume,
+    tipRack,
   } = ownProps
   const pipetteEntities = stepFormSelectors.getPipetteEntities(state)
   const disabledPathMap = getDisabledPathMap(
@@ -30,6 +31,7 @@ function mapSTP(state: BaseState, ownProps: OP): SP {
       dispense_wells,
       pipette,
       volume,
+      tipRack,
     },
     pipetteEntities
   )

protocol-designer/src/components/StepEditForm/fields/StepFormDropdownField.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { DropdownField, Options } from '@opentrons/components'
 import cx from 'classnames'
+import { DropdownField, Options } from '@opentrons/components'
 import styles from '../StepEditForm.css'
-import { StepFieldName } from '../../../steplist/fieldLevel'
-import { FieldProps } from '../types'
+import type { StepFieldName } from '../../../steplist/fieldLevel'
+import type { FieldProps } from '../types'
 
 export interface StepFormDropdownProps extends FieldProps {
   options: Options

protocol-designer/src/components/StepEditForm/fields/TiprackField.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { connect } from 'react-redux'
+import { FormGroup, DropdownField, Options } from '@opentrons/components'
+import { selectors as uiLabwareSelectors } from '../../../ui/labware'
+import { i18n } from '../../../localization'
+import styles from '../StepEditForm.css'
+
+import type { BaseState } from '../../../types'
+import type { FieldProps } from '../types'
+
+interface SP {
+  options: Options
+}
+type Props = FieldProps & SP
+
+const TiprackFieldSTP = (state: BaseState): SP => ({
+  options: uiLabwareSelectors.getTiprackOptions(state),
+})
+
+export const TiprackField = connect(TiprackFieldSTP)((props: Props) => {
+  return (
+    <FormGroup
+      label={i18n.t('form.step_edit_form.tipRack')}
+      className={styles.large_field}
+    >
+      <DropdownField
+        options={props.options}
+        name={props.name}
+        value={String(props.options[0].value)}
+        onBlur={props.onFieldBlur}
+        onFocus={props.onFieldFocus}
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+          props.updateValue(e.currentTarget.value)
+        }}
+      />
+    </FormGroup>
+  )
+})

protocol-designer/src/components/StepEditForm/fields/index.ts

@@ -12,6 +12,7 @@ export { DelayFields } from './DelayFields'
 export { DisposalVolumeField } from './DisposalVolumeField'
 export { FlowRateField } from './FlowRateField'
 export { LabwareField } from './LabwareField'
+export { TiprackField } from './TiprackField'
 export { LabwareLocationField } from './LabwareLocationField'
 export { PathField } from './PathField'
 export { PipetteField } from './PipetteField'

protocol-designer/src/components/StepEditForm/forms/MixForm.tsx

@@ -16,6 +16,7 @@ import {
   WellOrderField,
   WellSelectionField,
 } from '../fields'
+import { TiprackField } from '../fields/TiprackField'
 import {
   getBlowoutLocationOptionsForForm,
   getLabwareFieldForPositioningField,
@@ -33,7 +34,6 @@ export const MixForm = (props: StepFormProps): JSX.Element => {
 
   const toggleCollapsed = (): void =>
     setCollapsed(prevCollapsed => !prevCollapsed)
-
   return (
     <div className={styles.form_wrapper}>
       <div className={styles.section_header}>
@@ -43,6 +43,7 @@ export const MixForm = (props: StepFormProps): JSX.Element => {
       </div>
       <div className={styles.form_row}>
         <PipetteField {...propsForFields.pipette} />
+        <TiprackField {...propsForFields.tipRack} />
         <VolumeField
           {...propsForFields.volume}
           label={i18n.t('form.step_edit_form.mixVolumeLabel')}

protocol-designer/src/components/StepEditForm/forms/MoveLabwareForm/index.tsx

@@ -10,16 +10,17 @@ import {
   TOOLTIP_FIXED,
   useHoverTooltip,
 } from '@opentrons/components'
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 import { i18n } from '../../../../localization'
+import { getRobotType } from '../../../../file-data/selectors'
+import { getAdditionalEquipment } from '../../../../step-forms/selectors'
 import {
   LabwareField,
   LabwareLocationField,
   CheckboxRowField,
 } from '../../fields'
 import styles from '../../StepEditForm.css'
-import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
-import { getRobotType } from '../../../../file-data/selectors'
-import { getAdditionalEquipment } from '../../../../step-forms/selectors'
+
 import type { StepFormProps } from '../../types'
 
 export const MoveLabwareForm = (props: StepFormProps): JSX.Element => {

protocol-designer/src/components/StepEditForm/forms/MoveLiquidForm/index.tsx

@@ -7,6 +7,7 @@ import {
   ChangeTipField,
   DisposalVolumeField,
   PathField,
+  TiprackField,
 } from '../../fields'
 import styles from '../../StepEditForm.css'
 import { StepFormProps } from '../../types'
@@ -23,7 +24,6 @@ export const MoveLiquidForm = (props: StepFormProps): JSX.Element => {
 
   const { propsForFields, formData } = props
   const { stepType, path } = formData
-
   return (
     <div className={styles.form_wrapper}>
       <div className={styles.section_header}>
@@ -33,6 +33,7 @@ export const MoveLiquidForm = (props: StepFormProps): JSX.Element => {
       </div>
       <div className={styles.form_row}>
         <PipetteField {...propsForFields.pipette} />
+        <TiprackField {...propsForFields.tipRack} />
         <VolumeField
           {...propsForFields.volume}
           label={i18n.t('form.step_edit_form.field.volume.label')}
@@ -102,6 +103,7 @@ export const MoveLiquidForm = (props: StepFormProps): JSX.Element => {
             dispense_wells={formData.dispense_wells}
             pipette={formData.pipette}
             volume={formData.volume}
+            tipRack={formData.tipRack}
           />
         </div>
         <div className={cx(styles.section_column, styles.disposal_vol_wrapper)}>

protocol-designer/src/components/StepEditForm/forms/__tests__/MixForm.test.tsx

@@ -1,20 +1,26 @@
 import * as React from 'react'
 import { mount, ReactWrapper } from 'enzyme'
 import { Provider } from 'react-redux'
-import { MixForm } from '../MixForm'
-import { AspDispSection } from '../AspDispSection'
 import * as stepFormSelectors from '../../../../step-forms/selectors'
+import { getTiprackOptions } from '../../../../ui/labware/selectors'
 import { FormData } from '../../../../form-types'
 import { WellOrderField } from '../../fields'
+import { MixForm } from '../MixForm'
+import { AspDispSection } from '../AspDispSection'
 
 const { DelayFields } = jest.requireActual('../../fields')
 
 jest.mock('../../../../step-forms/selectors')
+jest.mock('../../../../ui/labware/selectors')
 
 const getUnsavedFormMock = stepFormSelectors.getUnsavedForm as jest.MockedFunction<
   typeof stepFormSelectors.getUnsavedForm
 >
 
+const mockGetTiprackOptions = getTiprackOptions as jest.MockedFunction<
+  typeof getTiprackOptions
+>
+
 jest.mock('../../fields/', () => {
   const actualFields = jest.requireActual('../../fields')
 
@@ -28,6 +34,7 @@ jest.mock('../../fields/', () => {
     TipPositionField: () => <div></div>,
     WellOrderField: () => <div></div>,
     WellSelectionField: () => <div></div>,
+    TiprackField: () => <div></div>,
   }
 })
 
@@ -56,7 +63,9 @@ describe('MixForm', () => {
     getUnsavedFormMock.mockReturnValue({
       stepType: 'mix',
     } as FormData)
-
+    mockGetTiprackOptions.mockReturnValue([
+      { name: 'mockName', value: 'mockValue' },
+    ])
     props = {
       formData: {
         stepType: 'mix',
@@ -97,6 +106,15 @@ describe('MixForm', () => {
           updateValue: jest.fn() as any,
           value: null,
         },
+        tipRack: {
+          onFieldFocus: jest.fn() as any,
+          onFieldBlur: jest.fn() as any,
+          errorToShow: null,
+          disabled: false,
+          name: 'tipRack',
+          updateValue: jest.fn() as any,
+          value: null,
+        },
       },
     }
   })