feat(protocol-designer): add step dragging indicator (#16660)

Adds logic to display a divider under a target step when a step is being dragged (for reordering) over that target step. Closes AUTH-1013
Opentrons · Nov 1, 2024 · f2d37b1 · f2d37b1
1 parent 7e4a6bb
commit f2d37b1
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 8 deletions.
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
@@ -46,10 +46,11 @@ import type { DeleteModalType } from '../../../../components/modals/ConfirmDelet
 export interface ConnectedStepInfoProps {
   stepId: StepIdType
   stepNumber: number
+  dragHovered?: boolean
 }
 
 export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
-  const { stepId, stepNumber } = props
+  const { stepId, stepNumber, dragHovered = false } = props
   const { t } = useTranslation('application')
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
   const stepIds = useSelector(getOrderedStepIds)
@@ -215,6 +216,7 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
         title={`${stepNumber}. ${
           step.stepName || t(`stepType.${step.stepType}`)
         }`}
+        dragHovered={dragHovered}
       />
     </>
   )

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/DraggableSteps.tsx
@@ -14,7 +14,7 @@ import { selectors as stepFormSelectors } from '../../../../step-forms'
 import { stepIconsByType } from '../../../../form-types'
 import { StepContainer } from './StepContainer'
 import { ConnectedStepInfo } from './ConnectedStepInfo'
-import type { DragLayerMonitor, DropTargetOptions } from 'react-dnd'
+import type { DragLayerMonitor, DropTargetMonitor } from 'react-dnd'
 import type { StepIdType } from '../../../../form-types'
 import type { ConnectedStepItemProps } from '../../../../containers/ConnectedStepItem'
 
@@ -44,7 +44,7 @@ function DragDropStep(props: DragDropStepProps): JSX.Element {
     [orderedStepIds]
   )
 
-  const [{ handlerId }, drop] = useDrop(
+  const [{ handlerId, hovered }, drop] = useDrop(
     () => ({
       accept: DND_TYPES.STEP_ITEM,
       canDrop: () => {
@@ -57,8 +57,9 @@ function DragDropStep(props: DragDropStepProps): JSX.Element {
           moveStep(draggedId, overIndex)
         }
       },
-      collect: (monitor: DropTargetOptions) => ({
+      collect: (monitor: DropTargetMonitor) => ({
         handlerId: monitor.getHandlerId(),
+        hovered: monitor.isOver(),
       }),
     }),
     [orderedStepIds]
@@ -71,7 +72,11 @@ function DragDropStep(props: DragDropStepProps): JSX.Element {
       style={{ opacity: isDragging ? 0.3 : 1 }}
       data-handler-id={handlerId}
     >
-      <ConnectedStepInfo stepNumber={stepNumber} stepId={stepId} />
+      <ConnectedStepInfo
+        stepNumber={stepNumber}
+        stepId={stepId}
+        dragHovered={hovered}
+      />
     </Box>
   )
 }

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -4,11 +4,12 @@ import { useDispatch, useSelector } from 'react-redux'
 import {
   ALIGN_CENTER,
   BORDERS,
-  Box,
   Btn,
   COLORS,
   CURSOR_DEFAULT,
   CURSOR_POINTER,
+  DIRECTION_COLUMN,
+  Divider,
   Flex,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
@@ -55,6 +56,7 @@ export interface StepContainerProps {
   hovered?: boolean
   hasError?: boolean
   isStepAfterError?: boolean
+  dragHovered?: boolean
 }
 
 export function StepContainer(props: StepContainerProps): JSX.Element {
@@ -71,6 +73,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
     title,
     hasError = false,
     isStepAfterError = false,
+    dragHovered = false,
   } = props
   const [top, setTop] = React.useState<number>(0)
   const menuRootRef = React.useRef<HTMLDivElement | null>(null)
@@ -188,12 +191,14 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
           onCancelClick={cancelMultiDelete}
         />
       )}
-      <Box
+      <Flex
         id={stepId}
         {...{
           onMouseEnter: isStepAfterError ? undefined : onMouseEnter,
           onMouseLeave: isStepAfterError ? undefined : onMouseLeave,
         }}
+        gridGap={SPACING.spacing4}
+        flexDirection={DIRECTION_COLUMN}
       >
         <Btn
           onDoubleClick={onDoubleClick}
@@ -246,7 +251,16 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
             ) : null}
           </Flex>
         </Btn>
-      </Box>
+        {dragHovered ? (
+          <Divider
+            marginY="0"
+            height="0.25rem"
+            width="100%"
+            backgroundColor={COLORS.blue50}
+            borderRadius={BORDERS.borderRadius2}
+          />
+        ) : null}
+      </Flex>
       {stepOverflowMenu && stepId != null
         ? createPortal(
             <StepOverflowMenu

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepContainer.test.tsx
@@ -49,4 +49,8 @@ describe('StepContainer', () => {
     render(props)
     screen.getByText('Final deck state')
   })
+  it('renders the divider if hover targets that step', () => {
+    render({ ...props, dragHovered: true })
+    screen.getByTestId('divider')
+  })
 })