Focus terminal on load

Use object.assign for default option

app/assets/javascripts/terminal/terminal.js

 import $ from 'jquery';
 import { Terminal } from 'xterm';
 import * as fit from 'xterm/lib/addons/fit/fit';
-import * as attach from 'xterm/lib/addons/attach/attach';
 
 export default class GLTerminal {
-  constructor(options) {
-    this.options = options || {};
-
-    if (!Object.prototype.hasOwnProperty.call(this.options, 'cursorBlink')) {
-      this.options.cursorBlink = true;
-    }
-
-    if (!Object.prototype.hasOwnProperty.call(this.options, 'screenKeys')) {
-      this.options.screenKeys = true;
-    }
+  constructor(options = {}) {
+    this.options = Object.assign({}, {
+      cursorBlink: true,
+      screenKeys: true,
+    }, options);
 
     this.container = document.querySelector(options.selector);
 
@@ -37,16 +31,15 @@ export default class GLTerminal {
 
   createTerminal() {
     Terminal.applyAddon(fit);
-    Terminal.applyAddon(attach);
 
     this.terminal = new Terminal(this.options);
 
-    //TODO - CHECK IF WE SHOULD USE `attach` instead
     this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
     this.socket.binaryType = 'arraybuffer';
 
     this.terminal.open(this.container);
     this.terminal.fit();
+    this.terminal.focus();
 
     this.socket.onopen = () => {
       this.runTerminal();

app/assets/stylesheets/application.scss

@@ -19,7 +19,6 @@
 
 @import "../../../node_modules/pikaday/scss/pikaday";
 
-
 /*
  * GitLab UI framework
  */

changelogs/unreleased/25990-improve-web-terminal.yml

+---
+title: Move xterm to a node dependency and remove it from vendor's folder
+merge_request: 20588
+author:
+type: other

config/application.rb

@@ -162,7 +162,8 @@ module Gitlab
     config.assets.precompile << "icons.json"
     config.assets.precompile << "illustrations/*.svg"
 
-    config.assets.paths<< "#{config.root}/node_modules/xterm/src/"
+    # Import css for xterm
+    config.assets.paths << "#{config.root}/node_modules/xterm/src/"
     config.assets.precompile << "xterm.css"
 
     ## EE-specific assets config START