Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Nov 18, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1521ecd
fix(protocol-designer): fix layout and menu items of SlotOverflowMenu
ncdiehl11 Nov 14, 2024
efd2b5a
lint and use const for text align
ncdiehl11 Nov 14, 2024
d0321f8
allow data-testid override in `Divider`
ncdiehl11 Nov 14, 2024
cf07797
deselect all wells when confirming form
ncdiehl11 Nov 14, 2024
48a2f10
Revert "deselect all wells when confirming form"
ncdiehl11 Nov 14, 2024
55f083a
update MenuButton to existing MenuItem shared component
ncdiehl11 Nov 18, 2024
b85535d
revert divider testid
ncdiehl11 Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions components/src/atoms/MenuList/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
94 changes: 38 additions & 56 deletions protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -168,7 +166,7 @@ export function SlotOverflowMenu(
nestedLabwareOnSlot == null) ||
nestedLabwareOnSlot != null

const showEditAndLiquidsBtns =
const canRenameLabwareAndEditLiquids =
(labwareOnSlot != null &&
!isLabwareAnAdapter &&
!isLabwareTiprack &&
Expand All @@ -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
}
Expand Down Expand Up @@ -233,7 +231,7 @@ export function SlotOverflowMenu(
e.stopPropagation()
}}
>
<MenuButton
<MenuItem
onClick={() => {
addEquipment(location)
setShowMenuList(false)
Expand All @@ -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 &&
Expand All @@ -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) {
Expand All @@ -310,7 +308,7 @@ export function SlotOverflowMenu(
<StyledText desktopStyle="bodyDefaultRegular">
{t(isOffDeckLocation ? 'clear_labware' : 'clear_slot')}
</StyledText>
</MenuButton>
</MenuItem>
</Flex>
</>
)
Expand All @@ -334,19 +332,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};
}
`
7 changes: 5 additions & 2 deletions protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
Loading