From 1b028e1e048b34df3874261df6a0300711079598 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Thu, 10 Aug 2017 18:02:08 +0200
Subject: [PATCH] Add fade out transition to node details panel and activate it
 when switching the top panel.

---
 client/app/scripts/actions/app-actions.js     | 7 +++++++
 client/app/scripts/components/node-details.js | 5 ++++-
 client/app/scripts/constants/action-types.js  | 1 +
 client/app/scripts/reducers/root.js           | 9 +++++++++
 client/app/scripts/utils/web-api-utils.js     | 4 +++-
 client/app/styles/_base.scss                  | 2 +-
 6 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js
index 88be513df..092aa1b07 100644
--- a/client/app/scripts/actions/app-actions.js
+++ b/client/app/scripts/actions/app-actions.js
@@ -228,6 +228,7 @@ export function clickCloseDetails(nodeId) {
       type: ActionTypes.CLICK_CLOSE_DETAILS,
       nodeId
     });
+    getNodeDetails(getState, dispatch);
     updateRoute(getState);
   };
 }
@@ -545,6 +546,12 @@ export function receiveNodeDetails(details) {
   };
 }
 
+export function nodeDetailsStartTransition() {
+  return {
+    type: ActionTypes.NODE_DETAILS_START_TRANSITION
+  };
+}
+
 export function receiveNodesDelta(delta) {
   return (dispatch, getState) => {
     if (!isPausedSelector(getState())) {
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 6feafe0d0..c1de7cecb 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -9,6 +9,7 @@ import { brightenColor, getNeutralColor, getNodeColorDark } from '../utils/color
 import { isGenericTable, isPropertyList } from '../utils/node-details-utils';
 import { resetDocumentTitle, setDocumentTitle } from '../utils/title-utils';
 
+import Overlay from './overlay';
 import MatchedText from './matched-text';
 import NodeDetailsControls from './node-details/node-details-controls';
 import NodeDetailsGenericTable from './node-details/node-details-generic-table';
@@ -151,7 +152,7 @@ class NodeDetails extends React.Component {
   }
 
   renderDetails() {
-    const { details, nodeControlStatus, nodeMatches = makeMap() } = this.props;
+    const { details, nodeControlStatus, transitioning, nodeMatches = makeMap() } = this.props;
     const showControls = details.controls && details.controls.length > 0;
     const nodeColor = getNodeColorDark(details.rank, details.label, details.pseudo);
     const {error, pending} = nodeControlStatus ? nodeControlStatus.toJS() : {};
@@ -241,6 +242,8 @@ class NodeDetails extends React.Component {
             />
           </CloudFeature>
         </div>
+
+        <Overlay faded={transitioning} />
       </div>
     );
   }
diff --git a/client/app/scripts/constants/action-types.js b/client/app/scripts/constants/action-types.js
index 5238ad391..ed0ea006d 100644
--- a/client/app/scripts/constants/action-types.js
+++ b/client/app/scripts/constants/action-types.js
@@ -62,6 +62,7 @@ const ACTION_TYPES = [
   'SHOW_NETWORKS',
   'SHUTDOWN',
   'SORT_ORDER_CHANGED',
+  'NODE_DETAILS_START_TRANSITION',
   'START_TIME_TRAVEL',
   'TIME_TRAVEL_START_TRANSITION',
   'TOGGLE_CONTRAST_MODE',
diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js
index 9e0c9781e..53ebe3ef2 100644
--- a/client/app/scripts/reducers/root.js
+++ b/client/app/scripts/reducers/root.js
@@ -555,6 +555,7 @@ export function rootReducer(state = initialState, action) {
         state = state.updateIn(['nodeDetails', action.details.id], (obj) => {
           const result = Object.assign({}, obj);
           result.notFound = false;
+          result.transitioning = false;
           result.details = action.details;
           return result;
         });
@@ -562,6 +563,14 @@ export function rootReducer(state = initialState, action) {
       return state;
     }
 
+    case ActionTypes.NODE_DETAILS_START_TRANSITION: {
+      const topNode = state.get('nodeDetails').last();
+      if (topNode && topNode.id) {
+        state = state.updateIn(['nodeDetails', topNode.id], d => ({ ...d, transitioning: true }));
+      }
+      return state;
+    }
+
     case ActionTypes.SET_RECEIVED_NODES_DELTA: {
       // Turn on the table view if the graph is too complex, but skip
       // this block if the user has already loaded topologies once.
diff --git a/client/app/scripts/utils/web-api-utils.js b/client/app/scripts/utils/web-api-utils.js
index 328b9c412..9eb0a7844 100644
--- a/client/app/scripts/utils/web-api-utils.js
+++ b/client/app/scripts/utils/web-api-utils.js
@@ -7,7 +7,8 @@ import { blurSearch, clearControlError, closeWebsocket, openWebsocket, receiveEr
   receiveApiDetails, receiveNodesDelta, receiveNodeDetails, receiveControlError,
   receiveControlNodeRemoved, receiveControlPipe, receiveControlPipeStatus,
   receiveControlSuccess, receiveTopologies, receiveNotFound,
-  receiveNodesForTopology, receiveNodes } from '../actions/app-actions';
+  receiveNodesForTopology, receiveNodes, nodeDetailsStartTransition
+} from '../actions/app-actions';
 
 import { getCurrentTopologyUrl } from '../utils/topology-utils';
 import { layersTopologyIdsSelector } from '../selectors/resource-view/layout';
@@ -299,6 +300,7 @@ export function getNodeDetails(getState, dispatch) {
     }
     const url = urlComponents.join('');
 
+    dispatch(nodeDetailsStartTransition());
     doRequest({
       url,
       success: (res) => {
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index 63c31c36b..80a780d47 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -78,7 +78,7 @@
   left: 0;
   opacity: 0;
   pointer-events: none;
-  z-index: 2000;
+  z-index: 1000;
 
   &.faded {
     // NOTE: Not sure if we should block the pointer events here..