From edf94a4da8a236742b6f114c9478785e6fbc8876 Mon Sep 17 00:00:00 2001
From: jpellizzari <jordan@weave.works>
Date: Fri, 9 Dec 2016 14:33:14 -0800
Subject: [PATCH] Added control to reset local view state

---
 client/app/scripts/actions/app-actions.js    |  8 +++++++
 client/app/scripts/components/help-panel.js  | 22 ++++++++++++++++----
 client/app/scripts/constants/action-types.js |  1 +
 client/app/styles/main.less                  | 22 ++++++++++++++++++++
 4 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js
index daa825787..4f46dc071 100644
--- a/client/app/scripts/actions/app-actions.js
+++ b/client/app/scripts/actions/app-actions.js
@@ -11,6 +11,7 @@ import { doControlRequest, getAllNodes, getNodesDelta, getNodeDetails,
   getTopologies, deletePipe } from '../utils/web-api-utils';
 import { getActiveTopologyOptions,
   getCurrentTopologyUrl } from '../utils/topology-utils';
+import { storageSet } from '../utils/storage-utils';
 
 const log = debug('scope:app-actions');
 
@@ -665,3 +666,10 @@ export function route(urlState) {
     );
   };
 }
+
+export function resetLocalViewState() {
+  return (dispatch) => {
+    dispatch({type: ActionTypes.RESET_LOCAL_VIEW_STATE});
+    storageSet('scopeViewState', '');
+  };
+}
diff --git a/client/app/scripts/components/help-panel.js b/client/app/scripts/components/help-panel.js
index aad9b3b7f..ed5c1fb42 100644
--- a/client/app/scripts/components/help-panel.js
+++ b/client/app/scripts/components/help-panel.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import { searchableFieldsSelector } from '../selectors/chartSelectors';
 import { CANVAS_MARGINS } from '../constants/styles';
-import { hideHelp } from '../actions/app-actions';
+import { hideHelp, resetLocalViewState } from '../actions/app-actions';
 
 
 const GENERAL_SHORTCUTS = [
@@ -149,7 +149,7 @@ function renderFieldsPanel(currentTopologyName, searchableFields) {
 }
 
 
-function HelpPanel({currentTopologyName, searchableFields, onClickClose}) {
+function HelpPanel({currentTopologyName, searchableFields, onClickClose, onClickReset}) {
   return (
     <div className="help-panel-wrapper">
       <div className="help-panel" style={{marginTop: CANVAS_MARGINS.top}}>
@@ -161,8 +161,19 @@ function HelpPanel({currentTopologyName, searchableFields, onClickClose}) {
           {renderSearchPanel()}
           {renderFieldsPanel(currentTopologyName, searchableFields)}
         </div>
+        <div className="help-panel-controls">
+          <span
+            title="Reset view state"
+            className="fa fa-trash-o"
+            onClick={onClickReset}
+          />
+        </div>
         <div className="help-panel-tools">
-          <span title="Close details" className="fa fa-close" onClick={onClickClose} />
+          <span
+            title="Close details"
+            className="fa fa-close"
+            onClick={onClickClose}
+          />
         </div>
       </div>
     </div>
@@ -178,4 +189,7 @@ function mapStateToProps(state) {
 }
 
 
-export default connect(mapStateToProps, { onClickClose: hideHelp })(HelpPanel);
+export default connect(mapStateToProps, {
+  onClickClose: hideHelp,
+  onClickReset: resetLocalViewState
+})(HelpPanel);
diff --git a/client/app/scripts/constants/action-types.js b/client/app/scripts/constants/action-types.js
index cb617363c..47fa94df5 100644
--- a/client/app/scripts/constants/action-types.js
+++ b/client/app/scripts/constants/action-types.js
@@ -45,6 +45,7 @@ const ACTION_TYPES = [
   'RECEIVE_TOPOLOGIES',
   'RECEIVE_API_DETAILS',
   'RECEIVE_ERROR',
+  'RESET_LOCAL_VIEW_STATE',
   'ROUTE_TOPOLOGY',
   'SELECT_METRIC',
   'SHOW_HELP',
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 60a64d166..9d366bad9 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -624,11 +624,13 @@ h2 {
     position: relative;
   }
 
+
   &-tools {
     position: absolute;
     top: 6px;
     right: 8px;
 
+
     > span {
       .btn-opacity;
       padding: 4px 5px;
@@ -1586,6 +1588,26 @@ h2 {
         border-color: rgba(131, 131, 172, 0.6);
       }
     }
+
+  }
+
+  &-controls {
+    border: 1px solid #fff;
+    border-radius: 10%;
+    position: absolute;
+    left: 100px;
+    top: 95%;
+    font-size: 20px;
+    width: 30px;
+    height: 30px;
+    transition: all 0.2s ease-in-out;
+    line-height: 30px;
+    text-align: center;
+
+    &:hover {
+      cursor: pointer;
+      border: 1px solid #d0d0d0;
+    }
   }