fix(protocol-designer): fix tips selection inline notification conditional rendering (#20323)

Automatically show selected tips error on mount if opening an existing
step

Author: ncdiehl11

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

@@ -55,7 +55,6 @@ import type {
 import type {
   AccessibilityStatus,
   InaccessibleReason,
-  TipSelectionBannerReason,
   TipSelectionBaseProps,
 } from './types'
 
@@ -68,9 +67,7 @@ export function SelectTips(
     numTotalPickups: number
     selectedTips: string[][]
     setSelectedTips: Dispatch<SetStateAction<string[][]>>
-    setErrorBannerReason: Dispatch<
-      SetStateAction<TipSelectionBannerReason | null>
-    >
+    setShowErrorBanner: Dispatch<SetStateAction<boolean>>
     primaryNozzle: string
     tipAccessibilityStatus: Record<string, Record<string, AccessibilityStatus>>
   }
@@ -90,7 +87,7 @@ export function SelectTips(
     selectedTips,
     setSelectedTips,
     numTotalPickups,
-    setErrorBannerReason,
+    setShowErrorBanner,
     tipAccessibilityStatus,
     nozzles,
     primaryNozzle,
@@ -183,7 +180,7 @@ export function SelectTips(
     ) {
       return
     }
-    setErrorBannerReason(null)
+    setShowErrorBanner(false)
 
     if (channels === 1 || nozzles === SINGLE) {
       if (wellName in prevSelectedTipsByIndex) {

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

@@ -27,9 +27,10 @@ interface TipSelectionModalProps {
   totalSteps: number
   showBackButton?: boolean
   continueText?: string
-  errorBannerReason: TipSelectionBannerReason | null
+  showErrorBanner: boolean
   numPickupsRemaining: number
   showReusingTipsBanner: boolean
+  errorReason: TipSelectionBannerReason | null
 }
 
 export function TipSelectionModal(props: TipSelectionModalProps): JSX.Element {
@@ -42,9 +43,10 @@ export function TipSelectionModal(props: TipSelectionModalProps): JSX.Element {
     continueText,
     currentStepIndex,
     totalSteps,
-    errorBannerReason,
+    showErrorBanner,
     numPickupsRemaining,
     showReusingTipsBanner,
+    errorReason,
   } = props
   const { t } = useTranslation('tip_selection')
 
@@ -59,19 +61,19 @@ export function TipSelectionModal(props: TipSelectionModalProps): JSX.Element {
 
   const footerElement = (
     <div className={styles.modal_footer}>
-      {errorBannerReason != null ? (
+      {errorReason != null && showErrorBanner && currentStepIndex === 1 ? (
         <InlineNotification
           type="error"
           message={t(
-            `error_banner.${errorBannerReason}`,
-            errorBannerReason === 'pickupsRequired'
+            `error_banner.${errorReason}`,
+            errorReason === 'pickupsRequired'
               ? { count: numPickupsRemaining }
               : {}
           )}
           hug
         />
       ) : null}
-      {errorBannerReason == null &&
+      {(errorReason == null || !showErrorBanner) &&
       showReusingTipsBanner &&
       currentStepIndex === 1 ? (
         <InlineNotification

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

@@ -68,8 +68,9 @@ export function TipSelectionWizard(
   const [selectedTiprackId, setSelectedTiprackId] = useState<string | null>(
     tiprackSelected
   )
-  const [errorBannerReason, setErrorBannerReason] =
-    useState<TipSelectionBannerReason | null>(null)
+  const [showErrorBanner, setShowErrorBanner] = useState<boolean>(
+    selectedTips.flat().length > 0
+  )
   const robotState = useSelector(getRobotStateAtActiveItem)
   const tipState =
     selectedTiprackId != null
@@ -113,16 +114,29 @@ export function TipSelectionWizard(
         INACCESSIBLE_INCOMPLETE
     )
 
+  const errorReason = ((): TipSelectionBannerReason | null => {
+    if (isAnySelectedWellTooManyPickups) {
+      return 'tooManyTips'
+    }
+    if (isAnySelectedWellIncomplete) {
+      return 'incompletePickup'
+    }
+    if (selectedTips.length !== numPickups) {
+      return 'pickupsRequired'
+    }
+    return null
+  })()
+
   const handleContinue = (): void => {
     if (selectedTiprackId == null) {
       makeSnackbar(t('no_tiprack_selected') as string)
     } else if (currentStepIndex === NUM_TOTAL_STEPS - 1) {
-      if (selectedTips.length !== numPickups) {
-        setErrorBannerReason('pickupsRequired')
-      } else if (isAnySelectedWellTooManyPickups) {
-        setErrorBannerReason('tooManyTips')
-      } else if (isAnySelectedWellIncomplete) {
-        setErrorBannerReason('incompletePickup')
+      if (
+        selectedTips.length !== numPickups ||
+        isAnySelectedWellTooManyPickups ||
+        isAnySelectedWellIncomplete
+      ) {
+        setShowErrorBanner(true)
       } else {
         handleSave()
       }
@@ -164,7 +178,7 @@ export function TipSelectionWizard(
           primaryNozzle={primaryNozzle}
           selectedTips={selectedTips}
           setSelectedTips={setSelectedTips}
-          setErrorBannerReason={setErrorBannerReason}
+          setShowErrorBanner={setShowErrorBanner}
           numTotalPickups={numPickups}
           nozzles={nozzles}
           tipAccessibilityStatus={tipAccessibilityStatus}
@@ -191,9 +205,10 @@ export function TipSelectionWizard(
       }
       currentStepIndex={currentStepIndex}
       totalSteps={NUM_TOTAL_STEPS}
-      errorBannerReason={errorBannerReason}
+      showErrorBanner={showErrorBanner}
       numPickupsRemaining={numPickups - selectedTips.length}
       showReusingTipsBanner={isAnySelectedWellUsed}
+      errorReason={errorReason}
     >
       {currentComponent}
     </TipSelectionModal>