fix: addressing style regressions in the CT runner (#15542)

Co-authored-by: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Co-authored-by: Barthélémy Ledoux <bart@cypress.io>
Co-authored-by: ElevateBart <ledouxb@gmail.com>

npm/design-system/src/components/FileExplorer/FileExplorer.tsx

@@ -64,13 +64,15 @@ export const FileExplorer: React.FC<FileExplorerProps> = (props) => {
   const [openFolders, setOpenFolders] = React.useState<Record<string, boolean>>({})
 
   React.useLayoutEffect(() => {
+    const openFoldersTmp:Record<string, boolean> = {}
+
     function walk (nodes: TreeNode[]) {
       for (const node of nodes) {
         if (node.type === 'folder') {
           // only update with newly created folders.
           // we want to maintain the current state (open/closed) of existing folders.
-          if (!(node.absolute in openFolders)) {
-            setOpenFolders({ ...openFolders, [node.absolute]: true })
+          if (!(node.absolute in openFoldersTmp)) {
+            openFoldersTmp[node.absolute] = true
           }
 
           walk(node.files)
@@ -79,7 +81,8 @@ export const FileExplorer: React.FC<FileExplorerProps> = (props) => {
     }
 
     walk(props.files)
-  }, [props.files, openFolders])
+    setOpenFolders(openFoldersTmp)
+  }, [props.files])
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     const files: TreeNode[] = []

npm/design-system/src/components/Nav/LeftNav.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react'
 import cs from 'classnames'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+
+library.add(fas)
 
 import styles from './LeftNav.module.scss'
 import { LeftNavProps, NavButtonProps, NavLocation, NavItem } from './types'

npm/design-system/src/components/SpecList/SpecList.module.scss

@@ -3,6 +3,14 @@
 .nav {
   user-select: none;
   white-space: nowrap;
+  overflow: auto;
+
+  > .ul {
+    height: 100%; // capture a11y focus
+    // don't hide the a11y box outline for the tree
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
 }
 
 .ul {

packages/runner-ct/src/app/KeyboardHelper.scss

@@ -3,6 +3,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  background-color: white;
 
   .keyboard-helper { 
     padding: 8px 32px;

packages/runner-ct/src/app/RunnerCt.module.scss

@@ -51,11 +51,14 @@ $box-shadow-closest: 0px 0px 5px rgba(0, 0, 0, 0.4);
 .specsList {
   position: relative;
   background: $spec-list-background-color;
-  border-right: 1px solid $border-color;
+  min-width: 150px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .runner {
-  box-shadow: unset;
+  box-shadow: $shadow-sm;
   left: 0 !important;
 }
 
@@ -73,6 +76,7 @@ $box-shadow-closest: 0px 0px 5px rgba(0, 0, 0, 0.4);
   .ctPluginsHeader {
     height: 40px; // make sure this is hardcoded in as well RunnerCt.tsx
     display: flex;
+    border-top: 1px solid $metal-20;
 
     .ctTogglePluginsSectionButton {
       margin-left: auto;

packages/runner-ct/src/app/RunnerCt.scss

@@ -28,7 +28,15 @@ body, html {
 }
 
 .runner {
-  @include checkerboard();
+  // @include checkerboard();
+   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZGJkYmRiIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiNjNGM0YzQiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=");
+}
+
+// Prevent left-most Resizer from showing up when the pane is hidden.
+.isSpecsListClosed {
+  > .Resizer {
+    display: none;
+  }
 }
 
 // Must be globally scoped. Bummer.

packages/runner-ct/src/app/RunnerCt.tsx

@@ -16,9 +16,10 @@ import { useGlobalHotKey } from '../lib/useHotKey'
 import { debounce } from '../lib/debounce'
 import { LeftNavMenu } from './LeftNavMenu'
 import styles from './RunnerCt.module.scss'
-import { Plugins } from './Plugins'
 import { KeyboardHelper } from './KeyboardHelper'
 import './RunnerCt.scss'
+import { Plugins } from './Plugins'
+import { NoSpecSelected } from './NoSpecSelected'
 
 interface AppProps {
   state: State
@@ -220,7 +221,9 @@ const App: React.FC<AppProps> = observer(
     const autRunnerContent = state.spec
       ? <Iframes {...props} />
       : (
-        <KeyboardHelper />
+        <NoSpecSelected>
+          <KeyboardHelper />
+        </NoSpecSelected>
       )
 
     const MainAreaComponent: React.FC | typeof SplitPane = props.state.spec
@@ -255,8 +258,10 @@ const App: React.FC<AppProps> = observer(
           maxSize={hideIfScreenshotting(() => state.isSpecsListOpen ? 600 : 0)}
           defaultSize={hideIfScreenshotting(() => state.isSpecsListOpen ? state.specListWidth : 0)}
           onDragFinished={persistWidth('ctSpecListWidth')}
-          className="primary"
-          // @ts-expect-error split-pane ref types are weak so we are using our custom type for ref
+          className={cs('primary', { 'isSpecsListClosed': !state.isSpecsListOpen })}
+          pane2Style={{
+            borderLeft: '1px solid rgba(230, 232, 234, 1)' /* $metal-20 */,
+          }}
           ref={splitPaneRef}
           onChange={debounce(onSpecListPaneChange)}
 

packages/runner-ct/src/variables.scss

@@ -12,16 +12,6 @@ $resizer-hover-color: $chill-40;
 $aut-background-color: white;
 $aut-drop-shadow: $shadow-md;
 
-/**
- * Utility mixins
- */
-@mixin checkerboard() {
-  $checkerBoardColor: $metal-05;
-  background-image: linear-gradient(45deg, $checkerBoardColor 25%, transparent 25%), linear-gradient(-45deg, $checkerBoardColor 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $checkerBoardColor 75%), linear-gradient(-45deg, transparent 75%, $checkerBoardColor 75%);
-  background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-}
-
 /**
  * Utility classes
  */