From b2779e42e6d26a9b4d0cb49f79bb4f289605882c Mon Sep 17 00:00:00 2001
From: Dmitri Pisarev <dimaip@gmail.com>
Date: Wed, 7 Mar 2018 10:06:43 +0300
Subject: [PATCH] TASK: instantly focus node when navigating from PageTree

---
 Classes/Neos/Neos/Ui/Fusion/Helper/NodeInfoHelper.php  |  1 +
 .../src/Containers/LeftSideBar/NodeTree/index.js       |  8 ++++++--
 .../src/Containers/RightSideBar/Inspector/index.js     | 10 ++++------
 .../src/Containers/RightSideBar/Inspector/style.css    |  6 ++++++
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/Classes/Neos/Neos/Ui/Fusion/Helper/NodeInfoHelper.php b/Classes/Neos/Neos/Ui/Fusion/Helper/NodeInfoHelper.php
index 7dfb33d2a4..bcfada166a 100644
--- a/Classes/Neos/Neos/Ui/Fusion/Helper/NodeInfoHelper.php
+++ b/Classes/Neos/Neos/Ui/Fusion/Helper/NodeInfoHelper.php
@@ -93,6 +93,7 @@ public function renderNode(NodeInterface $node, ControllerContext $controllerCon
             'name' => $node->getName(),
             'identifier' => $node->getIdentifier(),
             'nodeType' => $node->getNodeType()->getName(),
+            'isFullyLoaded' => !$omitMostPropertiesForTreeState,
             'properties' => $omitMostPropertiesForTreeState ? [
                 // if we are only rendering the tree state, ensure _isHidden is sent to hidden nodes are correctly shown in the tree.
                 '_hidden' => $node->isHidden()
diff --git a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js
index 7450dd6ca1..29dc3e97cb 100644
--- a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js
+++ b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js
@@ -41,8 +41,8 @@ export default class NodeTree extends PureComponent {
         focus(contextPath);
     }
 
-    handleClick = src => {
-        const {setActiveContentCanvasSrc, requestScrollIntoView} = this.props;
+    handleClick = (src, contextPath) => {
+        const {setActiveContentCanvasSrc, setActiveContentCanvasContextPath, requestScrollIntoView} = this.props;
         // Set a flag that will imperatively tell ContentCanvas to scroll to focused node
         if (requestScrollIntoView) {
             requestScrollIntoView(true);
@@ -50,6 +50,9 @@ export default class NodeTree extends PureComponent {
         if (setActiveContentCanvasSrc) {
             setActiveContentCanvasSrc(src);
         }
+        if (setActiveContentCanvasContextPath) {
+            setActiveContentCanvasContextPath(contextPath);
+        }
     }
 
     handleDrag = node => {
@@ -104,6 +107,7 @@ export const PageTree = connect(state => ({
     toggle: actions.UI.PageTree.toggle,
     focus: actions.UI.PageTree.focus,
     setActiveContentCanvasSrc: actions.UI.ContentCanvas.setSrc,
+    setActiveContentCanvasContextPath: actions.UI.ContentCanvas.setContextPath,
     moveNode: actions.CR.Nodes.move,
     requestScrollIntoView: null
 })(NodeTree);
diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js b/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js
index ae86a619ec..ede23ea396 100644
--- a/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js
+++ b/packages/neos-ui/src/Containers/RightSideBar/Inspector/index.js
@@ -6,6 +6,7 @@ import I18n from '@neos-project/neos-ui-i18n';
 import Bar from '@neos-project/react-ui-components/src/Bar/';
 import Button from '@neos-project/react-ui-components/src/Button/';
 import Tabs from '@neos-project/react-ui-components/src/Tabs/';
+import Icon from '@neos-project/react-ui-components/src/Icon/';
 import Immutable from 'immutable';
 import debounce from 'lodash.debounce';
 
@@ -32,7 +33,6 @@ import style from './style.css';
 
         return {
             focusedNode: selectors.CR.Nodes.focusedSelector(state),
-            node: selectors.CR.Nodes.focusedSelector(state),
             isApplyDisabled: isApplyDisabledSelector(state),
             transientValues: selectors.UI.Inspector.transientValues(state),
             isDiscardDisabled: selectors.UI.Inspector.isDiscardDisabledSelector(state),
@@ -54,7 +54,6 @@ export default class Inspector extends PureComponent {
         i18nRegistry: PropTypes.object.isRequired,
 
         focusedNode: PropTypes.object,
-        node: PropTypes.object.isRequired,
         isApplyDisabled: PropTypes.bool,
         isDiscardDisabled: PropTypes.bool,
         shouldShowUnappliedChangesOverlay: PropTypes.bool,
@@ -195,13 +194,12 @@ export default class Inspector extends PureComponent {
     }
 
     renderFallback() {
-        return (<div>...</div>);
+        return (<div className={style.loader}><div><Icon icon="spinner" spin={true} size="big" /></div></div>);
     }
 
     render() {
         const {
             focusedNode,
-            node,
             commit,
             isApplyDisabled,
             isDiscardDisabled,
@@ -210,7 +208,7 @@ export default class Inspector extends PureComponent {
             i18nRegistry
         } = this.props;
 
-        if (!focusedNode) {
+        if (!focusedNode || !$get('isFullyLoaded', focusedNode)) {
             return this.renderFallback();
         }
 
@@ -256,7 +254,7 @@ export default class Inspector extends PureComponent {
                                     groups={$get('groups', tab)}
                                     tooltip={i18nRegistry.translate($get('label', tab))}
                                     renderSecondaryInspector={this.renderSecondaryInspector}
-                                    node={node}
+                                    node={focusedNode}
                                     commit={commit}
                                     />);
                         })
diff --git a/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css b/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css
index e56ba73924..e757cbeafa 100644
--- a/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css
+++ b/packages/neos-ui/src/Containers/RightSideBar/Inspector/style.css
@@ -39,3 +39,9 @@
         width: var(--size-SidebarWidth);
     }
 }
+.loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
\ No newline at end of file