refactor(protocol-designer): allow for multiple lid selection

partially addresses AUTH-1945

Author: jerader

components/src/molecules/CustomizeExpandButton/index.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react'
 import styled, { css } from 'styled-components'
 
 import { CheckboxField } from '../../atoms/CheckboxField'
@@ -8,7 +9,12 @@ import { Flex } from '../../primitives'
 import { CURSOR_POINTER, DIRECTION_COLUMN } from '../../styles'
 import { SPACING } from '../../ui-style-constants'
 
-import type { ChangeEvent, ChangeEventHandler, MouseEvent } from 'react'
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  MemoExoticComponent,
+  MouseEvent,
+} from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { StyleProps } from '../../primitives'
 
@@ -38,7 +44,7 @@ interface CustomizeExpandButtonProps extends StyleProps {
 }
 
 //  used for helix and as a child button to ListButtonAccordion
-export function CustomizeExpandButton(
+export function CustomizeExpandButtonComponent(
   props: CustomizeExpandButtonProps
 ): JSX.Element {
   const {
@@ -135,6 +141,10 @@ export function CustomizeExpandButton(
   )
 }
 
+export const CustomizeExpandButton: MemoExoticComponent<
+  typeof CustomizeExpandButtonComponent
+> = memo(CustomizeExpandButtonComponent)
+
 const SettingButton = styled.input`
   display: none;
 `

protocol-designer/src/assets/localization/en/starting_deck_state.json

@@ -49,6 +49,7 @@
   "labware_already_in_slot": "Labware already in this slot cannot be combined with other labware.",
   "labware_quantity": "Labware quantity",
   "labware": "Labware",
+  "lid_compatible_labware": "Lid compatible labware",
   "lid": "Lids",
   "liquid": "Liquid",
   "liquids": "Liquids",

protocol-designer/src/components/organisms/LabwareCard/LabwareCard.stories.tsx

@@ -50,5 +50,5 @@ LabwareCardField.args = {
     pythonName: 'mockPythonName',
     stack: ['mockId', 'A1'],
   },
-  lidDisplayName: 'Opentrons Flex Tip Rack Lid',
+  lidId: 'mockLidId',
 }

protocol-designer/src/components/organisms/LabwareCard/__tests__/LabwareCard.test.tsx

@@ -55,7 +55,7 @@ describe('LabwareCard', () => {
         labwareDefURI: 'mockuri',
         def: fixture96Plate as LabwareDefinition2,
       },
-      lidDisplayName: 'mock lid',
+      lidId: 'lidId',
       quantity: 1,
     }
     vi.mocked(EditLabwareQuantityModal).mockReturnValue(
@@ -84,6 +84,16 @@ describe('LabwareCard', () => {
           pythonName: 'mockPythonName',
           stack: ['labwareId', 'A1'],
         },
+        lidId: {
+          id: 'lidId',
+          labwareDefURI: 'mockuri',
+          def: ({
+            ...fixture96Plate,
+            metadata: { displayName: 'mock lid' },
+          } as any) as LabwareDefinition2,
+          pythonName: 'mockPythonName',
+          stack: ['labwareId', 'A1'],
+        },
       },
     })
   })

protocol-designer/src/components/organisms/LabwareCard/index.tsx

@@ -38,11 +38,11 @@ import type { ThunkDispatch } from '../../../types'
 interface LabwareCardProps {
   labware: LabwareOnDeck
   quantity: number
-  lidDisplayName?: string
+  lidId?: string
 }
 
 export function LabwareCard(props: LabwareCardProps): JSX.Element {
-  const { labware, lidDisplayName, quantity } = props
+  const { labware, lidId, quantity } = props
   const navigate = useNavigate()
   const dispatch = useDispatch<ThunkDispatch<any>>()
   const { t } = useTranslation('starting_deck_state')
@@ -106,6 +106,7 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element {
           <LabwareCardOverflowMenu
             setShowOverflowMenu={setShowOverflowMenu}
             labwareIds={allLabwareIdsOnStack}
+            lidId={lidId}
           />
         ) : null}
         <ListItem type="default" backgroundColor={COLORS.grey30}>
@@ -133,12 +134,14 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element {
                     {displayName}
                   </StyledText>
                 ) : null}
-                {lidDisplayName != null ? (
+                {lidId != null && deckSetupLabware[lidId] != null ? (
                   <StyledText
                     desktopStyle="captionRegular"
                     color={COLORS.grey60}
                   >
-                    {t('with_lid', { name: lidDisplayName })}
+                    {t('with_lid', {
+                      name: deckSetupLabware[lidId].def.metadata.displayName,
+                    })}
                   </StyledText>
                 ) : null}
 

protocol-designer/src/components/organisms/LabwareCardOverflowMenu/index.tsx

@@ -38,11 +38,12 @@ import type { ThunkDispatch } from '../../../types'
 interface LabwareCardOverflowMenuProps {
   labwareIds: string[]
   setShowOverflowMenu: Dispatch<SetStateAction<boolean>>
+  lidId?: string
 }
 export function LabwareCardOverflowMenu(
   props: LabwareCardOverflowMenuProps
 ): JSX.Element | null {
-  const { labwareIds, setShowOverflowMenu } = props
+  const { labwareIds, setShowOverflowMenu, lidId } = props
   const { t } = useTranslation('starting_deck_state')
   const savedSteps = useSelector(getSavedStepForms)
   const deckSetup = useSelector(getDeckSetupForActiveItem)
@@ -98,11 +99,13 @@ export function LabwareCardOverflowMenu(
     savedSteps,
     deckSetupLabware[topLabwareId]
   )
-
   const handleClear = (): void => {
     labwareIds.forEach(labwareId => {
       dispatch(deleteContainer({ labwareId }))
     })
+    if (lidId != null) {
+      dispatch(deleteContainer({ labwareId: lidId }))
+    }
     if (isAdapter) {
       dispatch(
         editSlotInfo({

protocol-designer/src/components/organisms/SelectLabwareModal/SelectCustomLabware.tsx

@@ -0,0 +1,112 @@
+import { useTranslation } from 'react-i18next'
+import { useDispatch, useSelector } from 'react-redux'
+
+import {
+  CustomizeExpandButton,
+  ListButton,
+  ListButtonAccordion,
+  ListButtonAccordionContainer,
+} from '@opentrons/components'
+
+import { getEnableStacking } from '../../../feature-flags/selectors'
+import { getCustomLabwareDefsByURI } from '../../../labware-defs/selectors'
+import { selectLid, selectTopLabware } from '../../../labware-ingred/actions'
+import { selectors } from '../../../labware-ingred/selectors'
+import { CUSTOM_CATEGORY } from '../../../pages/Designer/DeckSetup/constants'
+
+import type { StackingProps } from '@opentrons/components'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { CategoryExpand } from '../../../pages/Designer/DeckSetup/DeckSetupToolbox'
+import type { ThunkDispatch } from '../../../types'
+import type { LabwareInfo } from './index'
+
+interface SelectCustomLabwareProps {
+  slot: string
+  handleCategoryClick: (category: string, expand?: boolean) => void
+  areCategoriesExpanded: CategoryExpand
+  onFlexStacker: boolean
+  filteredLabwareByCategory: Record<string, LabwareInfo[]>
+  universalLid?: [string, LabwareDefinition2]
+}
+export function SelectCustomLabware(
+  props: SelectCustomLabwareProps
+): JSX.Element | null {
+  const {
+    slot,
+    handleCategoryClick,
+    areCategoriesExpanded,
+    onFlexStacker,
+    filteredLabwareByCategory,
+    universalLid,
+  } = props
+  const enableStacking = useSelector(getEnableStacking)
+  const { t } = useTranslation(['starting_deck_state', 'shared'])
+  const customLabwareDefs = useSelector(getCustomLabwareDefsByURI)
+  const dispatch = useDispatch<ThunkDispatch<any>>()
+  const zoomedInSlotInfo = useSelector(selectors.getZoomedInSlotInfo)
+  const { selectedTopLabware, selectedLidLabware } = zoomedInSlotInfo
+
+  return filteredLabwareByCategory[CUSTOM_CATEGORY].length > 0 ? (
+    <ListButton
+      key={`ListButton_${CUSTOM_CATEGORY}`}
+      type="noActive"
+      onClick={() => {
+        handleCategoryClick(CUSTOM_CATEGORY)
+      }}
+    >
+      <ListButtonAccordionContainer id={`${CUSTOM_CATEGORY}_${slot}`}>
+        <ListButtonAccordion
+          mainHeadline={t(`${CUSTOM_CATEGORY}`)}
+          isExpanded={areCategoriesExpanded[CUSTOM_CATEGORY]}
+        >
+          {filteredLabwareByCategory[CUSTOM_CATEGORY].map(({ uri }, index) => {
+            const lidProps: StackingProps | null =
+              slot !== 'offDeck' &&
+              enableStacking &&
+              universalLid != null &&
+              customLabwareDefs[uri].metadata.displayCategory !== 'tubeRack'
+                ? {
+                    inputTitle: t('labware_quantity'),
+                    errorMessage: t('unsupported_range'),
+                    definition: universalLid[1],
+                    checkboxCaption: t('with_lid', {
+                      name: universalLid[1].metadata.displayName,
+                    }),
+                    inputFieldValue: 1,
+                    onInputFieldChange: () => {},
+                    inputCaption: '',
+                    checked: selectedLidLabware != null,
+                    onCheckboxChange: () => {
+                      dispatch(
+                        selectLid({
+                          labwareDefURI:
+                            selectedLidLabware === universalLid[0] ? null : uri,
+                        })
+                      )
+                    },
+                  }
+                : null
+
+            return (
+              <CustomizeExpandButton
+                enableStackingFF={enableStacking}
+                loadName={customLabwareDefs[uri].parameters.loadName}
+                allowInputField={onFlexStacker}
+                key={`${index}_${uri}`}
+                id={`${index}_${uri}`}
+                buttonText={customLabwareDefs[uri].metadata.displayName}
+                buttonValue={uri}
+                onChange={e => {
+                  e.stopPropagation()
+                  dispatch(selectTopLabware({ labwareDefURI: uri }))
+                }}
+                isSelected={uri === selectedTopLabware.labwareDefURI}
+                stackingProps={lidProps ?? undefined}
+              />
+            )
+          })}
+        </ListButtonAccordion>
+      </ListButtonAccordionContainer>
+    </ListButton>
+  ) : null
+}