diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js index 9c823b70fa..afa805db36 100644 --- a/client/app/scripts/actions/app-actions.js +++ b/client/app/scripts/actions/app-actions.js @@ -234,10 +234,10 @@ export function clickCloseDetails(nodeId) { }; } -export function clickCloseTerminal(pipeId) { +export function closeTerminal(pipeId) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.CLICK_CLOSE_TERMINAL, + type: ActionTypes.CLOSE_TERMINAL, pipeId }); updateRoute(getState); @@ -491,7 +491,7 @@ export function hitEsc() { const controlPipe = state.get('controlPipes').last(); if (controlPipe && controlPipe.get('status') === 'PIPE_DELETED') { dispatch({ - type: ActionTypes.CLICK_CLOSE_TERMINAL, + type: ActionTypes.CLOSE_TERMINAL, pipeId: controlPipe.get('id') }); updateRoute(getState); diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index 92e1ad5179..a1976b4351 100644 --- a/client/app/scripts/components/terminal.js +++ b/client/app/scripts/components/terminal.js @@ -4,9 +4,9 @@ import React from 'react'; import { connect } from 'react-redux'; import classNames from 'classnames'; import { debounce } from 'lodash'; -import Term from 'xterm'; +import { Terminal as Term } from 'xterm'; -import { clickCloseTerminal } from '../actions/app-actions'; +import { closeTerminal } from '../actions/app-actions'; import { getNeutralColor } from '../utils/color-utils'; import { setDocumentTitle } from '../utils/title-utils'; import { getPipeStatus, deletePipe, doResizeTty, getWebsocketUrl, basePath } from '../utils/web-api-utils'; @@ -157,6 +157,10 @@ class Terminal extends React.Component { if (this.props.connect !== nextProps.connect && nextProps.connect) { this.mountTerminal(); } + // Close the terminal window immediatelly when the pipe is deleted. + if (nextProps.pipe.get('status') === 'PIPE_DELETED') { + this.props.dispatch(closeTerminal(this.getPipeId())); + } } componentDidMount() { @@ -176,6 +180,8 @@ class Terminal extends React.Component { }); this.term.open(this.innerFlex); + this.term.focus(); + this.term.on('data', (data) => { if (this.socket) { this.socket.send(data); @@ -240,13 +246,13 @@ class Terminal extends React.Component { handleCloseClick(ev) { ev.preventDefault(); - this.props.dispatch(clickCloseTerminal(this.getPipeId())); + this.props.dispatch(closeTerminal(this.getPipeId())); } handlePopoutTerminal(ev) { ev.preventDefault(); const paramString = JSON.stringify(this.props); - this.props.dispatch(clickCloseTerminal(this.getPipeId())); + this.props.dispatch(closeTerminal(this.getPipeId())); this.setState({detached: true}); const bcr = this.node.getBoundingClientRect(); @@ -310,18 +316,6 @@ class Terminal extends React.Component { } getStatus() { - if (this.props.pipe.get('status') === 'PIPE_DELETED') { - return ( -