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

Instead of the previous method of staging a batch of changes to deck configuration before commiting
them with the confirm button, to avoid synchronization issues, make the ODD deck configurator behave
like the desktop version. all updates immediately permeate to the robot's source of truth

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.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 => (
@@ -326,11 +304,7 @@ export function AddFixtureModal({
         )?.usbPort.port
       )}
       buttonText={t('add')}
-      onClickHandler={() => {
-        isOnDevice
-          ? handleAddODD(cutoutConfigs)
-          : handleAddDesktop(cutoutConfigs)
-      }}
+      onClickHandler={() => { handleAddFixture(cutoutConfigs) }}
       isOnDevice={isOnDevice}
     />
   ))
@@ -343,7 +317,7 @@ export function AddFixtureModal({
           onOutsideClick={() =>
             providedFixtureOptions != null
               ? null
-              : setShowAddFixtureModal(false)
+              : closeModal()
           }
         >
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>

app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx

@@ -26,25 +26,19 @@ import {
 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 +59,13 @@ export function DeviceDetailsDeckConfiguration({
     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 +74,11 @@ export function DeviceDetailsDeckConfiguration({
   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 +138,7 @@ export function DeviceDetailsDeckConfiguration({
 
   return (
     <>
-      {showAddFixtureModal && targetCutoutId != null ? (
-        <AddFixtureModal
-          cutoutId={targetCutoutId}
-          setShowAddFixtureModal={setShowAddFixtureModal}
-        />
-      ) : null}
+      {addFixtureModal}
       {showSetupInstructionsModal ? (
         <DeckFixtureSetupInstructionsModal
           setShowSetupInstructionsModal={setShowSetupInstructionsModal}
@@ -278,8 +212,8 @@ export function DeviceDetailsDeckConfiguration({
                       : deckConfig.map(({ cutoutId }) => cutoutId)
                   }
                   deckConfig={deckConfig}
-                  handleClickAdd={handleClickAdd}
-                  handleClickRemove={handleClickRemove}
+                  handleClickAdd={addFixtureToCutout}
+                  handleClickRemove={removeFixtureFromCutout}
                 />
               </Flex>
               <Flex