feat(protocol-designer): edit additional items staging area support

[jerader]

closes RAUT-725, RAUT-742, RAUT-776, RAUT-763

Overview

This adds the ability to edit the staging areas that were initially added and updates the designs of the edit additional items section a bit so the designs are more cohesive.

Test Plan

• Make sure the deck modification FF is turned on and create a flex protocol. Add a staging slot if you want and add a trash bin or waste chute (just make sure the staging areas you added aren't in slot A3 for the trash bin, i haven't added error handling there yet).
• go through the create file wizard and when done, look at the Additional Items section where you can edit modules and deck modification items. Mess around with adding/removing the staging areas and make sure a banner renders correctly if the slot is full
• go back and create a new flex protocol and this time add all the staging areas and all the modules and see that the trash bin button is disabled since there is no space for it on the deck (more error handling will be wired up in a follow up PR)
• go back and create an OT-2 protocol and see all the expected behavior is there and works as expected

Changelog

• created a new StagingAreasRow and StagingAreasModal and tests
• created a new visual for seeing the occupied deck slots in the rows called FlexSlotMap
• added logic to getSlotIsEmpty util to account for the staging areas
• extend the InitialDeckSetup to take into account staging areas
• update the AdditionalItemsRow and ModuleRow components to use the new FlexSlotMap
• some clean up here and there in the TrashModal and a few other components

Review requests

see test plan

Risk assessment

low

[codecov]

Codecov Report

Merging #13752 (615b7c5) into edge (d16b7ec) will decrease coverage by 0.09%.
The diff coverage is 64.28%.

Additional details and impacted files

@@            Coverage Diff             @@
##             edge   #13752      +/-   ##
==========================================
- Coverage   70.75%   70.67%   -0.09%     
==========================================
  Files        2465     2474       +9     
  Lines       69346    69527     +181     
  Branches     8338     8390      +52     
==========================================
+ Hits        49069    49139      +70     
- Misses      18317    18416      +99     
- Partials     1960     1972      +12     

Flag	Coverage Δ
app	68.11% <ø> (ø)
components	56.69% <ø> (-2.10%)	⬇️
labware-library	49.17% <ø> (ø)
protocol-designer	45.82% <64.28%> (+0.22%)	⬆️
react-api-client	67.32% <ø> (ø)
step-generation	84.99% <ø> (ø)

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

Files	Coverage Δ
...onents/modals/CreateFileWizard/EquipmentOption.tsx	100.00% <100.00%> (ø)
...r/src/components/modals/EditModulesModal/index.tsx	90.00% <100.00%> (ø)
...gner/src/components/modules/AdditionalItemsRow.tsx	94.73% <100.00%> (+0.29%)	⬆️
...col-designer/src/components/modules/TrashModal.tsx	96.00% <100.00%> (ø)
...rotocol-designer/src/step-forms/selectors/index.ts	42.85% <0.00%> (ø)
protocol-designer/src/utils/index.ts	40.54% <66.66%> (+2.30%)	⬆️
...ts/modals/CreateFileWizard/ModulesAndOtherTile.tsx	66.12% <50.00%> (-1.12%)	⬇️
...ol-designer/src/components/modules/FlexSlotMap.tsx	90.90% <90.90%> (ø)
...ocol-designer/src/components/modules/ModuleRow.tsx	82.22% <33.33%> (-3.83%)	⬇️
...esigner/src/components/modules/StagingAreasRow.tsx	86.66% <86.66%> (ø)
... and 4 more

... and 18 files with indirect coverage changes

[mjhuff]

Ran through the test flow and lgtm! Coded looks good as well - just a couple minor comments/thoughts.

I don't know PD well enough from an architectural/big picture standpoint to comment on that end, but everything seems to make sense as best as I can grasp it! 🥇