feat: Double click notebook tab to remove its preview status (#1190)

Something I noticed while working on #1189 is that we didn't support
double clicking the tab to promote from preview to normal state like
VSCode does. This PR lets you double click the tab of a notebook in
preview to change it from preview state to normal state.

Tested double clicking preview notebook, non-preview notebook, and
opening other notebooks in preview after promoting via double click

Author: mattrunyon

packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx

@@ -1,5 +1,5 @@
 // Wrapper for the Notebook for use in a golden layout container
-import React, { Component, MouseEvent, ReactElement } from 'react';
+import React, { Component, ReactElement } from 'react';
 import ReactDOM from 'react-dom';
 import memoize from 'memoize-one';
 import { connect } from 'react-redux';
@@ -176,7 +176,7 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     this.handleLinkClick = this.handleLinkClick.bind(this);
     this.handleLoadSuccess = this.handleLoadSuccess.bind(this);
     this.handleLoadError = this.handleLoadError.bind(this);
-    this.handlePanelTabClick = this.handlePanelTabClick.bind(this);
+    this.handleTabClick = this.handleTabClick.bind(this);
     this.handleRenameFile = this.handleRenameFile.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.handleRunCommand = this.handleRunCommand.bind(this);
@@ -283,7 +283,6 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     if (tab != null) this.initTab(tab);
     this.initNotebookContent();
     glEventHub.on(NotebookEvent.RENAME_FILE, this.handleRenameFile);
-    glContainer.on('tabClicked', this.handlePanelTabClick);
   }
 
   componentDidUpdate(
@@ -312,11 +311,10 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     this.debouncedSavePanelState.flush();
     this.pending.cancel();
 
-    const { glContainer, glEventHub } = this.props;
+    const { glEventHub } = this.props;
 
     const { fileMetadata, isPreview } = this.state;
     glEventHub.off(NotebookEvent.RENAME_FILE, this.handleRenameFile);
-    glContainer.off('tabClicked', this.handlePanelTabClick);
     glEventHub.emit(NotebookEvent.UNREGISTER_FILE, fileMetadata, isPreview);
   }
 
@@ -736,7 +734,7 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
   /**
    * @param event The click event from clicking on the link
    */
-  handleLinkClick(event: MouseEvent<HTMLAnchorElement>) {
+  handleLinkClick(event: React.MouseEvent<HTMLAnchorElement>) {
     const { notebooksUrl, session, sessionLanguage } = this.props;
     const { href } = event.currentTarget;
     if (!href || !href.startsWith(notebooksUrl)) {
@@ -960,9 +958,12 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
     });
   }
 
-  handlePanelTabClick(): void {
-    log.debug('handlePanelTabClick');
+  handleTabClick(e: MouseEvent): void {
+    log.debug('handle NotebookPanel tab click');
     this.focus();
+    if (e.detail === 2) {
+      this.removePreviewStatus();
+    }
   }
 
   /**
@@ -1173,6 +1174,7 @@ class NotebookPanel extends Component<NotebookPanelProps, NotebookPanelState> {
           onTab={this.handleTab}
           onResize={this.handleResize}
           onShow={this.handleShow}
+          onTabClicked={this.handleTabClick}
           onTabFocus={this.handleTabFocus}
           onTabBlur={this.handleTabBlur}
           onSessionOpen={this.handleSessionOpened}

packages/dashboard-core-plugins/src/panels/Panel.tsx

@@ -40,7 +40,7 @@ interface PanelProps {
   onFocus: FocusEventHandler<HTMLDivElement>;
   onBlur: FocusEventHandler<HTMLDivElement>;
   onTab: (tab: Tab) => void;
-  onTabClicked: (...args: unknown[]) => void;
+  onTabClicked: (e: MouseEvent) => void;
   onClearAllFilters: (...args: unknown[]) => void;
   onHide: (...args: unknown[]) => void;
   onResize: (...args: unknown[]) => void;
@@ -180,9 +180,9 @@ class Panel extends PureComponent<PanelProps, PanelState> {
     onTab(tab);
   }
 
-  handleTabClicked(...args: unknown[]): void {
+  handleTabClicked(e: MouseEvent): void {
     const { onTabClicked } = this.props;
-    onTabClicked(...args);
+    onTabClicked(e);
   }
 
   handleClearAllFilters(...args: unknown[]): void {

packages/golden-layout/src/controls/Tab.ts

@@ -236,7 +236,6 @@ export default class Tab {
         isComponent(this.contentItem)
       ) {
         this.header.parent.setActiveContentItem(this.contentItem);
-        this.contentItem.container.emit('tabClicked');
       } else if (
         isComponent(this.contentItem) &&
         !this.contentItem.container._contentElement[0].contains(
@@ -246,10 +245,10 @@ export default class Tab {
         // if no focus inside put focus onto the container
         // so focusin always fires for tabclicks
         this.contentItem.container._contentElement.focus();
+      }
 
-        // still emit tab clicked event, so panels can also
-        // do it's own focus handling if desired
-        this.contentItem.container.emit('tabClicked');
+      if (isComponent(this.contentItem)) {
+        this.contentItem.container.emit('tabClicked', event);
       }
 
       // might have been called from the dropdown