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

koji · 2023-10-19T21:32:10Z

Overview

update deck configuration editor, add fixture modal, and deck config discard modal to align with expected behavior.

close RAUT-804

Test Plan

Changelog

add useCreateDeckConfigurationMutation and test (test will be added later)
update DeckConfiguration page component, DeckConfiguration for ProtocolSetup and AddFixtureModal to wire up Confirm button

Review requests

I added DeckConfigData to detect data changes for confirm button, but I feel that there might be more better way for doing that.
I change DeckConfiguration page component to DeckConfigurationEditor to avoid a name conflict but I didn't change the folder name since Rob is working on re-organizing Figma and at some point we will need to align components' names with design.
[related thread]
https://opentrons.slack.com/archives/CSCLVUW3C/p1698246368962059?thread_ts=1698246124.637669&cid=CSCLVUW3C
I created handleTapAdd in AddFixtureModal to avoid using if-statement since the behavior of Desktop and the behavior of ODD are slightly different. But at the same time maybe it would be good to keep using handleClickAdd for both cases?

Risk assessment

low

Add RAUT-672

update deck configuration editor, add fixture modal, and deck config discard modal to align with expected behavior. RAUT-804

koji · 2023-10-19T21:33:34Z

codecov · 2023-10-19T21:37:01Z

Codecov Report

Merging #13817 (2f7139f) into edge (072dced) will increase coverage by 0.02%.
Report is 25 commits behind head on edge.
The diff coverage is 56.75%.

Additional details and impacted files

@@            Coverage Diff             @@
##             edge   #13817      +/-   ##
==========================================
+ Coverage   70.61%   70.63%   +0.02%     
==========================================
  Files        2448     2457       +9     
  Lines       67325    68855    +1530     
  Branches     8478     9111     +633     
==========================================
+ Hits        47542    48637    +1095     
- Misses      17781    18073     +292     
- Partials     2002     2145     +143

Flag	Coverage Δ
app	`68.28% <51.85%> (+0.03%)`	⬆️
react-api-client	`65.82% <70.00%> (+0.09%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
app/src/App/OnDeviceDisplayApp.tsx	`76.59% <ø> (+2.52%)`	⬆️
...iguration/DeckConfigurationDiscardChangesModal.tsx	`100.00% <100.00%> (ø)`
...nisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx	`85.18% <ø> (ø)`
...organisms/ProtocolSetupDeckConfiguration/index.tsx	`70.58% <80.00%> (+10.58%)`	⬆️
...DeviceDetailsDeckConfiguration/AddFixtureModal.tsx	`81.81% <50.00%> (-3.37%)`	⬇️
...onfiguration/useCreateDeckConfigurationMutation.ts	`70.00% <70.00%> (ø)`
app/src/pages/DeckConfiguration/index.tsx	`57.57% <35.71%> (-15.16%)`	⬇️

... and 68 files with indirect coverage changes

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx

…mbutton

…refactor-wireup-deckconfiguration-confirmbutton

…mbutton

brenthagen

some initial comments on handling deck config local state

brenthagen · 2023-10-26T14:38:48Z

app/src/pages/DeckConfiguration/index.tsx

+  const [deckConfigData, setDeckConfigData] = React.useState<DeckConfigData>({
+    addedFixture: null,
+    currentDeckConfig: deckConfig,
+  })


this local state should just be a DeckConfiguration - we don't need to pass an added fixture into state.

then, probably the way we should handle setting state (in add fixture modal) is to use an updater function to set state based on previous state. something like (psuedo):

previousState => { // filter previous state by fixtureLocation // append new fixture // return new state }

another option is useReducer but we probably don't need to go there for this

and handleClickRemove needs to be updated to use the local state config in a similar way, appending a standard slot to the local state

brenthagen · 2023-10-26T14:45:18Z

app/src/pages/DeckConfiguration/index.tsx

@@ -118,7 +145,7 @@ export function DeckConfiguration(): JSX.Element {
          justifyContent={JUSTIFY_CENTER}
        >
          <DeckConfigurator
-            deckConfig={deckConfig}
+            deckConfig={deckConfigData.currentDeckConfig}


this data initializes to [] because the query is async - we need to:

add a useEffect to update local state when the deck config query resolves

probably block rendering the configurator (render null) when deck config length == 0 because current it renders as an empty deck map on load

koji · 2023-10-26T19:36:04Z

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx

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


we need this change because the following gets typescript type error

setCurrentDeckConfig: (currentDeckConfig: DeckConfiguration) => void

brenthagen

just some routing comments, good to merge after those addressed ✔️

app/src/pages/DeckConfiguration/index.tsx

app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx

…d useCreateDeckConfigurationMutation (#13817) *feat(app, react-api-client): wire up deck configuration editor and add useCreateDeckConfigurationMutation

koji added 7 commits October 18, 2023 12:02

feat(app): add Deck configuration screen to ProtocolSetup

055111d

Add RAUT-672

remove export from LoadedFixtureConfigurationStatus

c6f9392

change the prop name to fixtureLocation

494bd4f

update ProtocolSetupDeckConfiguration test

2494a31

fix lint errors

235bb19

fix deckConfig part to get data from protocol

66ff72a

refactor(app): wire up deck configuration editor

e556869

update deck configuration editor, add fixture modal, and deck config discard modal to align with expected behavior. RAUT-804

koji changed the title ~~refactor(app): wire up deck configuration editor~~ feat(app, react-api-client): wire up deck configuration editor and add Oct 20, 2023

koji changed the title ~~feat(app, react-api-client): wire up deck configuration editor and add~~ feat(app, react-api-client): wire up deck configuration editor and add useCreateDeckConfigurationMutation Oct 20, 2023

koji added 2 commits October 20, 2023 14:21

update AddFixtureModal test

fc1b441

update test for DeckConfigurationDiscardChangesModal

26acaab

koji commented Oct 20, 2023

View reviewed changes

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx Outdated Show resolved Hide resolved

koji added 11 commits October 20, 2023 16:11

update test DeckConfigurationEditor

9fb6725

address comments

9c44270

address comments

485abb6

remove unused line

b47152f

fix check-js errors

09b3e05

Merge branch 'edge' into app_refactor-wireup-deckconfiguration-confir…

271afdc

…mbutton

Merge branch 'feat_add-deck-configuration-to-protocolsetup' into app_…

a84462f

…refactor-wireup-deckconfiguration-confirmbutton

Add DeckConfigData for confirm button

c2205b6

Merge branch 'edge' into app_refactor-wireup-deckconfiguration-confir…

02b33b6

…mbutton

fix test errors

4947d17

comment out a test for useCreateDeckConfigurationMutation

a38e3f1

koji requested review from brenthagen, jerader and a team October 25, 2023 18:11

koji marked this pull request as ready for review October 25, 2023 18:14

koji requested a review from a team as a code owner October 25, 2023 18:14

koji removed request for a team October 25, 2023 21:00

brenthagen reviewed Oct 26, 2023

View reviewed changes

address comments

7b1c94f

koji commented Oct 26, 2023

View reviewed changes

koji requested a review from brenthagen October 26, 2023 20:43

brenthagen approved these changes Oct 27, 2023

View reviewed changes

app/src/pages/DeckConfiguration/index.tsx Show resolved Hide resolved

app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx Show resolved Hide resolved

app/src/organisms/ProtocolSetupDeckConfiguration/index.tsx Outdated Show resolved Hide resolved

koji added 2 commits October 27, 2023 13:45

address comments

1af6a36

fix linting errors

2f7139f

koji merged commit 17a4e6f into edge Oct 27, 2023
22 of 23 checks passed

koji deleted the app_refactor-wireup-deckconfiguration-confirmbutton branch November 29, 2023 04:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

koji commented Oct 19, 2023 •

edited

Loading

koji commented Oct 19, 2023 •

edited

Loading

codecov bot commented Oct 19, 2023 •

edited

Loading

brenthagen left a comment

brenthagen Oct 26, 2023

brenthagen Oct 26, 2023

brenthagen Oct 26, 2023

brenthagen Oct 26, 2023

koji Oct 26, 2023 •

edited

Loading

brenthagen left a comment

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

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

Conversation

koji commented Oct 19, 2023 • edited Loading

Overview

Test Plan

Changelog

Review requests

Risk assessment

koji commented Oct 19, 2023 • edited Loading

codecov bot commented Oct 19, 2023 • edited Loading

Codecov Report

brenthagen left a comment

Choose a reason for hiding this comment

brenthagen Oct 26, 2023

Choose a reason for hiding this comment

brenthagen Oct 26, 2023

Choose a reason for hiding this comment

brenthagen Oct 26, 2023

Choose a reason for hiding this comment

brenthagen Oct 26, 2023

Choose a reason for hiding this comment

koji Oct 26, 2023 • edited Loading

Choose a reason for hiding this comment

brenthagen left a comment

Choose a reason for hiding this comment

koji commented Oct 19, 2023 •

edited

Loading

koji commented Oct 19, 2023 •

edited

Loading

codecov bot commented Oct 19, 2023 •

edited

Loading

koji Oct 26, 2023 •

edited

Loading