misc: Update nested groups design

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/reporter/src/commands/command.tsx

@@ -124,8 +124,8 @@ const NavColumns: React.FC<NavColumnsProps> = observer(({ model, isPinned, toggl
       {(!model._isPending() && isPinned) && <PinIcon className='command-pin' />}
       {(!model._isPending() && !isPinned) && model.number}
     </div>
-    {model.hasChildren && (
-      <div className='command-expander-column' onClick={() => model.toggleOpen()}>
+    {model.hasChildren && !model.group && (
+      <div className='command-expander-column command-expander-column-parent' 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>

packages/reporter/src/commands/commands.scss

@@ -1,9 +1,12 @@
 @mixin nested-command-dashes($color) {
   border-left: 1px dotted $color;
   border-image-slice: 0 0 0 1;
-  border-image-source: repeating-linear-gradient(0deg, transparent, $color, $color 4px);
+  border-image-source: repeating-linear-gradient(0deg, transparent, $color, $color 2px);
 }
 
+/** Group indentation width for chevron and vertical lines */
+$group-indent-width: 18px;
+
 .reporter {
   // rendered within ../hooks/hooks.tsx
   .commands-container {
@@ -52,7 +55,7 @@
 
   // Child Styles
   .command-type-child {
-    .command-method {
+    .command-method-child {
       &:before {
         float: left;
         content: "-";
@@ -125,15 +128,35 @@
   }
 
   .command-pin-target.command-group {
-    @include nested-command-dashes($gray-600);
-    padding-left: 12px;
+    @include nested-command-dashes($gray-700);
     min-height: 28px;
 
     .command-group-block {
-      @include nested-command-dashes($gray-600);
-      width: 12px;
+      @include nested-command-dashes($gray-700);
+      width: $group-indent-width;
+      min-width: $group-indent-width;
       min-height: 28px;
-      min-width: 12px;
+    }
+  }
+
+  .command-group-no-children {
+    padding-left: 15px; 
+  }
+
+  .command-wrapper-text-group {
+    padding-left: 15px;
+    width: 100%;
+
+  }
+
+  .command-wrapper-text-group-parent {
+    padding-left: 5px;
+  }
+
+  .nested-group-expander {   
+    .command-expander {
+      position: relative;
+      margin-left: -16px !important; // Adjust this value to center the caret on the border
     }
   }
 
@@ -454,7 +477,7 @@
     font-size: 12px;
     line-height: 1;
     margin-top: -1px;
-    margin-left: 10px;
+    margin-left: 12px;
     outline: none;
     text-align: right;
     width: 15px;
@@ -465,20 +488,14 @@
     }
   }
 
-  .command-expander-column {
+  %command-expander-base {
     flex-shrink: 0;
-    padding-left: 10px;
-    padding-right: 5px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    width: 25px;
     display: flex;
 
     .command-expander {
       color: $gray-500;
       transform: rotate(-90deg);
       transition: transform 150ms ease-out;
-      margin-top: 5px;
 
       path {
         stroke: $gray-700;
@@ -490,6 +507,34 @@
     }
   }
 
+  .command-expander-column {
+    @extend %command-expander-base;
+    padding: 4px 5px 4px 11px;
+    width: 25px;
+
+    .command-expander {
+      margin-top: 5px;
+    }
+  }
+
+  .command-expander-column-parent {
+    margin-left: 11px;
+  }
+
+  .command-expander-column-group {
+    @extend %command-expander-base;
+    padding: 0;
+    width: $group-indent-width;
+    min-width: $group-indent-width;
+    max-width: $group-indent-width;
+    align-items: center;
+    justify-content: center;
+
+    .command-expander {
+      margin: 0;
+    }
+  }
+
   .command-is-pinned {
     background: $indigo-1000;
     border-left: 2px solid $pinned;

packages/reporter/src/errors/errors.scss

@@ -1,4 +1,5 @@
 $code-border-radius: 4px;
+$group-indent-width: 18px;
 
 .reporter {
   .error {
@@ -60,13 +61,13 @@ $code-border-radius: 4px;
       .err-group-block {
         border-left: 1px dotted $err-header-text;
         border-image-slice: 0 0 0 1;
-        border-image-source: repeating-linear-gradient(0deg, transparent, $err-header-text, $err-header-text 4px);
-        width: 12px;
-        min-width: 12px;
+        border-image-source: repeating-linear-gradient(0deg, transparent, $err-header-text, $err-header-text 2px);
+        width: $group-indent-width;
+        min-width: $group-indent-width;
 
         &:first-of-type {
-          width: 13px;
-          min-width: 13px;
+          width: 16px;
+          min-width: 16px;
         }
     } 
   }