refactor: convert browser status to gql subscription (#20591)

packages/data-context/src/actions/DataEmitterActions.ts

@@ -21,6 +21,10 @@ abstract class DataEmitterEvents {
     this._emit('devChange')
   }
 
+  browserStatusChange () {
+    this._emit('browserStatusChange')
+  }
+
   private _emit <Evt extends keyof DataEmitterEvents> (evt: Evt, ...args: Parameters<DataEmitterEvents[Evt]>) {
     this.pub.emit(evt, ...args)
   }

packages/data-context/src/sources/BrowserDataSource.ts

@@ -84,7 +84,10 @@ export class BrowserDataSource {
   }
 
   setBrowserStatus (browserStatus: BrowserStatus) {
-    this.ctx.coreData.app.browserStatus = browserStatus
-    this.ctx.emitter.toLaunchpad()
+    this.ctx.update((d) => {
+      d.app.browserStatus = browserStatus
+    })
+
+    this.ctx.emitter.browserStatusChange()
   }
 }

packages/graphql/schemas/schema.graphql

@@ -1249,6 +1249,9 @@ type Subscription {
   """Triggered when the auth state changes"""
   authChange: Query
 
+  """Status of the currently opened browser"""
+  browserStatusChange: CurrentProject
+
   """Issued for internal development changes"""
   devChange: DevState
 }

packages/graphql/src/schemaTypes/objectTypes/gql-Subscription.ts

@@ -1,4 +1,5 @@
 import { subscriptionType } from 'nexus'
+import { CurrentProject } from '.'
 import { DevState } from './gql-DevState'
 import { Query } from './gql-Query'
 
@@ -17,5 +18,12 @@ export const Subscription = subscriptionType({
       subscribe: (source, args, ctx) => ctx.emitter.subscribeTo('devChange'),
       resolve: (source, args, ctx) => ctx.coreData.dev,
     })
+
+    t.field('browserStatusChange', {
+      type: CurrentProject,
+      description: 'Status of the currently opened browser',
+      subscribe: (source, args, ctx) => ctx.emitter.subscribeTo('browserStatusChange'),
+      resolve: (source, args, ctx) => ctx.lifecycleManager,
+    })
   },
 })

packages/launchpad/cypress/e2e/choose-a-browser.cy.ts

@@ -135,6 +135,12 @@ describe('Choose a Browser Page', () => {
       })
 
       cy.contains('button', 'Running Chrome')
+
+      cy.withCtx((ctx) => {
+        ctx.browser.setBrowserStatus('closed')
+      })
+
+      cy.contains('button', 'Start E2E Testing in Chrome')
     })
 
     it('performs mutation to change selected browser when browser item is clicked', () => {
@@ -179,16 +185,14 @@ describe('Choose a Browser Page', () => {
     })
 
     it('performs mutation to close browser', () => {
-      cy.intercept('query-OpenBrowser', (req) => {
-        req.on('before:response', (res) => {
-          res.body.data.currentProject.browserStatus = 'open'
-        })
-      })
-
       cy.openProject('launchpad', ['--e2e'])
 
       cy.visitLaunchpad()
 
+      cy.withCtx((ctx) => {
+        ctx.browser.setBrowserStatus('open')
+      })
+
       cy.contains('button', 'Running Chrome')
 
       cy.intercept('mutation-OpenBrowser_CloseBrowser').as('closeBrowser')
@@ -197,16 +201,14 @@ describe('Choose a Browser Page', () => {
     })
 
     it('performs mutation to focus open browser when focus button is pressed', () => {
-      cy.intercept('query-OpenBrowser', (req) => {
-        req.on('before:response', (res) => {
-          res.body.data.currentProject.browserStatus = 'open'
-        })
-      })
-
       cy.openProject('launchpad', ['--e2e'])
 
       cy.visitLaunchpad()
 
+      cy.withCtx((ctx) => {
+        ctx.browser.setBrowserStatus('open')
+      })
+
       cy.get('h1').should('contain', 'Choose a Browser')
 
       cy.contains('button', 'Running Chrome').as('launchButton')

packages/launchpad/src/setup/OpenBrowserList.vue

@@ -153,7 +153,7 @@
 import { useI18n } from '@cy/i18n'
 import Button from '@packages/frontend-shared/src/components/Button.vue'
 import { computed } from 'vue'
-import { useMutation, gql } from '@urql/vue'
+import { useMutation, gql, useSubscription } from '@urql/vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import TestingTypeComponentIcon from '~icons/cy/testing-type-component_x16'
 import TestingTypeE2EIcon from '~icons/cy/testing-type-e2e_x16'
@@ -166,7 +166,7 @@ import UnsupportedBrowserTooltip from '@packages/frontend-shared/src/gql-compone
 import sortBrowsers from '@packages/frontend-shared/src/utils/sortBrowsers'
 
 import type { OpenBrowserListFragment } from '../generated/graphql'
-import { OpenBrowserList_SetBrowserDocument } from '../generated/graphql'
+import { OpenBrowserList_SetBrowserDocument, OpenBrowserList_BrowserStatusChangeDocument } from '../generated/graphql'
 
 gql`
 mutation OpenBrowserList_SetBrowser($id: ID!) {
@@ -203,8 +203,17 @@ fragment OpenBrowserList on CurrentProject {
   currentTestingType
   browserStatus
 }
+
+subscription OpenBrowserList_browserStatusChange {
+  browserStatusChange {
+    id
+    browserStatus
+  }
+}
 `
 
+useSubscription({ query: OpenBrowserList_BrowserStatusChangeDocument })
+
 const props = defineProps<{
   gql: OpenBrowserListFragment
 }>()