feat(app): wire up location conflict modal for ODD

[jerader]

closes RAUT-673

Overview

This PR wires up the location conflict modal for the ODD and changes the modal to match ODD designs. Additionally, the ProtocolSetupModules folder and component is renamed to ProtooclSetupModulesAndDeck

Test Plan

Test on an ODD, go to protocol setup and with a location conflict for fixture and module, click the row to reveal the modal. Make sure the modal works and looks as expected.

Changelog

• change ProtocolSetupModules component to ProtocolSetupModulesAndDeck
• add code to the location conflict modal to include ODD styling
• wire up the modal to the 2 list view components for the ODD
• add test coverage

Review requests

see test plan

Risk assessment

low

[codecov]

Codecov Report

Merging #13797 (1cfa446) into edge (014c0ca) will increase coverage by 0.01%.
Report is 3 commits behind head on edge.
The diff coverage is 72.22%.

Additional details and impacted files

@@            Coverage Diff             @@
##             edge   #13797      +/-   ##
==========================================
+ Coverage   70.74%   70.76%   +0.01%     
==========================================
  Files        2468     2469       +1     
  Lines       69459    69565     +106     
  Branches     8373     8405      +32     
==========================================
+ Hits        49139    49226      +87     
- Misses      18348    18361      +13     
- Partials     1972     1978       +6     

Flag	Coverage Δ
app	68.20% <72.22%> (+0.08%)	⬆️
protocol-designer	45.82% <ø> (ø)

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

Files	Coverage Δ
app/src/organisms/ProtocolSetupLabware/index.tsx	50.00% <ø> (ø)
...ocolSetupModulesAndDeck/SetupInstructionsModal.tsx	100.00% <ø> (ø)
...src/organisms/ProtocolSetupModulesAndDeck/utils.ts	42.10% <ø> (ø)
.../src/pages/OnDeviceDisplay/ProtocolSetup/index.tsx	76.59% <ø> (ø)
...olRun/SetupModuleAndDeck/LocationConflictModal.tsx	85.00% <85.71%> (-2.50%)	⬇️
...nisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx	81.81% <66.66%> (ø)
...rc/organisms/ProtocolSetupModulesAndDeck/index.tsx	65.90% <60.00%> (ø)

... and 8 files with indirect coverage changes

[koji]

For this part, we can use ListItem (app/src/atoms/ListItem).

https://s3-us-west-2.amazonaws.com/opentrons-components/edge/index.html?path=/story/odd-atoms-listitem--item

[koji]

<ListItem type="noActive">
  <Flex flexDirection={DIRECTION_ROW} justifyContent={JUSTIFY_SPACE_BETWEEN}>
    <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
                    {t('protocol_specifies')}
                  </StyledText>
                  <StyledText as="p">
                    {requiredFixture && getFixtureDisplayName(requiredFixture)}
                    {requiredModule && getModuleDisplayName(requiredModule)}
                  </StyledText>
  <Flex>
</ListItem>

I should update ListItem since currently it supports only one text case and need to pass noActive as the default type.
ListItem was created when I worked on E-stop modal.

[koji]

lgtm
I just left a couple of comments.

[koji]

nit
maybe using gripGap makes the code easy to read.

<Flex flexDirection={} gridGap={SPACING.spacing32}>
  <StyledText>{description}</StyledText>
  <Flex>
    <StyledText>Slot {}</StyledText>
    <ListItem />
    <ListItem />
  </Flex>
  <Flex>
    <SmallButton />
    <SmallButton />
  </Flex>
</Flex>

[koji]

sorry mistakenly clicked close instead of comment.

[brenthagen]

a couple minor comments, LGTM !