chore: Add Studio UI to Cypress 10 #23537

astone123 · 2022-08-24T20:42:19Z

Closes Implement Studio UI #23337

User facing changelog

This PR adds the Cypress studio UI back into the app with some styling changes. Note that this change will be merged into the feat/studio-cypress-10 branch to be reviewed all together and merged at a later time.

Steps to test

Add experimentalStudio: true your project's Cypress configuration under e2e
Launch e2e testing for with your project
Run a spec
Hover over a test in the runner command log and click the magic wand icon
Click through the Studio UI and ensure that it is consistent with the mockup

How has the user experience changed?

PR Tasks

Deleting the PR checklist since we'll be handling more testing, documentation, etc when we merge the feature branch.

cypress-bot · 2022-08-24T20:42:22Z

Thanks for taking the time to open a PR!

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

cypress · 2022-08-24T21:04:49Z

Test summary

38906 • 0 • 3993 • 0 • 0

Run details


Project	cypress
Status	Passed
Commit	`3f78379`
Started	Aug 25, 2022 4:32 AM
Ended	Aug 25, 2022 4:46 AM
Duration	14:10 💡
OS	Linux Debian - 11.3
Browser	Multiple

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

lmiller1990

Some misc comments, nothing big -- I think the URL logic still has some bugs, I'm going to work on those in the meantime. New styles look 💯

lmiller1990 · 2022-08-25T00:07:34Z

packages/app/src/runner/studio/StudioUrlPrompt.vue

+
+</script>
+
+<style lang="scss">


We should use one of the coolest Vue features, scoped styling.

https://vue-loader.vuejs.org/guide/scoped-css.html

Just add <style lang="scss" scoped> and the CSS will only be applied inside this component.

lmiller1990 · 2022-08-25T00:08:01Z

packages/app/src/runner/studio/StudioUrlPrompt.vue

+      border-style: solid;
+      border-color: transparent transparent #1B1E2E transparent;
+    }
+  }


Assuming this is too specific to do with Tailwind?

yeah, I figured this was better than adding it to the already cluttered class attribute on the outer container. Definitely open to suggestions for how to better deal with this though

lmiller1990 · 2022-08-25T00:09:30Z

packages/app/src/store/studio-store.ts

@@ -206,6 +212,8 @@ export const useStudioStore = defineStore('studioRecorder', {
        }
      }

+      this.setUrl(getAutUrl())


No need to do getAutUrl like this, we should be able to do

const autStore = useAutStore() this.setUrl(autStore.url)

Although I think there's a bug around this anyway, as Mike pointed out in Slack, there's some weirdness around the URL logic.

lmiller1990 · 2022-08-25T00:09:54Z

packages/frontend-shared/src/components/StandardModal.vue

@@ -77,7 +77,7 @@ const props = withDefaults(defineProps<{
 }>(), {
  modelValue: false,
  helpText: `${defaultMessages.links.needHelp}`,
-  helpLink: 'https://on.cypress.io',
+  helpLink: '',


Any reason to make this default value ''?

Right I see - to hide the link for modals where a "Help Link" doesn't make sense.
Quick refactor to support this and to get CI green #23545

Yeah, this just makes it so that if you don't pass a link then we don't show the link section in the modal header

lmiller1990 · 2022-08-25T00:59:32Z

This modal seems kind of ugly to me:

do we need the wand in the title? Could be just me but I don't like icons that much unless they add value or meaning, this just seems like it's a decoration for no reason - not sure if this was a designer recommendation or not, no strong opinions
the black circle around the ✅ looks kind of weird to me - again I wonder if we need the icon at all? 🤔

lmiller1990 · 2022-08-25T02:56:19Z

@astone123 I need these changes to work on the E2E tests, and it looks like we've got a few failures. I'm going to go ahead and get CI green and merge this -- we will solicit a full review by EOD tomorrow, I'm thinking since the PR is pretty big, we get specific people to do specific things - eg, someone from CT would look at the UI components, someone from E2E the tests/wiring, etc.

* fix test * fix test * add noHelp link to StandardModal

astone123 · 2022-08-25T13:38:01Z

This modal seems kind of ugly to me:

do we need the wand in the title? Could be just me but I don't like icons that much unless they add value or meaning, this just seems like it's a decoration for no reason - not sure if this was a designer recommendation or not, no strong opinions

the black circle around the ✅ looks kind of weird to me - again I wonder if we need the icon at all? 🤔

Yeah I'm not super happy with the modal. The icon can definitely be taken out of the header. For the save button, I was just following the designs, but I agree that the check icon doesn't need to be there. @abelb what do you think based on that screenshot? ^

* chore: wire up Cypress Studio (#23413) * wip * wip * wip - spike * more wip [skip ci] * update style * fix ts * move types around * extract types * lint * fixing tests * fix component test * skip some tests * do not error on experimentalStudio flag * add studio controls placeholder * fixing tests * revert * revert changes * rename store * rename method * remove comment * refactor * correctly feature flag studio * simplify code * simplify code * lift check into useEventManager * correctly hide create studio prompt based on flag; * remove superfulous css * rename variables * fix bugs * wip * unskip tests * unskip more tests * fix a bug in the assertion API * fix bug in assertions [skip ci] * wip - bugs [skip ci] * feat: add experimentalStudio flag back (#23506) Co-authored-by: astone123 <adams@cypress.io> * chore: Add Studio UI to Cypress 10 (#23537) * wip * wip * wip - spike * more wip [skip ci] * update style * fix ts * move types around * extract types * lint * fixing tests * fix component test * skip some tests * do not error on experimentalStudio flag * add studio controls placeholder * fixing tests * revert * revert changes * rename store * rename method * remove comment * refactor * correctly feature flag studio * chore: wip add barebones studio modals * simplify code * simplify code * lift check into useEventManager * correctly hide create studio prompt based on flag; * remove superfulous css * chore: style studio toolbar * chore: misc feedback * chore: remove studio store prop * chore: studio URL prompt and other changes * update component * chore: UI styling and remove studio init modal * chore: revert unnecessary changes * chore: fix types * chore: fix some tests, minor refactor (#23545) * fix test * fix test * add noHelp link to StandardModal Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com> * test: studio e2e tests (#23546) * add basic e2e test * add some e2e tests for studio and a note on limitations * additional spec * add more tests, refactor helper * fix bug in studio * remove test code * chore: UI feedback * fix race condition * update tests * rename test * improve types in reporter * remove dead code * improve tests * merge tests into one spec * chore: Cap instruction modal width; exit studio mode when new spec is chosen * chore: Only render studio error when test has failed; add test for studioEnabled * correctly check if command is studio or not * improve specs and hopefully reduce flake * communicate studio state from app->reporter * receive studio save state validity from app * fix test * improve test coverage * fix external link Co-authored-by: astone123 <adams@cypress.io>

lmiller1990 and others added 30 commits August 4, 2022 15:14

wip

66387f0

wip

1131c73

Merge remote-tracking branch 'origin/develop' into lmiller/spike-studio

0404134

wip - spike

a61e667

merge in develop [skip ci]

0e9863f

more wip [skip ci]

ab31dcc

update style

87fb624

fix ts

ba24e88

Merge remote-tracking branch 'origin/develop' into lmiller/spike-studio

42043a1

move types around

09d2786

extract types

c3506a6

lint

db23066

Merge remote-tracking branch 'origin/develop' into lmiller/spike-studio

a0438da

fixing tests

ca309ea

fix component test

5b07449

skip some tests

770e033

do not error on experimentalStudio flag

a7b714e

add studio controls placeholder

fc66414

fixing tests

55e3a31

revert

08d023f

revert changes

62a4f51

rename store

be9a801

rename file

36cc510

rename method

dd435fa

remove comment

568a7f6

refactor

40327d8

correctly feature flag studio

b0299c3

chore: wip add barebones studio modals

933932b

Merge remote-tracking branch 'origin/develop' into lmiller/spike-studio

219fc41

simplify code

fd0ee2b

astone123 and others added 6 commits August 23, 2022 11:31

chore: remove studio store prop

c3a590b

chore: studio URL prompt and other changes

ee52041

Merge branch 'feat/studio-cypress-10' into astone123/23337-studio-ui

1d1baca

update component

a184081

chore: UI styling and remove studio init modal

bb71e76

chore: revert unnecessary changes

e214da9

astone123 requested review from abelb, marktnoonan, mike-plummer, lmiller1990, ZachJW34 and rockindahizzy August 24, 2022 20:42

astone123 self-assigned this Aug 24, 2022

chore: fix types

f060aa4

lmiller1990 reviewed Aug 25, 2022

View reviewed changes

lmiller1990 removed request for marktnoonan, mike-plummer, ZachJW34, rockindahizzy and abelb August 25, 2022 02:54

chore: fix some tests, minor refactor (#23545)

3f78379

* fix test * fix test * add noHelp link to StandardModal

lmiller1990 merged commit 849409c into feat/studio-cypress-10 Aug 25, 2022

lmiller1990 deleted the astone123/23337-studio-ui branch August 25, 2022 04:47

cypress-bot bot mentioned this pull request Aug 25, 2022

Implement Studio UI #23337

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Add Studio UI to Cypress 10 #23537

chore: Add Studio UI to Cypress 10 #23537

astone123 commented Aug 24, 2022

cypress-bot bot commented Aug 24, 2022

cypress bot commented Aug 24, 2022 •

edited

Loading

lmiller1990 left a comment

lmiller1990 Aug 25, 2022

lmiller1990 Aug 25, 2022

astone123 Aug 25, 2022

lmiller1990 Aug 25, 2022

lmiller1990 Aug 25, 2022

lmiller1990 Aug 25, 2022

astone123 Aug 25, 2022

lmiller1990 commented Aug 25, 2022

lmiller1990 commented Aug 25, 2022

astone123 commented Aug 25, 2022


		</script>

		<style lang="scss">

chore: Add Studio UI to Cypress 10 #23537

chore: Add Studio UI to Cypress 10 #23537

Conversation

astone123 commented Aug 24, 2022

User facing changelog

Steps to test

How has the user experience changed?

PR Tasks

cypress-bot bot commented Aug 24, 2022

cypress bot commented Aug 24, 2022 • edited Loading

Test summary

Run details

lmiller1990 left a comment

Choose a reason for hiding this comment

lmiller1990 Aug 25, 2022

Choose a reason for hiding this comment

lmiller1990 Aug 25, 2022

Choose a reason for hiding this comment

astone123 Aug 25, 2022

Choose a reason for hiding this comment

lmiller1990 Aug 25, 2022

Choose a reason for hiding this comment

lmiller1990 Aug 25, 2022

Choose a reason for hiding this comment

lmiller1990 Aug 25, 2022

Choose a reason for hiding this comment

astone123 Aug 25, 2022

Choose a reason for hiding this comment

lmiller1990 commented Aug 25, 2022

lmiller1990 commented Aug 25, 2022

astone123 commented Aug 25, 2022

cypress bot commented Aug 24, 2022 •

edited

Loading