Changed hitEnter action to pinSearch.

weaveworks · Apr 26, 2017 · 433136c · 433136c
1 parent 1491283
commit 433136c
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 46 deletions.
diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js
@@ -4,7 +4,6 @@ import ActionTypes from '../constants/action-types';
 import { saveGraph } from '../utils/file-utils';
 import { modulo } from '../utils/math-utils';
 import { updateRoute } from '../utils/router-utils';
-import { parseQuery } from '../utils/search-utils';
 import {
   bufferDeltaUpdate,
   resumeUpdate,
@@ -174,6 +173,16 @@ export function pinNextMetric(delta) {
   };
 }
 
+export function pinSearch() {
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.PIN_SEARCH,
+      query: getState().get('searchQuery'),
+    });
+    updateRoute(getState);
+  };
+}
+
 export function unpinSearch(query) {
   return (dispatch, getState) => {
     dispatch({
@@ -526,29 +535,6 @@ export function hitBackspace() {
   };
 }
 
-export function hitEnter() {
-  return (dispatch, getState) => {
-    const state = getState();
-    // pin query based on current search field
-    if (state.get('searchFocused')) {
-      const query = state.get('searchQuery');
-      if (query && parseQuery(query)) {
-        trackMixpanelEvent('scope.search.query.pin', {
-          query,
-          layout: state.get('topologyViewMode'),
-          topologyId: state.getIn(['currentTopology', 'id']),
-          parentTopologyId: state.getIn(['currentTopology', 'parentId']),
-        });
-        dispatch({
-          type: ActionTypes.PIN_SEARCH,
-          query
-        });
-        updateRoute(getState);
-      }
-    }
-  };
-}
-
 export function hitEsc() {
   return (dispatch, getState) => {
     const state = getState();

diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
@@ -16,7 +16,6 @@ import {
   focusSearch,
   pinNextMetric,
   hitBackspace,
-  hitEnter,
   hitEsc,
   unpinMetric,
   toggleHelp,
@@ -38,11 +37,11 @@ import {
   isTableViewModeSelector,
   isGraphViewModeSelector,
 } from '../selectors/topology';
+import {
+  BACKSPACE_KEY_CODE,
+  ESC_KEY_CODE,
+} from '../constants/key-codes';
 
-
-const BACKSPACE_KEY_CODE = 8;
-const ENTER_KEY_CODE = 13;
-const ESC_KEY_CODE = 27;
 const keyPressLog = debug('scope:app-key-press');
 
 class App extends React.Component {
@@ -79,8 +78,6 @@ class App extends React.Component {
     // don't get esc in onKeyPress
     if (ev.keyCode === ESC_KEY_CODE) {
       this.props.dispatch(hitEsc());
-    } else if (ev.keyCode === ENTER_KEY_CODE) {
-      this.props.dispatch(hitEnter());
     } else if (ev.keyCode === BACKSPACE_KEY_CODE) {
       this.props.dispatch(hitBackspace());
     } else if (ev.code === 'KeyD' && ev.ctrlKey && !showingTerminal) {

diff --git a/client/app/scripts/components/metric-selector-item.js b/client/app/scripts/components/metric-selector-item.js
@@ -15,6 +15,15 @@ class MetricSelectorItem extends React.Component {
     this.onMouseClick = this.onMouseClick.bind(this);
   }
 
+  trackEvent(eventName) {
+    trackMixpanelEvent(eventName, {
+      metricType: this.props.metric.get('label'),
+      layout: this.props.topologyViewMode,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
+  }
+
   onMouseOver() {
     const metricType = this.props.metric.get('label');
     this.props.hoverMetric(metricType);
@@ -25,20 +34,10 @@ class MetricSelectorItem extends React.Component {
     const pinnedMetricType = this.props.pinnedMetricType;
 
     if (metricType !== pinnedMetricType) {
-      trackMixpanelEvent('scope.metric.resource.pin', {
-        metricType,
-        layout: this.props.topologyViewMode,
-        topologyId: this.props.currentTopology.get('id'),
-        parentTopologyId: this.props.currentTopology.get('parentId'),
-      });
+      this.trackEvent('scope.metric.resource.pin');
       this.props.pinMetric(metricType);
     } else {
-      trackMixpanelEvent('scope.metric.resource.unpin', {
-        metricType,
-        layout: this.props.topologyViewMode,
-        topologyId: this.props.currentTopology.get('id'),
-        parentTopologyId: this.props.currentTopology.get('parentId'),
-      });
+      this.trackEvent('scope.metric.resource.unpin');
       this.props.unpinMetric();
     }
   }

diff --git a/client/app/scripts/components/search.js b/client/app/scripts/components/search.js
@@ -3,13 +3,15 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
 
-import { blurSearch, doSearch, focusSearch, toggleHelp } from '../actions/app-actions';
+import { blurSearch, doSearch, focusSearch, pinSearch, toggleHelp } from '../actions/app-actions';
 import { searchMatchCountByTopologySelector } from '../selectors/search';
 import { isResourceViewModeSelector } from '../selectors/topology';
 import { slugify } from '../utils/string-utils';
+import { parseQuery } from '../utils/search-utils';
 import { isTopologyEmpty } from '../utils/topology-utils';
 import { trackMixpanelEvent } from '../utils/tracking-utils';
 import SearchItem from './search-item';
+import { ENTER_KEY_CODE } from '../constants/key-codes';
 
 
 function shortenHintLabel(text) {
@@ -49,6 +51,7 @@ class Search extends React.Component {
     super(props, context);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleChange = this.handleChange.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.saveQueryInputRef = this.saveQueryInputRef.bind(this);
     this.doSearch = debounce(this.doSearch.bind(this), 200);
@@ -76,6 +79,19 @@ class Search extends React.Component {
     this.doSearch(inputValue);
   }
 
+  handleKeyUp(ev) {
+    // If the search query is parsable, pin it when ENTER key is hit.
+    if (ev.keyCode === ENTER_KEY_CODE && parseQuery(this.props.searchQuery)) {
+      trackMixpanelEvent('scope.search.query.pin', {
+        query: this.props.searchQuery,
+        layout: this.props.topologyViewMode,
+        topologyId: this.props.currentTopology.get('id'),
+        parentTopologyId: this.props.currentTopology.get('parentId'),
+      });
+      this.props.pinSearch();
+    }
+  }
+
   handleFocus() {
     this.props.focusSearch();
   }
@@ -139,7 +155,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}
+              value={value} onChange={this.handleChange} onKeyUp={this.handleKeyUp}
               onFocus={this.handleFocus} onBlur={this.handleBlur}
               disabled={disabled} ref={this.saveQueryInputRef} />
           </div>
@@ -174,5 +190,5 @@ export default connect(
     searchQuery: state.get('searchQuery'),
     searchMatchCountByTopology: searchMatchCountByTopologySelector(state),
   }),
-  { blurSearch, doSearch, focusSearch, toggleHelp }
+  { blurSearch, doSearch, focusSearch, pinSearch, toggleHelp }
 )(Search);
diff --git a/client/app/scripts/constants/key-codes.js b/client/app/scripts/constants/key-codes.js
@@ -0,0 +1,4 @@
+
+export const BACKSPACE_KEY_CODE = 8;
+export const ENTER_KEY_CODE = 13;
+export const ESC_KEY_CODE = 27;