fix(protocol-designer): fix layout and menu items of SlotOverflowMenu (…

…#16840) This PR fixes the layout and content of SlotOverflowMenu component. It aligns text to the left of the menu button. Also, it always renders 'Add liquid' option, but disables if no labware is present in the slot. Last, it adds a Divider above 'Clear slot' option. Closes RQA-3335
Opentrons · Nov 18, 2024 · d77329a · d77329a
1 parent 9fceef6
commit d77329a
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 58 deletions.
diff --git a/components/src/atoms/MenuList/MenuItem.tsx b/components/src/atoms/MenuList/MenuItem.tsx
@@ -16,6 +16,8 @@ export const MenuItem = styled.button<ButtonProps>`
   padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
     ${SPACING.spacing12};
   border: ${props => (props.border != null ? props.border : 'inherit')};
+  border-radius: ${props =>
+    props.borderRadius != null ? props.borderRadius : 'inherit'};
 
   &:hover {
     background-color: ${COLORS.blue10};

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx b/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx
@@ -1,19 +1,17 @@
 import { useTranslation } from 'react-i18next'
 import { useState } from 'react'
-import styled from 'styled-components'
 import { useDispatch, useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import {
   BORDERS,
   COLORS,
-  CURSOR_AUTO,
-  CURSOR_POINTER,
   DIRECTION_COLUMN,
+  Divider,
   Flex,
+  MenuItem,
   NO_WRAP,
   POSITION_ABSOLUTE,
   RobotCoordsForeignDiv,
-  SPACING,
   StyledText,
   useOnClickOutside,
 } from '@opentrons/components'
@@ -168,7 +166,7 @@ export function SlotOverflowMenu(
       nestedLabwareOnSlot == null) ||
     nestedLabwareOnSlot != null
 
-  const showEditAndLiquidsBtns =
+  const canRenameLabwareAndEditLiquids =
     (labwareOnSlot != null &&
       !isLabwareAnAdapter &&
       !isLabwareTiprack &&
@@ -180,7 +178,7 @@ export function SlotOverflowMenu(
     : TOP_SLOT_Y_POSITION
 
   if (showDuplicateBtn && !ROBOT_BOTTOM_HALF_SLOTS.includes(location)) {
-    position += showEditAndLiquidsBtns
+    position += canRenameLabwareAndEditLiquids
       ? TOP_SLOT_Y_POSITION_ALL_BUTTONS
       : TOP_SLOT_Y_POSITION_2_BUTTONS
   }
@@ -233,7 +231,7 @@ export function SlotOverflowMenu(
           e.stopPropagation()
         }}
       >
-        <MenuButton
+        <MenuItem
           onClick={() => {
             addEquipment(location)
             setShowMenuList(false)
@@ -244,38 +242,37 @@ export function SlotOverflowMenu(
               ? t(isOffDeckLocation ? 'add_labware' : 'add_hw_lw')
               : t(isOffDeckLocation ? 'edit_labware' : 'edit_hw_lw')}
           </StyledText>
-        </MenuButton>
-        {showEditAndLiquidsBtns ? (
-          <>
-            <MenuButton
-              onClick={(e: MouseEvent) => {
-                setShowNickNameModal(true)
-                e.preventDefault()
-                e.stopPropagation()
-              }}
-            >
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {t('rename_lab')}
-              </StyledText>
-            </MenuButton>
-            <MenuButton
-              onClick={() => {
-                if (nestedLabwareOnSlot != null) {
-                  dispatch(openIngredientSelector(nestedLabwareOnSlot.id))
-                } else if (labwareOnSlot != null) {
-                  dispatch(openIngredientSelector(labwareOnSlot.id))
-                }
-                navigate('/liquids')
-              }}
-            >
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {selectionHasLiquids ? t('edit_liquid') : t('add_liquid')}
-              </StyledText>
-            </MenuButton>
-          </>
+        </MenuItem>
+        {canRenameLabwareAndEditLiquids ? (
+          <MenuItem
+            onClick={(e: MouseEvent) => {
+              setShowNickNameModal(true)
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+          >
+            <StyledText desktopStyle="bodyDefaultRegular">
+              {t('rename_lab')}
+            </StyledText>
+          </MenuItem>
         ) : null}
+        <MenuItem
+          onClick={() => {
+            if (nestedLabwareOnSlot != null) {
+              dispatch(openIngredientSelector(nestedLabwareOnSlot.id))
+            } else if (labwareOnSlot != null) {
+              dispatch(openIngredientSelector(labwareOnSlot.id))
+            }
+            navigate('/liquids')
+          }}
+          disabled={!canRenameLabwareAndEditLiquids}
+        >
+          <StyledText desktopStyle="bodyDefaultRegular">
+            {selectionHasLiquids ? t('edit_liquid') : t('add_liquid')}
+          </StyledText>
+        </MenuItem>
         {showDuplicateBtn ? (
-          <MenuButton
+          <MenuItem
             onClick={() => {
               if (
                 labwareOnSlot != null &&
@@ -292,9 +289,10 @@ export function SlotOverflowMenu(
             <StyledText desktopStyle="bodyDefaultRegular">
               {t('duplicate')}
             </StyledText>
-          </MenuButton>
+          </MenuItem>
         ) : null}
-        <MenuButton
+        <Divider marginY="0" />
+        <MenuItem
           disabled={hasNoItems}
           onClick={(e: MouseEvent) => {
             if (matchingLabware != null) {
@@ -310,7 +308,7 @@ export function SlotOverflowMenu(
           <StyledText desktopStyle="bodyDefaultRegular">
             {t(isOffDeckLocation ? 'clear_labware' : 'clear_slot')}
           </StyledText>
-        </MenuButton>
+        </MenuItem>
       </Flex>
     </>
   )
@@ -337,19 +335,3 @@ export function SlotOverflowMenu(
     slotOverflowBody
   )
 }
-
-const MenuButton = styled.button`
-  background-color: ${COLORS.transparent};
-  border-radius: inherit;
-  cursor: ${CURSOR_POINTER};
-  padding: ${SPACING.spacing8} ${SPACING.spacing12};
-  border: none;
-  border-radius: inherit;
-  &:hover {
-    background-color: ${COLORS.blue10};
-  }
-  &:disabled {
-    color: ${COLORS.grey40};
-    cursor: ${CURSOR_AUTO};
-  }
-`
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx
@@ -108,15 +108,18 @@ describe('SlotOverflowMenu', () => {
     expect(vi.mocked(deleteDeckFixture)).toHaveBeenCalled()
     expect(props.setShowMenuList).toHaveBeenCalled()
   })
-  it('renders 2 buttons when there is nothing on the slot', () => {
+  it('renders 3 buttons when there is nothing on the slot', () => {
     props.location = 'A1'
     render(props)
     fireEvent.click(
       screen.getByRole('button', { name: 'Add hardware/labware' })
     )
     expect(props.addEquipment).toHaveBeenCalled()
     expect(props.setShowMenuList).toHaveBeenCalled()
-    expect(screen.getAllByRole('button')).toHaveLength(2)
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+    expect(screen.getByRole('button', { name: 'Add liquid' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Clear slot' })).toBeDisabled()
+    screen.getByTestId('divider')
   })
   it('renders Edit liquid button when there is liquid on the labware', () => {
     vi.mocked(labwareIngredSelectors.getLiquidsByLabwareId).mockReturnValue({