Confirmation on exit from exec as long as socket has been opened (#19985)

.changelog/19985.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Prompt a user before they close an exec window to prevent accidental close-browser-tab shortcuts that overlap with terminal ones
+```

ui/app/components/exec-terminal.js

@@ -3,15 +3,21 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+// @ts-check
+
 import Component from '@ember/component';
 import { FitAddon } from 'xterm-addon-fit';
 import WindowResizable from '../mixins/window-resizable';
 import { classNames } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 @classic
 @classNames('terminal-container')
 export default class ExecTerminal extends Component.extend(WindowResizable) {
+  @service router;
+
   didInsertElement() {
     super.didInsertElement(...arguments);
     let fitAddon = new FitAddon();
@@ -21,6 +27,38 @@ export default class ExecTerminal extends Component.extend(WindowResizable) {
     this.terminal.open(this.element.querySelector('.terminal'));
 
     fitAddon.fit();
+    this.addExitHandler();
+  }
+
+  socketOpen = false;
+  hasRemovedExitHandler = false;
+
+  @action
+  addExitHandler() {
+    window.addEventListener('beforeunload', this.confirmExit.bind(this));
+  }
+  removeExitHandler() {
+    if (!this.hasRemovedExitHandler) {
+      window.removeEventListener('beforeunload', this.confirmExit.bind(this));
+      this.hasRemovedExitHandler = true;
+    }
+  }
+
+  /**
+   *
+   * @param {BeforeUnloadEvent} event
+   * @returns {string}
+   */
+  confirmExit(event) {
+    if (this.socketOpen) {
+      event.preventDefault();
+      return (event.returnValue = 'Are you sure you want to exit?');
+    }
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.removeExitHandler();
   }
 
   windowResizeHandler(e) {

ui/app/templates/exec.hbs

@@ -58,6 +58,6 @@
         {{/each}}
       </ul>
     </div>
-    <ExecTerminal @terminal={{this.terminal}} />
+    <ExecTerminal @terminal={{this.terminal}} @socketOpen={{this.socketOpen}} />
   </div>
 {{/if}}

ui/package.json

@@ -149,8 +149,8 @@
     "testem-multi-reporter": "^1.2.0",
     "text-encoder-lite": "^2.0.0",
     "webpack": "^5.86.0",
-    "xterm": "^4.6.0",
+    "xterm": "^5.3.0",
-    "xterm-addon-fit": "0.5.0"
+    "xterm-addon-fit": "0.8.0"
   },
   "optionalDependencies": {
     "@babel/plugin-transform-member-expression-literals": "^7.16.7",

ui/yarn.lock

@@ -18703,15 +18703,15 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-xterm-addon-fit@0.5.0:
+xterm-addon-fit@0.8.0:
-  version "0.5.0"
+  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
+  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.8.0.tgz#48ca99015385141918f955ca7819e85f3691d35f"
-  integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
+  integrity sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==
 
-xterm@^4.6.0:
+xterm@^5.3.0:
-  version "4.19.0"
+  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0.tgz#c0f9d09cd61de1d658f43ca75f992197add9ef6d"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-5.3.0.tgz#867daf9cc826f3d45b5377320aabd996cb0fce46"
-  integrity sha512-c3Cp4eOVsYY5Q839dR5IejghRPpxciGmLWWaP9g+ppfMeBChMeLa1DCA+pmX/jyDZ+zxFOmlJL/82qVdayVoGQ==
+  integrity sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==
 
 y18n@^4.0.0:
   version "4.0.3"