misc: Update nested groups design (#31739)

* refactor: Update nested groups design

* Update styles

* Enhance command method styling for child elements in the reporter. Updated the CommandDetails component to conditionally apply a class for child commands and added corresponding SCSS styles to display a prefix for child command methods.

* Fix formatting in SCSS for child command styles by adjusting indentation for better readability.

* add chanagelog entry

* Enhance command expander styling by adding a parent class for better layout control and adjusting margin for command number column.

* Update padding for error message styles in SCSS to improve layout consistency.

* Refactor SCSS styles and introduce mixins for gutter alignment and command info padding. Update error component styles for improved layout and consistency. Adjust padding and margins for better alignment across command and error sections.

* Refactor command styles by removing redundant class names and consolidating group indentation styles into a mixin. Update SCSS files to utilize the new mixin for consistent width handling across command and error components.

* Enhance SCSS mixins by adding align-self property for improved layout consistency in command info and group indentation styles.

* Remove redundant align-self property from SCSS mixin for command info and add logging and expectation in Cypress test for improved clarity in UI state tests.

* Use snapshotReporter instead

* Refactor snapshotReporter to dynamically set width based on reporter panel size, improving snapshot accuracy and visibility of UI elements.

* Update snapshotReporter to include sidebar width in percy snapshots, enhancing UI element visibility and accuracy.

---------

Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com>
Co-authored-by: Jennifer Shehane <jennifer@cypress.io>

Author: estrada9166

cli/CHANGELOG.md

@@ -3,6 +3,10 @@
 
 _Released 6/3/2025 (PENDING)_
 
+**Misc:**
+
+- The design of commands that display as grouped (such as `.within()` and `cy.session()`) has been updated to provide better clarity when collapsing groups. Addressed in [#31739](https://github.com/cypress-io/cypress/pull/31739).
+
 **Dependency Updates:**
 
 - Updated `@sinonjs/fake-timers` from `10.3.0` to `11.3.1`. Addressed in [#31746](https://github.com/cypress-io/cypress/pull/31746).

packages/app/cypress/e2e/runner/support/snapshot-reporter.ts

@@ -1,26 +1,37 @@
 // Takes percy snapshot with navigation/AUT/reporter hidden
 export const snapshotReporter = () => {
-  cy.percySnapshot({
-    width: 450,
-    elementOverrides: {
-      '.cy-tooltip': true,
-      '[data-cy=sidebar]': ($el) => {
-        $el.attr('style', 'display: none !important')
-      },
-      '[data-cy=aut-panel]': ($el) => {
-        $el.attr('style', 'display: none !important')
-      },
-      '[data-cy=reporter-panel]': ($el) => {
-        $el.attr('style', 'width: 450px !important')
-      },
-      '[data-cy=reporter-running-icon]': ($el) => {
-        // remove 'fa-spin' class so that the icon is not animated
-        $el.attr('class', '')
-      },
-      '.command-progress': ($el) => {
-        // don't display command progress bar in snapshot
-        $el.attr('style', 'display: none !important')
+  let sidebarWidth = 0
+
+  cy.get('[data-cy=sidebar]')
+  .invoke('width')
+  .then((w) => {
+    if (w) {
+      sidebarWidth = w
+    }
+  }).then(() => {
+    cy.get('[data-cy=reporter-panel]')
+  })
+  .invoke('width')
+  .then((w) => {
+    cy.percySnapshot({
+      width: w + sidebarWidth,
+      elementOverrides: {
+        '.cy-tooltip': true,
+        '[data-cy=sidebar]': ($el) => {
+          $el.attr('style', 'display: none !important')
+        },
+        '[data-cy=aut-panel]': ($el) => {
+          $el.attr('style', 'display: none !important')
+        },
+        '[data-cy=reporter-running-icon]': ($el) => {
+          // remove 'fa-spin' class so that the icon is not animated
+          $el.attr('class', '')
+        },
+        '.command-progress': ($el) => {
+          // don't display command progress bar in snapshot
+          $el.attr('style', 'display: none !important')
+        },
       },
-    },
+    })
   })
 }

packages/app/cypress/e2e/runner/ui-states.cy.ts

@@ -1,3 +1,4 @@
+import { snapshotReporter } from './support/snapshot-reporter'
 import { loadSpec } from './support/spec-loader'
 
 describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 600000 }, () => {
@@ -12,7 +13,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('test hooks').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   it('nested tests', () => {
@@ -22,7 +23,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('Nested Tests').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   describe('commands', () => {
@@ -33,7 +34,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('part 1 - basic commands').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('part 2 - traversal and navigation', () => {
@@ -45,7 +46,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('part 2 - traversal and navigation').should('be.visible')
       .click()
 
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('part 3 - element manipulation', () => {
@@ -57,7 +58,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('part 3 - element manipulation').should('be.visible')
       .click()
 
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('part 4 - advanced interactions', () => {
@@ -69,7 +70,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('part 4 - advanced interactions').should('be.visible')
       .click()
 
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('commands that do not appear in command log', () => {
@@ -79,7 +80,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('commands that do not appear in command log').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('form interaction command options', () => {
@@ -89,7 +90,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('form interaction command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('DOM traversal command options', () => {
@@ -99,7 +100,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('DOM traversal command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('element state and navigation command options', () => {
@@ -109,7 +110,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('element state and navigation command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('element traversal and file operations command options', () => {
@@ -119,7 +120,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('element traversal and file operations command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('scrolling and form interaction command options', () => {
@@ -129,7 +130,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('scrolling and form interaction command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('user interaction and window command options', () => {
@@ -139,7 +140,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('user interaction and window command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('verify element visibility state', () => {
@@ -149,7 +150,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('verify element visibility state').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
   })
 
@@ -160,7 +161,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('Request Statuses').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   it('page events', () => {
@@ -170,7 +171,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('events - page events').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   describe('errors', () => {
@@ -181,7 +182,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('simple error with docs link').should('be.visible')
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('long error', () => {
@@ -192,7 +193,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
 
       cy.contains('simple error with docs link').click()
       cy.contains('long error').should('be.visible')
-      cy.percySnapshot()
+      snapshotReporter()
     })
   })
 })

packages/reporter/src/commands/command.tsx

@@ -124,7 +124,7 @@ const NavColumns: React.FC<NavColumnsProps> = observer(({ model, isPinned, toggl
       {(!model._isPending() && isPinned) && <PinIcon className='command-pin' />}
       {(!model._isPending() && !isPinned) && model.number}
     </div>
-    {model.hasChildren && (
+    {model.hasChildren && !model.group && (
       <div className='command-expander-column' onClick={() => model.toggleOpen()}>
         <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
       </div>
@@ -326,7 +326,7 @@ interface CommandProps {
 
 const CommandDetails: React.FC<CommandDetailsProps> = observer(({ model, groupId, aliasesWithDuplicates }) => (
   <span className={cs('command-info')}>
-    <span className='command-method'>
+    <span className={cs('command-method', { 'command-method-child': !model.hasChildren })}>
       <span>
         {model.event && model.type !== 'system' ? `(${displayName(model)})` : displayName(model)}
       </span>
@@ -432,7 +432,10 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
     groupLevel = model.groupLevel < 6 ? model.groupLevel : 5
 
     for (let i = 1; i < groupLevel; i++) {
-      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' />)
+      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' onClick={(e) => {
+        e.stopPropagation()
+        model.toggleOpen()
+      }} />)
     }
   }
 
@@ -520,14 +523,26 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
             message='Printed output to your console'
             onClick={_toggleColumnPin}
             shouldShowMessage={_shouldShowClickMessage}
-            wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId })}
+            wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId, 'command-group-no-children': !model.hasChildren && model.group })}
           >
             <div
-              className='command-wrapper-text'
+              className={cs('command-wrapper-text', {
+                'command-wrapper-text-group': model.hasChildren && groupId,
+                'command-wrapper-text-group-parent': model.hasChildren && !groupId,
+              })}
               onMouseEnter={() => _snapshot(true)}
               onMouseLeave={() => _snapshot(false)}
             >
               {groupPlaceholder}
+
+              {model.hasChildren && groupId && (
+                <div className={cs('command-expander-column-group', { 'nested-group-expander': model.groupLevel })} onClick={(e) => {
+                  e.stopPropagation()
+                  model.toggleOpen()
+                }}>
+                  <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
+                </div>
+              )}
               <CommandDetails model={model} groupId={groupId} aliasesWithDuplicates={aliasesWithDuplicates} />
               <CommandControls model={model} commandName={commandName} events={events} />
             </div>