fix(protocol-designer): align the overflow menus types the same over … (#18852)

…timeline

closes RQA-4339

Author: jerader

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

@@ -60,7 +60,7 @@ export function LiquidsOverflowMenu({
     right = undefined
     left =
       targetWidth !== undefined
-        ? `${targetWidth - OVERFLOW_MENU_POSITION_ADJUSTMENT}px`
+        ? `${targetWidth + OVERFLOW_MENU_POSITION_ADJUSTMENT}px`
         : undefined
   }
 

protocol-designer/src/constants.ts

@@ -205,7 +205,7 @@ export const OFFDECK: 'offDeck' = 'offDeck'
 export const PROTOCOL_DESIGNER_SOURCE: 'Protocol Designer' = 'Protocol Designer' // protocolSource for tracking analytics in the app
 
 export const DECK_SETUP_TOOLS_WIDTH_REM = 21.875
-export const OVERFLOW_MENU_POSITION_ADJUSTMENT = 4
+export const OVERFLOW_MENU_POSITION_ADJUSTMENT = 8
 
 // Below values copied from opentrons/api/src/opentrons/config/defaults_ot[2/3].py
 export const FLEX_X_Y_MAX_SPEED = 300

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepButton.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import { last } from 'lodash'
+import last from 'lodash/last'
 import { css } from 'styled-components'
 
 import {
@@ -66,9 +66,13 @@ import type { BaseState } from '../../../../types'
 
 interface AddStepButtonProps {
   hasText: boolean
+  sidebarWidth: number
 }
 
-export function AddStepButton({ hasText }: AddStepButtonProps): JSX.Element {
+export function AddStepButton({
+  hasText,
+  sidebarWidth,
+}: AddStepButtonProps): JSX.Element {
   const { t } = useTranslation(['tooltip', 'button', 'starting_deck_state'])
   const enableComment = useSelector(getEnableComment)
   const { makeSnackbar } = useKitchen()

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepOverflowButton.tsx

@@ -25,11 +25,6 @@ export function AddStepOverflowButton(
 ): JSX.Element {
   const { onClick, stepType, isFirstStep = false, isLastStep = false } = props
   const { t, i18n } = useTranslation(['tooltip', 'application'])
-  //   TODO(ja): add or delete tooltips when designs are finalized
-  //   const [targetProps, tooltipProps] = useHoverTooltip({
-  //     placement: TOOLTIP_RIGHT,
-  //   })
-  //   const tooltipMessage = t(`step_description.${stepType}`)
 
   const selectHoverStyle = (): string => {
     if (isFirstStep) {
@@ -52,7 +47,6 @@ export function AddStepOverflowButton(
           )}
         </StyledText>
       </MenuButton>
-      {/* <Tooltip tooltipProps={tooltipProps}>{tooltipMessage}</Tooltip> */}
     </>
   )
 }

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx

@@ -14,6 +14,7 @@ import {
 
 import { analyticsEvent } from '../../../../analytics/actions'
 import { OPEN_STEP_DETAILS_EVENT } from '../../../../analytics/constants'
+import { OVERFLOW_MENU_POSITION_ADJUSTMENT } from '../../../../constants'
 import {
   getBatchEditFormHasUnsavedChanges,
   getCurrentFormHasUnsavedChanges,
@@ -44,8 +45,6 @@ interface StepOverflowMenuProps {
   sidebarWidth: number // adjust the position of the overflow menu
 }
 
-const POSITION_ADJUSTMENT = 4
-
 export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
   const {
     stepId,
@@ -102,7 +101,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
         ref={menuRootRef}
         zIndex={12}
         top={top}
-        left={sidebarWidth - POSITION_ADJUSTMENT} // the space between kebab menu button and overflow menu is 8px
+        left={sidebarWidth + OVERFLOW_MENU_POSITION_ADJUSTMENT} // the space between kebab menu button and overflow menu is 8px
         position={POSITION_ABSOLUTE}
         whiteSpace={NO_WRAP}
         borderRadius={BORDERS.borderRadius8}

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx

@@ -156,7 +156,10 @@ export function TimelineToolbox({
       childrenPadding="0px"
       confirmButton={
         formData != null ? undefined : (
-          <AddStepButton hasText={sidebarWidth > SIDEBAR_MIN_WIDTH_FOR_ICON} />
+          <AddStepButton
+            hasText={sidebarWidth > SIDEBAR_MIN_WIDTH_FOR_ICON}
+            sidebarWidth={sidebarWidth}
+          />
         )
       }
     >

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx

@@ -106,6 +106,7 @@ describe('AddStepButton', () => {
   beforeEach(() => {
     props = {
       hasText: true,
+      sidebarWidth: 10,
     }
     vi.mocked(getEnableComment).mockReturnValue(true)
     vi.mocked(getCurrentFormIsPresaved).mockReturnValue(false)