diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx index 2088409227e..fc452103584 100644 --- 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} {stepSummaryContent != null ? ( - - {stepSummaryContent} - + {stepSummaryContent} ) : 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 index e2460741ebf..eb0a0ba835b 100644 --- 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 ? ( } onCloseClick={handleClose} diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx index 9cd9b89230e..a5a3fc99ff1 100644 --- 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 : } + height="calc(100vh - 6rem)" > { beforeEach(() => { vi.mocked(getDesignerTab).mockReturnValue('protocolSteps') + vi.mocked(getRobotStateTimeline).mockReturnValue({ + timeline: [], + errors: [], + }) vi.mocked(TimelineToolbox).mockReturnValue(
mock TimelineToolbox
) vi.mocked(DeckSetupContainer).mockReturnValue(
mock DeckSetupContainer
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx index 8cb7d8fbfe2..4617163a247 100644 --- 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 ( - {tab === 'protocolSteps' ? ( + {showTimelineAlerts ? ( ) : null} @@ -128,9 +137,6 @@ export function ProtocolSteps(): JSX.Element { stepDetails={stepDetails} /> ) : null} - {selectedTerminalItem != null && currentHoveredStepId == null ? ( - - ) : null} {enableHoyKeyDisplay ? ( diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx index 9b2c1beda35..f9f343735d4 100644 --- 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} - +