feat: persist pane sizes and fix resizing bug (#15480)

packages/runner-ct/cypress/component/RunnerCt.spec.tsx

@@ -7,15 +7,27 @@ import '@packages/runner/src/main.scss'
 
 const selectors = {
  reporter: '[data-cy=reporter]',
+ noSpecSelectedReporter: '[data-cy=no-spec-selected-reporter]',
  specsList: '[data-cy=specs-list]',
  searchInput: 'input[placeholder="Find spec..."]',
 }
 
+interface Overrides {
+ saveState?: Function
+}
+
+const noop = () => {}
+
 class FakeEventManager {
- start = () => { }
- on = () => { }
- stop = () => {}
- notifyRunningSpec = () => { }
+ constructor (overrides: Overrides = {}) {
+ this.saveState = overrides.saveState || noop
+ }
+
+ start = noop
+ on = noop
+ stop = noop
+ notifyRunningSpec = noop
+ saveState: Function = () => { }
 }
 
 const fakeConfig = { projectName: 'Project', env: {}, isTextTerminal: false } as any as Cypress.RuntimeConfigOptions
@@ -58,30 +70,43 @@ describe('RunnerCt', () => {
  })
 
  context('keyboard shortcuts', () => {
- beforeEach(() => {
+ it('toggles specs list drawer using shortcut', () => {
+ const saveState = cy.stub()
+
  mount(
  <RunnerCt
  state={makeState()}
  // @ts-ignore - this is difficult to stub. Real one breaks things.
- eventManager={new FakeEventManager()}
+ eventManager={new FakeEventManager({ saveState })}
  config={fakeConfig}
  />,
  )
 
  cy.window().then((win) => win.focus())
- })
-
- it('toggles specs list drawer using shortcut', () => {
  cy.get(selectors.specsList).should('be.visible')
 
  cy.realPress(['Meta', 'B'])
- cy.get(selectors.specsList).should('not.be.visible')
+ cy.get(selectors.specsList).should('not.be.visible').then(() => {
+ expect(saveState).to.have.been.calledWith({ ctIsSpecsListOpen: false })
+ })
 
  cy.realPress(['Meta', 'B'])
- cy.get(selectors.specsList).should('be.visible')
+ cy.get(selectors.specsList).should('be.visible').then(() => {
+ expect(saveState).to.have.been.calledWith({ ctIsSpecsListOpen: false }),
+ expect(saveState).to.have.been.calledWith({ ctIsSpecsListOpen: true })
+ })
  })
 
  it('focuses the search field on "/"', () => {
+ mount(
+ <RunnerCt
+ state={makeState()}
+ // @ts-ignore - this is difficult to stub. Real one breaks things.
+ eventManager={new FakeEventManager()}
+ config={fakeConfig}
+ />,
+ )
+
  cy.realPress('/')
  cy.get(selectors.searchInput).should('be.focused')
  })
@@ -95,7 +120,7 @@ describe('RunnerCt', () => {
  eventManager={new FakeEventManager()}
  config={fakeConfig} />)
 
- cy.get(selectors.reporter).should('not.be.visible')
+ cy.get(selectors.noSpecSelectedReporter).should('exist')
  cy.percySnapshot()
  })
  })

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

@@ -20,7 +20,7 @@ export const ReporterContainer = observer(
  function ReporterContainer (props: ReporterContainerProps) {
  if (!props.state.spec) {
  return (
- <div className='no-spec' data-cy="reporter">
+ <div className='no-spec' data-cy="no-spec-selected-reporter">
  <NoSpecSelected />
  </div>
  )

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

@@ -95,9 +95,9 @@ const App: React.FC<AppProps> = observer(
  }, [])
 
  React.useEffect(() => {
- const isOpenMode = !config.isTextTerminal
-
- state.setIsSpecsListOpen(isOpenMode)
+ if (config.isTextTerminal) {
+ state.setIsSpecsListOpen(false)
+ }
  }, [])
 
  useScreenshotHandler({
@@ -124,7 +124,10 @@ const App: React.FC<AppProps> = observer(
  type: 'js',
  onClick: ({ index }) => {
  onNavItemClick(index)
- state.setIsSpecsListOpen(!props.state.isSpecsListOpen)
+ const isOpen = !props.state.isSpecsListOpen
+
+ state.setIsSpecsListOpen(isOpen)
+ props.eventManager.saveState({ ctIsSpecsListOpen: isOpen })
  },
  },
  },
@@ -150,7 +153,10 @@ const App: React.FC<AppProps> = observer(
 
  function toggleSpecsList () {
  setActiveIndex((val) => val === 0 ? undefined : 0)
- state.setIsSpecsListOpen(!props.state.isSpecsListOpen)
+ const newVal = !props.state.isSpecsListOpen
+
+ state.setIsSpecsListOpen(newVal)
+ props.eventManager.saveState({ ctIsSpecsListOpen: newVal })
  }
 
  function focusSpecsList () {
@@ -179,6 +185,12 @@ const App: React.FC<AppProps> = observer(
  state.updateSpecListWidth(newWidth)
  }
 
+ function persistWidth (prop: 'ctReporterWidth' | 'ctSpecListWidth') {
+ return (newWidth: number) => {
+ props.eventManager.saveState({ [prop]: newWidth })
+ }
+ }
+
  function hideIfScreenshotting (callback: () => number) {
  if (state.screenshotting) {
  return 0
@@ -218,6 +230,21 @@ const App: React.FC<AppProps> = observer(
  <KeyboardHelper />
  )
 
+ const MainAreaComponent: React.FC | typeof SplitPane = props.state.spec
+ ? SplitPane
+ : (props) => <div>{props.children}</div>
+
+ const mainAreaProps = props.state.spec
+ ? {
+ split: 'vertical',
+ minSize: hideReporterIfNecessary(() => 100),
+ maxSize: hideReporterIfNecessary(() => 600),
+ defaultSize: hideReporterIfNecessary(() => state.reporterWidth),
+ className: 'primary',
+ onChange: debounce(onReporterSplitPaneChange),
+ }
+ : {}
+
  return (
  <SplitPane
  split="vertical"
@@ -229,10 +256,10 @@ const App: React.FC<AppProps> = observer(
  {leftNav}
  <SplitPane
  split="vertical"
- // do not allow resizing of this for now, simplifes calculation for scale of AUT.
  minSize={hideIfScreenshotting(() => state.isSpecsListOpen ? 30 : 0)}
  maxSize={hideIfScreenshotting(() => state.isSpecsListOpen ? 600 : 0)}
- defaultSize={hideIfScreenshotting(() => state.isSpecsListOpen ? DEFAULT_LIST_WIDTH : 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
  ref={splitPaneRef}
@@ -250,15 +277,7 @@ const App: React.FC<AppProps> = observer(
  }
  onSelectSpec={runSpec}
  />
-
- <SplitPane
- split="vertical"
- minSize={hideReporterIfNecessary(() => 100)}
- maxSize={hideReporterIfNecessary(() => 600)}
- defaultSize={hideReporterIfNecessary(() => DEFAULT_REPORTER_WIDTH)}
- className="primary"
- onChange={debounce(onReporterSplitPaneChange)}
- >
+ <MainAreaComponent {...mainAreaProps}>
  <ReporterContainer
  state={props.state}
  config={props.config}
@@ -271,7 +290,7 @@ const App: React.FC<AppProps> = observer(
  allowResize={props.state.isAnyDevtoolsPluginOpen}
  size={hideIfScreenshotting(() =>
  state.isAnyDevtoolsPluginOpen
- ? DEFAULT_PLUGINS_HEIGHT
+ ? state.pluginsHeight
  // show the small not resize-able panel with buttons or nothing
  : state.isAnyPluginToShow ? PLUGIN_BAR_HEIGHT : 0)}
  onChange={debounce(onPluginsSplitPaneChange)}
@@ -296,9 +315,8 @@ const App: React.FC<AppProps> = observer(
  pluginRootContainer={pluginRootContainer}
  />
  </SplitPane>
- </SplitPane>
+ </MainAreaComponent>
  </SplitPane>
-
  </SplitPane>
  )
  },

packages/runner-ct/src/lib/state.ts

@@ -136,9 +136,10 @@ export default class State {
  multiSpecs = [],
  reporterWidth = DEFAULT_REPORTER_WIDTH,
  specListWidth = DEFAULT_LIST_WIDTH,
+ isSpecsListOpen = true,
  }) {
  this.reporterWidth = reporterWidth
- this.pluginsHeight = PLUGIN_BAR_HEIGHT
+ this.isSpecsListOpen = isSpecsListOpen
  this.spec = spec
  this.specs = specs
  this.specListWidth = specListWidth

packages/runner-ct/src/main.jsx

@@ -31,7 +31,12 @@ const Runner = {
 
  configState.specs = config.specs
 
- const state = new State(configState)
+ const ctRunnerSpecificDefaults = {
+ reporterWidth: config.state.ctReporterWidth,
+ isSpecsListOpen: config.state.ctIsSpecsListOpen,
+ specListWidth: config.state.ctSpecListWidth,
+ }
+ const state = new State({ ...configState, ...ctRunnerSpecificDefaults })
 
  const setSpecByUrlHash = () => {
  const specPath = util.specPath()

packages/server/lib/saved_state.js

@@ -25,6 +25,9 @@ reporterWidth
 showedOnBoardingModal
 showedStudioModal
 preferredOpener
+ctReporterWidth
+ctIsSpecsListOpen
+ctSpecListWidth
 `.trim().split(/\s+/)
 
 const formStatePath = (projectRoot) => {