fix(plugins/plugin-client-common): tab switching can be slow on windows

Fixes #5907

Author: starpit

plugins/plugin-client-common/src/components/Views/Terminal/ScrollableTerminal.tsx

@@ -188,7 +188,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
       : { name: this.props.tabTitle, description: '', splits: [this.scrollbackWithWelcome()] }
 
     this.state = {
-      focusedIdx: 0,
+      focusedIdx: -1,
       splits,
       notebookMetadata: { name, description }
     }
@@ -621,24 +621,43 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
   }
 
   /** Owner wants us to focus on the current prompt */
-  public doFocus(scrollback = this.current) {
-    const { _activeBlock } = scrollback
+  private _focusDebouncer: NodeJS.Timeout
+  public doFocus(scrollback = this.current, idx = this.state.focusedIdx) {
+    if (this.state.focusedIdx >= 0 && idx === this.state.focusedIdx) {
+      return
+    }
+
+    if (this._focusDebouncer) {
+      clearTimeout(this._focusDebouncer)
+      this._focusDebouncer = undefined
+    }
 
-    if (_activeBlock) {
-      if (_activeBlock.state._block && isInViewport(_activeBlock.state._block)) {
-        // re: isInViewport, see https://github.com/IBM/kui/issues/4739
-        _activeBlock.doFocus()
+    const ourDebouncer = setTimeout(() => {
+      if (this._focusDebouncer !== ourDebouncer || (this.state.focusedIdx >= 0 && idx === this.state.focusedIdx)) {
+        return
+      } else {
+        this._focusDebouncer = undefined
       }
-    } else {
-      // a bit of a data abstraction violation; we should figure out how to solve this better
-      // see https://github.com/IBM/kui/issues/3945
-      const xterm = document.querySelector('textarea.xterm-helper-textarea') as HTMLTextAreaElement
-      if (xterm) {
-        xterm.focus()
+
+      const { _activeBlock } = scrollback
+
+      if (_activeBlock) {
+        if (_activeBlock.state._block && isInViewport(_activeBlock.state._block)) {
+          // re: isInViewport, see https://github.com/IBM/kui/issues/4739
+          _activeBlock.doFocus()
+        }
+      } else {
+        // a bit of a data abstraction violation; we should figure out how to solve this better
+        // see https://github.com/IBM/kui/issues/3945
+        const xterm = document.querySelector('textarea.xterm-helper-textarea') as HTMLTextAreaElement
+        if (xterm) {
+          xterm.focus()
+        }
       }
-    }
 
-    this.setFocusOnScrollback(scrollback)
+      this.setFocusOnScrollback(scrollback)
+    }, 10)
+    this._focusDebouncer = ourDebouncer
   }
 
   /**
@@ -866,7 +885,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
           eventBus.emitWithTabId('/tab/close/request', parent.uuid, parent)
         }
 
-        return { splits }
+        return { splits, focusedIdx: idx === 0 ? 0 : idx - 1 }
       }
     })
   }
@@ -1124,7 +1143,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
                     willRemove={this.willRemoveBlock.bind(this, scrollback.uuid, idx)}
                     hasBlockAfter={this.hasBlockAfter(scrollback.blocks, idx)}
                     hasBlockBefore={this.hasBlockBefore(idx)}
-                    willLoseFocus={() => this.doFocus(scrollback)}
+                    willLoseFocus={() => this.doFocus(scrollback, idx)}
                     willFocusBlock={willFocusBlock}
                     isExperimental={hasCommand(_) && _.isExperimental}
                     isFocused={isFocused}

plugins/plugin-core-support/src/test/core-support/replay.ts

@@ -221,16 +221,17 @@ Common.proxyDescribe(`core snapshot and replay by query ${process.env.MOCHA_RUN_
       .then(ReplExpect.okWithString(base64Output))
       .catch(Common.oops(this, true)))
 
+  const title = 'replay-by-query'
+
   it('should snapshot', () =>
-    CLI.command('snapshot /tmp/test.kui', this.app)
+    CLI.command(`snapshot /tmp/test.kui --title ${title}`, this.app)
       .then(ReplExpect.justOK)
       .catch(Common.oops(this, true)))
 
-  it('should refresh', () => Common.refresh(this))
-
   it('should replay by query', async () => {
     try {
       await this.app.client.url(`${process.env.WEBPACK_CLIENT_URL}?command=replay /tmp/test.kui`)
+      await this.app.client.waitForExist(Selectors.TOP_TAB_WITH_TITLE(title), CLI.waitTimeout)
 
       // verify the base64 command replay
       let idx = 0

plugins/plugin-core-support/src/test/core-support2/tab-navigation.ts

@@ -154,9 +154,4 @@ describe('tab navigation', function(this: Common.ISuite) {
   testSelector('#help-button', true, undefined, true)
   it('should have a new About Kui top tab', () =>
     this.app.client.waitForVisible(Selectors.TOP_TAB_WITH_TITLE('Welcome to Kui'), 5000))
-  testPromptIsSelected()
-
-  // now the sidecar is open, so cycle through the sidecar tabs
-  // testAboutMode('about', false, true)
-  // testAboutMode('version', true) // hit enter on the Version tab
 })