chore: add logic to dynamically load studio functionality #31033

ryanthemanuel · 2025-02-06T04:51:33Z

Closes #10122

Additional details

This PR lays the groundwork for being able to dynamically load studio functionality. There are no current functional changes with this PR (which is why it's a chore), but this work will eventually drive updates to the Studio UI, bug fixes for Studio, and AI recommendations for how to modify specs.

This PR:

Sets up environment variables (CYPRESS_ENABLE_CLOUD_STUDIO and CYPRESS_LOCAL_APP_STUDIO_PATH) as development placeholders to enable logic that pulls a bundle from the cloud that contains both frontend and backend code that will eventually drive studio functionality
- The bundle is delivered in a similar manner to protocol code
- The bundle is signed and verified to ensure no tampering
When the bundle is downloaded, it is extracted to a temp directory where the server logic is incorporated into the rest of the existing app server
- This server logic adds new routes that can then handle front end requests for studio code that will drive the UI
- These front end files are set up using module federation to allow us to import as normal dependencies and then vite figures out what routes are necessary to load the assets

Steps to test

The best way to test this is to:

Clone the cypress-services repo
- Run yarn
- Run yarn watch in packages/app-studio
Set CYPRESS_LOCAL_APP_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

Then you can open a specific project and should be able to see the console log of Studio loaded as an indication that everything is synced up properly.

How has the user experience changed?

PR Tasks

Have tests been added/updated?
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?

cypress · 2025-02-06T05:34:15Z

cypress Run #60366

Run Properties: Passed #60366 • 29f089cf91: Merge branch 'develop' into ryanm/chore/add_internal_studio

Project	`cypress`
Branch Review	`ryanm/chore/add_internal_studio`
Run status	`Passed #60366`
Run duration	`15m 46s`
Commit	`29f089cf91: Merge branch 'develop' into ryanm/chore/add_internal_studio`
Committer	`Ryan Manuel`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`1`
Pending	`28`
Skipped	`0`
Passing	`762`
View all changes introduced in this branch ↗︎

UI Coverage `62.5%`
Untested elements	`31`
Tested elements	`55`

Accessibility `96.23%`
Failed rules	`0 critical` `4 serious` `1 moderate` `0 minor`
Failed elements	`194`

guides/studio-development.md

Co-authored-by: Jennifer Shehane <[email protected]>

packages/server/lib/cloud/api/get_app_studio.ts

packages/server/lib/cloud/studio.ts

packages/server/lib/routes.ts

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

packages/server/lib/cloud/api/get_app_studio.ts

AtofStryker · 2025-02-11T22:38:00Z

packages/server/lib/cloud/api/get_app_studio.ts

+    await appStudio.setup({ script, studioPath, studioHash })
+
+    return appStudio
+  } catch (error) {


should we type the error here since anything can throw and make sure we pass the right type into createInErrorManager?

Our ts rules require any or unknown so I'm going to specify any.

Thoughts on this pattern? 634109a (#31033)

AtofStryker · 2025-02-11T22:39:18Z

packages/server/lib/cloud/studio.ts

+    return manager
+  }
+
+  async setup ({ script, studioPath, studioHash }: { script: string, studioPath: string, studioHash?: string }): Promise<void> {


Suggested change

async setup ({ script, studioPath, studioHash }: { script: string, studioPath: string, studioHash?: string }): Promise<void> {

setup ({ script, studioPath, studioHash }: { script: string, studioPath: string, studioHash?: string }): Promise<void> {

Fixed: 634109a (#31033)

AtofStryker · 2025-02-11T22:41:10Z

packages/server/lib/cloud/studio.ts

+
+    try {
+      return this._appStudio[method].apply(this._appStudio, args)
+    } catch (error) {


similar to above, it is worth typing the error to say something like unknown to make sure we handle/cast it correctly? It might be overkill if we know what we are dealing with error wise.

Thoughts on this pattern? 634109a (#31033)

packages/server/test/support/fixtures/cloud/studio/test-studio.ts

packages/server/test/unit/cloud/api/get_app_studio_spec.ts

packages/server/test/unit/project_spec.js

AtofStryker · 2025-02-11T22:46:44Z

scripts/binary/binary-sources.js

@@ -109,6 +109,16 @@ const getProtocolFileSource = async (protocolFilePath) => {
  return fileContents.replaceAll('process.env.CYPRESS_LOCAL_PROTOCOL_PATH', 'undefined')
 }

+const getStudioFileSource = async (studioFilePath) => {


Suggested change

const getStudioFileSource = async (studioFilePath) => {

const getStudioFileSource = async (studioFilePath: string) => {

This is a js file.

AtofStryker · 2025-02-11T22:46:52Z

scripts/binary/binary-sources.js

@@ -117,6 +127,14 @@ const validateProtocolFile = async (protocolFilePath) => {
  }
 }

+const validateStudioFile = async (studioFilePath) => {


Suggested change

const validateStudioFile = async (studioFilePath) => {

const validateStudioFile = async (studioFilePath: string) => {

This is a js file

chore: add logic to dynamically load new studio functionality

5b9b50c

ryanthemanuel self-assigned this Feb 6, 2025

Merge branch 'develop' into ryanm/chore/add_internal_studio

1515d7f

ryanthemanuel changed the title ~~chore: add logic to dynamically load new studio functionality~~ chore: add logic to dynamically load studio functionality Feb 6, 2025

ryanthemanuel added 8 commits February 6, 2025 07:35

fix types

58e3655

fix tests

1283947

fix

c7311ae

fix tests

f3e115e

fix tests

60dbbec

Merge branch 'develop' into ryanm/chore/add_internal_studio

f6f1eb0

additional changes to lock things down

f79cb17

clean up code

95acc70

ryanthemanuel requested a review from mschile February 7, 2025 16:05

AtofStryker requested changes Feb 10, 2025

View reviewed changes

guides/studio-development.md Outdated Show resolved Hide resolved

jennifer-shehane reviewed Feb 11, 2025

View reviewed changes

guides/studio-development.md Outdated Show resolved Hide resolved

ryanthemanuel and others added 2 commits February 11, 2025 09:07

Update guides/studio-development.md

55fcae5

Co-authored-by: Jennifer Shehane <[email protected]>

Update protocol-development.md

ea5df25

AtofStryker self-requested a review February 11, 2025 18:44

ryanthemanuel commented Feb 11, 2025

View reviewed changes

packages/server/lib/cloud/api/get_app_studio.ts Show resolved Hide resolved

ryanthemanuel commented Feb 11, 2025

View reviewed changes

packages/server/lib/cloud/studio.ts Outdated Show resolved Hide resolved

ryanthemanuel commented Feb 11, 2025

View reviewed changes

packages/server/lib/routes.ts Show resolved Hide resolved

additional headers

d2bef8e

AtofStryker reviewed Feb 11, 2025

View reviewed changes

PR comments

634109a

ryanthemanuel requested a review from AtofStryker February 12, 2025 03:51

Merge branch 'develop' into ryanm/chore/add_internal_studio

29f089c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: add logic to dynamically load studio functionality #31033

chore: add logic to dynamically load studio functionality #31033

ryanthemanuel commented Feb 6, 2025 •

edited

Loading

cypress bot commented Feb 6, 2025 •

edited

Loading

AtofStryker Feb 11, 2025

ryanthemanuel Feb 12, 2025

ryanthemanuel Feb 12, 2025

AtofStryker Feb 11, 2025

ryanthemanuel Feb 12, 2025

AtofStryker Feb 11, 2025

ryanthemanuel Feb 12, 2025

AtofStryker Feb 11, 2025

ryanthemanuel Feb 12, 2025

AtofStryker Feb 11, 2025

ryanthemanuel Feb 12, 2025

	async setup ({ script, studioPath, studioHash }: { script: string, studioPath: string, studioHash?: string }): Promise<void> {
	setup ({ script, studioPath, studioHash }: { script: string, studioPath: string, studioHash?: string }): Promise<void> {

	const getStudioFileSource = async (studioFilePath) => {
	const getStudioFileSource = async (studioFilePath: string) => {

	const validateStudioFile = async (studioFilePath) => {
	const validateStudioFile = async (studioFilePath: string) => {

chore: add logic to dynamically load studio functionality #31033

Are you sure you want to change the base?

chore: add logic to dynamically load studio functionality #31033

Conversation

ryanthemanuel commented Feb 6, 2025 • edited Loading

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress bot commented Feb 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryanthemanuel commented Feb 6, 2025 •

edited

Loading

cypress bot commented Feb 6, 2025 •

edited

Loading