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

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

Re: https://opentrons.atlassian.net/browse/RQA-2669

Author: b-cooper

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,9 +23,8 @@ 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()
 
 const render = (props: React.ComponentProps<typeof AddFixtureModal>) => {
   return renderWithProviders(<AddFixtureModal {...props} />, {
@@ -39,8 +38,7 @@ describe('Touchscreen AddFixtureModal', () => {
   beforeEach(() => {
     props = {
       cutoutId: 'cutoutD3',
-      setShowAddFixtureModal: mockSetShowAddFixtureModal,
-      setCurrentDeckConfig: mockSetCurrentDeckConfig,
+      closeModal: mockCloseModal,
       isOnDevice: true,
     }
     vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
@@ -69,7 +67,6 @@ describe('Touchscreen AddFixtureModal', () => {
     render(props)
     fireEvent.click(screen.getAllByText('Select options')[1])
     fireEvent.click(screen.getAllByText('Add')[0])
-    expect(mockSetCurrentDeckConfig).toHaveBeenCalled()
   })
 
   it('when fixture options are provided, should only render those options', () => {
@@ -96,7 +93,7 @@ describe('Desktop AddFixtureModal', () => {
   beforeEach(() => {
     props = {
       cutoutId: 'cutoutD3',
-      setShowAddFixtureModal: mockSetShowAddFixtureModal,
+      closeModal: mockCloseModal,
     }
     vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
       updateDeckConfiguration: mockUpdateDeckConfiguration,

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

@@ -3,6 +3,10 @@ import { fireEvent, screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { describe, it, beforeEach, vi, afterEach } from 'vitest'
 
+import {
+  DeckConfiguration,
+  TRASH_BIN_ADAPTER_FIXTURE,
+} from '@opentrons/shared-data'
 import { DeckConfigurator } from '@opentrons/components'
 import {
   useModulesQuery,
@@ -16,8 +20,12 @@ import { DeckFixtureSetupInstructionsModal } from '../DeckFixtureSetupInstructio
 import { useIsEstopNotDisengaged } from '../../../resources/devices/hooks/useIsEstopNotDisengaged'
 import { DeviceDetailsDeckConfiguration } from '../'
 import { useNotifyCurrentMaintenanceRun } from '../../../resources/maintenance_runs'
-import { useNotifyDeckConfigurationQuery } from '../../../resources/deck_configuration'
+import {
+  useDeckConfigurationEditingTools,
+  useNotifyDeckConfigurationQuery,
+} from '../../../resources/deck_configuration'
 
+import type { UseQueryResult } from 'react-query'
 import type { MaintenanceRun } from '@opentrons/api-client'
 import type * as OpentronsComponents from '@opentrons/components'
 
@@ -35,6 +43,12 @@ vi.mock('../../../resources/maintenance_runs')
 vi.mock('../../../resources/devices/hooks/useIsEstopNotDisengaged')
 vi.mock('../../../resources/deck_configuration')
 
+const mockDeckConfig = [
+  {
+    cutoutId: 'cutoutC3',
+    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
+  },
+]
 const ROBOT_NAME = 'otie'
 const mockUpdateDeckConfiguration = vi.fn()
 const RUN_STATUSES = {
@@ -63,9 +77,6 @@ describe('DeviceDetailsDeckConfiguration', () => {
       robotName: ROBOT_NAME,
     }
     vi.mocked(useModulesQuery).mockReturnValue({ data: { data: [] } } as any)
-    vi.mocked(useNotifyDeckConfigurationQuery).mockReturnValue({
-      data: [],
-    } as any)
     vi.mocked(useUpdateDeckConfigurationMutation).mockReturnValue({
       updateDeckConfiguration: mockUpdateDeckConfiguration,
     } as any)
@@ -83,6 +94,14 @@ describe('DeviceDetailsDeckConfiguration', () => {
       .calledWith(ROBOT_NAME)
       .thenReturn(false)
     when(vi.mocked(useIsRobotViewable)).calledWith(ROBOT_NAME).thenReturn(true)
+    vi.mocked(useNotifyDeckConfigurationQuery).mockReturnValue({
+      data: mockDeckConfig,
+    } as UseQueryResult<DeckConfiguration>)
+    vi.mocked(useDeckConfigurationEditingTools).mockReturnValue({
+      addFixtureToCutout: vi.fn(),
+      removeFixtureFromCutout: vi.fn(),
+      addFixtureModal: null,
+    })
   })
 
   afterEach(() => {
@@ -132,7 +151,9 @@ describe('DeviceDetailsDeckConfiguration', () => {
   })
 
   it('should render no deck fixtures, if deck configs are not set', () => {
-    vi.mocked(useNotifyDeckConfigurationQuery).mockReturnValue([] as any)
+    vi.mocked(useNotifyDeckConfigurationQuery).mockReturnValue({
+      data: [],
+    } as any)
     render(props)
     screen.getByText('No deck fixtures')
   })

app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx

@@ -19,32 +19,26 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import {
-  useModulesQuery,
-  useUpdateDeckConfigurationMutation,
-} from '@opentrons/react-api-client'
+import { useModulesQuery } 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 +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