Add prompt when closing tab (#121)

- Add onbeforeunload listener at the app level to prompt when closing the tab
- For testing, you need to have interacted with the page (click or keyboard) or else prompt will not show
- Removed unused disconnect/restart session wiring

Fixes #84

Author: mofojed

packages/code-studio/src/dashboard/event-handlers/ConsoleEventHandler.js

@@ -15,8 +15,6 @@ class ConsoleEventHandler {
 
     this.handleSendCommand = this.handleSendCommand.bind(this);
     this.handleSettingsChanged = this.handleSettingsChanged.bind(this);
-    this.handleDisconnectSession = this.handleDisconnectSession.bind(this);
-    this.handleRestartSession = this.handleRestartSession.bind(this);
 
     this.initialize();
   }
@@ -150,34 +148,16 @@ class ConsoleEventHandler {
     this.onSettingsChanged({ consoleCreatorSettings, consoleSettings });
   }
 
-  handleDisconnectSession() {
-    const consolePanel = this.getConsolePanel();
-    if (consolePanel && consolePanel.consoleContainerRef) {
-      consolePanel.consoleContainerRef.closeSessionAndUpdateState();
-    }
-  }
-
-  handleRestartSession() {
-    const consolePanel = this.getConsolePanel();
-    if (consolePanel && consolePanel.consoleContainerRef) {
-      consolePanel.consoleContainerRef.restartSession();
-    }
-  }
-
   startListening() {
     const { eventHub } = this.layout;
     eventHub.on(ConsoleEvent.SEND_COMMAND, this.handleSendCommand);
     eventHub.on(ConsoleEvent.SETTINGS_CHANGED, this.handleSettingsChanged);
-    eventHub.on(ConsoleEvent.DISCONNECT_SESSION, this.handleDisconnectSession);
-    eventHub.on(ConsoleEvent.RESTART_SESSION, this.handleRestartSession);
   }
 
   stopListening() {
     const { eventHub } = this.layout;
     eventHub.off(ConsoleEvent.SEND_COMMAND, this.handleSendCommand);
     eventHub.off(ConsoleEvent.SETTINGS_CHANGED, this.handleSettingsChanged);
-    eventHub.off(ConsoleEvent.DISCONNECT_SESSION, this.handleDisconnectSession);
-    eventHub.off(ConsoleEvent.RESTART_SESSION, this.handleRestartSession);
   }
 }
 

packages/code-studio/src/dashboard/events/ConsoleEvent.js

@@ -8,10 +8,6 @@ class ConsoleEvent {
   static SEND_COMMAND = 'ConsoleEvent.SEND_COMMAND';
 
   static SETTINGS_CHANGED = 'ConsoleEvent.SETTINGS_CHANGED';
-
-  static DISCONNECT_SESSION = 'ConsoleEvent.DISCONNECT_SESSION';
-
-  static RESTART_SESSION = 'ConsoleEvent.RESTART_SESSION';
 }
 
 export default ConsoleEvent;

packages/code-studio/src/dashboard/events/TabEvent.js

@@ -10,10 +10,6 @@ class TabEvent {
   static reload = 'TabEvent.reload';
 
   static clearAllFilters = 'TabEvent.clearAllFilters';
-
-  static DISCONNECT_SESSION = 'TabEvent.DISCONNECT_SESSION';
-
-  static RESTART_SESSION = 'TabEvent.RESTART_SESSION';
 }
 
 export default TabEvent;

packages/code-studio/src/main/AppMainContainer.jsx

@@ -21,11 +21,7 @@ import {
 } from '@deephaven/redux';
 import { PromiseUtils } from '@deephaven/utils';
 import SettingsMenu from '../settings/SettingsMenu';
-import {
-  ConsoleEvent,
-  ControlEvent,
-  InputFilterEvent,
-} from '../dashboard/events';
+import { ControlEvent, InputFilterEvent } from '../dashboard/events';
 import ToolType from '../tools/ToolType';
 import { IrisPropTypes } from '../include/prop-types';
 import AppControlsMenu from './AppControlsMenu';
@@ -91,6 +87,14 @@ const DEFAULT_LAYOUT_CONFIG = [
 ];
 
 export class AppMainContainer extends Component {
+  static handleWindowBeforeUnload(event) {
+    event.preventDefault();
+    // returnValue is required for beforeReload event prompt
+    // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#example
+    // eslint-disable-next-line no-param-reassign
+    event.returnValue = '';
+  }
+
   constructor(props) {
     super(props);
     this.handleSettingsMenuHide = this.handleSettingsMenuHide.bind(this);
@@ -109,16 +113,22 @@ export class AppMainContainer extends Component {
     this.state = { showSettingsMenu: false };
   }
 
-  sendClearFilter() {
-    this.emitLayoutEvent(InputFilterEvent.CLEAR_ALL_FILTERS);
+  componentDidMount() {
+    window.addEventListener(
+      'beforeunload',
+      AppMainContainer.handleWindowBeforeUnload
+    );
   }
 
-  sendDisconnectSession() {
-    this.emitLayoutEvent(ConsoleEvent.DISCONNECT_SESSION);
+  componentWillUnmount() {
+    window.removeEventListener(
+      'beforeunload',
+      AppMainContainer.handleWindowBeforeUnload
+    );
   }
 
-  sendRestartSession() {
-    this.emitLayoutEvent(ConsoleEvent.RESTART_SESSION);
+  sendClearFilter() {
+    this.emitLayoutEvent(InputFilterEvent.CLEAR_ALL_FILTERS);
   }
 
   emitLayoutEvent(event, data = undefined) {
@@ -256,16 +266,6 @@ export class AppMainContainer extends Component {
         },
         shortcut: GLOBAL_SHORTCUTS.SAVE,
       },
-      {
-        action: () => {
-          this.sendRestartSession();
-        },
-      },
-      {
-        action: () => {
-          this.sendDisconnectSession();
-        },
-      },
     ];
 
     const tabBarMenu = (

packages/console/src/Console.test.jsx

@@ -17,8 +17,6 @@ function makeConsoleWrapper() {
   const wrapper = shallow(
     <Console
       commandHistoryStorage={commandHistoryStorage}
-      closeSession={() => {}}
-      restartSession={() => {}}
       focusCommandHistory={() => {}}
       openObject={() => {}}
       closeObject={() => {}}