fixI(app): Allow waste chute with cover fixtures on DeckConfiguration component (#18983)

Author: TamarZanzouri

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx

@@ -1,18 +1,14 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { css } from 'styled-components'
 
 import {
-  Btn,
-  COLORS,
   DIRECTION_COLUMN,
   FixtureOption,
   Flex,
   ListTable,
   Modal,
   SPACING,
   StyledText,
-  TYPOGRAPHY,
 } from '@opentrons/components'
 import {
   useModulesQuery,
@@ -24,6 +20,7 @@ import {
   replaceCutoutFixtureWithComboFixture,
   replaceFixtureToFakeFixtureAndTransformCutoutFixturesToAA,
   SINGLE_CENTER_CUTOUTS,
+  WASTE_CHUTE_CUTOUT,
 } from '@opentrons/shared-data'
 
 import { ODDFixtureOption } from '/app/molecules/ODDFixtureOption'
@@ -161,6 +158,23 @@ export function AddFixtureModal({
         />
       </>
     )
+  } else if (
+    optionStage === 'fixtureOptions' &&
+    cutoutId === WASTE_CHUTE_CUTOUT &&
+    addressableAreaId === 'D3'
+  ) {
+    nextStageOptions = (
+      <>
+        <FixtureOption
+          key="wasteChuteStageOption"
+          optionName="Waste chute"
+          buttonText={t('select_options')}
+          onClickHandler={() => {
+            setOptionStage('wasteChuteOptions')
+          }}
+        />
+      </>
+    )
   }
 
   const sendIdentifyStacker = useSendIdentifyStacker()
@@ -333,32 +347,8 @@ export function AddFixtureModal({
               {nextStageOptions}
             </ListTable>
           </Flex>
-          {optionStage === 'wasteChuteOptions' ? (
-            <Btn
-              onClick={() => {
-                setOptionStage('fixtureOptions')
-              }}
-              aria-label="back"
-              paddingX={SPACING.spacing16}
-              marginTop="1.44rem"
-              marginBottom="0.56rem"
-            >
-              <StyledText css={GO_BACK_BUTTON_STYLE}>
-                {t('shared:go_back')}
-              </StyledText>
-            </Btn>
-          ) : null}
         </Modal>
       )}
     </>
   )
 }
-
-const GO_BACK_BUTTON_STYLE = css`
-  ${TYPOGRAPHY.pSemiBold};
-  color: ${COLORS.grey50};
-
-  &:hover {
-    opacity: 70%;
-  }
-`

app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx

@@ -114,8 +114,10 @@ describe('Desktop AddFixtureModal', () => {
     screen.getByText('Modules')
     fireEvent.click(screen.getAllByText('Add')[0])
     screen.getByText('Trash bin')
-    screen.getByText('Waste chute')
-    expect(screen.getAllByRole('button', { name: 'Add' }).length).toBe(2)
+    expect(screen.getAllByRole('button', { name: 'Add' }).length).toBe(1)
+    expect(
+      screen.getAllByRole('button', { name: 'Select options' }).length
+    ).toBe(1)
   })
 
   it('should render text and buttons slot A1', () => {
@@ -169,7 +171,10 @@ describe('Desktop AddFixtureModal', () => {
   it('should display appropriate Waste Chute options when the generic Waste Chute button is clicked', () => {
     render(props)
     fireEvent.click(screen.getAllByRole('button', { name: 'Add' })[0]) // click fixtures
-    expect(screen.getAllByRole('button', { name: 'Add' }).length).toBe(2)
+    expect(screen.getAllByRole('button', { name: 'Add' }).length).toBe(1)
+    expect(
+      screen.getAllByRole('button', { name: 'Select options' }).length
+    ).toBe(1)
 
     const displayText = getFixtureDisplayName(
       WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE

app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/utils.test.tsx

@@ -10,6 +10,7 @@ import {
   MAGNETIC_BLOCK_V1_FIXTURE,
   THERMOCYCLER_MODULE_TYPE,
   THERMOCYCLER_MODULE_V2,
+  WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
   WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
 } from '@opentrons/shared-data'
 
@@ -208,13 +209,6 @@ describe('getFixtureOptions', () => {
           addressableAreaId: 'movableTrashD3',
         },
       ],
-      [
-        {
-          cutoutId: 'cutoutD3',
-          cutoutFixtureId: 'wasteChuteRightAdapterNoCover',
-          addressableAreaId: '96ChannelWasteChute',
-        },
-      ],
     ])
   })
   it('Should get staging area for cutoutD3 and aa fakeD4', () => {
@@ -250,6 +244,13 @@ describe('getWasteChuteOptions', () => {
           addressableAreaId: DEFAULT_AA_FOR_WASTE_CHUTE,
         },
       ],
+      [
+        {
+          cutoutId: 'cutoutD3',
+          cutoutFixtureId: WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
+          addressableAreaId: DEFAULT_AA_FOR_WASTE_CHUTE,
+        },
+      ],
     ])
   })
 })

app/src/organisms/DeviceDetailsDeckConfiguration/utils.ts

@@ -10,6 +10,7 @@ import {
   THERMOCYCLER_MODULE_V2,
   TRASH_BIN_ADAPTER_FIXTURE,
   WASTE_CHUTE_CUTOUT,
+  WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
   WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
 } from '@opentrons/shared-data'
 
@@ -204,6 +205,13 @@ export const getWasteChuteOptions = (
           addressableAreaId: DEFAULT_AA_FOR_WASTE_CHUTE,
         },
       ],
+      [
+        {
+          cutoutId,
+          cutoutFixtureId: WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
+          addressableAreaId: DEFAULT_AA_FOR_WASTE_CHUTE,
+        },
+      ],
     ]
   } else {
     return []
@@ -252,10 +260,6 @@ export const getFixtureOptions = (
     ]
   }
 
-  if (cutoutId === 'cutoutD3' && addressableAreaId === 'D3') {
-    const wasteChuteOptions = getWasteChuteOptions(cutoutId)
-    availableOptions = [...availableOptions, ...wasteChuteOptions]
-  }
   return availableOptions
 }
 

components/src/hardware-sim/DeckConfigurator/index.tsx

@@ -336,11 +336,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
       <SlotLabels
         robotType={FLEX_ROBOT_TYPE}
         color={darkFill}
-        show4thColumn={
-          stagingAreaItems.length > 0 ||
-          absorbanceReaderItems.length > 0 ||
-          flexStackerItems.length > 0
-        }
+        show4thColumn={true}
       />
       {children}
     </RobotCoordinateSpace>

shared-data/js/__tests__/fixtures.test.ts

@@ -176,7 +176,7 @@ describe('getAddressableAreaWithFakesMatchForAreaId', () => {
       'wasteChuteRightAdapterNoCover',
       'D3'
     )
-    expect(result).toEqual('96ChannelWasteChute')
+    expect(result).toEqual('1ChannelWasteChute')
   })
 
   it('Should find an aa for staging area', () => {
@@ -320,7 +320,7 @@ describe('getFlexDeckDefAAByFixtureIdForCutoutId', () => {
       ],
       fakeStagingAreaRightSlot: ['D3', 'fakeD4'],
       fakeStagingSlotWithMagBlockV1: ['magneticBlockV1D3', 'fakeD4'],
-      fakeWasteChuteWithEmptySlot: ['96ChannelWasteChute', 'fakeD4'],
+      fakeWasteChuteWithEmptySlot: ['1ChannelWasteChute', 'fakeD4'],
       flexStackerModuleV1: ['D3', 'flexStackerModuleV1D4'],
       flexStackerModuleV1WithMagneticBlockV1: [
         'flexStackerModuleV1D4',

shared-data/js/constants.ts

@@ -690,21 +690,21 @@ export const SINGLE_SLOT_FIXTURES: CutoutFixtureIdsWithFakes[] = [
 ]
 
 export const WASTE_CHUTE_FIXTURES: CutoutFixtureId[] = [
-  // TODO (tz, 6-14-25): we need to remove this from our code base?
   WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
   WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
   STAGING_AREA_SLOT_WITH_WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
   STAGING_AREA_SLOT_WITH_WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
   FLEX_STACKER_WTIH_WASTE_CHUTE_ADAPTER_NO_COVER_FIXTURE,
+  FLEX_STACKER_WITH_WASTE_CHUTE_ADAPTER_COVERED_FIXTURE,
 ]
 
 export const WASTE_CHUTE_WITH_FAKE_FIXTURES: CutoutFixtureIdsWithFakes[] = [
-  // TODO (tz, 6-14-25): we need to remove this from our code base?
   WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
   WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
   STAGING_AREA_SLOT_WITH_WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
   STAGING_AREA_SLOT_WITH_WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
   FLEX_STACKER_WTIH_WASTE_CHUTE_ADAPTER_NO_COVER_FIXTURE,
+  FLEX_STACKER_WITH_WASTE_CHUTE_ADAPTER_COVERED_FIXTURE,
   FAKE_WASTE_CHUTE_WITH_EMPTY_SLOT,
 ]
 
@@ -737,11 +737,12 @@ export const COMBO_FIXTURES: CutoutFixtureIdsWithFakes[] = [
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
 ]
 
+export const DEFAULT_AA_FOR_WASTE_CHUTE = ONE_CHANNEL_WASTE_CHUTE_ADDRESSABLE_AREA
+
 export const STAGING_AREA_FIXTURES: CutoutFixtureId[] = [
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
   STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
 ]
-export const DEFAULT_AA_FOR_WASTE_CHUTE = '96ChannelWasteChute'
 
 export const LOW_VOLUME_PIPETTES = ['p50_single_flex', 'p50_multi_flex']
 

shared-data/js/fixtures.ts

@@ -315,7 +315,7 @@ export const FAKE_FIXTURES_AND_AA: DeckDefinitionWithFakes = {
       providesAddressableAreas: {
         cutoutD1: [],
         cutoutD2: [],
-        cutoutD3: ['96ChannelWasteChute', 'fakeD4'],
+        cutoutD3: ['1ChannelWasteChute', 'fakeD4'],
         cutoutC1: [],
         cutoutC2: [],
         cutoutC3: [],
@@ -703,6 +703,7 @@ export function getAAComboFixtureDisplayName(
   const translationFileName = 'deck_configuration'
   switch (cutoutFixtureId) {
     case FLEX_STACKER_WTIH_WASTE_CHUTE_ADAPTER_NO_COVER_FIXTURE:
+    case FLEX_STACKER_WITH_WASTE_CHUTE_ADAPTER_COVERED_FIXTURE:
       if (aaItem.areaType === 'flexStacker') {
         return usbPortNumber != null
           ? t(`${translationFileName}:module_in_port`, {
@@ -755,7 +756,7 @@ export function getFixtureDisplayName(
     case WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE:
       return 'Waste chute'
     case WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE:
-      return 'Waste chute only with cover'
+      return 'Waste chute with cover'
     case STAGING_AREA_SLOT_WITH_WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE:
       return 'Waste chute with staging area slot'
     case STAGING_AREA_SLOT_WITH_WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE: