fix(protocol-designer): bypass overflow menu when clicking on empty slot (#18502)

closes RQA-4232, RQA-4235

Author: jerader

protocol-designer/cypress/e2e/modules.cy.ts

@@ -45,7 +45,6 @@ describe('The Redesigned Create Protocol Landing Page', () => {
     steps.add(SetupSteps.Confirm())
     steps.add(SetupSteps.EditProtocolA())
     steps.add(SetupSteps.ChoseDeckSlot('C2'))
-    steps.add(SetupSteps.EditHardwareLabwareOnDeck())
     steps.add(SetupSteps.OpenSelectLabwareModal())
     steps.add(SetupSteps.ClickWellPlatesSection())
     steps.add(SetupSteps.SelectLabwareByDisplayName('Bio-Rad 96 Well Plate'))
@@ -63,7 +62,6 @@ describe('The Redesigned Create Protocol Landing Page', () => {
     steps.add(SetupSteps.SetVolumeAndSaveForWells('150'))
     steps.add(SetupSteps.SelectDone())
     steps.add(SetupSteps.ChoseDeckSlot('C1'))
-    steps.add(SetupSteps.EditHardwareLabwareOnDeck())
     steps.add(SetupSteps.OpenSelectLabwareModal())
     steps.add(SetupSteps.AddAdapters())
     steps.add(SetupSteps.DeepWellTempModAdapter())

protocol-designer/cypress/e2e/plateReaderTest.cy.ts

@@ -44,7 +44,6 @@ describe('Plate Reader Happy Path Single-Wavelength', () => {
     steps.add(SetupSteps.Confirm())
     steps.add(SetupSteps.EditProtocolA())
     steps.add(SetupSteps.ChoseDeckSlotWithLabware('C3'))
-    steps.add(SetupSteps.AddHardwareLabware())
     steps.add(SetupSteps.OpenSelectLabwareModal())
     steps.add(SetupSteps.ClickWellPlatesSection())
     steps.add(SetupSteps.SelectLabwareByDisplayName('Bio-Rad 96 Well Plate'))
@@ -64,7 +63,6 @@ describe('Plate Reader Happy Path Single-Wavelength', () => {
     // Add another labware
     steps.add(SetupSteps.ChoseDeckSlotWithLabware('D2'))
 
-    steps.add(SetupSteps.AddHardwareLabware())
     steps.add(SetupSteps.OpenSelectLabwareModal())
     steps.add(SetupSteps.ClickWellPlatesSection())
     steps.add(SetupSteps.SelectLabwareByDisplayName('Armadillo 96 Well Plate'))

protocol-designer/cypress/e2e/transferSettings.cy.ts

@@ -43,7 +43,6 @@ describe('Transfer stepform testing Single Channel - Happy Path', () => {
     steps.add(SetupSteps.Confirm())
     steps.add(SetupSteps.EditProtocolA())
     steps.add(SetupSteps.ChoseDeckSlot('C2'))
-    steps.add(SetupSteps.AddHardwareLabware())
     steps.add(SetupSteps.OpenSelectLabwareModal())
     steps.add(SetupSteps.ClickWellPlatesSection())
     steps.add(SetupSteps.SelectLabwareByDisplayName('Bio-Rad 96 Well Plate'))
@@ -61,7 +60,6 @@ describe('Transfer stepform testing Single Channel - Happy Path', () => {
     steps.add(SetupSteps.SetVolumeAndSaveForWells('150'))
     steps.add(SetupSteps.SelectDone())
     steps.add(SetupSteps.ChoseDeckSlot('C3'))
-    steps.add(SetupSteps.AddHardwareLabware())
     steps.add(SetupSteps.OpenSelectLabwareModal())
     steps.add(SetupSteps.ClickWellPlatesSection())
     steps.add(SetupSteps.SelectLabwareByDisplayName('Bio-Rad 96 Well Plate'))

protocol-designer/cypress/support/SetupSteps.ts

@@ -92,7 +92,7 @@ export enum SetupLocators {
 }
 
 export const RegexSetupContent = {
-  slotText: /Edit (slot|labware)/i,
+  slotText: /(Add|Edit) labware/i,
 }
 
 /**
@@ -405,15 +405,6 @@ export const SetupSteps = {
     },
   }),
 
-  /**
-   * Edits existing labware/hardware on a deck slot.
-   */
-  EditHardwareLabwareOnDeck: (): StepThunk => ({
-    call: () => {
-      cy.get('button[data-testid="SlotOverflowMenu_openTools"]').click()
-    },
-  }),
-
   /**
    * Clicks the "Labware" header.
    */
@@ -1182,7 +1173,7 @@ export const CompositeSetupSteps = {
         `Running AddLabwareToDeckSlot with slot ${deckSlot} and labware ${labwareName}`
       )
       SetupSteps.ChoseDeckSlotWithLabware(slotToUse).call()
-      SetupSteps.AddHardwareLabware().call()
+      // SetupSteps.AddHardwareLabware().call()
       SetupSteps.OpenSelectLabwareModal().call()
       SetupSteps.ClickWellPlatesSection().call()
       SetupSteps.SelectLabwareByDisplayName(labwareToUse).call()

protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx

@@ -349,6 +349,7 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
                   isSelected={selectedZoomInSlot != null}
                   deckDef={deckDef}
                   stagingAreaAddressableAreas={[]}
+                  addEquipment={addEquipment}
                 />
               ) : null}
             </Module>
@@ -418,6 +419,7 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
               isSelected={selectedZoomInSlot != null}
               deckDef={deckDef}
               stagingAreaAddressableAreas={stagingAreaAddressableAreas}
+              addEquipment={addEquipment}
             />
           )
         })}

protocol-designer/src/pages/Designer/DeckSetup/Overlays/SlotControls.tsx

@@ -39,6 +39,7 @@ import type {
 import type { DroppedItem, SharedControlsType } from '../types'
 
 interface SlotControlsProps extends SharedControlsType {
+  addEquipment: (slotId: string) => void
   stagingAreaAddressableAreas: AddressableAreaName[]
   deckDef: DeckDefinition
   slotBoundingBox: Dimensions
@@ -57,7 +58,7 @@ export const SlotControls = (props: SlotControlsProps): JSX.Element | null => {
     hover,
     handleDragHover,
     setHover,
-    setShowMenuListForId,
+    addEquipment,
     itemId,
     terminalItemId,
     isSelected,
@@ -177,7 +178,7 @@ export const SlotControls = (props: SlotControlsProps): JSX.Element | null => {
         },
         onClick: () => {
           if (!isOver) {
-            setShowMenuListForId(itemId)
+            addEquipment(itemId)
           }
         },
       }}
@@ -190,7 +191,7 @@ export const SlotControls = (props: SlotControlsProps): JSX.Element | null => {
       >
         <Link role="button">
           <StyledText desktopStyle="bodyLargeSemiBold">
-            {t('starting_deck_state:edit_slot')}
+            {t('starting_deck_state:add_labware')}
           </StyledText>
         </Link>
       </Flex>

protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx

@@ -15,7 +15,6 @@ import {
   StyledText,
   useOnClickOutside,
 } from '@opentrons/components'
-import { FLEX_STAGING_AREA_SLOT_ADDRESSABLE_AREAS } from '@opentrons/shared-data'
 import {
   getFullStackFromLabwares,
   getTopLocationInStack,
@@ -38,11 +37,7 @@ import { getDeckSetupForActiveItem } from '../../../top-selectors/labware-locati
 import { getIsLabwareOnSlotInUse } from './utils'
 
 import type { MouseEvent, SetStateAction } from 'react'
-import type {
-  AddressableAreaName,
-  CoordinateTuple,
-  DeckSlotId,
-} from '@opentrons/shared-data'
+import type { CoordinateTuple, DeckSlotId } from '@opentrons/shared-data'
 import type { ThunkDispatch } from '../../../types'
 
 const ROBOT_BOTTOM_HALF_SLOTS = [
@@ -140,11 +135,6 @@ export function SlotOverflowMenu(
   const adapterOnSlot = Object.values(deckSetupLabware).find(
     lw => lw.id === labwareStackOnSlot[1]
   )
-  const hasNoItem = labwareStackOnSlot.length === 0
-
-  const isStagingSlot = FLEX_STAGING_AREA_SLOT_ADDRESSABLE_AREAS.includes(
-    location as AddressableAreaName
-  )
 
   const handleDuplicate = (): void => {
     if (!isSpace) {
@@ -262,7 +252,7 @@ export function SlotOverflowMenu(
           }}
         >
           <StyledText desktopStyle="bodyDefaultRegular">
-            {hasNoItem ? t('add_labware') : t('edit_labware')}
+            {t('edit_labware')}
           </StyledText>
         </MenuItem>
         {showDuplicateBtn ? (
@@ -274,7 +264,6 @@ export function SlotOverflowMenu(
         ) : null}
         <Divider marginY="0" />
         <MenuItem
-          disabled={hasNoItem && !isStagingSlot}
           onClick={(e: MouseEvent) => {
             handleClearLabware(e)
           }}

protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx

@@ -133,45 +133,14 @@ describe('SlotOverflowMenu', () => {
     expect(vi.mocked(deleteContainer)).toHaveBeenCalledTimes(2)
     expect(props.setShowMenuList).toHaveBeenCalled()
   })
-  it('renders 3 buttons when there is nothing on the slot', () => {
-    props.location = 'A1'
-    render(props)
-    fireEvent.click(screen.getByRole('button', { name: 'Add labware' }))
-    expect(props.addEquipment).toHaveBeenCalled()
-    expect(props.setShowMenuList).toHaveBeenCalled()
-    expect(screen.getAllByRole('button')).toHaveLength(2)
-    expect(screen.getByRole('button', { name: 'Clear labware' })).toBeDisabled()
-    screen.getByTestId('divider')
-  })
-  it('renders Edit liquid button when there is liquid on the labware', () => {
-    vi.mocked(labwareIngredSelectors.getLiquidsByLabwareId).mockReturnValue({
-      labId2: { well1: { '0': { volume: 10 } } },
-    })
-    render(props)
-    screen.getByRole('button', { name: 'Edit labware' })
-  })
-  it('deletes the labware', () => {
-    vi.mocked(labwareIngredSelectors.getLiquidsByLabwareId).mockReturnValue({
-      labId2: { well1: { '0': { volume: 10 } } },
-    })
-    render(props)
-    fireEvent.click(screen.getByRole('button', { name: 'Clear labware' }))
-
-    expect(vi.mocked(deleteContainer)).toHaveBeenCalledTimes(2)
-    expect(vi.mocked(deleteContainer)).toHaveBeenNthCalledWith(1, {
-      labwareId: 'labId2',
-    })
-    expect(vi.mocked(deleteContainer)).toHaveBeenNthCalledWith(2, {
-      labwareId: 'labId',
-    })
-  })
 
   it('renders snackbar if duplicate is clicked and the deck is full', () => {
     vi.mocked(getNextAvailableDeckSlot).mockReturnValue(null)
     render(props)
     fireEvent.click(screen.getByRole('button', { name: 'Duplicate labware' }))
     expect(MOCK_MAKE_SNACKBAR).toHaveBeenCalled()
   })
+
   it('renders the ConfirmDeleteEntityInUseModal modal', () => {
     vi.mocked(getIsLabwareOnSlotInUse).mockReturnValue(true)
     render(props)