Merge back 'chore_release-pd-8.5.0' into 'edge' (#19149)

Author: ddcc4

components/src/molecules/DropdownMenu/index.tsx

@@ -260,7 +260,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
       gridGap={SPACING.spacing8}
       width={width}
     >
-      {title !== null ? (
+      {title != null ? (
         <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
           <StyledText
             desktopStyle="bodyDefaultRegular"

protocol-designer/src/components/organisms/Ot2Modules/index.tsx

@@ -322,12 +322,7 @@ export function Ot2Modules(): JSX.Element {
       ) : null}
       {changeModuleWarning}
       <Flex flexWrap={WRAP} width="100%">
-        <Flex
-          flexDirection={DIRECTION_COLUMN}
-          flex="1.27"
-          minWidth="30.375rem"
-          paddingTop={SPACING.spacing120}
-        >
+        <Flex flexDirection={DIRECTION_COLUMN} flex="1.27" minWidth="30.375rem">
           {filteredSupportedModules.length > 0 ? (
             <StyledText
               desktopStyle="headingSmallBold"
@@ -416,12 +411,7 @@ export function Ot2Modules(): JSX.Element {
             </Flex>
           ) : null}
         </Flex>
-        <Flex
-          flex="1.27"
-          maxHeight="35rem"
-          minWidth="50%"
-          paddingTop={SPACING.spacing80}
-        >
+        <Flex flex="1.27" maxHeight="35rem" minWidth="50%">
           <RobotCoordinateSpaceWithRef
             height="100%"
             width="100%"

protocol-designer/src/form-types.ts

@@ -343,7 +343,7 @@ export interface HydratedMoveLiquidFormData extends AnnotationFields {
   pickUpTip_location?: string | null
   pickUpTip_wellNames?: string[] | null
   preWetTip?: boolean | null
-  liquidClass?: string | null
+  liquidClass?: string | null // a liquid class name like "water" or "none" or null
 }
 
 export interface HydratedMoveLabwareFormData extends AnnotationFields {

protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx

@@ -241,7 +241,11 @@ export function DeckSetupContainer(
               minWidth="auto"
               deckDef={deckDef}
               viewBox={viewBoxAdjusted}
-              transform={'scale(1.3, -1.3)'}
+              transform={
+                robotType === OT2_ROBOT_TYPE
+                  ? 'scale(1.3, -1.3)'
+                  : 'scale(1, -1)'
+              }
               outline="auto"
               zoomed={zoomIn.slot != null}
               borderRadius={BORDERS.borderRadius12}

protocol-designer/src/pages/Designer/DeckSetup/__tests__/utils.test.ts

@@ -129,7 +129,7 @@ describe('getSVGContainerWidth', () => {
 
   it('returns 70% for non-OT2 robot type, not zoomed', () => {
     const result = getSVGContainerWidth(FLEX_ROBOT_TYPE, false)
-    expect(result).toBe('70%')
+    expect(result).toBe('100%')
   })
 
   it('returns 100% for OT2 robot type,  and zoomed', () => {

protocol-designer/src/pages/Designer/DeckSetup/utils.ts

@@ -565,9 +565,6 @@ export const getSVGContainerWidth = (
   if (robotType === OT2_ROBOT_TYPE && !isZoomed) {
     return '78.5%'
   }
-  if (robotType !== OT2_ROBOT_TYPE && !isZoomed) {
-    return '70%'
-  }
   return '100%'
 }
 

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PositionField.tsx

@@ -109,8 +109,8 @@ export function PositionField(props: PositionFieldProps): JSX.Element {
 
   const handleOpen = (has3Specs: boolean): void => {
     if (
-      wellDepthMm != null &&
-      (has3Specs ? wellXWidthMm != null && wellYWidthMm != null : true)
+      (has3Specs && wellDepthMm && wellXWidthMm && wellYWidthMm) ||
+      (!has3Specs && wellDepthMm)
     ) {
       setIsModalOpen(true)
     }

protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import round from 'lodash/round'
@@ -13,6 +13,7 @@ import {
   JUSTIFY_END,
   JUSTIFY_SPACE_BETWEEN,
   OVERFLOW_AUTO,
+  POSITION_ABSOLUTE,
   POSITION_RELATIVE,
   SPACING,
   StyledText,
@@ -24,7 +25,6 @@ import {
   OT2_ROBOT_TYPE,
 } from '@opentrons/shared-data'
 
-import { NAV_BAR_HEIGHT_REM } from '../../../components/atoms'
 import { ExportButton, HotKeyDisplay } from '../../../components/molecules'
 import {
   SlotDetailsContainer,
@@ -169,6 +169,23 @@ export function ProtocolSteps({
     activeItem?.id !== HARDWARE_ID
   const stepDetails = currentStep?.stepDetails ?? null
 
+  const stepComponentRef = useRef<HTMLDivElement>(null)
+
+  const handleScrollToTop = (): void => {
+    if (stepComponentRef.current && hasTimelineErrors) {
+      stepComponentRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (selectedStepId != null) {
+      handleScrollToTop()
+    }
+  }, [selectedStepId])
+
   let header: string = t(activeItem?.id)
   if (currentStep != null) {
     header = i18n.format(currentStep.stepName, 'titleCase')
@@ -216,7 +233,6 @@ export function ProtocolSteps({
 
       <Flex
         backgroundColor={COLORS.grey10}
-        maxHeight={`calc(100vh - ${NAV_BAR_HEIGHT_REM}rem)`}
         width="100%"
         minHeight={FLEX_MAX_CONTENT}
       >
@@ -251,7 +267,12 @@ export function ProtocolSteps({
             {isZoomedIn ||
             formData != null ||
             selectedSubstep != null ? null : (
-              <Flex justifyContent={JUSTIFY_END}>
+              <Flex
+                justifyContent={JUSTIFY_END}
+                position={POSITION_ABSOLUTE}
+                right={SPACING.spacing24}
+                zIndex={1000}
+              >
                 <ExportButton onClick={handleExporting} />
               </Flex>
             )}
@@ -268,18 +289,24 @@ export function ProtocolSteps({
                   : CONTENT_MAX_WIDTH
               }
               justifyContent={JUSTIFY_CENTER}
-              paddingTop={isZoomedIn ? '0' : SPACING.spacing60}
+              paddingTop={
+                isZoomedIn || showTimelineAlerts ? '0' : SPACING.spacing60
+              }
               marginX="auto"
             >
               {isZoomedIn || selectedTerminalItemId === HARDWARE_ID ? null : (
                 <>
                   {showTimelineAlerts ? (
-                    <TimelineAlerts
-                      justifyContent={JUSTIFY_CENTER}
-                      width="100%"
-                      flexDirection={DIRECTION_COLUMN}
-                      gridGap={SPACING.spacing4}
-                    />
+                    <>
+                      {/* empty div to scroll to top of timeline alerts */}
+                      <div ref={stepComponentRef} />
+                      <TimelineAlerts
+                        justifyContent={JUSTIFY_CENTER}
+                        width="100%"
+                        flexDirection={DIRECTION_COLUMN}
+                        gridGap={SPACING.spacing4}
+                      />
+                    </>
                   ) : null}
                   <Flex
                     justifyContent={JUSTIFY_SPACE_BETWEEN}

protocol-designer/src/pages/Designer/index.tsx

@@ -10,6 +10,7 @@ import {
   useOnClickOutside,
 } from '@opentrons/components'
 
+import { NAV_BAR_HEIGHT_REM } from '../../components/atoms/constants'
 import { DefineLiquidsModal } from '../../components/organisms'
 import { useKitchen } from '../../components/organisms/Kitchen/useKitchen'
 import { LiquidsOverflowMenu } from '../../components/organisms/LiquidsOverflowMenu'
@@ -101,7 +102,12 @@ export function Designer(): JSX.Element {
           targetWidth={targetWidth}
         />
       ) : null}
-      <Flex height="100%" width="100%" overflowY={OVERFLOW_HIDDEN}>
+      <Flex
+        height="100%"
+        maxHeight={`calc(100vh - ${NAV_BAR_HEIGHT_REM}rem )`}
+        width="100%"
+        overflowY={OVERFLOW_HIDDEN}
+      >
         <ProtocolSteps
           zoomedInSlot={zoomIn.slot}
           showLiquidOverflowMenu={showLiquidOverflowMenu}

step-generation/src/types.ts

@@ -316,7 +316,7 @@ export type SharedTransferLikeArgs = CommonArgs & {
   blowoutFlowRateUlSec: number
 
   // ===== SETTINGS INTRODUCED WITH LIQUID CLASSES =====
-  liquidClass: string | null
+  liquidClass: string | null // a liquid class name like "water" or null; "none" is not allowed
   aspiratePositionReference: PositionReference
   aspirateZOffset: number
   aspirateSubmergeSpeed: number | null