fix(app, app-shell, app-shell-odd): Fix host context for notifications (

#14548)

Closes RAUT-1018

app-shell-odd/src/notify.ts

@@ -193,8 +193,8 @@ const RENDER_TIMEOUT = 10000 // 10 seconds
 function unsubscribe(notifyParams: NotifyParams): Promise<void> {
   const { hostname, topic } = notifyParams
   return new Promise<void>(() => {
-    if (hostname in connectionStore) {
-      setTimeout(() => {
+    setTimeout(() => {
+      if (hostname in connectionStore) {
         const { client } = connectionStore[hostname]
         const subscriptions = connectionStore[hostname]?.subscriptions
         const isLastSubscription = subscriptions[topic] <= 1
@@ -215,12 +215,12 @@ function unsubscribe(notifyParams: NotifyParams): Promise<void> {
         } else {
           subscriptions[topic] -= 1
         }
-      }, RENDER_TIMEOUT)
-    } else {
-      log.info(
-        `Attempted to unsubscribe from unconnected hostname: ${hostname}`
-      )
-    }
+      } else {
+        log.info(
+          `Attempted to unsubscribe from unconnected hostname: ${hostname}`
+        )
+      }
+    }, RENDER_TIMEOUT)
   })
 }
 

app-shell/src/notify.ts

@@ -189,8 +189,8 @@ const RENDER_TIMEOUT = 10000 // 10 seconds
 function unsubscribe(notifyParams: NotifyParams): Promise<void> {
   const { hostname, topic } = notifyParams
   return new Promise<void>(() => {
-    if (hostname in connectionStore) {
-      setTimeout(() => {
+    setTimeout(() => {
+      if (hostname in connectionStore) {
         const { client } = connectionStore[hostname]
         const subscriptions = connectionStore[hostname]?.subscriptions
         const isLastSubscription = subscriptions[topic] <= 1
@@ -211,12 +211,12 @@ function unsubscribe(notifyParams: NotifyParams): Promise<void> {
         } else {
           subscriptions[topic] -= 1
         }
-      }, RENDER_TIMEOUT)
-    } else {
-      log.info(
-        `Attempted to unsubscribe from unconnected hostname: ${hostname}`
-      )
-    }
+      } else {
+        log.info(
+          `Attempted to unsubscribe from unconnected hostname: ${hostname}`
+        )
+      }
+    }, RENDER_TIMEOUT)
   })
 }
 

app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx

@@ -9,11 +9,13 @@ import { storedProtocolData as storedProtocolDataFixture } from '../../../redux/
 import { useTrackCreateProtocolRunEvent } from '../../../organisms/Devices/hooks'
 import { useCreateRunFromProtocol } from '../../ChooseRobotToRunProtocolSlideout/useCreateRunFromProtocol'
 import { ChooseProtocolSlideout } from '../'
+import { useNotifyService } from '../../../resources/useNotifyService'
 
 jest.mock('../../ChooseRobotToRunProtocolSlideout/useCreateRunFromProtocol')
 jest.mock('../../../redux/protocol-storage')
 jest.mock('../../../organisms/Devices/hooks')
 jest.mock('../../../redux/config')
+jest.mock('../../../resources/useNotifyService')
 
 const mockGetStoredProtocols = getStoredProtocols as jest.MockedFunction<
   typeof getStoredProtocols
@@ -24,6 +26,9 @@ const mockUseCreateRunFromProtocol = useCreateRunFromProtocol as jest.MockedFunc
 const mockUseTrackCreateProtocolRunEvent = useTrackCreateProtocolRunEvent as jest.MockedFunction<
   typeof useTrackCreateProtocolRunEvent
 >
+const mockUseNotifyService = useNotifyService as jest.MockedFunction<
+  typeof useNotifyService
+>
 
 const render = (props: React.ComponentProps<typeof ChooseProtocolSlideout>) => {
   return renderWithProviders(
@@ -52,6 +57,7 @@ describe('ChooseProtocolSlideout', () => {
     mockUseTrackCreateProtocolRunEvent.mockReturnValue({
       trackCreateProtocolRunEvent: mockTrackCreateProtocolRunEvent,
     })
+    mockUseNotifyService.mockReturnValue({} as any)
   })
   afterEach(() => {
     jest.resetAllMocks()

app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx

@@ -18,10 +18,12 @@ import {
 } from '../../../redux/discovery/__fixtures__'
 import { getNetworkInterfaces } from '../../../redux/networking'
 import { ChooseRobotSlideout } from '..'
+import { useNotifyService } from '../../../resources/useNotifyService'
 
 jest.mock('../../../redux/discovery')
 jest.mock('../../../redux/robot-update')
 jest.mock('../../../redux/networking')
+jest.mock('../../../resources/useNotifyService')
 
 const mockGetConnectableRobots = getConnectableRobots as jest.MockedFunction<
   typeof getConnectableRobots
@@ -39,6 +41,9 @@ const mockStartDiscovery = startDiscovery as jest.MockedFunction<
 const mockGetNetworkInterfaces = getNetworkInterfaces as jest.MockedFunction<
   typeof getNetworkInterfaces
 >
+const mockUseNotifyService = useNotifyService as jest.MockedFunction<
+  typeof useNotifyService
+>
 
 const render = (props: React.ComponentProps<typeof ChooseRobotSlideout>) => {
   return renderWithProviders(
@@ -61,6 +66,7 @@ describe('ChooseRobotSlideout', () => {
     mockGetScanning.mockReturnValue(false)
     mockStartDiscovery.mockReturnValue({ type: 'mockStartDiscovery' } as any)
     mockGetNetworkInterfaces.mockReturnValue({ wifi: null, ethernet: null })
+    mockUseNotifyService.mockReturnValue({} as any)
   })
   afterEach(() => {
     jest.resetAllMocks()

app/src/organisms/ChooseRobotToRunProtocolSlideout/__tests__/ChooseRobotToRunProtocolSlideout.test.tsx

@@ -29,6 +29,7 @@ import { storedProtocolData as storedProtocolDataFixture } from '../../../redux/
 import { useCreateRunFromProtocol } from '../useCreateRunFromProtocol'
 import { useOffsetCandidatesForAnalysis } from '../../ApplyHistoricOffsets/hooks/useOffsetCandidatesForAnalysis'
 import { ChooseRobotToRunProtocolSlideout } from '../'
+import { useNotifyService } from '../../../resources/useNotifyService'
 
 import type { State } from '../../../redux/types'
 
@@ -41,6 +42,7 @@ jest.mock('../../../redux/networking')
 jest.mock('../../../redux/config')
 jest.mock('../useCreateRunFromProtocol')
 jest.mock('../../ApplyHistoricOffsets/hooks/useOffsetCandidatesForAnalysis')
+jest.mock('../../../resources/useNotifyService')
 
 const mockUseOffsetCandidatesForAnalysis = useOffsetCandidatesForAnalysis as jest.MockedFunction<
   typeof useOffsetCandidatesForAnalysis
@@ -82,6 +84,9 @@ const mockUseTrackCreateProtocolRunEvent = useTrackCreateProtocolRunEvent as jes
 const mockGetNetworkInterfaces = getNetworkInterfaces as jest.MockedFunction<
   typeof getNetworkInterfaces
 >
+const mockUseNotifyService = useNotifyService as jest.MockedFunction<
+  typeof useNotifyService
+>
 
 const render = (
   props: React.ComponentProps<typeof ChooseRobotToRunProtocolSlideout>
@@ -125,6 +130,7 @@ describe('ChooseRobotToRunProtocolSlideout', () => {
     })
     mockUseCurrentRunId.mockReturnValue(null)
     mockUseCurrentRunStatus.mockReturnValue(null)
+    mockUseNotifyService.mockReturnValue({} as any)
     when(mockUseCreateRunFromProtocol)
       .calledWith(
         expect.any(Object),

app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabware.test.tsx

@@ -18,6 +18,7 @@ import {
 import { SetupLabwareList } from '../SetupLabwareList'
 import { SetupLabwareMap } from '../SetupLabwareMap'
 import { SetupLabware } from '..'
+import { useNotifyRunQuery } from '../../../../../resources/runs/useNotifyRunQuery'
 
 jest.mock('../SetupLabwareList')
 jest.mock('../SetupLabwareMap')
@@ -27,6 +28,7 @@ jest.mock('../../../../RunTimeControl/hooks')
 jest.mock('../../../../../redux/config')
 jest.mock('../../../hooks')
 jest.mock('../../../hooks/useLPCSuccessToast')
+jest.mock('../../../../../resources/runs/useNotifyRunQuery')
 
 const mockGetModuleTypesThatRequireExtraAttention = getModuleTypesThatRequireExtraAttention as jest.MockedFunction<
   typeof getModuleTypesThatRequireExtraAttention
@@ -58,6 +60,9 @@ const mockSetupLabwareMap = SetupLabwareMap as jest.MockedFunction<
 const mockUseLPCDisabledReason = useLPCDisabledReason as jest.MockedFunction<
   typeof useLPCDisabledReason
 >
+const mockUseNotifyRunQuery = useNotifyRunQuery as jest.MockedFunction<
+  typeof useNotifyRunQuery
+>
 const ROBOT_NAME = 'otie'
 const RUN_ID = '1'
 
@@ -110,6 +115,7 @@ describe('SetupLabware', () => {
       <div> mock setup labware list</div>
     )
     when(mockUseLPCDisabledReason).mockReturnValue(null)
+    mockUseNotifyRunQuery.mockReturnValue({} as any)
   })
 
   afterEach(() => {

app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx

@@ -23,6 +23,7 @@ import {
   getTotalVolumePerLiquidLabwarePair,
 } from '../utils'
 import { LiquidsLabwareDetailsModal } from '../LiquidsLabwareDetailsModal'
+import { useNotifyRunQuery } from '../../../../../resources/runs/useNotifyRunQuery'
 
 const MOCK_LIQUIDS_IN_LOAD_ORDER = [
   {
@@ -56,6 +57,7 @@ jest.mock('../../utils/getLocationInfoNames')
 jest.mock('../LiquidsLabwareDetailsModal')
 jest.mock('@opentrons/api-client')
 jest.mock('../../../../../redux/analytics')
+jest.mock('../../../../../resources/runs/useNotifyRunQuery')
 
 const mockUseTrackEvent = useTrackEvent as jest.MockedFunction<
   typeof useTrackEvent
@@ -78,6 +80,9 @@ const mockParseLabwareInfoByLiquidId = parseLabwareInfoByLiquidId as jest.Mocked
 const mockLiquidsLabwareDetailsModal = LiquidsLabwareDetailsModal as jest.MockedFunction<
   typeof LiquidsLabwareDetailsModal
 >
+const mockUseNotifyRunQuery = useNotifyRunQuery as jest.MockedFunction<
+  typeof useNotifyRunQuery
+>
 
 const render = (props: React.ComponentProps<typeof SetupLiquidsList>) => {
   return renderWithProviders(<SetupLiquidsList {...props} />, {
@@ -107,6 +112,7 @@ describe('SetupLiquidsList', () => {
         partialComponentPropsMatcher({ labwareId: '123', liquidId: '0' })
       )
       .mockReturnValue(<div>Mock liquids labwaqre details modal</div>)
+    mockUseNotifyRunQuery.mockReturnValue({} as any)
   })
 
   it('renders the total volume of the liquid, sample display name, and description', () => {

app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunSetup.test.tsx

@@ -42,6 +42,7 @@ import { SetupLiquids } from '../SetupLiquids'
 import { SetupModuleAndDeck } from '../SetupModuleAndDeck'
 import { EmptySetupStep } from '../EmptySetupStep'
 import { ProtocolRunSetup } from '../ProtocolRunSetup'
+import { useNotifyRunQuery } from '../../../../resources/runs/useNotifyRunQuery'
 
 jest.mock('@opentrons/api-client')
 jest.mock('../../hooks')
@@ -56,6 +57,7 @@ jest.mock('@opentrons/shared-data/js/helpers/getSimplestFlexDeckConfig')
 jest.mock('../../../../redux/config')
 jest.mock('../../../../resources/deck_configuration/utils')
 jest.mock('../../../../resources/deck_configuration/hooks')
+jest.mock('../../../../resources/runs/useNotifyRunQuery')
 
 const mockUseIsFlex = useIsFlex as jest.MockedFunction<typeof useIsFlex>
 const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jest.MockedFunction<
@@ -113,6 +115,9 @@ const mockUseDeckConfigurationCompatibility = useDeckConfigurationCompatibility
 const mockGetIsFixtureMismatch = getIsFixtureMismatch as jest.MockedFunction<
   typeof getIsFixtureMismatch
 >
+const mockUseNotifyRunQuery = useNotifyRunQuery as jest.MockedFunction<
+  typeof useNotifyRunQuery
+>
 
 const ROBOT_NAME = 'otie'
 const RUN_ID = '1'
@@ -184,6 +189,7 @@ describe('ProtocolRunSetup', () => {
       .calledWith(ROBOT_NAME, RUN_ID)
       .mockReturnValue({ missingModuleIds: [], remainingAttachedModules: [] })
     when(mockGetIsFixtureMismatch).mockReturnValue(false)
+    mockUseNotifyRunQuery.mockReturnValue({} as any)
   })
   afterEach(() => {
     resetAllWhenMocks()

app/src/organisms/Devices/ProtocolRun/__tests__/SetupPipetteCalibration.test.tsx

@@ -8,17 +8,23 @@ import { mockTipRackDefinition } from '../../../../redux/custom-labware/__fixtur
 import { useRunPipetteInfoByMount } from '../../hooks'
 import { SetupPipetteCalibrationItem } from '../SetupPipetteCalibrationItem'
 import { SetupInstrumentCalibration } from '../SetupInstrumentCalibration'
+import { useNotifyRunQuery } from '../../../../resources/runs/useNotifyRunQuery'
+
 import type { PipetteInfo } from '../../hooks'
 
 jest.mock('../../hooks')
 jest.mock('../SetupPipetteCalibrationItem')
+jest.mock('../../../../resources/runs/useNotifyRunQuery')
 
 const mockUseRunPipetteInfoByMount = useRunPipetteInfoByMount as jest.MockedFunction<
   typeof useRunPipetteInfoByMount
 >
 const mockSetupPipetteCalibrationItem = SetupPipetteCalibrationItem as jest.MockedFunction<
   typeof SetupPipetteCalibrationItem
 >
+const mockUseNotifyRunQuery = useNotifyRunQuery as jest.MockedFunction<
+  typeof useNotifyRunQuery
+>
 
 const ROBOT_NAME = 'otie'
 const RUN_ID = '1'
@@ -56,6 +62,7 @@ describe('SetupPipetteCalibration', () => {
     when(mockSetupPipetteCalibrationItem).mockReturnValue(
       <div>Mock SetupPipetteCalibrationItem</div>
     )
+    mockUseNotifyRunQuery.mockReturnValue({} as any)
   })
   afterEach(() => {
     resetAllWhenMocks()

app/src/organisms/DropTipWizard/TipsAttachedModal.tsx

@@ -11,34 +11,38 @@ import { StyledText } from '../../atoms/text'
 import { Modal } from '../../molecules/Modal'
 import { DropTipWizard } from '.'
 
-import type { PipetteData } from '@opentrons/api-client'
+import type { HostConfig, PipetteData } from '@opentrons/api-client'
 import type { PipetteModelSpecs, RobotType } from '@opentrons/shared-data'
 import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import { ApiHostProvider } from '@opentrons/react-api-client'
 
 interface TipsAttachedModalProps {
   mount: PipetteData['mount']
   instrumentModelSpecs: PipetteModelSpecs
   robotType: RobotType
+  host: HostConfig | null
   onCloseClick?: (arg0: any) => void
 }
 
 export const handleTipsAttachedModal = (
   mount: TipsAttachedModalProps['mount'],
   instrumentModelSpecs: TipsAttachedModalProps['instrumentModelSpecs'],
   robotType: TipsAttachedModalProps['robotType'],
+  host: TipsAttachedModalProps['host'],
   onCloseClick: TipsAttachedModalProps['onCloseClick']
 ): Promise<unknown> => {
   return NiceModal.show(TipsAttachedModal, {
     mount,
     instrumentModelSpecs,
     robotType,
+    host,
     onCloseClick,
   })
 }
 
 const TipsAttachedModal = NiceModal.create(
   (props: TipsAttachedModalProps): JSX.Element => {
-    const { mount, onCloseClick, instrumentModelSpecs } = props
+    const { mount, onCloseClick, host, instrumentModelSpecs } = props
     const { t } = useTranslation(['drop_tip_wizard'])
     const modal = useModal()
     const [showWizard, setShowWizard] = React.useState(false)
@@ -55,7 +59,7 @@ const TipsAttachedModal = NiceModal.create(
     const displayMountText = is96Channel ? '96-Channel' : capitalize(mount)
 
     return (
-      <>
+      <ApiHostProvider {...host} hostname={host?.hostname ?? null}>
         <Modal header={tipsAttachedHeader}>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
             <StyledText as="p">
@@ -104,7 +108,7 @@ const TipsAttachedModal = NiceModal.create(
             }}
           />
         ) : null}
-      </>
+      </ApiHostProvider>
     )
   }
 )

app/src/organisms/DropTipWizard/__tests__/TipsAttachedModal.test.tsx

@@ -9,11 +9,12 @@ import { handleTipsAttachedModal } from '../TipsAttachedModal'
 import { LEFT } from '@opentrons/shared-data'
 import { mockPipetteInfo } from '../../../redux/pipettes/__fixtures__'
 import { ROBOT_MODEL_OT3 } from '../../../redux/discovery'
-import { useNotifyCurrentMaintenanceRun } from '../../../resources/maintenance_runs/useNotifyCurrentMaintenanceRun'
+import { useNotifyService } from '../../../resources/useNotifyService'
 
 import type { PipetteModelSpecs } from '@opentrons/shared-data'
+import type { HostConfig } from '@opentrons/api-client'
 
-jest.mock('../../../resources/maintenance_runs/useNotifyCurrentMaintenanceRun')
+jest.mock('../../../resources/useNotifyService')
 
 const MOCK_ACTUAL_PIPETTE = {
   ...mockPipetteInfo.pipetteSpecs,
@@ -24,9 +25,10 @@ const MOCK_ACTUAL_PIPETTE = {
 } as PipetteModelSpecs
 
 const mockOnClose = jest.fn()
-const mockUseNotifyCurrentMaintenanceRun = useNotifyCurrentMaintenanceRun as jest.MockedFunction<
-  typeof useNotifyCurrentMaintenanceRun
+const mockUseNotifyService = useNotifyService as jest.MockedFunction<
+  typeof useNotifyService
 >
+const MOCK_HOST: HostConfig = { hostname: 'MOCK_HOST' }
 
 const render = (pipetteSpecs: PipetteModelSpecs) => {
   return renderWithProviders(
@@ -37,6 +39,7 @@ const render = (pipetteSpecs: PipetteModelSpecs) => {
             LEFT,
             pipetteSpecs,
             ROBOT_MODEL_OT3,
+            MOCK_HOST,
             mockOnClose
           )
         }
@@ -51,7 +54,7 @@ const render = (pipetteSpecs: PipetteModelSpecs) => {
 
 describe('TipsAttachedModal', () => {
   beforeEach(() => {
-    mockUseNotifyCurrentMaintenanceRun.mockReturnValue({
+    mockUseNotifyService.mockReturnValue({
       data: {
         data: {
           id: 'test',