refactor(app): Cherry-pick support notifications in secondary windows (#20040) (#20080)

Author: mjhuff

app-shell/src/notifications/__tests__/notifications.test.ts

@@ -38,7 +38,7 @@ describe('registerNotify', () => {
   it('should set browser window when connectionStore has no browser window', () => {
     registerNotify(dispatch, mainWindow as any)(MOCK_ACTION)
 
-    expect(connectionStore.setBrowserWindow).toHaveBeenCalledWith(mainWindow)
+    expect(connectionStore.addBrowserWindow).toHaveBeenCalledWith(mainWindow)
   })
 
   it('should subscribe when action type is shell:NOTIFY_SUBSCRIBE', () => {

app-shell/src/notifications/__tests__/store.test.ts

@@ -4,7 +4,7 @@ import { connectionStore } from '../store'
 
 const MOCK_IP = 'MOCK_IP'
 const MOCK_ROBOT = 'MOCK_ROBOT'
-const MOCK_WINDOW = {} as any
+const MOCK_WINDOW = { once: () => {} } as any
 const MOCK_CLIENT = { connected: true } as any
 const MOCK_TOPIC = 'MOCK_TOPIC' as any
 
@@ -13,10 +13,12 @@ describe('ConnectionStore', () => {
     connectionStore.clearStore()
   })
 
-  describe('getBrowserWindow', () => {
-    it('should return the browser window', () => {
-      connectionStore.setBrowserWindow(MOCK_WINDOW)
-      expect(connectionStore.getBrowserWindow()).toBe(MOCK_WINDOW)
+  describe('getBrowserWindows', () => {
+    it('should return a set containing the browser window', () => {
+      connectionStore.addBrowserWindow(MOCK_WINDOW)
+      const windows = connectionStore.getBrowserWindows()
+      expect(windows).toBeInstanceOf(Set)
+      expect(windows.has(MOCK_WINDOW)).toBe(true)
     })
   })
 
@@ -92,10 +94,11 @@ describe('ConnectionStore', () => {
     })
   })
 
-  describe('setBrowserWindow', () => {
-    it('should set the browser window', () => {
-      connectionStore.setBrowserWindow(MOCK_WINDOW)
-      expect(connectionStore.getBrowserWindow()).toBe(MOCK_WINDOW)
+  describe('addBrowserWindow', () => {
+    it('should add the browser window to the set', () => {
+      connectionStore.addBrowserWindow(MOCK_WINDOW)
+      const windows = connectionStore.getBrowserWindows()
+      expect(windows.has(MOCK_WINDOW)).toBe(true)
     })
   })
 
@@ -211,12 +214,12 @@ describe('ConnectionStore', () => {
   describe('clearStore', () => {
     it('should clear all connections and robot names', async () => {
       await connectionStore.setPendingConnection(MOCK_ROBOT)
-      connectionStore.setBrowserWindow(MOCK_WINDOW)
+      connectionStore.addBrowserWindow(MOCK_WINDOW)
       expect(connectionStore.getAllBrokersInStore()).not.toEqual([])
-      expect(connectionStore.getBrowserWindow()).not.toBeNull()
+      expect(connectionStore.getBrowserWindows().size).toBeGreaterThan(0)
       connectionStore.clearStore()
       expect(connectionStore.getAllBrokersInStore()).toEqual([])
-      expect(connectionStore.getBrowserWindow()).toBeNull()
+      expect(connectionStore.getBrowserWindows().size).toBe(0)
     })
   })
 

app-shell/src/notifications/deserialize.ts

@@ -28,8 +28,12 @@ export function sendDeserialized({
   message,
 }: SendToBrowserParams): void {
   try {
-    const browserWindow = connectionStore.getBrowserWindow()
-    browserWindow?.webContents.send('notify', ip, topic, message)
+    const browserWindows = connectionStore.getBrowserWindows()
+    browserWindows.forEach(window => {
+      if (!window.isDestroyed()) {
+        window.webContents.send('notify', ip, topic, message)
+      }
+    })
   } catch {} // Prevents shell erroring during app shutdown event.
 }
 

app-shell/src/notifications/index.ts

@@ -22,11 +22,9 @@ import type { RobotData } from './connect'
 
 export function registerNotify(
   dispatch: Dispatch,
-  mainWindow: BrowserWindow
+  window: BrowserWindow
 ): (action: Action) => unknown {
-  if (connectionStore.getBrowserWindow() == null) {
-    connectionStore.setBrowserWindow(mainWindow)
-  }
+  connectionStore.addBrowserWindow(window)
 
   return function handleAction(action: Action) {
     switch (action.type) {

app-shell/src/notifications/store.ts

@@ -22,12 +22,20 @@ class ConnectionStore {
 
   private robotNamesByIP: Record<string, string> = {}
 
-  private browserWindow: BrowserWindow | null = null
+  private readonly browserWindows = new Set<BrowserWindow>()
 
   private readonly knownPortBlockedIPs = new Set<string>()
 
-  public getBrowserWindow(): BrowserWindow | null {
-    return this.browserWindow
+  public getBrowserWindows(): Set<BrowserWindow> {
+    return this.browserWindows
+  }
+
+  public addBrowserWindow(window: BrowserWindow): void {
+    this.browserWindows.add(window)
+
+    window.once('closed', () => {
+      this.browserWindows.delete(window)
+    })
   }
 
   public getAllBrokersInStore(): string[] {
@@ -65,10 +73,6 @@ class ConnectionStore {
     return this.robotNamesByIP[ip] ?? null
   }
 
-  public setBrowserWindow(window: BrowserWindow): void {
-    this.browserWindow = window
-  }
-
   public setPendingConnection(robotName: string): Promise<void> {
     return new Promise((resolve, reject) => {
       if (!this.isConnectingToBroker(robotName)) {
@@ -194,7 +198,7 @@ class ConnectionStore {
   public clearStore(): void {
     this.hostsByRobotName = {}
     this.robotNamesByIP = {}
-    this.browserWindow = null
+    this.browserWindows.clear()
   }
 
   public isConnectedToBroker(robotName: string): boolean {

app/src/pages/Desktop/LivestreamViewer/index.tsx

@@ -2,14 +2,13 @@ import { useTranslation } from 'react-i18next'
 import { useSearchParams } from 'react-router-dom'
 
 import { Chip } from '@opentrons/components'
-// eslint-disable-next-line no-restricted-imports
-import { useRunQuery } from '@opentrons/react-api-client'
 
 import { useHlsVideo } from '/app/pages/Desktop/LivestreamViewer/hooks/useHlsVideo'
 import {
   LivestreamInfoScreen,
   useLivestreamInfoScreen,
 } from '/app/pages/Desktop/LivestreamViewer/LivestreamInfoScreen'
+import { useNotifyRunQuery } from '/app/resources/runs'
 
 import styles from './livestream.module.css'
 
@@ -18,8 +17,7 @@ const RUN_POLLING_INTERVAL_MS = 5000
 export function LivestreamViewer(): JSX.Element {
   const [searchParams] = useSearchParams()
   const runId = searchParams.get('runId') ?? ''
-  // TODO(jh, 11-04-25): Notifications are not working in secondary windows. Investigate further.
-  const { data: runData, isLoading: isRunLoading } = useRunQuery(runId, {
+  const { data: runData, isLoading: isRunLoading } = useNotifyRunQuery(runId, {
     refetchInterval: RUN_POLLING_INTERVAL_MS,
   })
   const runStatus = runData?.data.status ?? null