fix(app): fix desktop app attach flow for the 96ch

The right pipette card on the desktop app conditionally renders based on whether or not a 96 channel
is attached. This poses an issue when a user tries to attach a 96ch from the right card, since the
card will unrender as soon as the pipette is  recognized, unrendering the pipette wizard. This is a
natural spot for our Nice Modal library, which decouples the conditional logic for rendering the
modal from what is required to persist the modal.

app/src/organisms/Devices/PipetteCard/index.tsx

@@ -26,6 +26,7 @@ import {
 import {
   useCurrentSubsystemUpdateQuery,
   usePipetteSettingsQuery,
+  useHost,
 } from '@opentrons/react-api-client'
 
 import { LEFT } from '../../../redux/pipettes'
@@ -36,7 +37,7 @@ import { useMenuHandleClickOutside } from '../../../atoms/MenuList/hooks'
 import { InstrumentCard } from '../../../molecules/InstrumentCard'
 import { ChangePipette } from '../../ChangePipette'
 import { FLOWS } from '../../PipetteWizardFlows/constants'
-import { PipetteWizardFlows } from '../../PipetteWizardFlows'
+import { handlePipetteWizardFlows } from '../../PipetteWizardFlows'
 import { ChoosePipette } from '../../PipetteWizardFlows/ChoosePipette'
 import { useIsFlex } from '../hooks'
 import { PipetteOverflowMenu } from './PipetteOverflowMenu'
@@ -50,6 +51,7 @@ import type {
   SelectablePipettes,
 } from '../../PipetteWizardFlows/types'
 import { DropTipWizard } from '../../DropTipWizard'
+import { HostConfig } from '@opentrons/api-client'
 
 interface PipetteCardProps {
   pipetteModelSpecs: PipetteModelSpecs | null
@@ -95,6 +97,7 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => {
     setShowOverflowMenu,
   } = useMenuHandleClickOutside()
   const isFlex = useIsFlex(robotName)
+  const host = useHost() as HostConfig
   const pipetteName = pipetteModelSpecs?.name
   const isFlexPipetteAttached = isFlexPipette(pipetteName as PipetteName)
   const pipetteDisplayName = pipetteModelSpecs?.displayName
@@ -104,10 +107,6 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => {
   const [showChangePipette, setChangePipette] = React.useState(false)
   const [showDropTipWizard, setShowDropTipWizard] = React.useState(false)
   const [showSlideout, setShowSlideout] = React.useState(false)
-  const [
-    pipetteWizardFlow,
-    setPipetteWizardFlow,
-  ] = React.useState<PipetteWizardFlow | null>(null)
   const [showAttachPipette, setShowAttachPipette] = React.useState(false)
   const [showAboutSlideout, setShowAboutSlideout] = React.useState(false)
   const subsystem = mount === LEFT ? 'pipette_left' : 'pipette_right'
@@ -148,10 +147,12 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => {
     selectedPipette,
     setSelectedPipette,
   ] = React.useState<SelectablePipettes>(SINGLE_MOUNT_PIPETTES)
+  const selectedPipetteForWizard =
+    pipetteName === 'p1000_96' ? NINETY_SIX_CHANNEL : selectedPipette
 
   const handleChangePipette = (): void => {
     if (isFlexPipetteAttached && isFlex) {
-      setPipetteWizardFlow(FLOWS.DETACH)
+      handleLaunchPipetteWizardFlows(FLOWS.DETACH)
     } else if (!isFlexPipetteAttached && isFlex) {
       setShowAttachPipette(true)
     } else {
@@ -162,19 +163,32 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => {
     setShowDropTipWizard(true)
   }
   const handleCalibrate = (): void => {
-    if (isFlexPipetteAttached) setPipetteWizardFlow(FLOWS.CALIBRATE)
+    if (isFlexPipetteAttached) {
+      handleLaunchPipetteWizardFlows(FLOWS.CALIBRATE)
+    }
   }
   const handleAboutSlideout = (): void => {
     setShowAboutSlideout(true)
   }
   const handleSettingsSlideout = (): void => {
     setShowSlideout(true)
   }
-
   const handleAttachPipette = (): void => {
     setShowAttachPipette(false)
-    setPipetteWizardFlow(FLOWS.ATTACH)
+    handleLaunchPipetteWizardFlows(FLOWS.ATTACH)
   }
+  const setCloseFlow = (): void => {
+    setSelectedPipette(SINGLE_MOUNT_PIPETTES)
+  }
+  const handleLaunchPipetteWizardFlows = (flowType: PipetteWizardFlow): void =>
+    handlePipetteWizardFlows({
+      flowType,
+      mount,
+      closeFlow: setCloseFlow,
+      selectedPipette: selectedPipetteForWizard,
+      host,
+    })
+
   return (
     <Flex
       backgroundColor={COLORS.grey10}
@@ -191,19 +205,6 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => {
           mount={mount}
         />
       ) : null}
-      {pipetteWizardFlow != null ? (
-        <PipetteWizardFlows
-          flowType={pipetteWizardFlow}
-          mount={mount}
-          closeFlow={() => {
-            setSelectedPipette(SINGLE_MOUNT_PIPETTES)
-            setPipetteWizardFlow(null)
-          }}
-          selectedPipette={
-            pipetteName === 'p1000_96' ? NINETY_SIX_CHANNEL : selectedPipette
-          }
-        />
-      ) : null}
       {showChangePipette && (
         <ChangePipette
           robotName={robotName}

app/src/organisms/PipetteWizardFlows/index.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import NiceModal, { useModal } from '@ebay/nice-modal-react'
+
 import { useConditionalConfirm } from '@opentrons/components'
 import {
   LEFT,
@@ -12,12 +14,13 @@ import {
 import {
   useHost,
   useDeleteMaintenanceRunMutation,
+  ApiHostProvider,
 } from '@opentrons/react-api-client'
+
 import {
   useCreateTargetedMaintenanceRunMutation,
   useChainMaintenanceCommands,
 } from '../../resources/runs/hooks'
-
 import { useNotifyCurrentMaintenanceRun } from '../../resources/maintenance_runs/useNotifyCurrentMaintenanceRun'
 import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { Portal } from '../../App/portal'
@@ -42,7 +45,7 @@ import { MountingPlate } from './MountingPlate'
 import { UnskippableModal } from './UnskippableModal'
 
 import type { PipetteMount } from '@opentrons/shared-data'
-import type { CommandData } from '@opentrons/api-client'
+import type { CommandData, HostConfig } from '@opentrons/api-client'
 import type { PipetteWizardFlow, SelectablePipettes } from './types'
 
 const RUN_REFETCH_INTERVAL = 5000
@@ -433,3 +436,29 @@ export const PipetteWizardFlows = (
     </Portal>
   )
 }
+
+type PipetteWizardFlowsPropsWithHost = PipetteWizardFlowsProps & {
+  host: HostConfig
+}
+
+export const handlePipetteWizardFlows = (
+  props: PipetteWizardFlowsPropsWithHost
+): void => {
+  NiceModal.show(NiceModalPipetteWizardFlows, props)
+}
+
+const NiceModalPipetteWizardFlows = NiceModal.create(
+  (props: PipetteWizardFlowsPropsWithHost): JSX.Element => {
+    const modal = useModal()
+    const closeFlowAndModal = (): void => {
+      props.closeFlow()
+      modal.remove()
+    }
+
+    return (
+      <ApiHostProvider {...props.host}>
+        <PipetteWizardFlows {...props} closeFlow={closeFlowAndModal} />
+      </ApiHostProvider>
+    )
+  }
+)

app/src/pages/InstrumentDetail/__tests__/InstrumentDetailOverflowMenu.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import NiceModal from '@ebay/nice-modal-react'
-import { fireEvent, waitFor } from '@testing-library/react'
+import { fireEvent } from '@testing-library/react'
 
 import { renderWithProviders } from '@opentrons/components'
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
@@ -167,46 +167,6 @@ describe('UpdateBuildroot', () => {
     expect(queryByText('Drop tips')).not.toBeInTheDocument()
   })
 
-  it('renders the pipette calibration wizard  when recalibrate is clicked', () => {
-    const [{ getByTestId, getByText }] = render(MOCK_PIPETTE)
-    const btn = getByTestId('testButton')
-    fireEvent.click(btn)
-    fireEvent.click(getByText('Recalibrate'))
-
-    getByText('Calibrate Left Pipette')
-  })
-
-  it('renders the drop tip wizard  when Drop tips is clicked', () => {
-    const [{ getByTestId, getByText, getAllByText }] = render(MOCK_PIPETTE)
-    const btn = getByTestId('testButton')
-    fireEvent.click(btn)
-    fireEvent.click(getByText('Drop tips'))
-
-    expect(getAllByText('Drop tips')).toHaveLength(2)
-  })
-
-  it('renders the gripper calibration wizard when recalibrate is clicked', () => {
-    const [{ getByTestId, getByText }] = render(MOCK_GRIPPER)
-    const btn = getByTestId('testButton')
-    fireEvent.click(btn)
-    fireEvent.click(getByText('Recalibrate'))
-
-    getByText('Calibrate Gripper')
-  })
-
-  it('closes the overflow menu when a launched wizard closes', async () => {
-    const [{ getByTestId, getByText, queryByText }] = render(MOCK_GRIPPER)
-    const btn = getByTestId('testButton')
-    fireEvent.click(btn)
-    fireEvent.click(getByText('Recalibrate'))
-
-    getByText('Calibrate Gripper')
-    fireEvent.click(getByText('exit'))
-    await waitFor(() =>
-      expect(queryByText('Recalibrate')).not.toBeInTheDocument()
-    )
-  })
-
   it('closes the overflow menu when a click occurs outside of the overflow menu', () => {
     const [{ queryByText, getByTestId, getByLabelText }] = render(MOCK_PIPETTE)
     const btn = getByTestId('testButton')