internal: (studio) initialize cloud studio asynchronously (#31469)

Co-authored-by: Ryan Manuel <[email protected]>
Co-authored-by: Matt Schile <[email protected]>

Author: 3 people

cli/types/cypress.d.ts

@@ -3330,7 +3330,6 @@ declare namespace Cypress {
     spec: Cypress['spec'] | null
     specs: Array<Cypress['spec']>
     isDefaultProtocolEnabled: boolean
-    isStudioProtocolEnabled: boolean
     hideCommandLog: boolean
     hideRunnerUi: boolean
   }

packages/app/cypress/e2e/studio/studio.cy.ts

@@ -56,11 +56,52 @@ describe('studio functionality', () => {
 
       cy.window().then((win) => {
         expect(win.Cypress.config('isDefaultProtocolEnabled')).to.be.false
-        expect(win.Cypress.config('isStudioProtocolEnabled')).to.be.true
         expect(win.Cypress.state('isProtocolEnabled')).to.be.true
       })
     })
 
+    it('loads the studio UI correctly when studio bundle is taking too long to load', () => {
+      loadProjectAndRunSpec({ enableCloudStudio: false })
+
+      cy.window().then(() => {
+        cy.withCtx((ctx) => {
+          // Mock the studioLifecycleManager.getStudio method to return a hanging promise
+          if (ctx.coreData.studioLifecycleManager) {
+            const neverResolvingPromise = new Promise<null>(() => {})
+
+            ctx.coreData.studioLifecycleManager.getStudio = () => neverResolvingPromise
+            ctx.coreData.studioLifecycleManager.isStudioReady = () => false
+          }
+        })
+      })
+
+      cy.contains('visits a basic html page')
+      .closest('.runnable-wrapper')
+      .findByTestId('launch-studio')
+      .click()
+
+      cy.waitForSpecToFinish()
+
+      // Verify the cloud studio panel is not present
+      cy.findByTestId('studio-panel').should('not.exist')
+
+      cy.get('[data-cy="loading-studio-panel"]').should('not.exist')
+
+      cy.get('[data-cy="hook-name-studio commands"]').should('exist')
+
+      cy.getAutIframe().within(() => {
+        cy.get('#increment').realClick()
+      })
+
+      cy.findByTestId('hook-name-studio commands').closest('.hook-studio').within(() => {
+        cy.get('.command').should('have.length', 2)
+        cy.get('.command-name-get').should('contain.text', '#increment')
+        cy.get('.command-name-click').should('contain.text', 'click')
+      })
+
+      cy.get('button').contains('Save Commands').should('not.be.disabled')
+    })
+
     it('does not display Studio button when not using cloud studio', () => {
       loadProjectAndRunSpec({ })
 

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -248,11 +248,11 @@ const studioStatus = computed(() => {
 })
 
 const shouldShowStudioButton = computed(() => {
-  return !!props.gql.studio && !studioStore.isOpen
+  return !!props.gql.studio && studioStatus.value === 'ENABLED' && !studioStore.isOpen
 })
 
 const shouldShowStudioPanel = computed(() => {
-  return studioStatus.value === 'INITIALIZED' && (studioStore.isLoading || studioStore.isActive)
+  return studioStatus.value === 'ENABLED' && (studioStore.isLoading || studioStore.isActive)
 })
 
 const hideCommandLog = runnerUiStore.hideCommandLog

packages/app/src/runner/event-manager.ts

@@ -449,10 +449,20 @@ export class EventManager {
     this.studioStore.setup(config)
 
     const isDefaultProtocolEnabled = Cypress.config('isDefaultProtocolEnabled')
-    const isStudioProtocolEnabled = Cypress.config('isStudioProtocolEnabled')
+
     const isStudioInScope = this.studioStore.isActive || this.studioStore.isLoading
 
-    Cypress.state('isProtocolEnabled', isDefaultProtocolEnabled || (isStudioProtocolEnabled && isStudioInScope))
+    if (isStudioInScope && !isDefaultProtocolEnabled) {
+      await new Promise<void>((resolve) => {
+        this.ws.emit('studio:protocol:enabled', ({ studioProtocolEnabled }) => {
+          Cypress.state('isProtocolEnabled', studioProtocolEnabled)
+
+          resolve()
+        })
+      })
+    } else {
+      Cypress.state('isProtocolEnabled', isDefaultProtocolEnabled)
+    }
 
     this._addListeners()
   }

packages/config/__snapshots__/index.spec.ts.js

@@ -105,7 +105,6 @@ exports['config/src/index .getDefaultValues returns list of public config keys 1
   'socketIoCookie': '__socket',
   'socketIoRoute': '/__socket',
   'isDefaultProtocolEnabled': false,
-  'isStudioProtocolEnabled': false,
   'hideCommandLog': false,
   'hideRunnerUi': false,
 }
@@ -197,7 +196,6 @@ exports['config/src/index .getDefaultValues returns list of public config keys f
   'socketIoCookie': '__socket',
   'socketIoRoute': '/__socket',
   'isDefaultProtocolEnabled': false,
-  'isStudioProtocolEnabled': false,
   'hideCommandLog': false,
   'hideRunnerUi': false,
 }

packages/config/src/options.ts

@@ -593,11 +593,6 @@ const runtimeOptions: Array<RuntimeConfigOption> = [
     defaultValue: false,
     validation: validate.isBoolean,
     isInternal: true,
-  }, {
-    name: 'isStudioProtocolEnabled',
-    defaultValue: false,
-    validation: validate.isBoolean,
-    isInternal: true,
   }, {
     name: 'hideCommandLog',
     defaultValue: false,

packages/data-context/src/data/coreDataShape.ts

@@ -1,4 +1,4 @@
-import { FoundBrowser, Editor, AllowedState, AllModeOptions, TestingType, BrowserStatus, PACKAGE_MANAGERS, AuthStateName, MIGRATION_STEPS, MigrationStep, StudioManagerShape } from '@packages/types'
+import { FoundBrowser, Editor, AllowedState, AllModeOptions, TestingType, BrowserStatus, PACKAGE_MANAGERS, AuthStateName, MIGRATION_STEPS, MigrationStep, StudioLifecycleManagerShape } from '@packages/types'
 import { WizardBundler, CT_FRAMEWORKS, resolveComponentFrameworkDefinition, ErroredFramework } from '@packages/scaffold-config'
 import type { NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
 // tslint:disable-next-line no-implicit-dependencies - electron dep needs to be defined
@@ -164,7 +164,7 @@ export interface CoreDataShape {
   cloudProject: CloudDataShape
   eventCollectorSource: EventCollectorSource | null
   didBrowserPreviouslyHaveUnexpectedExit: boolean
-  studio: StudioManagerShape | null
+  studioLifecycleManager?: StudioLifecycleManagerShape
 }
 
 /**
@@ -246,7 +246,7 @@ export function makeCoreData (modeOptions: Partial<AllModeOptions> = {}): CoreDa
     },
     eventCollectorSource: null,
     didBrowserPreviouslyHaveUnexpectedExit: false,
-    studio: null,
+    studioLifecycleManager: undefined,
   }
 
   async function machineId (): Promise<string | null> {

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

@@ -57,7 +57,6 @@ export class HtmlDataSource {
       'namespace',
       'socketIoRoute',
       'isDefaultProtocolEnabled',
-      'isStudioProtocolEnabled',
       'hideCommandLog',
       'hideRunnerUi',
     ]

packages/driver/src/util/config.ts

@@ -25,8 +25,7 @@ const omitConfigReadOnlyDifferences = (objectLikeConfig: Cypress.ObjectLike) =>
       return
     }
 
-    if ((overrideLevels === 'never' && configKey !== 'isDefaultProtocolEnabled') ||
-      (overrideLevels === 'never' && configKey !== 'isStudioProtocolEnabled')) {
+    if ((overrideLevels === 'never' && configKey !== 'isDefaultProtocolEnabled')) {
       delete objectLikeConfig[configKey]
     }
   })

packages/driver/types/internal-types.d.ts

@@ -80,7 +80,6 @@ declare namespace Cypress {
 
   interface TestConfigOverrides extends Cypress.TestConfigOverrides {
     isDefaultProtocolEnabled?: boolean
-    isStudioProtocolEnabled?: boolean
   }
 
   interface ResolvedConfigOptions {

packages/graphql/schemas/schema.graphql

@@ -2380,6 +2380,7 @@ type Studio {
 }
 
 enum StudioStatusType {
+  ENABLED
   INITIALIZED
   IN_ERROR
   NOT_INITIALIZED

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

@@ -12,6 +12,7 @@ import { ErrorWrapper } from './gql-ErrorWrapper'
 import { CachedUser } from './gql-CachedUser'
 import { Cohort } from './gql-Cohorts'
 import { Studio } from './gql-Studio'
+import type { StudioStatusType } from '@packages/data-context/src/gen/graphcache-config.gen'
 
 export const Query = objectType({
   name: 'Query',
@@ -105,7 +106,17 @@ export const Query = objectType({
     t.field('studio', {
       type: Studio,
       description: 'Data pertaining to studio and the studio manager that is loaded from the cloud',
-      resolve: (source, args, ctx) => ctx.coreData.studio,
+      resolve: async (source, args, ctx) => {
+        const isStudioReady = ctx.coreData.studioLifecycleManager?.isStudioReady()
+
+        if (!isStudioReady) {
+          return { status: 'INITIALIZED' as StudioStatusType }
+        }
+
+        const studio = await ctx.coreData.studioLifecycleManager?.getStudio()
+
+        return studio ? { status: studio.status } : null
+      },
     })
 
     t.nonNull.field('localSettings', {

packages/server/lib/StudioLifecycleManager.ts

@@ -0,0 +1,157 @@
+import type { StudioManager } from './cloud/studio'
+import { ProtocolManager } from './cloud/protocol'
+import { getAndInitializeStudioManager } from './cloud/api/studio/get_and_initialize_studio_manager'
+import Debug from 'debug'
+import type { CloudDataSource } from '@packages/data-context/src/sources'
+import type { Cfg } from './project-base'
+import _ from 'lodash'
+import type { DataContext } from '@packages/data-context'
+import api from './cloud/api'
+import { reportStudioError } from './cloud/api/studio/report_studio_error'
+import { CloudRequest } from './cloud/api/cloud_request'
+import { isRetryableError } from './cloud/network/is_retryable_error'
+import { asyncRetry } from './util/async_retry'
+const debug = Debug('cypress:server:studio-lifecycle-manager')
+const routes = require('./cloud/routes')
+
+export class StudioLifecycleManager {
+  private studioManagerPromise?: Promise<StudioManager | null>
+  private studioManager?: StudioManager
+  private listeners: ((studioManager: StudioManager) => void)[] = []
+  /**
+   * Initialize the studio manager and possibly set up protocol.
+   * Also registers this instance in the data context.
+   * @param projectId The project ID
+   * @param cloudDataSource The cloud data source
+   * @param cfg The project configuration
+   * @param debugData Debug data for the configuration
+   * @param ctx Data context to register this instance with
+   */
+  initializeStudioManager ({
+    projectId,
+    cloudDataSource,
+    cfg,
+    debugData,
+    ctx,
+  }: {
+    projectId?: string
+    cloudDataSource: CloudDataSource
+    cfg: Cfg
+    debugData: any
+    ctx: DataContext
+  }): void {
+    debug('Initializing studio manager')
+
+    const studioManagerPromise = getAndInitializeStudioManager({
+      projectId,
+      cloudDataSource,
+    }).then(async (studioManager) => {
+      if (studioManager.status === 'ENABLED') {
+        debug('Cloud studio is enabled - setting up protocol')
+        const protocolManager = new ProtocolManager()
+        const protocolUrl = routes.apiRoutes.captureProtocolCurrent()
+        const script = await api.getCaptureProtocolScript(protocolUrl)
+
+        await protocolManager.prepareProtocol(script, {
+          runId: 'studio',
+          projectId: cfg.projectId,
+          testingType: cfg.testingType,
+          cloudApi: {
+            url: routes.apiUrl,
+            retryWithBackoff: api.retryWithBackoff,
+            requestPromise: api.rp,
+          },
+          projectConfig: _.pick(cfg, ['devServerPublicPathRoute', 'port', 'proxyUrl', 'namespace']),
+          mountVersion: api.runnerCapabilities.protocolMountVersion,
+          debugData,
+          mode: 'studio',
+        })
+
+        studioManager.protocolManager = protocolManager
+      } else {
+        debug('Cloud studio is not enabled - skipping protocol setup')
+      }
+
+      debug('Studio is ready')
+      this.studioManager = studioManager
+      this.callRegisteredListeners()
+
+      return studioManager
+    }).catch(async (error) => {
+      debug('Error during studio manager setup: %o', error)
+
+      const cloudEnv = (process.env.CYPRESS_INTERNAL_ENV || 'production') as 'development' | 'staging' | 'production'
+      const cloudUrl = ctx.cloud.getCloudUrl(cloudEnv)
+      const cloudHeaders = await ctx.cloud.additionalHeaders()
+
+      reportStudioError({
+        cloudApi: {
+          cloudUrl,
+          cloudHeaders,
+          CloudRequest,
+          isRetryableError,
+          asyncRetry,
+        },
+        studioHash: projectId,
+        projectSlug: cfg.projectId,
+        error,
+        studioMethod: 'initializeStudioManager',
+        studioMethodArgs: [],
+      })
+
+      // Clean up any registered listeners
+      this.listeners = []
+
+      return null
+    })
+
+    this.studioManagerPromise = studioManagerPromise
+
+    // Register this instance in the data context
+    ctx.update((data) => {
+      data.studioLifecycleManager = this
+    })
+  }
+
+  isStudioReady (): boolean {
+    return !!this.studioManager
+  }
+
+  async getStudio () {
+    if (!this.studioManagerPromise) {
+      throw new Error('Studio manager has not been initialized')
+    }
+
+    return await this.studioManagerPromise
+  }
+
+  private callRegisteredListeners () {
+    if (!this.studioManager) {
+      throw new Error('Studio manager has not been initialized')
+    }
+
+    const studioManager = this.studioManager
+
+    debug('Calling all studio ready listeners')
+    this.listeners.forEach((listener) => {
+      listener(studioManager)
+    })
+
+    this.listeners = []
+  }
+
+  /**
+   * Register a listener that will be called when the studio is ready
+   * @param listener Function to call when studio is ready
+   */
+  registerStudioReadyListener (listener: (studioManager: StudioManager) => void): void {
+    // if there is already a studio manager, call the listener immediately
+    if (this.studioManager) {
+      debug('Studio ready - calling listener immediately')
+      listener(this.studioManager)
+    } else {
+      debug('Studio not ready - registering studio ready listener')
+      this.listeners.push(listener)
+    }
+  }
+}

packages/server/lib/cloud/api/studio/get_and_initialize_studio_manager.ts

@@ -146,6 +146,7 @@ export const getAndInitializeStudioManager = async ({ projectId, cloudDataSource
         isRetryableError,
         asyncRetry,
       },
+      shouldEnableStudio: !!(process.env.CYPRESS_ENABLE_CLOUD_STUDIO || process.env.CYPRESS_LOCAL_STUDIO_PATH),
     })
 
     return studioManager