feat(app, react-api-client): wire up deck configuration editor and add useCreateDeckConfigurationMutation

app/src/App/OnDeviceDisplayApp.tsx

@@ -39,7 +39,7 @@ import { InstrumentsDashboard } from '../pages/OnDeviceDisplay/InstrumentsDashbo
 import { InstrumentDetail } from '../pages/OnDeviceDisplay/InstrumentDetail'
 import { Welcome } from '../pages/OnDeviceDisplay/Welcome'
 import { InitialLoadingScreen } from '../pages/OnDeviceDisplay/InitialLoadingScreen'
-import { DeckConfiguration } from '../pages/DeckConfiguration'
+import { DeckConfigurationEditor } from '../pages/DeckConfiguration'
 import { PortalRoot as ModalPortalRoot } from './portal'
 import { getOnDeviceDisplaySettings, updateConfigValue } from '../redux/config'
 import { updateBrightness } from '../redux/shell'
@@ -191,7 +191,7 @@ export const onDeviceDisplayRoutes: RouteProps[] = [
     path: '/emergency-stop',
   },
   {
-    Component: DeckConfiguration,
+    Component: DeckConfigurationEditor,
     exact: true,
     name: 'Deck Configuration',
     path: '/deck-configuration',

app/src/App/__tests__/OnDeviceDisplayApp.test.tsx

@@ -22,7 +22,7 @@ import { Welcome } from '../../pages/OnDeviceDisplay/Welcome'
 import { NameRobot } from '../../pages/OnDeviceDisplay/NameRobot'
 import { InitialLoadingScreen } from '../../pages/OnDeviceDisplay/InitialLoadingScreen'
 import { EmergencyStop } from '../../pages/EmergencyStop'
-import { DeckConfiguration } from '../../pages/DeckConfiguration'
+import { DeckConfigurationEditor } from '../../pages/DeckConfiguration'
 import { getOnDeviceDisplaySettings } from '../../redux/config'
 import { getIsShellReady } from '../../redux/shell'
 import { getLocalRobot } from '../../redux/discovery'
@@ -102,8 +102,8 @@ const mockNameRobot = NameRobot as jest.MockedFunction<typeof NameRobot>
 const mockEmergencyStop = EmergencyStop as jest.MockedFunction<
   typeof EmergencyStop
 >
-const mockDeckConfiguration = DeckConfiguration as jest.MockedFunction<
-  typeof DeckConfiguration
+const mockDeckConfigurationEditor = DeckConfigurationEditor as jest.MockedFunction<
+  typeof DeckConfigurationEditor
 >
 const mockGetOnDeviceDisplaySettings = getOnDeviceDisplaySettings as jest.MockedFunction<
   typeof getOnDeviceDisplaySettings
@@ -154,7 +154,9 @@ describe('OnDeviceDisplayApp', () => {
     mockNameRobot.mockReturnValue(<div>Mock NameRobot</div>)
     mockInitialLoadingScreen.mockReturnValue(<div>Mock Loading</div>)
     mockEmergencyStop.mockReturnValue(<div>Mock EmergencyStop</div>)
-    mockDeckConfiguration.mockReturnValue(<div>Mock DeckConfiguration</div>)
+    mockDeckConfigurationEditor.mockReturnValue(
+      <div>Mock DeckConfiguration</div>
+    )
     mockUseCurrentRunRoute.mockReturnValue(null)
     mockGetLocalRobot.mockReturnValue(mockConnectedRobot)
   })

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx

@@ -28,23 +28,30 @@ import { TertiaryButton } from '../../atoms/buttons'
 import { Modal } from '../../molecules/Modal'
 import { LegacyModal } from '../../molecules/LegacyModal'
 
-import type { Cutout, FixtureLoadName } from '@opentrons/shared-data'
+import type {
+  Cutout,
+  DeckConfiguration,
+  Fixture,
+  FixtureLoadName,
+} from '@opentrons/shared-data'
 import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
 import type { LegacyModalProps } from '../../molecules/LegacyModal'
 
 interface AddFixtureModalProps {
   fixtureLocation: Cutout
   setShowAddFixtureModal: (showAddFixtureModal: boolean) => void
+  setCurrentDeckConfig?: React.Dispatch<React.SetStateAction<DeckConfiguration>>
   providedFixtureOptions?: FixtureLoadName[]
   isOnDevice?: boolean
 }
 
 export function AddFixtureModal({
   fixtureLocation,
   setShowAddFixtureModal,
+  setCurrentDeckConfig,
   providedFixtureOptions,
   isOnDevice = false,
-}: AddFixtureModalProps): JSX.Element | null {
+}: AddFixtureModalProps): JSX.Element {
   const { t } = useTranslation('device_details')
   const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
 
@@ -74,6 +81,22 @@ export function AddFixtureModal({
     availableFixtures.push(STAGING_AREA_LOAD_NAME, WASTE_CHUTE_LOAD_NAME)
   }
 
+  // For Touchscreen app
+  const handleTapAdd = (fixtureLoadName: FixtureLoadName): void => {
+    if (setCurrentDeckConfig != null)
+      setCurrentDeckConfig(
+        (prevDeckConfig: DeckConfiguration): DeckConfiguration =>
+          prevDeckConfig.map((fixture: Fixture) =>
+            fixture.fixtureLocation === fixtureLocation
+              ? { ...fixture, loadName: fixtureLoadName }
+              : fixture
+          )
+      )
+
+    setShowAddFixtureModal(false)
+  }
+
+  // For Desktop app
   const fixtureOptions = providedFixtureOptions ?? availableFixtures
 
   const handleClickAdd = (fixtureLoadName: FixtureLoadName): void => {
@@ -98,7 +121,7 @@ export function AddFixtureModal({
                 <React.Fragment key={fixture}>
                   <AddFixtureButton
                     fixtureLoadName={fixture}
-                    handleClickAdd={handleClickAdd}
+                    handleClickAdd={handleTapAdd}
                   />
                 </React.Fragment>
               ))}

app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { useHistory } from 'react-router-dom'
+
 import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
@@ -24,11 +26,11 @@ export function DeckConfigurationDiscardChangesModal({
   const modalHeader: ModalHeaderBaseProps = {
     title: t('changes_will_be_lost'),
   }
+  const history = useHistory()
 
   const handleDiscard = (): void => {
-    // ToDo (kk: 09/29/2023) discard deck configuration changes
     setShowConfirmationModal(false)
-    // close the modal and then back the previous screen
+    history.goBack()
   }
 
   return (

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

@@ -1,15 +1,16 @@
 import * as React from 'react'
 
-import { i18n } from '../../../i18n'
-
 import { renderWithProviders } from '@opentrons/components'
 import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client'
 import { TRASH_BIN_LOAD_NAME } from '@opentrons/shared-data'
+
+import { i18n } from '../../../i18n'
 import { AddFixtureModal } from '../AddFixtureModal'
 
 jest.mock('@opentrons/react-api-client')
 const mockSetShowAddFixtureModal = jest.fn()
 const mockUpdateDeckConfiguration = jest.fn()
+const mockSetCurrentDeckConfig = jest.fn()
 
 const mockUseUpdateDeckConfigurationMutation = useUpdateDeckConfigurationMutation as jest.MockedFunction<
   typeof useUpdateDeckConfigurationMutation
@@ -28,6 +29,7 @@ describe('Touchscreen AddFixtureModal', () => {
     props = {
       fixtureLocation: 'D3',
       setShowAddFixtureModal: mockSetShowAddFixtureModal,
+      setCurrentDeckConfig: mockSetCurrentDeckConfig,
       isOnDevice: true,
     }
     mockUseUpdateDeckConfigurationMutation.mockReturnValue({
@@ -47,7 +49,11 @@ describe('Touchscreen AddFixtureModal', () => {
     expect(getAllByText('Add').length).toBe(3)
   })
 
-  it.todo('should a mock function when tapping a button')
+  it('should a mock function when tapping app button', () => {
+    const [{ getAllByText }] = render(props)
+    getAllByText('Add')[0].click()
+    expect(mockSetCurrentDeckConfig).toHaveBeenCalled()
+  })
 })
 
 describe('Desktop AddFixtureModal', () => {

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

@@ -6,6 +6,15 @@ import { i18n } from '../../../i18n'
 import { DeckConfigurationDiscardChangesModal } from '../DeckConfigurationDiscardChangesModal'
 
 const mockFunc = jest.fn()
+const mockGoBack = jest.fn()
+
+jest.mock('react-router-dom', () => {
+  const reactRouterDom = jest.requireActual('react-router-dom')
+  return {
+    ...reactRouterDom,
+    useHistory: () => ({ goBack: mockGoBack } as any),
+  }
+})
 
 const render = (
   props: React.ComponentProps<typeof DeckConfigurationDiscardChangesModal>
@@ -39,13 +48,13 @@ describe('DeckConfigurationDiscardChangesModal', () => {
   it('should call a mock function when tapping discard changes button', () => {
     const [{ getByText }] = render(props)
     getByText('Discard changes').click()
-    // ToDo (kk:09/29/2023) need to update this test case later
-    expect(mockFunc).toHaveBeenCalled()
+    expect(mockFunc).toHaveBeenCalledWith(false)
+    expect(mockGoBack).toHaveBeenCalled()
   })
 
   it('should call a mock function when tapping continue editing button', () => {
     const [{ getByText }] = render(props)
     getByText('Continue editing').click()
-    expect(mockFunc).toHaveBeenCalled()
+    expect(mockFunc).toHaveBeenCalledWith(false)
   })
 })

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

@@ -2,7 +2,10 @@ import * as React from 'react'
 import { when, resetAllWhenMocks } from 'jest-when'
 
 import { renderWithProviders, DeckConfigurator } from '@opentrons/components'
-import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client'
+import {
+  useUpdateDeckConfigurationMutation,
+  useCreateDeckConfigurationMutation,
+} from '@opentrons/react-api-client'
 
 import { i18n } from '../../../i18n'
 import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
@@ -14,6 +17,7 @@ jest.mock('../../LabwarePositionCheck/useMostRecentCompletedAnalysis')
 
 const mockSetSetupScreen = jest.fn()
 const mockUpdateDeckConfiguration = jest.fn()
+const mockCreateDeckConfiguration = jest.fn()
 const PROTOCOL_DETAILS = {
   displayName: 'fake protocol',
   protocolData: [],
@@ -30,6 +34,9 @@ const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jes
 const mockUseUpdateDeckConfigurationMutation = useUpdateDeckConfigurationMutation as jest.MockedFunction<
   typeof useUpdateDeckConfigurationMutation
 >
+const mockUseCreateDeckConfigurationMutation = useCreateDeckConfigurationMutation as jest.MockedFunction<
+  typeof useCreateDeckConfigurationMutation
+>
 
 const render = (
   props: React.ComponentProps<typeof ProtocolSetupDeckConfiguration>
@@ -56,6 +63,9 @@ describe('ProtocolSetupDeckConfiguration', () => {
     mockUseUpdateDeckConfigurationMutation.mockReturnValue({
       updateDeckConfiguration: mockUpdateDeckConfiguration,
     } as any)
+    mockUseCreateDeckConfigurationMutation.mockReturnValue({
+      createDeckConfiguration: mockCreateDeckConfiguration,
+    } as any)
   })
 
   afterEach(() => {
@@ -66,11 +76,18 @@ describe('ProtocolSetupDeckConfiguration', () => {
     const [{ getByText }] = render(props)
     getByText('Deck configuration')
     getByText('mock DeckConfigurator')
+    getByText('Confirm')
   })
 
   it('should call a mock function when tapping the back button', () => {
     const [{ getByTestId }] = render(props)
     getByTestId('ChildNavigation_Back_Button').click()
     expect(mockSetSetupScreen).toHaveBeenCalledWith('modules')
   })
+
+  it('should call a mock function when tapping confirm button', () => {
+    const [{ getByText }] = render(props)
+    getByText('Confirm').click()
+    expect(mockCreateDeckConfiguration).toHaveBeenCalled()
+  })
 })

app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx

@@ -8,7 +8,7 @@ import {
   JUSTIFY_CENTER,
   SPACING,
 } from '@opentrons/components'
-import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client'
+import { useCreateDeckConfigurationMutation } from '@opentrons/react-api-client'
 import {
   STANDARD_SLOT_LOAD_NAME,
   WASTE_CHUTE_LOAD_NAME,
@@ -90,22 +90,31 @@ export function ProtocolSetupDeckConfiguration({
         }
     ) as DeckConfiguration) ?? []
 
-  const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
+  const [
+    currentDeckConfig,
+    setCurrentDeckConfig,
+  ] = React.useState<DeckConfiguration>(deckConfig)
+
+  const { createDeckConfiguration } = useCreateDeckConfigurationMutation()
 
   const handleClickAdd = (fixtureLocation: Cutout): void => {
     setTargetFixtureLocation(fixtureLocation)
     setShowConfigurationModal(true)
   }
 
   const handleClickRemove = (fixtureLocation: Cutout): void => {
-    updateDeckConfiguration({
-      fixtureLocation,
-      loadName: STANDARD_SLOT_LOAD_NAME,
-    })
+    setCurrentDeckConfig(prevDeckConfig =>
+      prevDeckConfig.map(fixture =>
+        fixture.fixtureLocation === fixtureLocation
+          ? { ...fixture, loadName: STANDARD_SLOT_LOAD_NAME }
+          : fixture
+      )
+    )
+    createDeckConfiguration(currentDeckConfig)
   }
 
   const handleClickConfirm = (): void => {
-    // ToDo (kk:10/17/2023) add a function for the confirmation in a following PR for RAUT-804
+    createDeckConfiguration(currentDeckConfig)
   }
 
   return (
@@ -122,6 +131,7 @@ export function ProtocolSetupDeckConfiguration({
             fixtureLocation={targetFixtureLocation}
             setShowAddFixtureModal={setShowConfigurationModal}
             providedFixtureOptions={providedFixtureOptions}
+            setCurrentDeckConfig={setCurrentDeckConfig}
             isOnDevice
           />
         ) : null}
@@ -136,7 +146,6 @@ export function ProtocolSetupDeckConfiguration({
         <Flex
           marginTop="7.75rem"
           paddingX={SPACING.spacing40}
-          paddingBottom={SPACING.spacing40}
           justifyContent={JUSTIFY_CENTER}
         >
           {/* DeckConfigurator will be replaced by BaseDeck when RAUT-793 is ready */}

app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx

@@ -148,7 +148,7 @@ export function FixtureTable({
         }
 
         return (
-          <>
+          <React.Fragment key={fixture.id}>
             {showLocationConflictModal ? (
               <LocationConflictModal
                 onCloseClick={() => setShowLocationConflictModal(false)}
@@ -188,7 +188,7 @@ export function FixtureTable({
                 {chipLabel}
               </Flex>
             </Flex>
-          </>
+          </React.Fragment>
         )
       })}
     </Flex>