fix(app): sync the start module setup toast and module setup between app/odd. (#19158)

Author: vegano1

app/src/App/OnDeviceDisplayApp.tsx

@@ -218,8 +218,8 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
                         <ProtocolReceiptToasts />
                         {!showModuleSetupModal ? (
                           <ModuleAttachedToasts
-                            openFlow={() => {
-                              setShowModuleSetupModal(true)
+                            openFlow={(open: boolean) => {
+                              setShowModuleSetupModal(open)
                             }}
                           />
                         ) : null}
@@ -312,7 +312,11 @@ function ProtocolReceiptToasts(): null {
   return null
 }
 
-function ModuleAttachedToasts({ openFlow }: { openFlow: () => void }): null {
+function ModuleAttachedToasts({
+  openFlow,
+}: {
+  openFlow: (open: boolean) => void
+}): null {
   useModuleAttachedToast(openFlow)
   return null
 }

app/src/App/hooks.ts

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useRef } from 'react'
+import { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
 import { useDispatch } from 'react-redux'
@@ -152,34 +152,49 @@ export function useGetNewModules(): AttachedModule[] {
 }
 
 export function useModuleAttachedToast(
-  launchModuleSetupCallback: () => void
+  launchModuleSetupCallback: (open: boolean) => void
 ): void {
   const newModules = useGetNewModules()
   const currentRunId = useCurrentRunId({ refetchInterval: CURRENT_RUN_POLL })
   const attachedPipettes = useAttachedPipettes(newModules.length > 0)
   const { t, i18n } = useTranslation(['module_wizard_flows', 'shared'])
-  const { makeToast } = useToaster()
+  const { makeToast, eatToast } = useToaster()
   const moduleSerials = newModules.map(m => m.serialNumber)
   const moduleSerialsRef = useRef(moduleSerials)
   const runInProgress = currentRunId != null
+  const [toastID, setToastID] = useState<string>('')
 
   useEffect(() => {
     const newModuleSerials = difference(moduleSerials, moduleSerialsRef.current)
     const hasPipette =
       attachedPipettes.left != null || attachedPipettes.right != null
     if (!runInProgress && hasPipette && newModuleSerials.length > 0) {
-      makeToast(t('module_added') as string, 'info', {
-        buttonText: i18n.format(t('shared:close'), 'capitalize'),
-        linkText: t('module_added_link'),
-        onLinkClick: launchModuleSetupCallback,
-        disableTimeout: true,
-        displayType: 'odd',
-      })
+      setToastID(
+        makeToast(t('module_added') as string, 'info', {
+          buttonText: i18n.format(t('shared:close'), 'capitalize'),
+          linkText: t('module_added_link'),
+          onLinkClick: () => {
+            launchModuleSetupCallback(true)
+          },
+          disableTimeout: true,
+          displayType: 'odd',
+        })
+      )
     }
+
     moduleSerialsRef.current = moduleSerials
     // dont want this hook to rerun when other deps change
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [moduleSerials, runInProgress])
+
+  useEffect(() => {
+    // Close toast if there are no new modules to setup
+    if (toastID && newModules.length === 0) {
+      launchModuleSetupCallback(false)
+      eatToast(toastID)
+      setToastID('')
+    }
+  }, [toastID, newModules])
 }
 
 export function useScrollRef(): {

app/src/organisms/ModuleWizardFlows/index.tsx

@@ -5,6 +5,7 @@ import { COLORS, LegacyStyledText } from '@opentrons/components'
 import { useModulesQuery } from '@opentrons/react-api-client'
 import { getModuleDisplayName } from '@opentrons/shared-data'
 
+import { useGetNewModules } from '/app/App/hooks'
 import {
   SimpleWizardBody,
   SimpleWizardInProgressBody,
@@ -65,13 +66,6 @@ export function ModuleWizardFlows(
     deckConfig,
   } = useModuleSetupWizard({ closeFlow, attachedModuleOnLaunch, onComplete })
 
-  // build out flow if there is a module passed in at launch
-  useEffect(() => {
-    if (attachedModuleOnLaunch != null) {
-      buildFlowForSelectedModule(attachedModuleOnLaunch)
-    }
-  }, [])
-
   const sendIdentifyStacker = useSendIdentifyStacker()
   const [selectedModule, setSelectedModule] = useState<AttachedModule | null>(
     null
@@ -87,6 +81,21 @@ export function ModuleWizardFlows(
       enabled: wizardFlowBaseProps.attachedModule != null,
     })?.data?.data ?? []
 
+  // build out flow if there is a module passed in at launch
+  useEffect(() => {
+    if (attachedModuleOnLaunch != null) {
+      buildFlowForSelectedModule(attachedModuleOnLaunch)
+    }
+  }, [])
+
+  // Close the modal if no new modules are attached
+  const newModules = useGetNewModules()
+  useEffect(() => {
+    if (newModules.length === 0 && wizardFlowBaseProps.attachedModule == null) {
+      handleCleanUpAndClose()
+    }
+  }, [newModules, wizardFlowBaseProps])
+
   const doorStatus = useIsDoorOpen(robotName).isDoorOpen
 
   if (wizardFlowBaseProps.attachedPipette == null) return null