refactor(app): make on device display deck configurator updates live

app/src/assets/localization/en/shared.json

@@ -63,6 +63,7 @@
   "robot_is_busy": "Robot is busy",
   "robot_is_reachable_but_not_responding": "This robot's API server is not responding correctly to requests at IP address {{hostname}}",
   "robot_was_seen_but_is_unreachable": "This robot has been seen recently, but is currently not reachable at IP address {{hostname}}",
+  "save": "save",
   "something_went_wrong": "something went wrong",
   "sort_by": "Sort by",
   "stand_back_robot_is_in_motion": "Stand back, robot is in motion",

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx

@@ -26,6 +26,6 @@ const Template: Story<React.ComponentProps<typeof AddFixtureModal>> = args => (
 export const Default = Template.bind({})
 Default.args = {
   fixtureLocation: 'cutoutD3',
-  setShowAddFixtureModal: () => {},
+  closeModal: () => {},
   isOnDevice: true,
 }

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx

@@ -54,15 +54,13 @@ import type {
   CutoutConfig,
   CutoutId,
   CutoutFixtureId,
-  DeckConfiguration,
 } from '@opentrons/shared-data'
 import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
 import type { LegacyModalProps } from '../../molecules/LegacyModal'
 
 interface AddFixtureModalProps {
   cutoutId: CutoutId
-  setShowAddFixtureModal: (showAddFixtureModal: boolean) => void
-  setCurrentDeckConfig?: React.Dispatch<React.SetStateAction<CutoutConfig[]>>
+  closeModal: () => void
   providedFixtureOptions?: CutoutFixtureId[]
   isOnDevice?: boolean
 }
@@ -75,8 +73,7 @@ type OptionStage =
 
 export function AddFixtureModal({
   cutoutId,
-  setShowAddFixtureModal,
-  setCurrentDeckConfig,
+  closeModal,
   providedFixtureOptions,
   isOnDevice = false,
 }: AddFixtureModalProps): JSX.Element {
@@ -109,18 +106,14 @@ export function AddFixtureModal({
       slotName: getCutoutDisplayName(cutoutId),
     }),
     hasExitIcon: providedFixtureOptions == null,
-    onClick: () => {
-      setShowAddFixtureModal(false)
-    },
+    onClick: closeModal,
   }
 
   const modalProps: LegacyModalProps = {
     title: t('add_to_slot', {
       slotName: getCutoutDisplayName(cutoutId),
     }),
-    onClose: () => {
-      setShowAddFixtureModal(false)
-    },
+    onClose: closeModal,
     closeOnOutsideClick: true,
     childrenPadding: SPACING.spacing24,
     width: '26.75rem',
@@ -289,22 +282,7 @@ export function AddFixtureModal({
     )
   }
 
-  const handleAddODD = (addedCutoutConfigs: CutoutConfig[]): void => {
-    if (setCurrentDeckConfig != null)
-      setCurrentDeckConfig(
-        (prevDeckConfig: DeckConfiguration): DeckConfiguration =>
-          prevDeckConfig.map((fixture: CutoutConfig) => {
-            const replacementCutoutConfig = addedCutoutConfigs.find(
-              c => c.cutoutId === fixture.cutoutId
-            )
-            return replacementCutoutConfig ?? fixture
-          })
-      )
-
-    setShowAddFixtureModal(false)
-  }
-
-  const handleAddDesktop = (addedCutoutConfigs: CutoutConfig[]): void => {
+  const handleAddFixture = (addedCutoutConfigs: CutoutConfig[]): void => {
     const newDeckConfig = deckConfig.map(fixture => {
       const replacementCutoutConfig = addedCutoutConfigs.find(
         c => c.cutoutId === fixture.cutoutId
@@ -313,7 +291,7 @@ export function AddFixtureModal({
     })
 
     updateDeckConfiguration(newDeckConfig)
-    setShowAddFixtureModal(false)
+    closeModal()
   }
 
   const fixtureOptions = availableOptions.map(cutoutConfigs => (
@@ -327,9 +305,7 @@ export function AddFixtureModal({
       )}
       buttonText={t('add')}
       onClickHandler={() => {
-        isOnDevice
-          ? handleAddODD(cutoutConfigs)
-          : handleAddDesktop(cutoutConfigs)
+        handleAddFixture(cutoutConfigs)
       }}
       isOnDevice={isOnDevice}
     />
@@ -341,9 +317,7 @@ export function AddFixtureModal({
         <Modal
           header={modalHeader}
           onOutsideClick={() =>
-            providedFixtureOptions != null
-              ? null
-              : setShowAddFixtureModal(false)
+            providedFixtureOptions != null ? null : closeModal()
           }
         >
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>

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

@@ -23,7 +23,7 @@ import type { Modules } from '@opentrons/api-client'
 vi.mock('@opentrons/react-api-client')
 vi.mock('../../../resources/deck_configuration')
 
-const mockSetShowAddFixtureModal = vi.fn()
+const mockCloseModal = vi.fn()
 const mockUpdateDeckConfiguration = vi.fn()
 const mockSetCurrentDeckConfig = vi.fn()
 
@@ -39,8 +39,7 @@ describe('Touchscreen AddFixtureModal', () => {
   beforeEach(() => {
     props = {
       cutoutId: 'cutoutD3',
-      setShowAddFixtureModal: mockSetShowAddFixtureModal,
-      setCurrentDeckConfig: mockSetCurrentDeckConfig,
+      closeModal: mockCloseModal,
       isOnDevice: true,
     }
     vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
@@ -96,7 +95,7 @@ describe('Desktop AddFixtureModal', () => {
   beforeEach(() => {
     props = {
       cutoutId: 'cutoutD3',
-      setShowAddFixtureModal: mockSetShowAddFixtureModal,
+      closeModal: mockCloseModal,
     }
     vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
       updateDeckConfiguration: mockUpdateDeckConfiguration,

app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx

@@ -21,30 +21,27 @@
 } from '@opentrons/components'
 import {
   useModulesQuery,
   useUpdateDeckConfigurationMutation,
 } from '@opentrons/react-api-client'
 import {
   getCutoutDisplayName,
   getFixtureDisplayName,
-  SINGLE_RIGHT_CUTOUTS,
   SINGLE_SLOT_FIXTURES,
-  SINGLE_LEFT_SLOT_FIXTURE,
-  SINGLE_RIGHT_SLOT_FIXTURE,
-  SINGLE_CENTER_SLOT_FIXTURE,
-  SINGLE_LEFT_CUTOUTS,
   getDeckDefFromRobotType,
   FLEX_ROBOT_TYPE,
 } from '@opentrons/shared-data'
 
 import { useNotifyCurrentMaintenanceRun } from '../../resources/maintenance_runs'
 import { Banner } from '../../atoms/Banner'
 import { DeckFixtureSetupInstructionsModal } from './DeckFixtureSetupInstructionsModal'
-import { AddFixtureModal } from './AddFixtureModal'
 import { useIsRobotViewable, useRunStatuses } from '../Devices/hooks'
 import { useIsEstopNotDisengaged } from '../../resources/devices/hooks/useIsEstopNotDisengaged'
-import { useNotifyDeckConfigurationQuery } from '../../resources/deck_configuration'
+import {
+  useDeckConfigurationEditingTools,
+  useNotifyDeckConfigurationQuery,
+} from '../../resources/deck_configuration'
 
-import type { CutoutFixtureId, CutoutId } from '@opentrons/shared-data'
+import type { CutoutId } from '@opentrons/shared-data'
 
 const DECK_CONFIG_REFETCH_INTERVAL = 5000
 const RUN_REFETCH_INTERVAL = 5000
@@ -65,20 +62,13 @@
     showSetupInstructionsModal,
     setShowSetupInstructionsModal,
   ] = React.useState<boolean>(false)
-  const [showAddFixtureModal, setShowAddFixtureModal] = React.useState<boolean>(
-    false
-  )
-  const [targetCutoutId, setTargetCutoutId] = React.useState<CutoutId | null>(
-    null
-  )
 
   const { data: modulesData } = useModulesQuery()
   const deckConfig =
     useNotifyDeckConfigurationQuery({
       refetchInterval: DECK_CONFIG_REFETCH_INTERVAL,
     }).data ?? []
   const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE)
-  const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
   const { isRunRunning } = useRunStatuses()
   const { data: maintenanceRunData } = useNotifyCurrentMaintenanceRun({
     refetchInterval: RUN_REFETCH_INTERVAL,
@@ -87,59 +77,11 @@
   const isMaintenanceRunExisting = maintenanceRunData?.data?.id != null
   const isRobotViewable = useIsRobotViewable(robotName)
 
-  const handleClickAdd = (cutoutId: CutoutId): void => {
-    setTargetCutoutId(cutoutId)
-    setShowAddFixtureModal(true)
-  }
-
-  const handleClickRemove = (
-    cutoutId: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
-  ): void => {
-    let replacementFixtureId: CutoutFixtureId = SINGLE_CENTER_SLOT_FIXTURE
-    if (SINGLE_RIGHT_CUTOUTS.includes(cutoutId)) {
-      replacementFixtureId = SINGLE_RIGHT_SLOT_FIXTURE
-    } else if (SINGLE_LEFT_CUTOUTS.includes(cutoutId)) {
-      replacementFixtureId = SINGLE_LEFT_SLOT_FIXTURE
-    }
-
-    const fixtureGroup =
-      deckDef.cutoutFixtures.find(cf => cf.id === cutoutFixtureId)
-        ?.fixtureGroup ?? {}
-
-    let newDeckConfig = deckConfig
-    if (cutoutId in fixtureGroup) {
-      const groupMap =
-        fixtureGroup[cutoutId]?.find(group =>
-          Object.entries(group).every(([cId, cfId]) =>
-            deckConfig.find(
-              config =>
-                config.cutoutId === cId && config.cutoutFixtureId === cfId
-            )
-          )
-        ) ?? {}
-      newDeckConfig = deckConfig.map(cutoutConfig =>
-        cutoutConfig.cutoutId in groupMap
-          ? {
-              ...cutoutConfig,
-              cutoutFixtureId: replacementFixtureId,
-              opentronsModuleSerialNumber: undefined,
-            }
-          : cutoutConfig
-      )
-    } else {
-      newDeckConfig = deckConfig.map(cutoutConfig =>
-        cutoutConfig.cutoutId === cutoutId
-          ? {
-              ...cutoutConfig,
-              cutoutFixtureId: replacementFixtureId,
-              opentronsModuleSerialNumber: undefined,
-            }
-          : cutoutConfig
-      )
-    }
-    updateDeckConfiguration(newDeckConfig)
-  }
+  const {
+    addFixtureToCutout,
+    removeFixtureFromCutout,
+    addFixtureModal,
+  } = useDeckConfigurationEditingTools(false)
 
   // do not show standard slot in fixture display list
   const { displayList: fixtureDisplayList } = deckConfig.reduce<{
@@ -199,12 +141,7 @@
 
   return (
     <>
-      {showAddFixtureModal && targetCutoutId != null ? (
-        <AddFixtureModal
-          cutoutId={targetCutoutId}
-          setShowAddFixtureModal={setShowAddFixtureModal}
-        />
-      ) : null}
+      {addFixtureModal}
       {showSetupInstructionsModal ? (
         <DeckFixtureSetupInstructionsModal
           setShowSetupInstructionsModal={setShowSetupInstructionsModal}
@@ -278,8 +215,8 @@
                       : deckConfig.map(({ cutoutId }) => cutoutId)
                   }
                   deckConfig={deckConfig}
-                  handleClickAdd={handleClickAdd}
-                  handleClickRemove={handleClickRemove}
+                  handleClickAdd={addFixtureToCutout}
+                  handleClickRemove={removeFixtureFromCutout}
                 />
               </Flex>
               <Flex

app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx

@@ -15,9 +15,9 @@ import {
   MAGNETIC_BLOCK_V1_FIXTURE,
   MODULE_FIXTURES_BY_MODEL,
   STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
+  THERMOCYCLER_V2_REAR_FIXTURE,
   getSimplestDeckConfigForProtocol,
 } from '@opentrons/shared-data'
-import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client'
 
 import { ChildNavigation } from '../ChildNavigation'
 import { AddFixtureModal } from '../DeviceDetailsDeckConfiguration/AddFixtureModal'
@@ -29,7 +29,6 @@ import { useNotifyDeckConfigurationQuery } from '../../resources/deck_configurat
 import type {
   CutoutFixtureId,
   CutoutId,
-  DeckConfiguration,
   ModuleModel,
 } from '@opentrons/shared-data'
 import type { ModuleOnDeck } from '@opentrons/components'
@@ -48,7 +47,11 @@ export function ProtocolSetupDeckConfiguration({
   setSetupScreen,
   providedFixtureOptions,
 }: ProtocolSetupDeckConfigurationProps): JSX.Element {
-  const { t } = useTranslation(['protocol_setup', 'devices_landing', 'shared'])
+  const { i18n, t } = useTranslation([
+    'protocol_setup',
+    'devices_landing',
+    'shared',
+  ])
 
   const [
     showConfigurationModal,
@@ -66,28 +69,28 @@ export function ProtocolSetupDeckConfiguration({
     mostRecentAnalysis
   ).map(({ cutoutId, cutoutFixtureId }) => ({ cutoutId, cutoutFixtureId }))
 
-  const targetDeckConfig = simplestDeckConfig.find(
+  const targetCutoutConfig = simplestDeckConfig.find(
     deck => deck.cutoutId === cutoutId
   )
 
   const mergedDeckConfig = deckConfig.map(config =>
-    targetDeckConfig != null && config.cutoutId === targetDeckConfig.cutoutId
-      ? targetDeckConfig
+    targetCutoutConfig != null &&
+    config.cutoutId === targetCutoutConfig.cutoutId
+      ? targetCutoutConfig
       : config
   )
 
-  const [
-    currentDeckConfig,
-    setCurrentDeckConfig,
-  ] = React.useState<DeckConfiguration>(mergedDeckConfig)
-  const modulesOnDeck = currentDeckConfig.reduce<ModuleOnDeck[]>(
+  const modulesOnDeck = mergedDeckConfig.reduce<ModuleOnDeck[]>(
     (acc, cutoutConfig) => {
       const matchingFixtureIdsAndModel = Object.entries(
         MODULE_FIXTURES_BY_MODEL
       ).find(([_moduleModel, moduleFixtureIds]) =>
         moduleFixtureIds.includes(cutoutConfig.cutoutFixtureId)
       )
-      if (matchingFixtureIdsAndModel != null) {
+      if (
+        matchingFixtureIdsAndModel != null &&
+        cutoutConfig.cutoutFixtureId !== THERMOCYCLER_V2_REAR_FIXTURE
+      ) {
         const [matchingModel] = matchingFixtureIdsAndModel
         return [
           ...acc,
@@ -117,9 +120,7 @@ export function ProtocolSetupDeckConfiguration({
     []
   )
 
-  const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
   const handleClickConfirm = (): void => {
-    updateDeckConfiguration(currentDeckConfig)
     setSetupScreen('modules')
   }
 
@@ -135,9 +136,8 @@ export function ProtocolSetupDeckConfiguration({
           {showConfigurationModal && cutoutId != null ? (
             <AddFixtureModal
               cutoutId={cutoutId}
-              setShowAddFixtureModal={setShowConfigurationModal}
+              closeModal={() => setShowConfigurationModal(false)}
               providedFixtureOptions={providedFixtureOptions}
-              setCurrentDeckConfig={setCurrentDeckConfig}
               isOnDevice
             />
           ) : null}
@@ -147,8 +147,7 @@ export function ProtocolSetupDeckConfiguration({
       <Flex flexDirection={DIRECTION_COLUMN}>
         <ChildNavigation
           header={t('devices_landing:deck_configuration')}
-          onClickBack={() => setSetupScreen('modules')}
-          buttonText={t('shared:confirm')}
+          buttonText={i18n.format(t('shared:save'), 'capitalize')}
           onClickButton={handleClickConfirm}
         />
         <Flex
@@ -158,7 +157,7 @@ export function ProtocolSetupDeckConfiguration({
           height="28.4375rem"
         >
           <BaseDeck
-            deckConfig={currentDeckConfig}
+            deckConfig={mergedDeckConfig}
             robotType={FLEX_ROBOT_TYPE}
             modulesOnDeck={modulesOnDeck}
           />