diff --git a/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx b/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx index 4aafc40bae..ed38440868 100644 --- a/packages/dashboard-core-plugins/src/panels/NotebookPanel.tsx +++ b/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 { 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 { 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 { 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 { /** * @param event The click event from clicking on the link */ - handleLinkClick(event: MouseEvent) { + handleLinkClick(event: React.MouseEvent) { const { notebooksUrl, session, sessionLanguage } = this.props; const { href } = event.currentTarget; if (!href || !href.startsWith(notebooksUrl)) { @@ -960,9 +958,12 @@ class NotebookPanel extends Component { }); } - 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 { onTab={this.handleTab} onResize={this.handleResize} onShow={this.handleShow} + onTabClicked={this.handleTabClick} onTabFocus={this.handleTabFocus} onTabBlur={this.handleTabBlur} onSessionOpen={this.handleSessionOpened} diff --git a/packages/dashboard-core-plugins/src/panels/Panel.tsx b/packages/dashboard-core-plugins/src/panels/Panel.tsx index 261f07a941..31738ed0cb 100644 --- a/packages/dashboard-core-plugins/src/panels/Panel.tsx +++ b/packages/dashboard-core-plugins/src/panels/Panel.tsx @@ -40,7 +40,7 @@ interface PanelProps { onFocus: FocusEventHandler; onBlur: FocusEventHandler; 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 { onTab(tab); } - handleTabClicked(...args: unknown[]): void { + handleTabClicked(e: MouseEvent): void { const { onTabClicked } = this.props; - onTabClicked(...args); + onTabClicked(e); } handleClearAllFilters(...args: unknown[]): void { diff --git a/packages/golden-layout/src/controls/Tab.ts b/packages/golden-layout/src/controls/Tab.ts index e300f3252a..153a010bf9 100644 --- a/packages/golden-layout/src/controls/Tab.ts +++ b/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