From 479b28024403c1bfe9d048c1d24a7ad9f99bb930 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Mon, 11 Dec 2023 18:39:30 -0500
Subject: [PATCH] fix(app): fix dqa ODD protocol setup deck config

fix ODD protocol setup deck config

close RAUT-834
---
 .../ProtocolSetupDeckConfiguration.test.tsx   | 24 +++++++++++++++++--
 .../ProtocolSetupDeckConfiguration/index.tsx  | 23 ++++++++++++++----
 .../FixtureTable.tsx                          |  2 +-
 .../OnDeviceDisplay/ProtocolSetup/index.tsx   |  2 +-
 .../src/hardware-sim/BaseDeck/BaseDeck.tsx    |  3 +++
 5 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/app/src/organisms/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx b/app/src/organisms/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
index 6621c8c5c22..e7feeef8d03 100644
--- a/app/src/organisms/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
+++ b/app/src/organisms/ProtocolSetupDeckConfiguration/__tests__/ProtocolSetupDeckConfiguration.test.tsx
@@ -2,13 +2,22 @@ import * as React from 'react'
 import { when, resetAllWhenMocks } from 'jest-when'
 
 import { renderWithProviders, BaseDeck } from '@opentrons/components'
-import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client'
+import {
+  useDeckConfigurationQuery,
+  useUpdateDeckConfigurationMutation,
+} from '@opentrons/react-api-client'
+import { STAGING_AREA_RIGHT_SLOT_FIXTURE } from '@opentrons/shared-data'
 
 import { i18n } from '../../../i18n'
 import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
 import { ProtocolSetupDeckConfiguration } from '..'
 
-import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
+import type { UseQueryResult } from 'react-query'
+import type {
+  CompletedProtocolAnalysis,
+  CutoutConfig,
+  DeckConfiguration,
+} from '@opentrons/shared-data'
 
 jest.mock('@opentrons/components/src/hardware-sim/BaseDeck/index')
 jest.mock('@opentrons/react-api-client')
@@ -26,6 +35,11 @@ const PROTOCOL_DETAILS = {
   robotType: 'OT-3 Standard' as const,
 }
 
+const mockCutoutConfig: CutoutConfig = {
+  cutoutId: 'cutoutD1',
+  cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+}
+
 const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jest.MockedFunction<
   typeof useMostRecentCompletedAnalysis
 >
@@ -33,6 +47,9 @@ const mockUseUpdateDeckConfigurationMutation = useUpdateDeckConfigurationMutatio
   typeof useUpdateDeckConfigurationMutation
 >
 const mockBaseDeck = BaseDeck as jest.MockedFunction<typeof BaseDeck>
+const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction<
+  typeof useDeckConfigurationQuery
+>
 
 const render = (
   props: React.ComponentProps<typeof ProtocolSetupDeckConfiguration>
@@ -59,6 +76,9 @@ describe('ProtocolSetupDeckConfiguration', () => {
     mockUseUpdateDeckConfigurationMutation.mockReturnValue({
       updateDeckConfiguration: mockUpdateDeckConfiguration,
     } as any)
+    mockUseDeckConfigurationQuery.mockReturnValue(({
+      data: [],
+    } as unknown) as UseQueryResult<DeckConfiguration>)
   })
 
   afterEach(() => {
diff --git a/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx b/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx
index cf03ae8e465..5f38d7105f5 100644
--- a/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx
+++ b/app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx
@@ -12,7 +12,10 @@ import {
   FLEX_ROBOT_TYPE,
   getSimplestDeckConfigForProtocol,
 } from '@opentrons/shared-data'
-import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client'
+import {
+  useDeckConfigurationQuery,
+  useUpdateDeckConfigurationMutation,
+} from '@opentrons/react-api-client'
 
 import { ChildNavigation } from '../ChildNavigation'
 import { AddFixtureModal } from '../DeviceDetailsDeckConfiguration/AddFixtureModal'
@@ -52,15 +55,26 @@ export function ProtocolSetupDeckConfiguration({
   ] = React.useState<boolean>(false)
 
   const mostRecentAnalysis = useMostRecentCompletedAnalysis(runId)
+  const { data: deckConfig = [] } = useDeckConfigurationQuery()
 
   const simplestDeckConfig = getSimplestDeckConfigForProtocol(
     mostRecentAnalysis
   ).map(({ cutoutId, cutoutFixtureId }) => ({ cutoutId, cutoutFixtureId }))
 
+  const targetDeckConfig = simplestDeckConfig.find(
+    deck => deck.cutoutId === cutoutId
+  )
+
+  const mergedDeckConfig = deckConfig.map(config =>
+    targetDeckConfig != null && config.cutoutId === targetDeckConfig.cutoutId
+      ? targetDeckConfig
+      : config
+  )
+
   const [
     currentDeckConfig,
     setCurrentDeckConfig,
-  ] = React.useState<DeckConfiguration>(simplestDeckConfig)
+  ] = React.useState<DeckConfiguration>(mergedDeckConfig)
 
   const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
   const handleClickConfirm = (): void => {
@@ -94,13 +108,14 @@ export function ProtocolSetupDeckConfiguration({
           onClickButton={handleClickConfirm}
         />
         <Flex
-          marginTop="7.75rem"
+          marginTop="4rem"
           paddingX={SPACING.spacing40}
           justifyContent={JUSTIFY_CENTER}
         >
           <BaseDeck
-            deckConfig={simplestDeckConfig}
+            deckConfig={currentDeckConfig}
             robotType={FLEX_ROBOT_TYPE}
+            height="455px"
           />
         </Flex>
       </Flex>
diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx
index 85ea3155229..8f1331375e9 100644
--- a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx
+++ b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx
@@ -100,7 +100,7 @@ export function FixtureTable({
           if (!isCurrentFixtureCompatible) {
             const isConflictingFixtureConfigured =
               cutoutFixtureId != null &&
-              !SINGLE_SLOT_FIXTURES.includes(cutoutFixtureId)
+              SINGLE_SLOT_FIXTURES.includes(cutoutFixtureId)
             chipLabel = (
               <>
                 <Chip
diff --git a/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx b/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx
index 82235802cf7..4d815c6ceed 100644
--- a/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx
+++ b/app/src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx
@@ -748,7 +748,7 @@ export function ProtocolSetup(): JSX.Element {
         padding={
           setupScreen === 'prepare to run'
             ? `0 ${SPACING.spacing32} ${SPACING.spacing40}`
-            : `${SPACING.spacing32} ${SPACING.spacing40}`
+            : `${SPACING.spacing32} ${SPACING.spacing40} ${SPACING.spacing40}`
         }
       >
         {setupComponentByScreen[setupScreen]}
diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
index 3de5dfb5071..96b2aada87c 100644
--- a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
+++ b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
@@ -78,6 +78,7 @@ interface BaseDeckProps {
   animatedSVG?: boolean
   /** extra props to pass to svg tag */
   svgProps?: React.ComponentProps<typeof Svg>
+  height?: string
 }
 
 export function BaseDeck(props: BaseDeckProps): JSX.Element {
@@ -94,6 +95,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
     showSlotLabels = true,
     animatedSVG = false,
     svgProps = {},
+    height = '100%',
   } = props
   const deckDef = getDeckDefFromRobotType(robotType)
 
@@ -126,6 +128,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
       viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
       animated={animatedSVG}
       {...svgProps}
+      height={height}
     >
       {robotType === OT2_ROBOT_TYPE ? (
         <DeckFromLayers