feat(Unification): Update Command Group UI #20465

emilyrohrbough · 2022-03-03T16:28:07Z

Command Group UI Requirements

When logging is enabled & a Group has one or more command/event logs, a log will display in the Command Log with the group label.
Must be able to expand/collapse to show/hide logs that occurred within the context.
Must be expanded by default in Run Mode to capture logs during test recording.
Must support "printing to the console" to provide the end-user with more details.
All errors/failures that occur in a group must be surfaced and displayed to the end-user regardless even if group has logging disabled.

User facing changelog

TODO

How has the user experience changed?

View Percy screenshots for the most comprehensive comparisons.

Command Group Behavior Before:

Command Group Behavior After:

Screen.Recording.2022-04-21.at.8.14.32.AM.mov

PR Tasks

Have tests been added/updated?
Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
[n/a] Has a PR for user-facing changes been opened in cypress-documentation?
[n/a] Have API changes been updated in the type definitions?

…sting in cypress)

…develop?

… into refactor-cmd-ui

ryanthemanuel · 2022-04-22T17:58:08Z

packages/reporter/src/commands/command.tsx

+      const level = model.groupLevel < 6 ? model.groupLevel : 5
+
+      for (let i = 1; i < level; i++) {
+        groupPlaceholder.push(<span key={`${this.props.groupId}-${level}`} className={`command-group-id-${model.group} command-group-block`} />)


Should this be:

Suggested change

groupPlaceholder.push(<span key={`${this.props.groupId}-${level}`} className={`command-group-id-${model.group} command-group-block`} />)

groupPlaceholder.push(<span key={`${this.props.groupId}-${i}`} className={`command-group-id-${model.group} command-group-block`} />)

ryanthemanuel · 2022-04-22T17:58:33Z

packages/reporter/src/commands/command.tsx

@@ -259,53 +265,61 @@ class Command extends Component<Props> {
    const isSessionCommand = commandName === 'session'
    const displayNumOfChildren = !isSystemEvent && !isSessionCommand && model.hasChildren && !model.isOpen

+    let groupPlaceholder: Array<JSX.Element> = []


This can be a const right?

Suggested change

let groupPlaceholder: Array<JSX.Element> = []

const groupPlaceholder: Array<JSX.Element> = []

tbiethman · 2022-04-25T15:23:57Z

packages/reporter/src/commands/command.tsx

@@ -343,7 +357,7 @@ class Command extends Component<Props> {

    return (
      <ul className='command-child-container'>
-        {_.map(model.children, (child) => (
+        {model.children.map((child) => (


Is children guaranteed to be populated on model? I like the change to a standard map, but it was safe against undefined values before, just wanted to confirm.

It's not super obvious, but we are checking it here. I can update this to make it cleaner: https://github.com/cypress-io/cypress/pull/20465/files/03b75937f73d056c5796aba5bdd504f1e09d8932#diff-fb0aaf9c972fca4aa414f95ac88ab9ad1619459edeab226100daaba5e55645d0R350

tbiethman · 2022-04-26T14:51:29Z

packages/driver/cypress/e2e/commands/actions/click.cy.js

+      clickCommandLog('click')
+      .then(() => {
+        expect(spyTableName).calledWith('Mouse Events')
+        expect(spyTableData).calledOnce


This is A LOT more readable 👍

tbiethman · 2022-04-26T14:58:02Z

packages/reporter/src/commands/command.tsx

+ *
+ *   > Expander Column
+ *      - When the log is a group log and it has children logs, it will display the chevron icon
+ */


Nice comment

tbiethman · 2022-04-26T15:07:45Z

packages/reporter/src/commands/command.tsx

    </div>
-  )
-})
+    <div className='command-expander-column' onClick={() => model.toggleOpen()}>


It seems like this command-expander-column element is eating clicks when the command isn't actually toggle-able/has no children. We could selectively add the onClick based on child presence as well?

tbiethman

Just had the one comment related to the expander column. I ran through the stated requirements in the PR description, everything seems to be working as expected. It's looking great!

ryanthemanuel · 2022-04-26T22:13:20Z

Everything seems to be working well. Nice work!

cypress-bot · 2022-06-01T15:48:21Z

Released in 10.0.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.0.0, please open a new issue.

emilyrohrbough and others added 30 commits February 11, 2022 11:55

seems like a good check-in point.

1eb2151

latest changes. getting close.

e64dc87

some clean up.

ac70cde

rename cmd to command. (rename was for classing global styles when te…

1da8184

…sting in cypress)

random clean up.

26477c6

add more examples for the tests cases that need verified.

29abb65

Cypress is incorrectly applying viewport width & height for test type.

dbf8f03

further clean up & pass previously existing command tests.

fe929d6

skip these tests for now to generate percy screenshots

659447e

ci fails with .only

8b840e3

idk why this is failing here.

a214488

more updates.

6cc464f

will this compare my percy screenshots to the 10.0 branch instead of …

fc3199b

…develop?

hmmm

9cae572

fix breaking change with global styles shared with runner.

9b4cc70

tweak to styles

4f96fde

Merge branch '10.0-release' into refactor-cmd-ui

ac984cd

should be it

1f2492d

clean up

ed8593a

Merge branch '10.0-release' into refactor-cmd-ui

76a3df3

Merge branch 'refactor-cmd-ui' of https://github.com/cypress-io/cypress…

e3bb847

… into refactor-cmd-ui

easier to review

022feff

clean up

dc9088c

small changes

15fc94d

.

d557f79

small styles

592fbf4

Merge branch '10.0-release' into refactor-cmd-ui

a3f6cd6

clean up

7ed8250

Merge branch '10.0-release' into refactor-cmd-ui

ec870c5

check in - new styles getting there

2ad81bb

ryanthemanuel requested review from MuazOthman and tbiethman April 20, 2022 15:37

emilyrohrbough and others added 5 commits April 20, 2022 16:10

fix tests

a20898c

Merge branch '10.0-release' into new-cmd-log-styles

ea8d188

few more tests

30e1def

clean up

77c1f71

Merge branch '10.0-release' into new-cmd-log-styles

03b7593

emilyrohrbough marked this pull request as ready for review April 21, 2022 15:06

emilyrohrbough requested a review from a team as a code owner April 21, 2022 15:06

Feedback from A

158061c

ryanthemanuel reviewed Apr 22, 2022

View reviewed changes

tbiethman reviewed Apr 25, 2022

View reviewed changes

PR & design feedback.

4a4ef0b

emilyrohrbough requested review from ryanthemanuel and tbiethman April 25, 2022 21:10

tbiethman reviewed Apr 26, 2022

View reviewed changes

tbiethman approved these changes Apr 26, 2022

View reviewed changes

ryanthemanuel approved these changes Apr 26, 2022

View reviewed changes

emilyrohrbough and others added 3 commits April 26, 2022 17:59

PR feedback - don't add click event when its unnecessary

8107885

Merge branch '10.0-release' into new-cmd-log-styles

b580c25

Merge branch '10.0-release' into new-cmd-log-styles

38d64e4

emilyrohrbough merged commit 1232b07 into 10.0-release Apr 27, 2022

emilyrohrbough deleted the new-cmd-log-styles branch April 27, 2022 15:23

cypress-bot bot mentioned this pull request Apr 27, 2022

Enhance Command Group to Expand/Collapse & Pin Log Details #20429

Closed

cypress-bot bot locked as resolved and limited conversation to collaborators Jun 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Unification): Update Command Group UI #20465

feat(Unification): Update Command Group UI #20465

emilyrohrbough commented Mar 3, 2022 •

edited

Loading

ryanthemanuel Apr 22, 2022

ryanthemanuel Apr 22, 2022

tbiethman Apr 25, 2022

emilyrohrbough Apr 25, 2022

tbiethman Apr 26, 2022

tbiethman Apr 26, 2022

tbiethman Apr 26, 2022

tbiethman left a comment

ryanthemanuel commented Apr 26, 2022

cypress-bot bot commented Jun 1, 2022

	groupPlaceholder.push(<span key={`${this.props.groupId}-${level}`} className={`command-group-id-${model.group} command-group-block`} />)
	groupPlaceholder.push(<span key={`${this.props.groupId}-${i}`} className={`command-group-id-${model.group} command-group-block`} />)

	let groupPlaceholder: Array<JSX.Element> = []
	const groupPlaceholder: Array<JSX.Element> = []

feat(Unification): Update Command Group UI #20465

feat(Unification): Update Command Group UI #20465

Conversation

emilyrohrbough commented Mar 3, 2022 • edited Loading

Command Group UI Requirements

User facing changelog

How has the user experience changed?

PR Tasks

ryanthemanuel Apr 22, 2022

Choose a reason for hiding this comment

ryanthemanuel Apr 22, 2022

Choose a reason for hiding this comment

tbiethman Apr 25, 2022

Choose a reason for hiding this comment

emilyrohrbough Apr 25, 2022

Choose a reason for hiding this comment

tbiethman Apr 26, 2022

Choose a reason for hiding this comment

tbiethman Apr 26, 2022

Choose a reason for hiding this comment

tbiethman Apr 26, 2022

Choose a reason for hiding this comment

tbiethman left a comment

Choose a reason for hiding this comment

ryanthemanuel commented Apr 26, 2022

cypress-bot bot commented Jun 1, 2022

emilyrohrbough commented Mar 3, 2022 •

edited

Loading