Merge branch '25990-improve-web-terminal' into 'master'

Move xterm to a node dependency and remove it from vendor's folder

Closes #49741

See merge request gitlab-org/gitlab-ce!20588

3 files changed, 55 insertions, 60 deletions

diff --git a/app/assets/javascripts/terminal/index.js b/app/assets/javascripts/terminal/index.js
index 1a75e072c4e..49aeb377c74 100644
--- a/app/assets/javascripts/terminal/index.js
+++ b/app/assets/javascripts/terminal/index.js
@@ -1,9 +1,3 @@
-import 'vendor/xterm/encoding-indexes';
-import 'vendor/xterm/encoding';
-import Terminal from 'vendor/xterm/xterm';
-import 'vendor/xterm/fit';
-import './terminal';
+import Terminal from './terminal';
 
-window.Terminal = Terminal;
-
-export default () => new gl.Terminal({ selector: '#terminal' });
+export default () => new Terminal({ selector: '#terminal' });
diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js
index caffcddf3b0..74c5bbe45a4 100644
--- a/app/assets/javascripts/terminal/terminal.js
+++ b/app/assets/javascripts/terminal/terminal.js
@@ -1,70 +1,71 @@
-/* global Terminal */
-
 import $ from 'jquery';
+import { Terminal } from 'xterm';
+import * as fit from 'xterm/lib/addons/fit/fit';
 
-(() => {
-  class GLTerminal {
-
-    constructor(options) {
-      this.options = options || {};
-
-      if (!Object.prototype.hasOwnProperty.call(this.options, 'cursorBlink')) {
-        this.options.cursorBlink = true;
-      }
+export default class GLTerminal {
+  constructor(options = {}) {
+    this.options = Object.assign({}, {
+      cursorBlink: true,
+      screenKeys: true,
+    }, options);
 
-      if (!Object.prototype.hasOwnProperty.call(this.options, 'screenKeys')) {
-        this.options.screenKeys = true;
-      }
+    this.container = document.querySelector(options.selector);
 
-      this.container = document.querySelector(options.selector);
+    this.setSocketUrl();
+    this.createTerminal();
 
-      this.setSocketUrl();
-      this.createTerminal();
-      $(window).off('resize.terminal').on('resize.terminal', () => {
+    $(window)
+      .off('resize.terminal')
+      .on('resize.terminal', () => {
         this.terminal.fit();
       });
-    }
+  }
+
+  setSocketUrl() {
+    const { protocol, hostname, port } = window.location;
+    const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://';
+    const path = this.container.dataset.projectPath;
 
-    setSocketUrl() {
-      const { protocol, hostname, port } = window.location;
-      const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://';
-      const path = this.container.dataset.projectPath;
+    this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`;
+  }
 
-      this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`;
-    }
+  createTerminal() {
+    Terminal.applyAddon(fit);
 
-    createTerminal() {
-      this.terminal = new Terminal(this.options);
-      this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
-      this.socket.binaryType = 'arraybuffer';
+    this.terminal = new Terminal(this.options);
 
-      this.terminal.open(this.container);
-      this.socket.onopen = () => { this.runTerminal(); };
-      this.socket.onerror = () => { this.handleSocketFailure(); };
-    }
+    this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
+    this.socket.binaryType = 'arraybuffer';
 
-    runTerminal() {
-      const decoder = new TextDecoder('utf-8');
-      const encoder = new TextEncoder('utf-8');
+    this.terminal.open(this.container);
+    this.terminal.fit();
+    this.terminal.focus();
 
-      this.terminal.on('data', (data) => {
-        this.socket.send(encoder.encode(data));
-      });
+    this.socket.onopen = () => {
+      this.runTerminal();
+    };
+    this.socket.onerror = () => {
+      this.handleSocketFailure();
+    };
+  }
 
-      this.socket.addEventListener('message', (ev) => {
-        this.terminal.write(decoder.decode(ev.data));
-      });
+  runTerminal() {
+    const decoder = new TextDecoder('utf-8');
+    const encoder = new TextEncoder('utf-8');
 
-      this.isTerminalInitialized = true;
-      this.terminal.fit();
-    }
+    this.terminal.on('data', data => {
+      this.socket.send(encoder.encode(data));
+    });
 
-    handleSocketFailure() {
-      this.terminal.write('\r\nConnection failure');
-    }
+    this.socket.addEventListener('message', ev => {
+      this.terminal.write(decoder.decode(ev.data));
+    });
 
+    this.isTerminalInitialized = true;
+    this.terminal.fit();
   }
 
-  window.gl = window.gl || {};
-  gl.Terminal = GLTerminal;
-})();
+  handleSocketFailure() {
+    this.terminal.write('\r\nConnection failure');
+  }
+}
diff --git a/app/views/projects/jobs/terminal.html.haml b/app/views/projects/jobs/terminal.html.haml
index efea666a4d9..f7e7535ee92 100644
--- a/app/views/projects/jobs/terminal.html.haml
+++ b/app/views/projects/jobs/terminal.html.haml
@@ -5,7 +5,7 @@
 - page_title 'Terminal', "#{@build.name} (##{@build.id})", 'Jobs'
 
 - content_for :page_specific_javascripts do
-  = stylesheet_link_tag "xterm/xterm"
+  = stylesheet_link_tag "xterm.css"
 
 .terminal-container{ class: container_class }
   #terminal{ data: { project_path: terminal_project_job_path(@project, @build, format: :ws) } }