fix(protocol-designer): change BlockedSlot overlay for waste chute (#17799)

closes RQA-4003

Author: jerader

components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx

@@ -89,13 +89,24 @@ interface WasteChuteProps {
   backgroundColor: string
   showHighlight?: boolean
   tagInfo?: DeckLabelProps[]
+  //  optional opacity and overlay to change the overlay container over the WasteChute container
+  //  currently used in PD's BlockedSlot for drag/drop
+  overlay?: JSX.Element
+  opacity?: string
 }
 
 /**
  * a deck map foreign object representing the physical location of the waste chute connected to the deck
  */
 export function WasteChute(props: WasteChuteProps): JSX.Element {
-  const { wasteIconColor, backgroundColor, showHighlight, tagInfo } = props
+  const {
+    wasteIconColor,
+    backgroundColor,
+    showHighlight,
+    tagInfo,
+    overlay,
+    opacity,
+  } = props
 
   return (
     <>
@@ -105,29 +116,33 @@ export function WasteChute(props: WasteChuteProps): JSX.Element {
         x={WASTE_CHUTE_X}
         y={-51}
         flexProps={{ flex: '1' }}
-        foreignObjectProps={{ flex: '1' }}
+        foreignObjectProps={{ opacity: opacity ?? '1.0', flex: '1' }}
       >
-        <Flex
-          alignItems={ALIGN_CENTER}
-          backgroundColor={backgroundColor}
-          borderRadius="6px"
-          color={wasteIconColor}
-          flexDirection={DIRECTION_COLUMN}
-          gridGap={SPACING.spacing4}
-          justifyContent={JUSTIFY_CENTER}
-          padding={SPACING.spacing8}
-          width="100%"
-          border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
-        >
-          <Icon name="trash" color={wasteIconColor} height="2rem" />
-          <Text
-            color={COLORS.white}
-            textAlign={TEXT_ALIGN_CENTER}
-            css={TYPOGRAPHY.bodyTextSemiBold}
+        {overlay != null ? (
+          overlay
+        ) : (
+          <Flex
+            alignItems={ALIGN_CENTER}
+            backgroundColor={backgroundColor}
+            borderRadius="6px"
+            color={wasteIconColor}
+            flexDirection={DIRECTION_COLUMN}
+            gridGap={SPACING.spacing4}
+            justifyContent={JUSTIFY_CENTER}
+            padding={SPACING.spacing8}
+            width="100%"
+            border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
           >
-            Waste chute
-          </Text>
-        </Flex>
+            <Icon name="trash" color={wasteIconColor} height="2rem" />
+            <Text
+              color={COLORS.white}
+              textAlign={TEXT_ALIGN_CENTER}
+              css={TYPOGRAPHY.bodyTextSemiBold}
+            >
+              Waste chute
+            </Text>
+          </Flex>
+        )}
       </RobotCoordsForeignObject>
       {tagInfo != null && tagInfo.length > 0 ? (
         <DeckLabelSet

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

@@ -1,4 +1,21 @@
-import { COLORS, Icon } from '@opentrons/components'
+import { useSelector } from 'react-redux'
+import {
+  ALIGN_CENTER,
+  COLORS,
+  Flex,
+  Icon,
+  JUSTIFY_CENTER,
+  SPACING,
+  WasteChute,
+} from '@opentrons/components'
+import {
+  getCutoutIdFromAddressableArea,
+  getDeckDefFromRobotType,
+  FLEX_ROBOT_TYPE,
+  WASTE_CHUTE_CUTOUT,
+} from '@opentrons/shared-data'
+import { getHasWasteChute } from '@opentrons/step-generation'
+import { getAdditionalEquipmentEntities } from '../../../../step-forms/selectors'
 import { SlotOverlay } from './SlotOverlay'
 import type { CoordinateTuple, DeckSlotId } from '@opentrons/shared-data'
 
@@ -9,7 +26,33 @@ interface BlockedSlotProps {
 
 export function BlockedSlot(props: BlockedSlotProps): JSX.Element | null {
   const { slotId, slotPosition } = props
-  return (
+  const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE)
+  const cutoutId = getCutoutIdFromAddressableArea(slotId, deckDef)
+  const additionalEquipmentEntities = useSelector(
+    getAdditionalEquipmentEntities
+  )
+  const hasWasteChute = getHasWasteChute(additionalEquipmentEntities)
+
+  return cutoutId === WASTE_CHUTE_CUTOUT && hasWasteChute ? (
+    <WasteChute
+      backgroundColor={COLORS.white}
+      wasteIconColor={COLORS.red50}
+      opacity="0.8"
+      overlay={
+        <Flex
+          //  NOTE: this border radius matches WasteChuteFixture's border radius
+          borderRadius="6px"
+          alignItems={ALIGN_CENTER}
+          backgroundColor={COLORS.white}
+          gridGap={SPACING.spacing8}
+          justifyContent={JUSTIFY_CENTER}
+          width="100%"
+        >
+          <Icon size="2.25rem" name="no-icon" color={COLORS.red50} />
+        </Flex>
+      }
+    />
+  ) : (
     <SlotOverlay
       slotId={slotId}
       slotPosition={slotPosition}

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

@@ -0,0 +1,52 @@
+import { describe, it, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { WasteChute } from '@opentrons/components'
+import { getHasWasteChute } from '@opentrons/step-generation'
+import { screen } from '@testing-library/react'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { getAdditionalEquipmentEntities } from '../../../../step-forms/selectors'
+import { BlockedSlot } from '../Overlays/BlockedSlot'
+import { SlotOverlay } from '../Overlays/SlotOverlay'
+
+import type { ComponentProps } from 'react'
+import type * as OpentronsComponents from '@opentrons/components'
+
+vi.mock('../Overlays/SlotOverlay')
+vi.mock('@opentrons/step-generation')
+vi.mock('../../../../step-forms/selectors')
+vi.mock('@opentrons/components', async importOriginal => {
+  const actual = await importOriginal<typeof OpentronsComponents>()
+  return {
+    ...actual,
+    WasteChute: vi.fn(),
+  }
+})
+
+const render = (props: ComponentProps<typeof BlockedSlot>) => {
+  return renderWithProviders(<BlockedSlot {...props} />)[0]
+}
+
+describe('BlockedSlot', () => {
+  let props: ComponentProps<typeof BlockedSlot>
+
+  beforeEach(() => {
+    props = {
+      slotId: 'D3',
+      slotPosition: [0, 0, 0],
+    }
+    vi.mocked(getAdditionalEquipmentEntities).mockReturnValue({})
+    vi.mocked(SlotOverlay).mockReturnValue(<div>mock SlotOverlay</div>)
+    vi.mocked(WasteChute).mockReturnValue(<div>mock WasteChute</div>)
+  })
+  it('renders a waste chute overlay', () => {
+    vi.mocked(getHasWasteChute).mockReturnValue(true)
+    render(props)
+    screen.getByText('mock WasteChute')
+  })
+  it('renders a slot overlay', () => {
+    vi.mocked(getHasWasteChute).mockReturnValue(false)
+
+    render(props)
+    screen.getByText('mock SlotOverlay')
+  })
+})