From cbd8c7aba2b9efbe9eb79d8e0e3bf7500f26204d Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Mon, 15 Aug 2016 15:53:08 +0200
Subject: [PATCH] Adds tooltip to terminal-popout button

- Fixes react warning p > div.
- Adds esc to close popped out terminal.
---
 client/app/scripts/components/terminal-app.js | 28 +++++++++++++++++--
 client/app/scripts/components/terminal.js     | 26 ++++++++---------
 client/app/styles/main.less                   |  3 +-
 3 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/client/app/scripts/components/terminal-app.js b/client/app/scripts/components/terminal-app.js
index b48da142d..34f15efaf 100644
--- a/client/app/scripts/components/terminal-app.js
+++ b/client/app/scripts/components/terminal-app.js
@@ -2,7 +2,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import Terminal from './terminal';
-import { receiveControlPipeFromParams } from '../actions/app-actions';
+import { receiveControlPipeFromParams, hitEsc } from '../actions/app-actions';
+
+const ESC_KEY_CODE = 27;
 
 class TerminalApp extends React.Component {
 
@@ -18,6 +20,28 @@ class TerminalApp extends React.Component {
       titleBarColor: params.titleBarColor,
       statusBarColor: params.statusBarColor
     };
+
+    this.onKeyUp = this.onKeyUp.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('keyup', this.onKeyUp);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keyup', this.onKeyUp);
+  }
+
+  onKeyUp(ev) {
+    if (ev.keyCode === ESC_KEY_CODE) {
+      this.props.hitEsc();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!nextProps.controlPipe) {
+      window.close();
+    }
   }
 
   render() {
@@ -44,5 +68,5 @@ function mapStateToProps(state) {
 
 export default connect(
   mapStateToProps,
-  { receiveControlPipeFromParams }
+  { receiveControlPipeFromParams, hitEsc }
 )(TerminalApp);
diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js
index 617b2e662..7a75650a5 100644
--- a/client/app/scripts/components/terminal.js
+++ b/client/app/scripts/components/terminal.js
@@ -210,11 +210,7 @@ class Terminal extends React.Component {
 
   handleCloseClick(ev) {
     ev.preventDefault();
-    if (this.isEmbedded()) {
-      this.props.dispatch(clickCloseTerminal(this.getPipeId(), true));
-    } else {
-      window.close();
-    }
+    this.props.dispatch(clickCloseTerminal(this.getPipeId(), true));
   }
 
   handlePopoutTerminal(ev) {
@@ -256,13 +252,15 @@ class Terminal extends React.Component {
     };
     return (
       <div className="terminal-header" style={style}>
-          <div className="terminal-header-tools">
-            <span className="terminal-header-tools-icon fa fa-external-link"
-              onClick={this.handlePopoutTerminal} />
-            <span className="terminal-header-tools-icon fa fa-close"
-              onClick={this.handleCloseClick} />
-          </div>
-          <span className="terminal-header-title">{this.getTitle()}</span>
+        <div className="terminal-header-tools">
+          <span
+            title="Open in new browser window"
+            className="terminal-header-tools-icon fa fa-external-link"
+            onClick={this.handlePopoutTerminal} />
+          <span title="Close" className="terminal-header-tools-icon fa fa-close"
+            onClick={this.handleCloseClick} />
+        </div>
+        <span className="terminal-header-title">{this.getTitle()}</span>
       </div>
     );
   }
@@ -272,10 +270,10 @@ class Terminal extends React.Component {
       return (
         <div>
           <h3>Connection Closed</h3>
-          <p>
+          <div className="termina-status-bar-message">
             The connection to this container has been closed.
             <div className="link" onClick={this.handleCloseClick}>Close terminal</div>
-          </p>
+          </div>
         </div>
       );
     }
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index e00bbdab6..cc3e71a4a 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -1056,10 +1056,11 @@ h2 {
       margin: 4px 0;
     }
 
-    p {
+    &-message {
       margin: 4px 0;
       color: @white;
     }
+
     .link {
       text-transform: uppercase;
       font-weight: bold;