fix(protocol-designer): fix slots availability functions to support multiple modules

[koji]

Overview

fix slots availability functions for multiple modules

fyi there is a DQA ticket for item alignment (dropdown menu and text) but this PR doesn't fix that since the PR focuses on fixing module add logic.

close RQA-3324

Test Plan and Hands on Testing

1. click create a new protocol
2. select Flex
3. select a pipette/pipettes
4. add modules

Step 4 needs to check a few patterns

check 1. when adding Heater Shaker module or Temperature module (just one), quantity displays 1-7
check 2. when adding Magnetic Block, quantity displays 1-11
check 3. when adding Heater Shaker module and Temperature module (just one), each of quantity displays 1-6
check 4. when adding Heater Shaker module/Temperature module/TC + Magnetic Block, each quantity displays correct number. In this case, the available slots are 11 not 7
ex HS 7 -> MB displays 1-4
ex HS 2 -> MB displays 1-9
check 5. do the case Skye in the ticket - add Heater Shaker module and Temperature module then modify the quantity to be the total is 7. Then add Magnetic Block. no snack bar.
check 6. add TC module, Heater Shaker module and Temperature module then modify the quantity to be the total is 7.
check 7. do one of the above cases and click remove button, then check quantity options are correct

Changelog

Review requests

Risk assessment

low since the changes for only SelectModules component

[koji]

• fix module card re-ordering issue <- followed by another PR
• clean up code and fix check-js and lint-js error

[ncdiehl11]

Hm, I don't seem to be getting a quantity dropDown for any modules except Temperature

[koji]

Hm, I don't seem to be getting a quantity dropDown for any modules except Temperature

just merged the edge for removing ff, so you will be able to see multiple modules.