fix(protocol-designer): fix layout for ProtocolSteps (#16959)

This PR fixes the layout for protocol steps, acocunting for TimelineAlerts. To maintain position without flickering when hovering timeline steps, we align the center content to the top of the container, and provide top padding dependent on the presence of timeline alerts. We also fix logic to not show timeline alerts if a stepform toolbox is open. Lastly, we make the container scrollable to handle timeline alerts and step summaries rendering at the same time, and set the timeline, stepform, and substeps toolbox heights to fill the view height with padding.
Opentrons · Nov 22, 2024 · 6297c7b · 6297c7b
1 parent 02a57a1
commit 6297c7b
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 15 deletions.
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -272,6 +272,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         />
       ) : null}
       <Toolbox
+        height="calc(100vh - 6rem)"
         position={POSITION_RELATIVE}
         subHeader={
           isMultiStepToolbox ? (

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -415,9 +415,7 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
     >
       {stepSummaryContent != null ? (
         <ListItem type="noActive">
-          <Flex padding={SPACING.spacing12} height="4.75rem">
-            {stepSummaryContent}
-          </Flex>
+          <Flex padding={SPACING.spacing12}>{stepSummaryContent}</Flex>
         </ListItem>
       ) : null}
       {stepDetails != null && stepDetails !== '' ? (

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
@@ -58,6 +58,7 @@ export function SubstepsToolbox(
       substeps.commandCreatorFnName === 'mix')) ||
     substeps.substepType === THERMOCYCLER_PROFILE ? (
     <Toolbox
+      height="calc(100vh - 6rem)"
       width={FLEX_MAX_CONTENT}
       closeButton={<Icon size="2rem" name="close" />}
       onCloseClick={handleClose}

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -69,6 +69,7 @@ export const TimelineToolbox = (): JSX.Element => {
       titlePadding={SPACING.spacing12}
       childrenPadding={SPACING.spacing12}
       confirmButton={formData != null ? undefined : <AddStepButton />}
+      height="calc(100vh - 6rem)"
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
@@ -12,7 +12,10 @@ import {
   getSelectedSubstep,
   getSelectedTerminalItemId,
 } from '../../../../ui/steps/selectors'
-import { getDesignerTab } from '../../../../file-data/selectors'
+import {
+  getDesignerTab,
+  getRobotStateTimeline,
+} from '../../../../file-data/selectors'
 import { getEnableHotKeysDisplay } from '../../../../feature-flags/selectors'
 import { DeckSetupContainer } from '../../DeckSetup'
 import { OffDeck } from '../../Offdeck'
@@ -57,6 +60,10 @@ const MOCK_STEP_FORMS = {
 describe('ProtocolSteps', () => {
   beforeEach(() => {
     vi.mocked(getDesignerTab).mockReturnValue('protocolSteps')
+    vi.mocked(getRobotStateTimeline).mockReturnValue({
+      timeline: [],
+      errors: [],
+    })
     vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
     vi.mocked(DeckSetupContainer).mockReturnValue(
       <div>mock DeckSetupContainer</div>

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -5,9 +5,9 @@ import {
   ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
+  FLEX_MAX_CONTENT,
   Flex,
   JUSTIFY_CENTER,
-  JUSTIFY_FLEX_START,
   JUSTIFY_SPACE_BETWEEN,
   POSITION_FIXED,
   SPACING,
@@ -34,7 +34,10 @@ import { TimelineToolbox, SubstepsToolbox } from './Timeline'
 import { StepForm } from './StepForm'
 import { StepSummary } from './StepSummary'
 import { BatchEditToolbox } from './BatchEditToolbox'
-import { getDesignerTab } from '../../../file-data/selectors'
+import {
+  getDesignerTab,
+  getRobotStateTimeline,
+} from '../../../file-data/selectors'
 import { TimelineAlerts } from '../../../organisms'
 
 const CONTENT_MAX_WIDTH = '46.9375rem'
@@ -64,31 +67,37 @@ export function ProtocolSteps(): JSX.Element {
       ? savedStepForms[currentstepIdForStepSummary]
       : null
 
+  const { errors: timelineErrors } = useSelector(getRobotStateTimeline)
+  const hasTimelineErrors =
+    timelineErrors != null ? timelineErrors.length > 0 : false
+  const showTimelineAlerts =
+    hasTimelineErrors && tab === 'protocolSteps' && formData == null
   const stepDetails = currentStep?.stepDetails ?? null
+
   return (
     <Flex
       backgroundColor={COLORS.grey10}
+      height="calc(100vh - 4rem)"
+      minHeight={FLEX_MAX_CONTENT}
       width="100%"
+      padding={SPACING.spacing12}
       gridGap={SPACING.spacing16}
-      height="calc(100vh - 4rem)"
       justifyContent={JUSTIFY_SPACE_BETWEEN}
-      padding={SPACING.spacing12}
     >
       <TimelineToolbox />
       <Flex
         alignItems={ALIGN_CENTER}
-        alignSelf={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
         width="100%"
-        justifyContent={JUSTIFY_FLEX_START}
+        paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
           gridGap={SPACING.spacing16}
           maxWidth={CONTENT_MAX_WIDTH}
         >
-          {tab === 'protocolSteps' ? (
+          {showTimelineAlerts ? (
             <TimelineAlerts justifyContent={JUSTIFY_CENTER} width="100%" />
           ) : null}
           <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
@@ -128,9 +137,6 @@ export function ProtocolSteps(): JSX.Element {
                 stepDetails={stepDetails}
               />
             ) : null}
-            {selectedTerminalItem != null && currentHoveredStepId == null ? (
-              <Flex height="4.75rem" width="100%" />
-            ) : null}
           </Flex>
         </Flex>
         {enableHoyKeyDisplay ? (

diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
@@ -6,6 +6,7 @@ import {
   ALIGN_END,
   COLORS,
   DIRECTION_COLUMN,
+  FLEX_MAX_CONTENT,
   Flex,
   INFO_TOAST,
   SPACING,
@@ -149,7 +150,7 @@ export function Designer(): JSX.Element {
           }}
         />
       ) : null}
-      <Flex flexDirection={DIRECTION_COLUMN}>
+      <Flex flexDirection={DIRECTION_COLUMN} minHeight={FLEX_MAX_CONTENT}>
         <ProtocolNavBar
           hasZoomInSlot={zoomIn.slot != null || zoomIn.cutout != null}
           hasTrashEntity={hasTrashEntity}