Upgrade xterm v3.12.0 to v4.10.0

frontend/package.json

@@ -190,7 +190,9 @@
     "victory-core": "^35.3.5",
     "vscode-languageserver-types": "^3.10.0",
     "whatwg-fetch": "2.x",
-    "xterm": "^3.12.2",
+    "xterm": "^4.10.0",
+    "xterm-addon-attach": "0.6.0",
+    "xterm-addon-fit": "0.5.0",
     "yaml-language-server": "0.13.0",
     "yup": "^0.27.0"
   },

frontend/packages/console-app/src/components/cloud-shell/Terminal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Terminal as XTerminal, ITerminalOptions } from 'xterm';
-import { fit } from 'xterm/lib/addons/fit/fit';
+import { Terminal as XTerminal, ITerminalOptions, ITerminalAddon } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
 
 import './Terminal.scss';
 
@@ -21,6 +21,7 @@ export type ImperativeTerminalType = {
   reset: () => void;
   onDataReceived: (data) => void;
   onConnectionClosed: (msg: string) => void;
+  loadAttachAddon: (addOn: ITerminalAddon) => void;
 };
 
 const Terminal = React.forwardRef<ImperativeTerminalType, TerminalProps>(({ onData }, ref) => {
@@ -29,33 +30,31 @@ const Terminal = React.forwardRef<ImperativeTerminalType, TerminalProps>(({ onDa
 
   React.useEffect(() => {
     const term: XTerminal = new XTerminal(terminalOptions);
+    const fitAddon = new FitAddon();
     term.open(terminalRef.current);
+    term.loadAddon(fitAddon);
     term.focus();
 
     const resizeObserver: ResizeObserver = new ResizeObserver(() => {
-      window.requestAnimationFrame(() => fit(term));
+      window.requestAnimationFrame(() => fitAddon.fit());
     });
 
     resizeObserver.observe(terminalRef.current);
 
     if (terminal.current !== term) {
-      terminal.current && terminal.current.destroy();
+      terminal.current && terminal.current.dispose();
       terminal.current = term;
     }
 
     return () => {
-      term.destroy();
+      term.dispose();
       resizeObserver.disconnect();
     };
   }, []);
 
   React.useEffect(() => {
     const term = terminal.current;
-    term.on('data', onData);
-
-    return () => {
-      term.off('data', onData);
-    };
+    term.onData(onData);
   }, [onData]);
 
   React.useImperativeHandle(ref, () => ({
@@ -76,6 +75,10 @@ const Terminal = React.forwardRef<ImperativeTerminalType, TerminalProps>(({ onDa
       terminal.current.write(`\x1b[31m${msg || 'disconnected'}\x1b[m\r\n`);
       terminal.current.setOption('disableStdin', true);
     },
+    loadAttachAddon: (addOn: ITerminalAddon) => {
+      if (!terminal.current) return;
+      terminal.current.loadAddon(addOn);
+    },
   }));
 
   return <div className="co-terminal" ref={terminalRef} />;

frontend/packages/console-shared/src/utils/index.ts

@@ -18,3 +18,4 @@ export * from './hpa-utils';
 export * from './sample-utils';
 export * from './multiselectdropdown';
 export * from './annotations';
+export * from './xterm-addon-fullscreen';

frontend/packages/console-shared/src/utils/xterm-addon-fullscreen.scss

@@ -0,0 +1,10 @@
+.xterm.fullscreen {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: auto;
+    height: auto;
+    z-index: 255;
+}

frontend/packages/console-shared/src/utils/xterm-addon-fullscreen.ts

@@ -0,0 +1,30 @@
+import { Terminal, ITerminalAddon } from 'xterm';
+import './xterm-addon-fullscreen.scss';
+
+export class XtermAddonFullscreen implements ITerminalAddon {
+  private terminal: Terminal | undefined;
+
+  public activate(terminal: Terminal): void {
+    this.terminal = terminal;
+  }
+
+  public dispose(): void {
+    if (this.terminal?.element.classList.contains('fullscreen')) {
+      this.terminal?.element.classList.remove('fullscreen');
+    }
+  }
+
+  public toggleFullScreen(fullscreen?: boolean): void {
+    let fn: string;
+
+    if (typeof fullscreen === 'undefined') {
+      fn = this.terminal?.element.classList.contains('fullscreen') ? 'remove' : 'add';
+    } else if (!fullscreen) {
+      fn = 'remove';
+    } else {
+      fn = 'add';
+    }
+
+    this.terminal?.element.classList[fn]('fullscreen');
+  }
+}

frontend/packages/kubevirt-plugin/src/style.scss

@@ -11,4 +11,4 @@
 @import "~patternfly-react/dist/sass/patternfly-react";
 
 // Console StyleSheets
-@import "~xterm/dist/xterm.css";
+@import "~xterm/css/xterm.css";

frontend/public/components/_terminal.scss

@@ -1,4 +1,4 @@
-@import "~xterm/dist/xterm.css";
+@import "~xterm/css/xterm.css";
 
 $console-z-index: $zindex-navbar-fixed + 20;
 $console-collapse-link-z-index: $console-z-index + 20;

frontend/public/components/terminal.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Terminal as XTerminal } from 'xterm';
-import * as fit from 'xterm/lib/addons/fit/fit';
-import * as full from 'xterm/lib/addons/fullscreen/fullscreen';
+import { FitAddon } from 'xterm-addon-fit';
+import { withTranslation } from 'react-i18next';
 import { CompressIcon } from '@patternfly/react-icons';
 import { Button } from '@patternfly/react-core';
-import { withTranslation } from 'react-i18next';
-
-XTerminal.applyAddon(fit);
-XTerminal.applyAddon(full);
+import { XtermAddonFullscreen } from '@console/shared';
 
 class Terminal_ extends React.Component {
   constructor(props) {
@@ -21,7 +18,11 @@ class Terminal_ extends React.Component {
     this.onDataReceived = (data) => this.terminal && this.terminal.write(data);
 
     this.terminal = new XTerminal(Object.assign({}, this.props.options));
-    this.terminal.on('data', this.props.onData);
+    this.fitAddon = new FitAddon();
+    this.fullscreenAddon = new XtermAddonFullscreen();
+    this.terminal.loadAddon(this.fitAddon);
+    this.terminal.loadAddon(this.fullscreenAddon);
+    this.terminal.onData(this.props.onData);
   }
 
   reset() {
@@ -49,7 +50,7 @@ class Terminal_ extends React.Component {
   }
 
   setFullscreen(fullscreen) {
-    this.terminal.toggleFullScreen(fullscreen);
+    this.fullscreenAddon.toggleFullScreen(fullscreen);
     this.isFullscreen = fullscreen;
     this.focus();
     this.onResize();
@@ -78,7 +79,7 @@ class Terminal_ extends React.Component {
   }
 
   componentWillUnmount() {
-    this.terminal && this.terminal.destroy();
+    this.terminal && this.terminal.dispose();
     window.removeEventListener('resize', this.onResize);
   }
 
@@ -112,7 +113,7 @@ class Terminal_ extends React.Component {
         return;
       }
       // tell the terminal to resize itself
-      terminal.fit();
+      this.fitAddon.fit();
       // update the pty
       this.props.onResize(terminal.rows, terminal.cols);
     });

frontend/public/vendor.scss

@@ -34,7 +34,6 @@
 @import "~patternfly/dist/sass/patternfly/notifications-drawer";
 @import '~patternfly/dist/sass/patternfly/toolbar';
 @import '~patternfly/dist/sass/patternfly/forms';
-@import "~xterm/dist/addons/fullscreen/fullscreen";
 @import '~@patternfly/react-catalog-view-extension/dist/sass/variables';
 @import '~@patternfly/react-catalog-view-extension/dist/sass/catalog-item';
 @import '~@patternfly/react-catalog-view-extension/dist/sass/catalog-tile';

frontend/yarn.lock

@@ -19683,17 +19683,22 @@ xtend@~2.1.1:
   dependencies:
     object-keys "~0.4.0"
 
+[email protected]:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-attach/-/xterm-addon-attach-0.6.0.tgz#220c23addd62ab88c9914e2d4c06f7407e44680e"
+  integrity sha512-Mo8r3HTjI/EZfczVCwRU6jh438B4WLXxdFO86OB7bx0jGhwh2GdF4ifx/rP+OB+Cb2vmLhhVIZ00/7x3YSP3dg==
+
+[email protected]:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
+  integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
+
 xterm-addon-fit@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.2.1.tgz#353f43921eb78e3f9ad3f3afbb14e7ac183ca738"
   integrity sha512-BlR57O3t1/bmVcnS81bn9ZnNf+GiGNbeXdNUKSBa9tKEwNUMcU3S+KFLIRv7rm1Ty0D5pMOu0vbz/RDorKRwKQ==
 
-xterm@^3.12.2:
-  version "3.12.2"
-  resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.12.2.tgz#ec8563857c7b098973bab4dbf537f1a7c6a790c8"
-  integrity sha512-FSXovDdsqIKqoayC6+zFzhaHi+A3NSceM5rgTW88DH7sS96HdwMToB2p1rW+FyNsSqfAgFwlXDRQk+fh/aHvPQ==
-
-xterm@^4.8.1:
+xterm@^4.10.0, xterm@^4.8.1:
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.10.0.tgz#fc4f554e3e718aff9b83622e858e64b0953067bb"
   integrity sha512-Wn66I8YpSVkgP3R95GjABC6Eb21pFfnCSnyIqKIIoUI13ohvwd0KGVzUDfyEFfSAzKbPJfrT2+vt7SfUXBZQKQ==