chore: add logic to dynamically load studio functionality

.circleci/workflows.yml

@@ -38,6 +38,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
+        - 'ryanm/chore/add_internal_studio'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -48,7 +49,7 @@ macWorkflowFilters: &darwin-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'chore/browser_spike', << pipeline.git.branch >> ]
+      - equal: [ 'ryanm/chore/add_internal_studio', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -59,7 +60,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'chore/browser_spike', << pipeline.git.branch >> ]
+      - equal: [ 'ryanm/chore/add_internal_studio', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -82,7 +83,7 @@ windowsWorkflowFilters: &windows-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal: [ 'chore/browser_spike', << pipeline.git.branch >> ]
+      - equal: [ 'ryanm/chore/add_internal_studio', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -158,7 +159,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "ryanm/chore/add_internal_studio" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

guides/studio-development.md

@@ -0,0 +1,11 @@
+# Studio Development
+
+In production, the code used to facilitate Studio functionality will be retrieved from the Cloud. However, in order to develop locally, developers will:
+
+- Clone the `cypress-services` repo
+  - Run `yarn`
+  - Run `yarn watch` in `packages/app-studio`
+- Set `CYPRESS_LOCAL_STUDIO_PATH` to the path to the `cypress-services/packages/app-studio/dist/development` directory
+- Clone the `cypress` repo
+  - Run `yarn`
+  - Run `yarn cypress:open`

npm/puppeteer/package.json

@@ -24,7 +24,7 @@
     "@types/node": "^20.16.0",
     "chai-as-promised": "^7.1.1",
     "chokidar": "^3.5.3",
-    "express": "4.19.2",
+    "express": "4.21.0",
     "mocha": "^9.2.2",
     "rimraf": "^5.0.10",
     "semantic-release": "22.0.12",

packages/app/package.json

@@ -33,6 +33,7 @@
     "@headlessui/vue": "1.4.0",
     "@iconify-json/mdi": "1.1.63",
     "@intlify/unplugin-vue-i18n": "4.0.0",
+    "@module-federation/vite": "^1.2.2",
     "@packages/data-context": "0.0.0-development",
     "@packages/frontend-shared": "0.0.0-development",
     "@packages/graphql": "0.0.0-development",

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { computed, onBeforeUnmount, onMounted, watchEffect } from 'vue'
 import { REPORTER_ID, RUNNER_ID } from './utils'
 import InlineSpecList from '../specs/InlineSpecList.vue'
 import { getAutIframeModel, getEventManager } from '.'
@@ -153,6 +153,14 @@ fragment SpecRunner_Preferences on Query {
 }
 `
 
+gql`
+fragment SpecRunner_Studio on Query {
+  studio {
+    status
+  }
+}
+`
+
 gql`
 fragment SpecRunner_Config on CurrentProject {
   id
@@ -171,6 +179,7 @@ fragment SpecRunner on Query {
   }
   ...ChooseExternalEditor
   ...SpecRunner_Preferences
+  ...SpecRunner_Studio
 }
 `
 
@@ -215,6 +224,10 @@ const isSpecsListOpenPreferences = computed(() => {
   return props.gql.localSettings.preferences.isSpecsListOpen ?? false
 })
 
+const studioStatus = computed(() => {
+  return props.gql.studio?.status
+})
+
 const hideCommandLog = runnerUiStore.hideCommandLog
 
 // watch active spec, and re-run if it changes!
@@ -286,6 +299,19 @@ function openFile () {
     },
   })
 }
+
+watchEffect(() => {
+  if (studioStatus.value === 'INITIALIZED') {
+    import('app-studio').then(({ mountTestGenerationPanel }) => {
+      // eslint-disable-next-line no-console
+      console.log('Studio loaded', mountTestGenerationPanel)
+    }).catch((err) => {
+      // eslint-disable-next-line no-console
+      console.error('Error loading Studio', err)
+    })
+  }
+})
+
 onMounted(() => {
   const eventManager = getEventManager()
 

packages/app/src/studio/index.d.ts

@@ -0,0 +1,7 @@
+declare module 'app-studio' {
+  export const mountTestGenerationPanel = (
+    reactInstance: any,
+    reactDOMInstance: any,
+    container: HTMLElement,
+  ) => {}
+}

packages/app/vite.config.mjs

@@ -4,8 +4,9 @@ import Pages from 'vite-plugin-pages'
 import Copy from 'rollup-plugin-copy'
 import Legacy from '@vitejs/plugin-legacy'
 import { resolve } from 'path'
+import { federation } from '@module-federation/vite'
 
-export default makeConfig({
+const config = makeConfig({
   optimizeDeps: {
     include: [
       'javascript-time-ago',
@@ -20,13 +21,13 @@ export default makeConfig({
       '@popperjs/core',
       '@opentelemetry/*',
     ],
-    esbuildOptions: { 
-      target: "ES2022" 
-    }
+    esbuildOptions: {
+      target: 'ES2022',
+    },
   },
   build: {
-    target: "ES2022"
-  }
+    target: 'ES2022',
+  },
 }, {
   plugins: [
     Layouts(),
@@ -44,3 +45,22 @@ export default makeConfig({
     }),
   ],
 })
+
+// The module federation needs to be added to the plugins array first
+config.plugins.unshift(
+  ...federation({
+    name: 'host',
+    remotes: {
+      'app-studio': {
+        type: 'module',
+        name: 'app-studio',
+        entryGlobalName: 'app-studio',
+        entry: '/__cypress-studio/app-studio.js',
+        shareScope: 'default',
+      },
+    },
+    filename: 'assets/app-studio.js',
+  }),
+)
+
+export default config

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

@@ -1,4 +1,4 @@
-import { FoundBrowser, Editor, AllowedState, AllModeOptions, TestingType, BrowserStatus, PACKAGE_MANAGERS, AuthStateName, MIGRATION_STEPS, MigrationStep, BannerState } from '@packages/types'
+import { FoundBrowser, Editor, AllowedState, AllModeOptions, TestingType, BrowserStatus, PACKAGE_MANAGERS, AuthStateName, MIGRATION_STEPS, MigrationStep, BannerState, StudioManagerShape } 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
@@ -173,6 +173,7 @@ export interface CoreDataShape {
   cloudProject: CloudDataShape
   eventCollectorSource: EventCollectorSource | null
   didBrowserPreviouslyHaveUnexpectedExit: boolean
+  studio: StudioManagerShape | null
 }
 
 /**
@@ -254,6 +255,7 @@ export function makeCoreData (modeOptions: Partial<AllModeOptions> = {}): CoreDa
     },
     eventCollectorSource: null,
     didBrowserPreviouslyHaveUnexpectedExit: false,
+    studio: null,
   }
 
   async function machineId (): Promise<string | null> {

packages/driver/package.json

@@ -61,7 +61,7 @@
     "error-stack-parser": "2.0.6",
     "errorhandler": "1.5.1",
     "eventemitter2": "6.4.7",
-    "express": "4.19.2",
+    "express": "4.21.0",
     "is-valid-domain": "0.0.20",
     "is-valid-hostname": "1.0.1",
     "jimp": "0.22.12",

packages/frontend-shared/vite.config.mjs

@@ -116,7 +116,6 @@ export const makeConfig = (config = {}, plugins = {}) => {
     css: {
       preprocessorOptions: {
         scss: {
-          // @ts-expect-error
           additionalData: `@use "file:///${path.resolve(__dirname, '../reporter/src/lib/variables.scss').replaceAll('\\', '/')}" as *;\n`,
         },
       },

packages/graphql/schemas/schema.graphql

@@ -2071,6 +2071,9 @@ type Query {
   """The files that have just been scaffolded"""
   scaffoldedFiles: [ScaffoldedFile!]
 
+  """Studio data"""
+  studio: Studio
+
   """Previous versions of cypress and their release date"""
   versions: VersionData
 
@@ -2370,6 +2373,18 @@ enum SpecType {
   integration
 }
 
+"""The studio manager for the app"""
+type Studio {
+  """The current status of the studio"""
+  status: StudioStatusType
+}
+
+enum StudioStatusType {
+  INITIALIZED
+  IN_ERROR
+  NOT_INITIALIZED
+}
+
 type Subscription {
   """Triggered when the auth state changes"""
   authChange: Query

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

@@ -11,6 +11,7 @@ import { Wizard } from './gql-Wizard'
 import { ErrorWrapper } from './gql-ErrorWrapper'
 import { CachedUser } from './gql-CachedUser'
 import { Cohort } from './gql-Cohorts'
+import { Studio } from './gql-Studio'
 
 export const Query = objectType({
   name: 'Query',
@@ -101,6 +102,12 @@ export const Query = objectType({
       resolve: (source, args, ctx) => ctx.coreData.authState,
     })
 
+    t.field('studio', {
+      type: Studio,
+      description: 'Studio data',
+      resolve: (source, args, ctx) => ctx.coreData.studio,
+    })
+
     t.nonNull.field('localSettings', {
       type: LocalSettings,
       description: 'local settings on a device-by-device basis',

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

@@ -0,0 +1,18 @@
+import { STUDIO_STATUSES } from '@packages/types'
+import { enumType, objectType } from 'nexus'
+
+export const StudioStatusTypeEnum = enumType({
+  name: 'StudioStatusType',
+  members: STUDIO_STATUSES,
+})
+
+export const Studio = objectType({
+  name: 'Studio',
+  description: 'The studio manager for the app',
+  definition (t) {
+    t.field('status', {
+      type: StudioStatusTypeEnum,
+      description: 'The current status of the studio',
+    })
+  },
+})

packages/graphql/src/schemaTypes/objectTypes/index.ts

@@ -28,6 +28,7 @@ export * from './gql-RunSpecError'
 export * from './gql-RunSpecResponse'
 export * from './gql-ScaffoldedFile'
 export * from './gql-Spec'
+export * from './gql-Studio'
 export * from './gql-Subscription'
 export * from './gql-TestingTypeInfo'
 export * from './gql-Version'

packages/network/package.json

@@ -34,7 +34,7 @@
     "@packages/socket": "0.0.0-development",
     "@packages/ts": "0.0.0-development",
     "@types/concat-stream": "1.6.0",
-    "express": "4.19.2",
+    "express": "4.21.0",
     "mocha": "6.2.2",
     "sinon": "7.3.1",
     "sinon-chai": "3.3.0",

packages/proxy/package.json

@@ -45,7 +45,7 @@
     "@types/express": "4.17.2",
     "@types/supertest": "2.0.10",
     "devtools-protocol": "0.0.1413303",
-    "express": "4.19.2",
+    "express": "4.21.0",
     "supertest": "6.0.1",
     "typescript": "~5.4.5"
   },