feat(protocol-designer): bring back deck setup drag & drop

components/src/hardware-sim/Deck/RobotCoordsForeignDiv.tsx

@@ -12,6 +12,8 @@ export interface RobotCoordsForeignDivProps {
   innerDivProps?: ComponentProps<typeof Box>
   transformWithSVG?: boolean
   extraTransform?: string
+  /** optional data-testid to test foreignObjects in cypress */
+  dataTestId?: string
 }
 
 export const RobotCoordsForeignDiv = (
@@ -27,11 +29,13 @@ export const RobotCoordsForeignDiv = (
     innerDivProps,
     transformWithSVG = false,
     extraTransform = '',
+    dataTestId = '',
   } = props
 
   const transform = `scale(1, -1) ${extraTransform}`
   return (
     <foreignObject
+      data-testid={dataTestId}
       {...{ x, y, height, width, ...outerProps }}
       transform={transformWithSVG ? transform : extraTransform}
     >

protocol-designer/cypress/support/SetupSteps.ts

@@ -109,7 +109,7 @@ export enum SetupContent {
   ModulePageH = 'Add your modules',
   ModulePageB = 'Select modules to use in your protocol.',
   EditProtocol = 'Edit protocol',
-  EditSlot = 'Edit slot',
+  EditLabware = 'Edit labware',
   AddLabwareToDeck = 'Add hardware/labware',
   EditHardwareLabwareOnDeck = 'Edit hardware/labware',
   LabwareH = 'Labware',
@@ -126,6 +126,10 @@ export enum SetupContent {
   Save = 'Save',
 }
 
+export const RegexSetupContent = {
+  slotText: /Edit (slot|labware)/i,
+}
+
 export enum SetupLocators {
   Confirm = 'button:contains("Confirm")',
   GoBack = 'button:contains("Go back")',
@@ -149,7 +153,7 @@ export enum SetupLocators {
   TempdeckTempInput = 'input[name="targetTemperature"]',
 }
 
-const chooseDeckSlot = (
+export const chooseDeckSlot = (
   slot: string
 ): Cypress.Chainable<JQuery<HTMLElement>> => {
   const deckSlots: Record<
@@ -167,29 +171,18 @@ const chooseDeckSlot = (
     | 'D3',
     () => Cypress.Chainable<JQuery<HTMLElement>>
   > = {
-    A1: () =>
-      cy.contains('foreignObject[x="0"][y="321"]', SetupContent.EditSlot),
-    A2: () =>
-      cy.contains('foreignObject[x="164"][y="321"]', SetupContent.EditSlot),
-    A3: () =>
-      cy.contains('foreignObject[x="328"][y="321"]', SetupContent.EditSlot),
-    B1: () =>
-      cy.contains('foreignObject[x="0"][y="214"]', SetupContent.EditSlot),
-    B2: () =>
-      cy.contains('foreignObject[x="164"][y="214"]', SetupContent.EditSlot),
-    B3: () =>
-      cy.contains('foreignObject[x="328"][y="214"]', SetupContent.EditSlot),
-    C1: () =>
-      cy.contains('foreignObject[x="0"][y="107"]', SetupContent.EditSlot),
-    C2: () =>
-      cy.contains('foreignObject[x="164"][y="107"]', SetupContent.EditSlot),
-    C3: () =>
-      cy.contains('foreignObject[x="328"][y="107"]', SetupContent.EditSlot),
-    D1: () => cy.contains('foreignObject[x="0"][y="0"]', SetupContent.EditSlot),
-    D2: () =>
-      cy.contains('foreignObject[x="164"][y="0"]', SetupContent.EditSlot),
-    D3: () =>
-      cy.contains('foreignObject[x="328"][y="0"]', SetupContent.EditSlot),
+    A1: () => cy.contains('[data-testid="A1"]', RegexSetupContent.slotText),
+    A2: () => cy.contains('[data-testid="A2"]', RegexSetupContent.slotText),
+    A3: () => cy.contains('[data-testid="A3"]', RegexSetupContent.slotText),
+    B1: () => cy.contains('[data-testid="B1"]', RegexSetupContent.slotText),
+    B2: () => cy.contains('[data-testid="B2"]', RegexSetupContent.slotText),
+    B3: () => cy.contains('[data-testid="B3"]', RegexSetupContent.slotText),
+    C1: () => cy.contains('[data-testid="C1"]', RegexSetupContent.slotText),
+    C2: () => cy.contains('[data-testid="C2"]', RegexSetupContent.slotText),
+    C3: () => cy.contains('[data-testid="C3"]', RegexSetupContent.slotText),
+    D1: () => cy.contains('[data-testid="D1"]', RegexSetupContent.slotText),
+    D2: () => cy.contains('[data-testid="D2"]', RegexSetupContent.slotText),
+    D3: () => cy.contains('[data-testid="D3"]', RegexSetupContent.slotText),
   }
 
   const slotAction = deckSlots[slot as keyof typeof deckSlots]
@@ -335,7 +328,7 @@ export const executeSetupSteps = (action: SetupActions): void => {
       chooseDeckSlot('C2')
         .find('.Box-sc-8ozbhb-0.kIDovv')
         .find('a[role="button"]')
-        .contains(SetupContent.EditSlot)
+        .contains(SetupContent.EditLabware)
         .click({ force: true })
       break
     case SetupActions.SelectArmadillo96WellPlate: // New case for selecting Armadillo plate

protocol-designer/src/assets/localization/en/deck.json

@@ -8,34 +8,14 @@
     "MODULE_INCOMPATIBLE_LABWARE_SWAP": "Swapping labware not possible due to module incompatibility",
     "LABWARE_INCOMPATIBLE_WITH_ADAPTER": "Labware incompatible with this adapter"
   },
-  "header": {
-    "end": "Click on labware to inspect the result of your protocol"
-  },
   "off_deck": {
     "slideout_title": "Off-deck labware",
     "slideout_empty_state": "There is currently no off-deck labware in this step of the protocol"
   },
   "overlay": {
-    "name_labware": {
-      "nickname_placeholder": "Add a nickname?",
-      "add_liquids": "Add Liquids",
-      "leave_empty": "Leave Empty"
-    },
-    "edit": {
-      "name_and_liquids": "Name & Liquids",
-      "duplicate": "Duplicate",
-      "delete": "Delete"
-    },
-    "browse": {
-      "view_liquids": "View Liquids"
-    },
     "slot": {
-      "add_labware": "Add Labware",
       "drag_to_new_slot": "Drag To New Slot",
-      "place_here": "Place Here",
-      "add_adapter_or_labware": "Add Labware or Adapter",
-      "add_adapter": "Add adapter"
+      "place_here": "Place here"
     }
-  },
-  "inactive_deck": "hover on a step to see deck state"
+  }
 }

protocol-designer/src/pages/Designer/DeckSetup/AdapterControls.tsx

@@ -0,0 +1,185 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { useRef } from 'react'
+import { useDrop } from 'react-dnd'
+import {
+  ALIGN_CENTER,
+  Flex,
+  JUSTIFY_CENTER,
+  Link,
+  RobotCoordsForeignDiv,
+  StyledText,
+} from '@opentrons/components'
+import { getLabwareEntities } from '../../../step-forms/selectors'
+import { DND_TYPES } from '../../../constants'
+import { getLabwareIsCustom } from '../../../utils/labwareModuleCompatibility'
+import { moveDeckItem } from '../../../labware-ingred/actions'
+import { selectors as labwareDefSelectors } from '../../../labware-defs'
+import { BlockedSlot } from './BlockedSlot'
+import { DECK_CONTROLS_STYLE } from './constants'
+
+import type { DropTargetMonitor } from 'react-dnd'
+import type { Dimensions } from '@opentrons/shared-data'
+import type { SharedControlsType, DroppedItem } from './types'
+
+interface AdapterControlsProps extends SharedControlsType {
+  slotBoundingBox: Dimensions
+  //    the adapter's labwareId
+  labwareId: string
+  onDeck: boolean
+  handleDragHover?: () => void
+}
+
+export const AdapterControls = (
+  props: AdapterControlsProps
+): JSX.Element | null => {
+  const {
+    slotPosition,
+    slotBoundingBox,
+    labwareId,
+    onDeck,
+    handleDragHover,
+    hover,
+    setHover,
+    setShowMenuListForId,
+    itemId,
+    isSelected,
+    tab,
+  } = props
+  const { t } = useTranslation(['deck', 'starting_deck_state'])
+  const customLabwareDefs = useSelector(
+    labwareDefSelectors.getCustomLabwareDefsByURI
+  )
+  const labwareEntities = useSelector(getLabwareEntities)
+  const adapterLoadName = labwareEntities[labwareId]?.def.parameters.loadName
+
+  if (adapterLoadName == null) {
+    console.error(
+      `expected to find the adapter loadname from labwareId ${labwareId} but could not`
+    )
+  }
+
+  const ref = useRef(null)
+  const dispatch = useDispatch()
+
+  const [{ itemType, draggedItem, isOver }, drop] = useDrop(
+    () => ({
+      accept: DND_TYPES.LABWARE,
+      canDrop: (item: DroppedItem) => {
+        const draggedDef = item.labwareOnDeck?.def
+        console.assert(
+          draggedDef,
+          'no labware def of dragged item, expected it on drop'
+        )
+
+        if (draggedDef != null) {
+          const isCustomLabware = getLabwareIsCustom(
+            customLabwareDefs,
+            item.labwareOnDeck
+          )
+          const adapterLabwareIsMatch =
+            draggedDef.stackingOffsetWithLabware?.[adapterLoadName] != null
+
+          return adapterLabwareIsMatch || isCustomLabware
+        }
+        return true
+      },
+      drop: (item: DroppedItem) => {
+        const droppedLabware = item
+        if (droppedLabware.labwareOnDeck != null) {
+          const droppedSlot = droppedLabware.labwareOnDeck.slot
+          dispatch(moveDeckItem(droppedSlot, labwareId))
+        }
+      },
+      hover: () => {
+        if (handleDragHover != null) {
+          handleDragHover()
+        }
+      },
+      collect: (monitor: DropTargetMonitor) => ({
+        itemType: monitor.getItemType(),
+        isOver: !!monitor.isOver(),
+        draggedItem: monitor.getItem() as DroppedItem,
+      }),
+    }),
+    []
+  )
+
+  if (
+    (itemType !== DND_TYPES.LABWARE && itemType !== null) ||
+    tab === 'protocolSteps' ||
+    isSelected ||
+    slotPosition == null
+  ) {
+    return null
+  }
+
+  const draggedDef = draggedItem?.labwareOnDeck?.def
+  const isCustomLabware = draggedItem
+    ? getLabwareIsCustom(customLabwareDefs, draggedItem.labwareOnDeck)
+    : false
+
+  const isSlotBlocked =
+    isOver &&
+    draggedDef != null &&
+    draggedDef.stackingOffsetWithLabware?.[adapterLoadName] == null &&
+    !isCustomLabware
+
+  drop(ref)
+
+  const hoverOpacity = (hover != null && hover === itemId) || isOver ? '1' : '0'
+
+  return (
+    <g ref={ref}>
+      {isSlotBlocked ? (
+        <BlockedSlot
+          x={slotPosition[0]}
+          y={slotPosition[1]}
+          width={slotBoundingBox.xDimension}
+          height={slotBoundingBox.yDimension}
+          message="LABWARE_INCOMPATIBLE_WITH_ADAPTER"
+        />
+      ) : (
+        <RobotCoordsForeignDiv
+          dataTestId={itemId}
+          x={onDeck ? slotPosition[0] : 0}
+          y={onDeck ? slotPosition[1] : 0}
+          width={slotBoundingBox.xDimension}
+          height={slotBoundingBox.yDimension}
+          innerDivProps={{
+            style: {
+              opacity: hoverOpacity,
+              ...DECK_CONTROLS_STYLE,
+            },
+            onMouseEnter: () => {
+              setHover(itemId)
+            },
+            onMouseLeave: () => {
+              setHover(null)
+            },
+            onClick: () => {
+              if (!isOver) {
+                setShowMenuListForId(itemId)
+              }
+            },
+          }}
+        >
+          <Flex
+            width={slotBoundingBox.xDimension}
+            height={slotBoundingBox.yDimension}
+            alignItems={ALIGN_CENTER}
+            justifyContent={JUSTIFY_CENTER}
+          >
+            <Link role="button">
+              <StyledText desktopStyle="bodyDefaultSemiBold">
+                {isOver
+                  ? t('overlay.slot.place_here')
+                  : t('starting_deck_state:edit_labware')}
+              </StyledText>
+            </Link>
+          </Flex>
+        </RobotCoordsForeignDiv>
+      )}
+    </g>
+  )
+}

protocol-designer/src/pages/Designer/DeckSetup/BlockedSlot.tsx

@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
+import { COLORS, RobotCoordsForeignDiv } from '@opentrons/components'
+
+type BlockedSlotMessage =
+  | 'MODULE_INCOMPATIBLE_SINGLE_LABWARE'
+  | 'MODULE_INCOMPATIBLE_LABWARE_SWAP'
+  | 'LABWARE_INCOMPATIBLE_WITH_ADAPTER'
+
+interface BlockedSlotProps {
+  x: number
+  y: number
+  width: number
+  height: number
+  message: BlockedSlotMessage
+}
+
+export const BlockedSlot = (props: BlockedSlotProps): JSX.Element => {
+  const { t } = useTranslation('deck')
+  const { x, y, width, height, message } = props
+  //    TODO: get design feedback on this
+  return (
+    <g>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        css={css`
+          fill: rgba(200, 115, 0, 0.75);
+          stroke: var(--c-red);
+          rx: 6;
+        `}
+      />
+      <RobotCoordsForeignDiv
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        innerDivProps={{
+          style: {
+            height: '100%',
+            fontSize: '12px',
+            color: COLORS.white,
+            margin: '-1.5rem 0.5rem',
+            transform: 'rotate(180deg) scaleX(-1)',
+          },
+        }}
+      >
+        {t(`blocked_slot.${message}`)}
+      </RobotCoordsForeignDiv>
+    </g>
+  )
+}