[WIP] misc: begin work on reporter redesign

packages/reporter/README.md

@@ -16,20 +16,6 @@ The reporter shows the running results of the tests. It includes the following:
   - commands and assertions with detailed information
   - any failures/errors
 
-## Building
-
-### For development
-
-```bash
-yarn workspace @packages/reporter build
-```
-
-### For production
-
-```bash
-yarn workspace @packages/reporter build-prod
-```
-
 ## Developing
 
 To see the reporter render, see [Developing the driver](../driver/README.md#Developing).

packages/reporter/package.json

@@ -15,6 +15,7 @@
     "watch": "yarn build-for-tests --watch --progress"
   },
   "devDependencies": {
+    "@cypress-design/react-icon": "^1.21.0",
     "@cypress/react-tooltip": "0.5.3",
     "@fontsource/mulish": "4.3.0",
     "@fontsource/open-sans": "4.3.0",

packages/reporter/src/attempts/attempts.scss

@@ -107,7 +107,7 @@
       border-radius: 7px;
       box-shadow: 0 1px 1px 0 rgba($white, 0.20);
       display: flex;
-      font-size: 11px;
+      font-size: 12px;
       padding: 2px 5px;
       position: relative;
       background-color: $black;

packages/reporter/src/collapsible/collapsible.tsx

@@ -2,6 +2,7 @@ import cs from 'classnames'
 import React, { CSSProperties, MouseEvent, ReactNode, RefObject, useCallback, useState } from 'react'
 import { onEnterOrSpace } from '../lib/util'
 import ChevronIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x8.svg'
+import DocumentBlankIcon from '@packages/frontend-shared/src/assets/icons/document-blank_x16.svg'
 
 interface CollapsibleProps {
   isOpen?: boolean
@@ -42,11 +43,12 @@ const Collapsible: React.FC<CollapsibleProps> = ({ isOpen: isOpenAsProp = false,
           tabIndex={0}
         >
           <div
-            className='collapsible-header-inner'
+            className='collapsible-header-inner gray-400'
             style={headerStyle}
             tabIndex={-1}
           >
-            {!hideExpander && <ChevronIcon className='collapsible-indicator' />}
+            {!hideExpander && headerClass === 'hook-header' && <ChevronIcon className='collapsible-indicator gray-400 ' />}
+            {!hideExpander && headerClass !== 'hook-header' && <DocumentBlankIcon className='collapsible-indicator gray-400' />}
             <span className='collapsible-header-text'>
               {header}
             </span>

packages/reporter/src/hooks/hooks.scss

@@ -27,7 +27,7 @@
         color: $gray-400;
         display: inline-block;
         flex-grow: 1;
-        font-size: 11px;
+        font-size: 12px;
         cursor: pointer;
         padding: 4px 0;
 

packages/reporter/src/instruments/instruments.scss

@@ -21,7 +21,7 @@
 
       td {
         font-family: $monospace;
-        font-size: 11px;
+        font-size: 12px;
       }
     }
 

packages/reporter/src/lib/state-icon.tsx

@@ -6,9 +6,9 @@ import type { TestState } from '@packages/types'
 import FailedIcon from '@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
 import PassedIcon from '@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'
 import PendingIcon from '@packages/frontend-shared/src/assets/icons/status-pending_x12.svg'
-import ProcessingIcon from '@packages/frontend-shared/src/assets/icons/status-processing_x12.svg'
 import RunningIcon from '@packages/frontend-shared/src/assets/icons/status-running_x12.svg'
 import WandIcon from '@packages/frontend-shared/src/assets/icons/object-magic-wand-dark-mode_x16.svg'
+import { IconStatusQueuedOutline } from '@cypress-design/react-icon'
 
 interface Props extends React.HTMLProps<HTMLDivElement> {
   state: TestState
@@ -50,7 +50,9 @@ const StateIcon: React.FC<Props> = observer((props: Props) => {
 
   if (state === 'processing') {
     return (
-      <ProcessingIcon {...rest} />
+      <IconStatusQueuedOutline
+        size='16'
+        strokeColor="gray-700" />
     )
   }
 

packages/reporter/src/lib/util.ts

@@ -1,12 +1,5 @@
 import type { KeyboardEvent } from 'react'
 
-const INDENT_BASE = 5
-const INDENT_AMOUNT = 15
-
-function indent (level: number) {
-  return INDENT_BASE + level * INDENT_AMOUNT
-}
-
 // Returns a keyboard handler that invokes the provided function when either enter or space is pressed
 const onEnterOrSpace = (f: (() => void)) => {
   return (e: KeyboardEvent) => {
@@ -74,6 +67,5 @@ const getFilenameParts = (spec: string): [string, string] => {
 export {
   formatDuration,
   getFilenameParts,
-  indent,
   onEnterOrSpace,
 }

packages/reporter/src/runnables/runnable-and-suite.tsx

@@ -3,8 +3,6 @@ import _ from 'lodash'
 import { observer } from 'mobx-react'
 import React, { MouseEvent, useCallback } from 'react'
 
-import { indent } from '../lib/util'
-
 import appState, { AppState } from '../lib/app-state'
 import events, { Events } from '../lib/events'
 import Test from '../test/test'
@@ -48,7 +46,7 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
     <Collapsible
       header={_header()}
       headerClass='runnable-wrapper'
-      headerStyle={{ paddingLeft: indent(model.level) }}
+      headerStyle={{ }}
       contentClass='runnables-region'
       isOpen
     >
@@ -68,8 +66,8 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
 Suite.displayName = 'Suite'
 
 export interface RunnableProps {
+  appState?: AppState
   model: TestModel | SuiteModel
-  appState: AppState
   studioEnabled: boolean
   canSaveStudioLogs: boolean
 }
@@ -89,7 +87,10 @@ const Runnable: React.FC<RunnableProps> = observer(({ appState: appStateProps =
     >
       {model.type === 'test'
         ? <Test model={model as TestModel} studioEnabled={studioEnabled} canSaveStudioLogs={canSaveStudioLogs} />
-        : <Suite model={model as SuiteModel} studioEnabled={studioEnabled} canSaveStudioLogs={canSaveStudioLogs} />}
+        : <Suite model={model as SuiteModel}
+          studioEnabled={studioEnabled}
+          canSaveStudioLogs={canSaveStudioLogs}
+        />}
     </li>
   )
 })

packages/reporter/src/runnables/runnable-model.ts

@@ -5,25 +5,29 @@ export interface RunnableProps {
   id: string
   title?: string
   hooks: Array<HookProps>
+  parentTitle?: string
 }
 
 export default class Runnable {
   id: string
   title?: string
   level: number
   hooks: Array<HookProps> = []
+  parentTitle?: string
 
   constructor (props: RunnableProps, level: number) {
     makeObservable(this, {
       id: observable,
       title: observable,
       level: observable,
       hooks: observable,
+      parentTitle: observable,
     })
 
     this.id = props.id
     this.title = props.title
     this.level = level
     this.hooks = props.hooks
+    this.parentTitle = props.parentTitle
   }
 }

packages/reporter/src/runnables/runnables-store.ts

@@ -126,7 +126,32 @@ export class RunnablesStore {
   }
 
   _createSuite (props: SuiteProps, level: number) {
-    const suite = new SuiteModel(props, level)
+    // Get parent suite titles by traversing up the queue
+    const parentTitles: string[] = []
+
+    // Find the immediate parent suite by looking for the last suite at a lower level
+    let parentLevel = level - 1
+
+    for (let i = this._runnablesQueue.length - 1; i >= 0; i--) {
+      const runnable = this._runnablesQueue[i]
+
+      if ('type' in runnable && runnable.type === 'suite' && runnable.level === parentLevel && runnable.title) {
+        // Add this parent's title
+        parentTitles.unshift(runnable.title)
+        break
+      }
+    }
+
+    // Combine parent titles with current suite title
+    const hierarchicalTitle = [...parentTitles, props.title].join(' > ')
+
+    // Create new props with the hierarchical title
+    const suiteProps = {
+      ...props,
+      title: hierarchicalTitle,
+    }
+
+    const suite = new SuiteModel(suiteProps, level)
 
     this._runnablesQueue.push(suite)
     suite.children = this._createRunnableChildren(props, ++level)

packages/reporter/src/runnables/runnables.scss

@@ -93,17 +93,19 @@
 
     .runnable-wrapper {
       border-left: 4px solid transparent;
-      padding: 0 0 0 4px;
+      padding: 0;
 
       .collapsible-header {
         &:focus {
           .collapsible-header-inner {
-            background-color: $gray-1100;
+            background-color: $gray-1000;
             cursor: pointer;
           }
         }
 
         .collapsible-header-inner {
+          padding: 8px !important;
+          background-color: $gray-1000;
           &:hover {
             background-color: $gray-900;
             cursor: pointer;
@@ -118,14 +120,11 @@
           width: 100%;
         }
       }
+      .runnable-controls-studio {
+        opacity: 0.5;
 
-      &:hover {
-        .runnable-controls-studio {
-          opacity: 0.5;
-
-          &:hover {
-            opacity: 1;
-          }
+        &:hover {
+          opacity: 1;
         }
       }
     }
@@ -146,18 +145,30 @@
       margin-right: 5px;
       min-width: 12px;
       text-align: center;
-      font-size: 11px;
+      font-size: 12px;
     }
 
     &.suite .collapsible-indicator {
       margin-left: 2px;
-      .icon-dark {
-        stroke: $gray-800;
+      // .icon-dark {
+      //   stroke: $gray-400;
+      // }
+      .icon-light {
+        fill: $gray-400;
       }
     }
 
+    &> div > .runnable-wrapper {
+      border: 1px solid $gray-950;
+      border-radius: 4px;
+      border-left: 4px solid transparent;
+      margin-top: 2px;
+      margin-bottom: 2px;
+    }
+
     &.runnable-failed > div > .runnable-wrapper,
     &.runnable-failed > div > .runnable-instruments {
+
       border-left: 4px solid $fail;
     }
 
@@ -190,13 +201,38 @@
 
     &.runnable-skipped > div > .runnable-wrapper,
     &.runnable-skipped > div > .runnable-instruments {
+      border: 1px solid $gray-950;
       border-left: 4px solid $gray-500;
     }
+    &.suite.runnable {
+      margin-bottom: 8px;
+    }
 
     &.suite > div > .runnable-wrapper {
+      border: 0;
+      margin: 0;
+      border-radius: 0;
+      background-color: $gray-1100;
+
       .runnable-title {
-        color: $gray-50;
-        font-size: 13px;
+        color: $gray-400;
+        font-size: 14px;
+      }
+
+      .collapsible-header-inner {
+        .runnable-controls-studio {
+          opacity: 0;
+        }
+
+        &:hover {
+          .runnable-controls-studio {
+            opacity: 0.5;
+
+            &:hover {
+              opacity: 1;
+            }
+          }
+        }
       }
     }
 
@@ -256,8 +292,9 @@
   }
 
   .runnable-title {
+    color: $white;
     font-family: $font-system;
-    font-size: 12.5px;
+    font-size: 14px;
     min-width: $reporter-contents-min-width;
     white-space: pre-line;
 
@@ -278,6 +315,10 @@
     }
   }
 
+  .wrap>.runnables {
+    padding: 4px;
+  }
+
   .suite > div .runnable-wrapper,
   .test .runnable-wrapper > .collapsible-header {
     text-overflow: ellipsis;
@@ -286,8 +327,6 @@
   }
 
   .runnable-controls {
-    float: right;
-    height: 18px;
 
     label {
       padding: 2px 4px;
@@ -301,8 +340,19 @@
     }
 
     .runnable-controls-studio {
-      color: $purple-300;
+      display: flex;
+      height: 20px;
+      width: 20px;
+      color: $gray-500;
+      border: 1px solid $gray-900;
+      border-radius: 4px;
       opacity: 0;
+      padding-top: 2px;
+      padding-left: 1px;
+
+      svg {
+        flex: auto;
+      }
     }
   }