feat(components): create base deck fixture components

app/src/organisms/DeviceDetailsDeckConfiguration/AddDeckConfigurationModal.tsx

@@ -28,12 +28,12 @@ import { TertiaryButton } from '../../atoms/buttons'
 import { Modal } from '../../molecules/Modal'
 import { LegacyModal } from '../../molecules/LegacyModal'
 
-import type { FixtureLoadName } from '@opentrons/shared-data'
+import type { Cutout, FixtureLoadName } from '@opentrons/shared-data'
 import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
 import type { LegacyModalProps } from '../../molecules/LegacyModal'
 
 interface AddDeckConfigurationModalProps {
-  fixtureLocation: string
+  fixtureLocation: Cutout
   setShowAddFixtureModal: (showAddFixtureModal: boolean) => void
   isOnDevice?: boolean
 }

app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx

@@ -29,6 +29,8 @@ import { StyledText } from '../../atoms/text'
 import { DeckFixtureSetupInstructionsModal } from './DeckFixtureSetupInstructionsModal'
 import { AddDeckConfigurationModal } from './AddDeckConfigurationModal'
 
+import type { Cutout } from '@opentrons/shared-data'
+
 interface DeviceDetailsDeckConfigurationProps {
   robotName: string
 }
@@ -47,17 +49,17 @@ export function DeviceDetailsDeckConfiguration({
   const [
     targetFixtureLocation,
     setTargetFixtureLocation,
-  ] = React.useState<string>('')
+  ] = React.useState<Cutout | null>(null)
 
   const deckConfig = useDeckConfigurationQuery().data ?? []
   const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
 
-  const handleClickAdd = (fixtureLocation: string): void => {
+  const handleClickAdd = (fixtureLocation: Cutout): void => {
     setTargetFixtureLocation(fixtureLocation)
     setShowAddFixtureModal(true)
   }
 
-  const handleClickRemove = (fixtureLocation: string): void => {
+  const handleClickRemove = (fixtureLocation: Cutout): void => {
     updateDeckConfiguration({
       fixtureLocation,
       loadName: STANDARD_SLOT_LOAD_NAME,
@@ -71,7 +73,7 @@ export function DeviceDetailsDeckConfiguration({
 
   return (
     <>
-      {showAddFixtureModal ? (
+      {showAddFixtureModal && targetFixtureLocation != null ? (
         <AddDeckConfigurationModal
           fixtureLocation={targetFixtureLocation}
           setShowAddFixtureModal={setShowAddFixtureModal}

app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx

@@ -109,10 +109,10 @@ export function ProtocolRunSetup({
       status: 'succeeded',
     },
     C3: {
-      id: 'stubbed_load_fixture_2',
+      id: 'stubbed_load_fixture_3',
       commandType: 'loadFixture',
       params: {
-        fixtureId: 'stubbedFixtureId_2',
+        fixtureId: 'stubbedFixtureId_3',
         loadName: TRASH_BIN_LOAD_NAME,
         location: { cutout: 'C3' },
       },

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx

@@ -19,20 +19,24 @@ import {
   Box,
 } from '@opentrons/components'
 import {
-  Fixture,
-  FixtureLoadName,
   getFixtureDisplayName,
   getModuleDisplayName,
-  ModuleModel,
   STANDARD_SLOT_LOAD_NAME,
 } from '@opentrons/shared-data'
 import { Portal } from '../../../../App/portal'
 import { LegacyModal } from '../../../../molecules/LegacyModal'
 import { StyledText } from '../../../../atoms/text'
 
+import type {
+  Cutout,
+  Fixture,
+  FixtureLoadName,
+  ModuleModel,
+} from '@opentrons/shared-data'
+
 interface LocationConflictModalProps {
   onCloseClick: () => void
-  cutout: string
+  cutout: Cutout
   requiredFixture?: FixtureLoadName
   requiredModule?: ModuleModel
 }

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx

@@ -11,16 +11,18 @@ import {
   BORDERS,
   ALIGN_CENTER,
 } from '@opentrons/components'
-import { FixtureLoadName, getFixtureDisplayName } from '@opentrons/shared-data'
+import { getFixtureDisplayName } from '@opentrons/shared-data'
 import { TertiaryButton } from '../../../../atoms/buttons/TertiaryButton'
 import { Portal } from '../../../../App/portal'
 import { LegacyModal } from '../../../../molecules/LegacyModal'
 import { StyledText } from '../../../../atoms/text'
 
+import type { Cutout, FixtureLoadName } from '@opentrons/shared-data'
+
 interface NotConfiguredModalProps {
   onCloseClick: () => void
   requiredFixture: FixtureLoadName
-  cutout: string
+  cutout: Cutout
 }
 
 export const NotConfiguredModal = (

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupFixtureList.tsx

@@ -34,6 +34,7 @@ import { NotConfiguredModal } from './NotConfiguredModal'
 import { getFixtureImage } from './utils'
 
 import type { LoadedFixturesBySlot } from '@opentrons/api-client'
+import type { Cutout } from '@opentrons/shared-data'
 
 interface SetupFixtureListProps {
   loadedFixturesBySlot: LoadedFixturesBySlot
@@ -82,7 +83,6 @@ export const SetupFixtureList = (props: SetupFixtureListProps): JSX.Element => {
       >
         {map(loadedFixturesBySlot, ({ params, id }) => {
           const { loadName, location } = params
-          console.log(id)
           return (
             <FixtureListItem
               key={`SetupFixturesList_${loadName}_slot_${location.cutout}`}
@@ -101,7 +101,7 @@ export const SetupFixtureList = (props: SetupFixtureListProps): JSX.Element => {
 interface FixtureListItemProps {
   loadedFixtures: LoadFixtureRunTimeCommand[]
   loadName: FixtureLoadName
-  cutout: string
+  cutout: Cutout
   commandId: string
 }
 

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx

@@ -49,7 +49,7 @@ import { ModuleWizardFlows } from '../../../ModuleWizardFlows'
 import { LocationConflictModal } from './LocationConflictModal'
 import { getModuleImage } from './utils'
 
-import type { ModuleModel, Fixture } from '@opentrons/shared-data'
+import type { Cutout, ModuleModel, Fixture } from '@opentrons/shared-data'
 import type { AttachedModule } from '../../../../redux/modules/types'
 import type { ProtocolCalibrationStatus } from '../../hooks'
 
@@ -351,7 +351,8 @@ export function ModulesListItem({
       {showLocationConflictModal ? (
         <LocationConflictModal
           onCloseClick={() => setShowLocationConflictModal(false)}
-          cutout={slotName}
+          // TODO(bh, 2023-10-10): when module caddies are fixtures, narrow slotName to Cutout and remove type assertion
+          cutout={slotName as Cutout}
           requiredModule={moduleModel}
         />
       ) : null}

app/src/organisms/Devices/hooks/__tests__/useModuleRenderInfoForProtocolById.test.tsx

@@ -109,7 +109,7 @@ const MAGNETIC_MODULE_INFO = {
   nestedLabwareId: null,
   nestedLabwareDisplayName: null,
   protocolLoadOrder: 0,
-  slotName: '1',
+  slotName: 'D1',
 }
 
 const TEMPERATURE_MODULE_INFO = {
@@ -122,12 +122,12 @@ const TEMPERATURE_MODULE_INFO = {
   nestedLabwareId: null,
   nestedLabwareDisplayName: null,
   protocolLoadOrder: 0,
-  slotName: '1',
+  slotName: 'D1',
 }
 
 const mockFixture = {
   fixtureId: 'mockId',
-  fixtureLocation: '1',
+  fixtureLocation: 'D1',
   loadName: STAGING_AREA_LOAD_NAME,
 } as Fixture
 

app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx

@@ -198,7 +198,7 @@ export function MoveLabwareInterventionContent({
               loadedModules={run.modules}
               loadedLabware={run.labware}
               // TODO(bh, 2023-07-19): read trash slot name from protocol
-              trashSlotName={robotType === 'OT-3 Standard' ? 'A3' : undefined}
+              trashLocation={robotType === 'OT-3 Standard' ? 'A3' : undefined}
               backgroundItems={
                 <>
                   {moduleRenderInfo.map(

app/src/resources/deck_configuration/hooks.ts

@@ -1,10 +1,7 @@
 import { useDeckConfigurationQuery } from '@opentrons/react-api-client'
+import { STANDARD_SLOT_LOAD_NAME } from '@opentrons/shared-data'
 
-import {
-  Fixture,
-  LoadFixtureRunTimeCommand,
-  STANDARD_SLOT_LOAD_NAME,
-} from '@opentrons/shared-data'
+import type { Fixture, LoadFixtureRunTimeCommand } from '@opentrons/shared-data'
 
 export const CONFIGURED = 'configured'
 export const CONFLICTING = 'conflicting'

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

@@ -1,30 +1,49 @@
 import * as React from 'react'
 import fixture_96_plate from '@opentrons/shared-data/labware/fixtures/2/fixture_96_plate.json'
 import fixture_tiprack_1000_ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_1000_ul.json'
-import { FLEX_ROBOT_TYPE, LabwareDefinition2 } from '@opentrons/shared-data'
-
-import type { Meta, StoryObj } from '@storybook/react'
-import { BaseDeck as BaseDeckComponent } from './'
 import {
+  FLEX_ROBOT_TYPE,
   HEATERSHAKER_MODULE_V1,
   MAGNETIC_BLOCK_V1,
   TEMPERATURE_MODULE_V2,
   THERMOCYCLER_MODULE_V2,
-} from '@opentrons/shared-data/js'
+} from '@opentrons/shared-data'
+
+import {
+  EXTENDED_DECK_CONFIG_FIXTURE,
+  STANDARD_SLOT_DECK_CONFIG_FIXTURE,
+} from './__fixtures__'
+import { BaseDeck as BaseDeckComponent } from './'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type {
+  DeckConfiguration,
+  LabwareDefinition2,
+} from '@opentrons/shared-data'
 
 const meta: Meta<React.ComponentProps<typeof BaseDeckComponent>> = {
   component: BaseDeckComponent,
   title: 'Library/Molecules/Simulation/BaseDeck',
+  argTypes: {
+    deckConfig: {
+      options: ['single slot deck', 'staging area deck'],
+      control: { type: 'radio' },
+    },
+  },
 } as Meta
 
 export default meta
 type Story = StoryObj<React.ComponentProps<typeof BaseDeckComponent>>
 
+const getDeckConfig = (args: any): DeckConfiguration =>
+  args.deckConfig === 'staging area deck'
+    ? EXTENDED_DECK_CONFIG_FIXTURE
+    : STANDARD_SLOT_DECK_CONFIG_FIXTURE
+
 export const BaseDeck: Story = {
-  render: args => <BaseDeckComponent {...args} />,
   args: {
     robotType: FLEX_ROBOT_TYPE,
-    trashSlotName: 'A3',
+    deckConfig: EXTENDED_DECK_CONFIG_FIXTURE,
     labwareLocations: [
       {
         labwareLocation: { slotName: 'C2' },
@@ -48,7 +67,7 @@ export const BaseDeck: Story = {
         nestedLabwareDef: fixture_96_plate as LabwareDefinition2,
       },
       {
-        moduleLocation: { slotName: 'D3' },
+        moduleLocation: { slotName: 'B3' },
         moduleModel: HEATERSHAKER_MODULE_V1,
         nestedLabwareDef: fixture_96_plate as LabwareDefinition2,
       },
@@ -61,4 +80,8 @@ export const BaseDeck: Story = {
     darkFill: 'rebeccapurple',
     lightFill: 'lavender',
   },
+  render: args => {
+    const deckConfig = getDeckConfig(args)
+    return <BaseDeckComponent {...args} deckConfig={deckConfig} />
+  },
 }