Merge branch 'edge' into liquid-classes-remove_default_keys_from_prop…

…s_by_volume
Opentrons · Nov 18, 2024 · 6a4e7c6 · 6a4e7c6
2 parents 1b161d9 + ccc2145
commit 6a4e7c6
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 90 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/assets/localization/en/protocol_steps.json b/protocol-designer/src/assets/localization/en/protocol_steps.json
@@ -69,7 +69,7 @@
     "consolidate_disposal": "<text>Consolidating</text><tag/><text>from</text><semiBoldText>{{sourceWells}} of {{source}}</semiBoldText><text>to</text><semiBoldText>{{destination}}</semiBoldText>",
     "transfer_disposal": "<text>Transferring</text><tag/><text>from</text><semiBoldText>{{sourceWells}} of {{source}}</semiBoldText><text>to</text><semiBoldText>{{destination}}</semiBoldText>"
   },
-  "multi_dispense_options": "Distribute options",
+  "multi_dispense_options": "Disposal volume",
   "multiAspirate": "Consolidate path",
   "multiDispense": "Distribute path",
   "new_location": "New location",

diff --git a/protocol-designer/src/organisms/DisabledScreen/index.tsx b/protocol-designer/src/organisms/DisabledScreen/index.tsx
@@ -23,6 +23,7 @@ export function DisabledScreen(): JSX.Element {
       backgroundColor={`${COLORS.black90}${COLORS.opacity40HexCode}`}
       overflow={OVERFLOW_HIDDEN}
       noPadding
+      zIndexOverlay={15}
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}

diff --git a/protocol-designer/src/organisms/ProtocolNavBar/__tests__/ProtocolNavBar.test.tsx b/protocol-designer/src/organisms/ProtocolNavBar/__tests__/ProtocolNavBar.test.tsx
@@ -47,7 +47,6 @@ describe('ProtocolNavBar', () => {
       ] as TabProps[],
       hasTrashEntity: false,
       showLiquidOverflowMenu: vi.fn(),
-      isAddingHardwareOrLabware: false,
     }
     vi.mocked(getFileMetadata).mockReturnValue({
       protocolName: 'mockProtocolName',
@@ -73,14 +72,14 @@ describe('ProtocolNavBar', () => {
   })
 
   it('should render protocol name and add hardware/labware - protocol name', () => {
-    props = { ...props, isAddingHardwareOrLabware: true }
+    props = { ...props, hasZoomInSlot: true }
     render(props)
     screen.getByText('mockProtocolName')
     screen.getByText('Add hardware/labware')
   })
 
   it('should render protocol name and add hardware/labware - no protocol name', () => {
-    props = { ...props, isAddingHardwareOrLabware: true }
+    props = { ...props, hasZoomInSlot: true }
     vi.mocked(getFileMetadata).mockReturnValue({})
     render(props)
     screen.getByText('Untitled protocol')

diff --git a/protocol-designer/src/organisms/ProtocolNavBar/index.tsx b/protocol-designer/src/organisms/ProtocolNavBar/index.tsx
@@ -29,48 +29,45 @@ interface ProtocolNavBarProps {
   tabs?: TabProps[]
   hasTrashEntity?: boolean
   showLiquidOverflowMenu?: (liquidOverflowMenu: boolean) => void
-  isAddingHardwareOrLabware?: boolean
   liquidPage?: boolean
-  isOffDeck?: boolean
 }
 
 export function ProtocolNavBar({
   hasZoomInSlot,
-  isAddingHardwareOrLabware = false,
   tabs = [],
   hasTrashEntity,
   showLiquidOverflowMenu,
   liquidPage = false,
-  isOffDeck = false,
 }: ProtocolNavBarProps): JSX.Element {
   const { t } = useTranslation('starting_deck_state')
   const metadata = useSelector(getFileMetadata)
   const { makeSnackbar } = useKitchen()
   const navigate = useNavigate()
   const dispatch = useDispatch()
 
+  const showProtocolEditButtons = !(hasZoomInSlot || liquidPage)
+
+  let metadataText = t('edit_protocol')
+  if (liquidPage) {
+    metadataText = t('add_liquid')
+  } else if (hasZoomInSlot) {
+    metadataText = t('add_hardware_labware')
+  }
   return (
-    <NavContainer>
-      {hasZoomInSlot ? null : <Tabs tabs={tabs} />}
+    <NavContainer showShadow={!showProtocolEditButtons}>
+      {showProtocolEditButtons ? <Tabs tabs={tabs} /> : null}
 
-      <MetadataContainer isAddingHardwareOrLabware={isAddingHardwareOrLabware}>
+      <MetadataContainer showProtocolEditButtons={showProtocolEditButtons}>
         <StyledText
           desktopStyle="bodyDefaultSemiBold"
           css={LINE_CLAMP_TEXT_STYLE(1)}
-          textAlign={isOffDeck && TYPOGRAPHY.textAlignLeft}
         >
           {metadata?.protocolName != null && metadata?.protocolName !== ''
             ? metadata?.protocolName
             : t('untitled_protocol')}
         </StyledText>
-        <StyledText
-          desktopStyle="bodyDefaultRegular"
-          color={COLORS.grey60}
-          textAlign={isOffDeck && TYPOGRAPHY.textAlignLeft}
-        >
-          {isAddingHardwareOrLabware || isOffDeck
-            ? t('add_hardware_labware')
-            : t('edit_protocol')}
+        <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+          {metadataText}
         </StyledText>
       </MetadataContainer>
 
@@ -98,26 +95,30 @@ export function ProtocolNavBar({
   )
 }
 
-const NavContainer = styled(Flex)`
+const NavContainer = styled(Flex)<{ showShadow: boolean }>`
+  z-index: 11;
   padding: ${SPACING.spacing12};
   width: 100%;
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   align-items: ${ALIGN_CENTER};
-  box-shadow: 0px 1px 3px 0px ${COLORS.black90}${COLORS.opacity20HexCode};
+  box-shadow: ${props =>
+    props.showShadow
+      ? `0px 1px 3px 0px ${COLORS.black90}${COLORS.opacity20HexCode}`
+      : 'none'};
 `
 
 interface MetadataProps extends StyleProps {
-  isAddingHardwareOrLabware: boolean
+  showProtocolEditButtons: boolean
 }
 const MetadataContainer = styled.div.withConfig<MetadataProps>({
-  shouldForwardProp: p => isntStyleProp(p) && p !== 'isAddingHardwareOrLabware',
+  shouldForwardProp: p => isntStyleProp(p) && p !== 'showProtocolEditButtons',
 })<MetadataProps>`
   display: flex;
   flex-direction: ${DIRECTION_COLUMN};
   text-align: ${props =>
-    props.isAddingHardwareOrLabware === true
-      ? TYPOGRAPHY.textAlignLeft
-      : TYPOGRAPHY.textAlignCenter};
+    props.showProtocolEditButtons === true
+      ? TYPOGRAPHY.textAlignCenter
+      : TYPOGRAPHY.textAlignLeft};
 
   // For screens between 600px and 767px, set width to 88px
   @media only screen and (max-width: 767px) {

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({

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/DisposalField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/DisposalField.tsx
@@ -100,6 +100,7 @@ export function DisposalField(props: DisposalFieldProps): JSX.Element {
             pipetteId={pipette}
             flowRateType="blowout"
             volume={propsForFields.volume?.value ?? 0}
+            padding="0"
             tiprack={propsForFields.tipRack.value}
           />
           <BlowoutOffsetField

diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
@@ -151,14 +151,10 @@ export function Designer(): JSX.Element {
       ) : null}
       <Flex flexDirection={DIRECTION_COLUMN}>
         <ProtocolNavBar
-          hasZoomInSlot={zoomIn.slot != null}
-          isAddingHardwareOrLabware={
-            zoomIn.slot != null && zoomIn.cutout != null
-          }
+          hasZoomInSlot={zoomIn.slot != null || zoomIn.cutout != null}
           hasTrashEntity={hasTrashEntity}
           showLiquidOverflowMenu={showLiquidOverflowMenu}
           tabs={[startingDeckTab, protocolStepTab]}
-          isOffDeck={deckView !== leftString}
         />
 
         {tab === 'startingDeck' ? (