Merge pull request #1499 from weaveworks/blur-search-on-terminal

Blur search when opening a terminal

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

@@ -357,19 +357,21 @@ export function hitEsc() {
   return (dispatch, getState) => {
     const state = getState();
     const controlPipe = state.get('controlPipes').last();
-    if (state.get('showingHelp')) {
-      dispatch(hideHelp());
-    } else if (state.get('searchQuery')) {
-      dispatch(doSearch(''));
-    } else if (state.get('searchFocused')) {
-      dispatch(blurSearch());
-    } else if (controlPipe && controlPipe.get('status') === 'PIPE_DELETED') {
+    if (controlPipe && controlPipe.get('status') === 'PIPE_DELETED') {
       dispatch({
         type: ActionTypes.CLICK_CLOSE_TERMINAL,
         pipeId: controlPipe.get('id')
       });
       updateRoute(getState);
       // Don't deselect node on ESC if there is a controlPipe (keep terminal open)
+    } else if (state.get('searchFocused')) {
+      if (state.get('searchQuery')) {
+        dispatch(doSearch(''));
+      } else {
+        dispatch(blurSearch());
+      }
+    } else if (state.get('showingHelp')) {
+      dispatch(hideHelp());
     } else if (state.get('nodeDetails').last() && !controlPipe) {
       dispatch({ type: ActionTypes.DESELECT_NODE });
       updateRoute(getState);

client/app/scripts/components/app.js

@@ -54,6 +54,8 @@ class App extends React.Component {
   }
 
   onKeyUp(ev) {
+    const { showingTerminal } = this.props;
+
     // don't get esc in onKeyPress
     if (ev.keyCode === ESC_KEY_CODE) {
       this.props.dispatch(hitEsc());
@@ -61,7 +63,7 @@ class App extends React.Component {
       this.props.dispatch(hitEnter());
     } else if (ev.keyCode === BACKSPACE_KEY_CODE) {
       this.props.dispatch(hitBackspace());
-    } else if (ev.code === 'KeyD' && ev.ctrlKey) {
+    } else if (ev.code === 'KeyD' && ev.ctrlKey && !showingTerminal) {
       toggleDebugToolbar();
       this.forceUpdate();
     }
@@ -95,10 +97,7 @@ class App extends React.Component {
   }
 
   render() {
-    const { availableCanvasMetrics, nodeDetails, controlPipes, showingHelp } = this.props;
-    const showingDetails = nodeDetails.size > 0;
-    const showingTerminal = controlPipes.size > 0;
-    const showingMetricsSelector = availableCanvasMetrics.count() > 0;
+    const { showingDetails, showingHelp, showingMetricsSelector, showingTerminal } = this.props;
 
     return (
       <div className="app">
@@ -137,13 +136,13 @@ class App extends React.Component {
 function mapStateToProps(state) {
   return {
     activeTopologyOptions: getActiveTopologyOptions(state),
-    availableCanvasMetrics: state.get('availableCanvasMetrics'),
-    controlPipes: state.get('controlPipes'),
-    nodeDetails: state.get('nodeDetails'),
     routeSet: state.get('routeSet'),
     searchFocused: state.get('searchFocused'),
     searchQuery: state.get('searchQuery'),
+    showingDetails: state.get('nodeDetails').size > 0,
     showingHelp: state.get('showingHelp'),
+    showingMetricsSelector: state.get('availableCanvasMetrics').count() > 0,
+    showingTerminal: state.get('controlPipes').size > 0,
     urlState: getUrlState(state)
   };
 }

client/app/scripts/components/search.js

@@ -42,6 +42,7 @@ class Search extends React.Component {
 
   constructor(props, context) {
     super(props, context);
+    this.handleBlur = this.handleBlur.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.doSearch = _.debounce(this.doSearch.bind(this), 200);
@@ -50,6 +51,10 @@ class Search extends React.Component {
     };
   }
 
+  handleBlur() {
+    this.props.blurSearch();
+  }
+
   handleChange(ev) {
     const inputValue = ev.target.value;
     let value = inputValue;
@@ -119,7 +124,7 @@ class Search extends React.Component {
               .map(query => <SearchItem query={query} key={query} />)}
             <input className="search-input-field" type="text" id={inputId}
               value={value} onChange={this.handleChange}
-              onFocus={this.handleFocus}
+              onFocus={this.handleFocus} onBlur={this.handleBlur}
               disabled={disabled} ref="queryInput" />
           </div>
           {!showPinnedSearches && <div className="search-hint">

client/app/scripts/utils/web-api-utils.js

@@ -1,7 +1,7 @@
 import debug from 'debug';
 import reqwest from 'reqwest';
 
-import { clearControlError, closeWebsocket, openWebsocket, receiveError,
+import { blurSearch, clearControlError, closeWebsocket, openWebsocket, receiveError,
   receiveApiDetails, receiveNodesDelta, receiveNodeDetails, receiveControlError,
   receiveControlNodeRemoved, receiveControlPipe, receiveControlPipeStatus,
   receiveControlSuccess, receiveTopologies, receiveNotFound,
@@ -208,6 +208,7 @@ export function doControlRequest(nodeId, control, dispatch) {
       dispatch(receiveControlSuccess(nodeId));
       if (res) {
         if (res.pipe) {
+          dispatch(blurSearch());
           dispatch(receiveControlPipe(res.pipe, nodeId, res.raw_tty, true));
         }
         if (res.removedNode) {