fix(app): Show module setup screen on the Desktop app for the given module. (#18487)

Author: vegano1

app/src/App/OnDeviceDisplayApp.tsx

@@ -206,6 +206,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
                     <FirmwareUpdateTakeover />
                     {showModuleSetupModal && localRobot?.name != null ? (
                       <ModuleWizardFlows
+                        showSetupLauncher={true}
                         closeFlow={() => {
                           setShowModuleSetupModal(false)
                         }}

app/src/App/hooks.ts

@@ -22,6 +22,7 @@ import { checkShellUpdate } from '/app/redux/shell'
 import { useNotifyDeckConfigurationQuery } from '../resources/deck_configuration'
 import { useAttachedPipettes } from '../resources/instruments'
 import { useAttachedModules } from '../resources/modules'
+import { useCurrentRunId } from '../resources/runs'
 import { SharedScrollRefContext } from './ODDProviders/ScrollRefProvider'
 
 import type { AttachedModule } from '@opentrons/api-client'
@@ -32,6 +33,7 @@ const UPDATE_RECHECK_INTERVAL_MS = 60000
 const PROTOCOL_IDS_RECHECK_INTERVAL_MS = 3000
 const ATTACHED_MODULE_POLL_MS = 5000
 const DECK_CONFIG_POLL_MS = 5000
+const CURRENT_RUN_POLL = 5000
 
 export function useSoftwareUpdatePoll(): void {
   const dispatch = useDispatch<Dispatch>()
@@ -153,17 +155,19 @@ export function useModuleAttachedToast(
   launchModuleSetupCallback: () => 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 moduleSerials = newModules.map(m => m.serialNumber)
   const moduleSerialsRef = useRef(moduleSerials)
+  const runInProgress = currentRunId != null
 
   useEffect(() => {
     const newModuleSerials = difference(moduleSerials, moduleSerialsRef.current)
     const hasPipette =
       attachedPipettes.left != null || attachedPipettes.right != null
-    if (hasPipette && newModuleSerials.length > 0) {
+    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'),
@@ -175,7 +179,7 @@ export function useModuleAttachedToast(
     moduleSerialsRef.current = moduleSerials
     // dont want this hook to rerun when other deps change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [moduleSerials])
+  }, [moduleSerials, runInProgress])
 }
 
 export function useScrollRef(): {

app/src/organisms/ModuleCard/index.tsx

@@ -293,6 +293,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
       {showCalModal ? (
         <ModuleWizardFlows
           attachedModule={module}
+          showSetupLauncher={true}
           closeFlow={() => {
             setShowCalModal(false)
           }}

app/src/organisms/ModuleWizardFlows/SelectModule.tsx

@@ -32,6 +32,8 @@ interface SelectModuleProps {
   isOnDevice: boolean
   selectedModule: AttachedModule | null
   setSelectedModule: (module: AttachedModule | null) => void
+  setShowLaunchSetup: (show: boolean) => void
+  attachedModuleOnLaunch?: AttachedModule | null
 }
 
 interface ModuleNameAndPort {
@@ -45,10 +47,17 @@ export function SelectModule(props: SelectModuleProps): JSX.Element {
     isOnDevice,
     selectedModule,
     setSelectedModule,
+    setShowLaunchSetup,
+    attachedModuleOnLaunch = null,
   } = props
   const { t } = useTranslation('module_wizard_flows')
 
-  const newModules = useGetNewModules()
+  const availableModules = useGetNewModules()
+  const newModules =
+    attachedModuleOnLaunch !== null
+      ? [attachedModuleOnLaunch]
+      : availableModules
+
   const isSingleModule = newModules.length === 1
   const sendIdentifyModule = useSendIdentifyModule()
   const [stackerNotInstalled, setStackerNotInstalled] = useState(false)
@@ -100,6 +109,7 @@ export function SelectModule(props: SelectModuleProps): JSX.Element {
       }
       // Proceed to module setup
       buildFlowForSelectedModule(module)
+      setShowLaunchSetup(false)
     }
   }
 

app/src/organisms/ModuleWizardFlows/Success.tsx

@@ -34,12 +34,14 @@ export const BODY_STYLE = css`
 
 interface SuccessProps extends ModuleSetupWizardStepProps {
   setSelectedModule: (module: AttachedModule | null) => void
+  attachedModuleOnLaunch?: AttachedModule | null
 }
 
 export function Success(props: SuccessProps): JSX.Element {
   const {
     proceed,
     attachedModule,
+    attachedModuleOnLaunch = null,
     isRobotMoving,
     isOnDevice,
     restartSetup,
@@ -69,7 +71,7 @@ export function Success(props: SuccessProps): JSX.Element {
     >
       <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8}>
         <>
-          {newModules.length > 0 ? (
+          {newModules.length > 0 && attachedModuleOnLaunch == null ? (
             isOnDevice ? (
               <SmallButton
                 buttonType="secondary"

app/src/organisms/ModuleWizardFlows/index.tsx

@@ -30,6 +30,7 @@ interface ModuleWizardFlowsProps {
   closeFlow: () => void
   robotName: string
   attachedModule?: AttachedModule
+  showSetupLauncher?: boolean
   isLoadedInRun?: boolean
   onComplete?: () => void
 }
@@ -41,6 +42,7 @@ export function ModuleWizardFlows(
     attachedModule: attachedModuleOnLaunch,
     robotName,
     isLoadedInRun = false,
+    showSetupLauncher = false,
     closeFlow,
     onComplete,
   } = props
@@ -70,10 +72,13 @@ export function ModuleWizardFlows(
   const [selectedModule, setSelectedModule] = useState<AttachedModule | null>(
     null
   )
+  const [showLaunchSetup, setShowLaunchSetup] = useState<boolean>(
+    showSetupLauncher
+  )
   const [createdAdapterId, setCreatedAdapterId] = useState<string | null>(null)
 
   if (wizardFlowBaseProps.attachedPipette == null) return null
-  if (wizardFlowBaseProps.attachedModule == null) {
+  if (showLaunchSetup || wizardFlowBaseProps.attachedModule == null) {
     return (
       <ModuleWizardScreen
         isRobotMoving={wizardFlowBaseProps.isRobotMoving}
@@ -93,6 +98,8 @@ export function ModuleWizardFlows(
           buildFlowForSelectedModule={buildFlowForSelectedModule}
           selectedModule={selectedModule}
           setSelectedModule={setSelectedModule}
+          setShowLaunchSetup={setShowLaunchSetup}
+          attachedModuleOnLaunch={attachedModuleOnLaunch}
         />
       </ModuleWizardScreen>
     )
@@ -272,6 +279,7 @@ export function ModuleWizardFlows(
                 : handleCleanUpAndClose
             }
             attachedModule={wizardFlowBaseProps.attachedModule}
+            attachedModuleOnLaunch={attachedModuleOnLaunch}
             attachedPipette={wizardFlowBaseProps.attachedPipette}
             setSelectedModule={setSelectedModule}
           />