feat(protocol-designer): deck setup skeleton for redesign (#15899)

closes AUTH-635

protocol-designer/src/components/DeckSetup/index.tsx

@@ -479,7 +479,7 @@ export const DeckSetupContents = (props: ContentsProps): JSX.Element => {
   )
 }
 
-export const DeckSetup = (): JSX.Element => {
+export const LegacyDeckSetup = (): JSX.Element => {
   const drilledDown =
     useSelector(labwareIngredSelectors.getDrillDownLabwareId) != null
   const selectedTerminalItemId = useSelector(getSelectedTerminalItemId)

protocol-designer/src/components/DeckSetupManager.tsx

@@ -4,7 +4,7 @@ import {
   getBatchEditSelectedStepTypes,
   getHoveredItem,
 } from '../ui/steps/selectors'
-import { DeckSetup } from './DeckSetup'
+import { LegacyDeckSetup } from './DeckSetup'
 import { NullDeckState } from './DeckSetup/NullDeckState'
 import { OffDeckLabwareButton } from './OffDeckLabwareButton'
 
@@ -17,7 +17,7 @@ export const DeckSetupManager = (): JSX.Element => {
     return (
       <>
         <OffDeckLabwareButton />
-        <DeckSetup />
+        <LegacyDeckSetup />
       </>
     )
   } else {

protocol-designer/src/localization/en/protocol_overview.json

@@ -1,3 +1,5 @@
 {
+  "add_labware": "Add labware",
+  "edit": "Edit",
   "protocol_overview": "Protocol overview"
 }

protocol-designer/src/pages/ProtocolOverview/DeckSetup/ControlSelect.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import cx from 'classnames'
+import { css } from 'styled-components'
+import { useSelector } from 'react-redux'
+import {
+  Flex,
+  LegacyStyledText,
+  RobotCoordsForeignDiv,
+} from '@opentrons/components'
+import { START_TERMINAL_ITEM_ID } from '../../../steplist'
+import { getDeckSetupForActiveItem } from '../../../top-selectors/labware-locations'
+
+import type { CoordinateTuple, Dimensions } from '@opentrons/shared-data'
+import type { TerminalItemId } from '../../../steplist'
+
+import styles from './DeckSetup.module.css'
+
+interface ControlSelectProps {
+  slotPosition: CoordinateTuple | null
+  slotBoundingBox: Dimensions
+  slotId: string
+  addEquipment: (slotId: string) => void
+  hover: string | null
+  setHover: React.Dispatch<React.SetStateAction<string | null>>
+  slotTopLayerId: string // can be AddressableAreaName, moduleId, labwareId
+  selectedTerminalItemId?: TerminalItemId | null
+}
+
+export const ControlSelect = (
+  props: ControlSelectProps
+): JSX.Element | null => {
+  const {
+    slotBoundingBox,
+    slotPosition,
+    slotId,
+    selectedTerminalItemId,
+    addEquipment,
+    hover,
+    setHover,
+    slotTopLayerId,
+  } = props
+  const { t } = useTranslation('protocol_overview')
+  const activeDeckSetup = useSelector(getDeckSetupForActiveItem)
+  const moduleId = Object.keys(activeDeckSetup.modules).find(
+    moduleId => slotTopLayerId === moduleId
+  )
+
+  if (selectedTerminalItemId !== START_TERMINAL_ITEM_ID || slotPosition == null)
+    return null
+
+  return (
+    <RobotCoordsForeignDiv
+      x={slotPosition[0]}
+      y={slotPosition[1]}
+      width={slotBoundingBox.xDimension}
+      height={slotBoundingBox.yDimension}
+      innerDivProps={{
+        //  TODO(ja, 8/6/24): refactor to not require className? and update styling to match designs
+        className: cx(styles.slot_overlay, styles.appear_on_mouseover),
+        onMouseEnter: () => {
+          setHover(slotId)
+        },
+        onMouseLeave: () => {
+          setHover(null)
+        },
+        onClick: () => {
+          addEquipment(slotId)
+        },
+      }}
+    >
+      <Flex
+        css={css`
+          opacity: ${hover != null && hover === slotId ? `1` : `0`};
+        `}
+      >
+        <a
+          onClick={() => {
+            addEquipment(slotId)
+          }}
+        >
+          <LegacyStyledText>
+            {moduleId != null ? t('add_labware') : t('edit')}
+          </LegacyStyledText>
+        </a>
+      </Flex>
+    </RobotCoordsForeignDiv>
+  )
+}

protocol-designer/src/pages/ProtocolOverview/DeckSetup/DeckSetup.module.css

@@ -0,0 +1,25 @@
+.slot_overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  padding: 0.5rem;
+  background-color: color-mod(var(--c-black) alpha(0.75));
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: flex-start;
+  color: white;
+  font-size: var(--fs-body-1);
+  border-radius: 0.5rem;
+}
+
+.appear_on_mouseover {
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+}