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,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