Fix terminals (broken since f34146d)

`controlPipe` is now an immutable map, but was not treated that way by
all components.

client/app/scripts/actions/app-actions.js

@@ -219,10 +219,10 @@ export function enterNode(nodeId) {
 
 export function hitEsc() {
   const controlPipe = AppStore.getControlPipe();
-  if (controlPipe && controlPipe.status === 'PIPE_DELETED') {
+  if (controlPipe && controlPipe.get('status') === 'PIPE_DELETED') {
     AppDispatcher.dispatch({
       type: ActionTypes.CLICK_CLOSE_TERMINAL,
-      pipeId: controlPipe.id
+      pipeId: controlPipe.get('id')
     });
     updateRoute();
     // Don't deselect node on ESC if there is a controlPipe (keep terminal open)
@@ -320,8 +320,8 @@ export function receiveControlPipe(pipeId, nodeId, rawTty) {
   }
 
   const controlPipe = AppStore.getControlPipe();
-  if (controlPipe && controlPipe.id !== pipeId) {
-    deletePipe(controlPipe.id);
+  if (controlPipe && controlPipe.get('id') !== pipeId) {
+    deletePipe(controlPipe.get('id'));
   }
 
   AppDispatcher.dispatch({

client/app/scripts/components/app.js

@@ -118,7 +118,6 @@ export default class App extends React.Component {
 
         {showingTerminal && <EmbeddedTerminal
           pipe={this.state.controlPipe}
-          nodeId={this.state.controlPipe.nodeId}
           details={this.state.nodeDetails} />}
 
         <div className="header">

client/app/scripts/components/embedded-terminal.js

@@ -5,7 +5,8 @@ import Terminal from './terminal';
 import { DETAILS_PANEL_WIDTH, DETAILS_PANEL_MARGINS,
   DETAILS_PANEL_OFFSET } from '../constants/styles';
 
-export default function EmeddedTerminal({pipe, nodeId, details}) {
+export default function EmeddedTerminal({pipe, details}) {
+  const nodeId = pipe.get('nodeId');
   const node = details.get(nodeId);
   const d = node && node.details;
   const titleBarColor = d && getNodeColorDark(d.rank, d.label);
@@ -21,7 +22,7 @@ export default function EmeddedTerminal({pipe, nodeId, details}) {
   // the term.js and creating a new one for the new pipe.
   return (
     <div className="terminal-embedded" style={style}>
-      <Terminal key={pipe.id} pipe={pipe} titleBarColor={titleBarColor}
+      <Terminal pipe={pipe} titleBarColor={titleBarColor}
         statusBarColor={statusBarColor} containerMargin={style.right} title={title} />
     </div>
   );

client/app/scripts/components/terminal-app.js

@@ -42,7 +42,6 @@ export class TerminalApp extends React.Component {
     return (
       <div className="terminal-app" style={style}>
         {this.state.controlPipe && <Terminal
-          key={this.state.controlPipe.id}
           pipe={this.state.controlPipe}
           titleBarColor={this.state.titleBarColor}
           statusBarColor={this.state.statusBarColor}

client/app/scripts/components/terminal.js

@@ -109,7 +109,7 @@ export default class Terminal extends React.Component {
       this.socket = null;
       const wereConnected = this.state.connected;
       this.setState({connected: false});
-      if (this.term && this.props.pipe.status !== 'PIPE_DELETED') {
+      if (this.term && this.props.pipe.get('status') !== 'PIPE_DELETED') {
         if (wereConnected) {
           this.createWebsocket(term);
         } else {
@@ -239,7 +239,7 @@ export default class Terminal extends React.Component {
   }
 
   getPipeId() {
-    return this.props.pipe.id;
+    return this.props.pipe.get('id');
   }
 
   getTitle() {
@@ -266,7 +266,7 @@ export default class Terminal extends React.Component {
   }
 
   getStatus() {
-    if (this.props.pipe.status === 'PIPE_DELETED') {
+    if (this.props.pipe.get('status') === 'PIPE_DELETED') {
       return (
         <div>
           <h3>Connection Closed</h3>