Skip to content

misc: Reporter redesign #31914

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 108 commits into from
Jul 2, 2025
Merged

Conversation

mabela416
Copy link
Contributor

@mabela416 mabela416 commented Jun 18, 2025

Additional details

Steps to test

Go through different states of the app and make sure the styles match the figma

Passed

image

Error state

image

Running

image

Paused

image

Focused state only by tabbing

Suite

image

Test

image

Hover state

Header

image

Suite open

image

Suite closed

image

Test

image

Debug mode

image

Open test preferences

image

How has the user experience changed?

PR Tasks

@mabela416 mabela416 changed the title Mabel/issue 31677 reporter redesign feat: Reporter redesign Jun 18, 2025
Copy link

cypress bot commented Jun 18, 2025

cypress    Run #63500

Run Properties:  status check passed Passed #63500  •  git commit 4c5911e329: Merge branch 'release/15.0.0' into mabel/issue-31677-reporter-redesign
Project cypress
Branch Review mabel/issue-31677-reporter-redesign
Run status status check passed Passed #63500
Run duration 18m 30s
Commit git commit 4c5911e329: Merge branch 'release/15.0.0' into mabel/issue-31677-reporter-redesign
Committer mabela416
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 1
Tests that did not run due to a developer annotating a test with .skip  Pending 28
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 587
View all changes introduced in this branch ↗︎
UI Coverage  0%
  Untested elements 4  
  Tested elements 0  
Accessibility  97.09%
  Failed rules  0 critical   1 serious   0 moderate   0 minor
  Failed elements 4  

@mabela416 mabela416 changed the base branch from develop to release/15.0.0 June 23, 2025 15:09
@jennifer-shehane jennifer-shehane changed the title feat: Reporter redesign misc: Reporter redesign Jun 23, 2025
Copy link
Member

@jennifer-shehane jennifer-shehane left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mabela416 So many changes, thanks for seeing this work through! I have some comments on a few things initially.

On hover of commands, there is a slight rounded corner on all of the right corners, when there shouldn't be for corners that are not first/last.

Screenshot 2025-06-23 at 11 26 09 AM

Is it possible to have this bottom left corner look more rounded when the test is open?

Screenshot 2025-06-23 at 11 29 51 AM

Is this the right hover state for tests? I assumed it would be this lighter focus style.

Screenshot 2025-06-23 at 11 54 38 AM
Screenshot 2025-06-23 at 11 55 40 AM

This juxtaposition of the failure block with the test logs looks strange to me.

Screenshot 2025-06-23 at 11 52 36 AM

When you hover over a describe, the icon changes to an arrow, but when you click the describe - that arrow icon doesn't rotate to show the described as closed.

Screenshot 2025-06-23 at 11 57 34 AM
Screenshot 2025-06-23 at 11 58 30 AM

Also, the icon stays that way after click/focus and does not go back to the old icon when I hover away from the describe. Seems odd.

The 'Open in IDE' button when hovering over a Before Each doesn't seem centered.

Screenshot 2025-06-23 at 11 59 37 AM

The jump that the test does from the 1px border to the 2px border doesn't feel fluid.

Screen.Recording.2025-06-23.at.12.00.38.PM.mov

We need some margin-bottom on the tests list - when you scroll all the way down it sits there so close to the bottom edge like it's not the end.

Screenshot 2025-06-23 at 12 04 25 PM

I don't think the New Test button should overlap the text of the Describe, it's a bit weird copying the text or seeing it if I want in this case.

Screenshot 2025-06-23 at 12 06 06 PM
Screenshot 2025-06-23 at 12 06 01 PM

The attempt styling needs to be accounted for - the lines connecting them look strange here.

Screenshot 2025-06-23 at 12 07 37 PM

This describe icon feels strange flashing back and forth between pending/queued? Maybe it's not too weird, I don't know.

Screen.Recording.2025-06-23.at.12.10.12.PM.mov

This blue line that shows on the commandTimeout - when it burns down should have that highlighted gray color, not the dark black color.

Screen.Recording.2025-06-23.at.12.12.59.PM.mov

@mabela416
Copy link
Contributor Author

@mabela416 So many changes, thanks for seeing this work through! I have some comments on a few things initially.

Is this the right hover state for tests? I assumed it would be this lighter focus style.

Screenshot 2025-06-23 at 11 54 38 AM Screenshot 2025-06-23 at 11 55 40 AM

Yeah this is the figma for the test hover state https://www.figma.com/design/XYBgOykHfLCi1yT4Va7GLO/Studio-Test-generation?node-id=3607-170837&t=33uO9ue4ojx1TNL4-4

The lighter focus style is only for when the user focuses the test by tabbing

@mabela416
Copy link
Contributor Author

@mabela416 So many changes, thanks for seeing this work through! I have some comments on a few things initially.

I don't think the New Test button should overlap the text of the Describe, it's a bit weird copying the text or seeing it if I want in this case.

Screenshot 2025-06-23 at 12 06 06 PM Screenshot 2025-06-23 at 12 06 01 PM

This is part of the design here

image

Copy link
Member

@jennifer-shehane jennifer-shehane left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mabela416 Is this spacing accurate when all the describes are collapsed? Seems like some unnecessary
Screenshot 2025-06-25 at 3 51 25 PM
vertical spacing in between.

Some strange states in Studio I think (I know this will go away fairly soon though)

  • Is this how this button looks today or did it change?
    Screenshot 2025-06-25 at 3 53 14 PM

  • I don't think the describe here should show the purple left line
    Screenshot 2025-06-25 at 3 53 21 PM

  • This 'interact with your site' has a weird blue line on the left
    Screenshot 2025-06-25 at 3 54 40 PM

This hover over hooks looks a bit strange with it not taking up the full width or not having rounded corners like others. Maybe it's fine, just want to check.

Screenshot 2025-06-25 at 3 55 39 PM

Also - the open in IDE icon doesn't seem centered with the text

Screenshot 2025-06-25 at 3 55 39 PM

The test is still inching to left and right by 1px when opening/collapsing

Screen.Recording.2025-06-25.at.3.57.38.PM.mov

This stack trace error seems like it uses more vertical height than it needs to - just confirm design.

Screenshot 2025-06-25 at 4 03 28 PM

Clicking on skipped tests opens this weird empty space

Screen.Recording.2025-06-25.at.4.04.32.PM.mov

Copy link
Contributor

@astone123 astone123 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any more work planned around the studio part of the design? The purple left border at the top here looks kind of off because it's not aligned with the block below it, maybe it's just me

Screenshot 2025-06-26 at 11 30 39 AM

}

.controls-container-studio {
// TODO: change this to 32px for the studio redesign
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there an issue we can link to for this?

@@ -46,9 +51,17 @@ const RunnableHeader: React.FC<RunnableHeaderProps> = observer(({ spec, statsSto
relativeFile: relativeSpecPath,
}

const openInIDE = () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: should use the naming convention for components here and render it using JSX notation

Suggested change
const openInIDE = () => {
const OpenInIDE = () => {

...

<OpenInIDE />

@mabela416
Copy link
Contributor Author

Is there any more work planned around the studio part of the design? The purple left border at the top here looks kind of off because it's not aligned with the block below it, maybe it's just me

Screenshot 2025-06-26 at 11 30 39 AM

I cleaned up this purple link on the describe. For my next story I'll be cleaning up this view

Copy link
Contributor

@astone123 astone123 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, nice work! 🎉

jennifer-shehane and others added 24 commits July 1, 2025 11:57
…abel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign
…abel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign
…abel/issue-31677-reporter-redesign' of https://github.com/cypress-io/cypress into mabel/issue-31677-reporter-redesign
@mabela416 mabela416 force-pushed the mabel/issue-31677-reporter-redesign branch from ff07762 to ec7b787 Compare July 1, 2025 15:57
@mabela416 mabela416 dismissed jennifer-shehane’s stale review July 2, 2025 13:47

Waiting on Ryan's approval instead since Jennifer is out

Copy link
Collaborator

@ryanthemanuel ryanthemanuel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Nice work!

@mabela416 mabela416 merged commit 72daa51 into release/15.0.0 Jul 2, 2025
131 of 133 checks passed
@mabela416 mabela416 deleted the mabel/issue-31677-reporter-redesign branch July 2, 2025 16:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update reporter UI to remove nesting + show full describes
4 participants