Add highlight for nodes in tree

Summary:
- Passing the `treeNodeIndexPath` from `FocusInfo` all the way to the `Tree` component.
- Using the index path to find the right node and give it a different visual appearance.

Reviewed By: kevin0571

Differential Revision: D23161057

fbshipit-source-id: 05a95444bb76c1f28a21b42bf477ed9c9929e3b1

desktop/plugins/sections/src/Tree.tsx

@@ -82,6 +82,7 @@ type TreeData = Array<{
 type Props = {
   data: TreeData | SectionComponentHierarchy;
   nodeClickHandler: (node: any) => void;
+  selectedNodeIndexPath?: number[];
 };
 
 type State = {
@@ -192,7 +193,20 @@ export default class extends PureComponent<Props, State> {
     });
 
     // find the root node
-    return tree.find((node) => !node.attributes.parent);
+    const root = tree.find((node) => !node.attributes.parent);
+
+    // Highlight the selected node
+    if (this.props.selectedNodeIndexPath && root) {
+      let cursor = root;
+      this.props.selectedNodeIndexPath.forEach((idx) => {
+        cursor = cursor.children[idx];
+      });
+      cursor.nodeSvgShape.shapeProps.strokeWidth = 2;
+      cursor.nodeSvgShape.shapeProps.stroke = colors.red;
+      cursor.nodeSvgShape.shapeProps.fill = colors.redTint;
+    }
+
+    return root;
   };
 
   treeFromHierarchy = (data: SectionComponentHierarchy): Object => {

desktop/plugins/sections/src/index.tsx

@@ -270,6 +270,7 @@ export function Component() {
                 generation={focusedTreeGeneration}
                 focusedChangeSet={focusedChangeSet}
                 setSelectedTreeNode={setSelectedTreeNode}
+                selectedNodeIndexPath={focusInfo?.treeNodeIndexPath}
               />
             </Sidebar>
             {focusedTreeGeneration && (
@@ -308,6 +309,7 @@ function TreeHierarchy({
   generation,
   focusedChangeSet,
   setSelectedTreeNode,
+  selectedNodeIndexPath,
 }: {
   generation: TreeGeneration | null;
   focusedChangeSet:
@@ -315,6 +317,7 @@ function TreeHierarchy({
     | null
     | undefined;
   setSelectedTreeNode: (node: any) => void;
+  selectedNodeIndexPath?: number[];
 }) {
   const onNodeClicked = useMemo(
     () => (targetNode: any) => {
@@ -342,13 +345,20 @@ function TreeHierarchy({
 
   if (generation && generation.tree && generation.tree.length > 0) {
     // Display component tree hierarchy, if any
-    return <Tree data={generation.tree} nodeClickHandler={onNodeClicked} />;
+    return (
+      <Tree
+        data={generation.tree}
+        nodeClickHandler={onNodeClicked}
+        selectedNodeIndexPath={selectedNodeIndexPath}
+      />
+    );
   } else if (focusedChangeSet && focusedChangeSet.section_component_hierarchy) {
     // Display section component hierarchy for specific changeset
     return (
       <Tree
         data={focusedChangeSet.section_component_hierarchy}
         nodeClickHandler={onNodeClicked}
+        selectedNodeIndexPath={selectedNodeIndexPath}
       />
     );
   } else {