feat(protocol-designer): create StepSummary component

[ncdiehl11]

Overview

This PR creates and implements the new StepSummary component to be shown under the deck map in ProtocolSteps. The component produces different messages based on all step types and formats them with inline tags and various StyledText styles.

TODO:

• add test coverage
• add "note" text once rename step modal is wired up (reference)

Closes AUTH-857

Test Plan and Hands on Testing

• Create or import a protocol with a variety of step types
• In protocol edit view, click steps to select and verify that new StepSummary component displays step info at underneath the deck map

Changelog

• create new StepSummary component and wire up in ProtocolSteps
• add translations

Review requests

• see test plan

Risk assessment

low

[jerader]

off-deck view which is only visible for a move labware step i think, looks like this:

Otherwise, this is looking great! nice work! love to see the command summaries come to life 🤩

[ncdiehl11]

off-deck view which is only visible for a move labware step i think, looks like this:

Otherwise, this is looking great! nice work! love to see the command summaries come to life 🤩

Thanks! I will figure out what I broke here. Likely an empty fragment instead of a div.

[jerader]

one more comment, i think we want the command summaries to update on hover instead of on selected, similarly to how the deck map also updates on hover.

Screen.Recording.2024-10-16.at.08.41.48.mov

[ncdiehl11]

one more comment, i think we want the command summaries to update on hover instead of on selected, similarly to how the deck map also updates on hover.

Screen.Recording.2024-10-16.at.08.41.48.mov

Thanks, missed this! I will update the selector to get the hovered step ID

[jerader]

one more comment, i think we want the command summaries to update on hover instead of on selected, similarly to how the deck map also updates on hover.
Screen.Recording.2024-10-16.at.08.41.48.mov

Thanks, missed this! I will update the selector to get the hovered step ID

@ncdiehl11 no worries! i guess it should work similarly to the deck map so it should show on hover but also show on selected if you are not hovering over anything.

[jerader]

woo! awesome work 🤩 🎉 lgtm