Basic tree UI

Summary: A very basic tree in Antd to visualise the UI

Reviewed By: lblasa

Differential Revision: D38977035

fbshipit-source-id: f9bbf765ea8027eeb263cad86407502c6a5779dd

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -8,12 +8,56 @@
  */
 
 import React from 'react';
-import {plugin} from '../index';
+import {Id, plugin, UINode} from '../index';
 import {usePlugin, useValue} from 'flipper-plugin';
+import {Tree} from 'antd';
+import type {DataNode} from 'antd/es/tree';
+import {DownOutlined} from '@ant-design/icons';
+
+function treeToAntTree(uiNode: UINode): DataNode {
+  return {
+    key: uiNode.id,
+    title: uiNode.name,
+    children: uiNode.children ? uiNode.children.map(treeToAntTree) : [],
+  };
+}
+
+function treeToMap(uiNode: UINode): Map<Id, UINode> {
+  const result = new Map<Id, UINode>();
+
+  function treeToMapRec(node: UINode): void {
+    result.set(node.id, node);
+    for (const child of node.children) {
+      treeToMapRec(child);
+    }
+  }
+
+  treeToMapRec(uiNode);
+
+  return result;
+}
 
 export function Component() {
   const instance = usePlugin(plugin);
   const rootId = useValue(instance.rootId);
+  const tree = useValue(instance.tree);
+
+  if (tree) {
+    const nodeMap = treeToMap(tree);
+    const antTree = treeToAntTree(tree);
+    return (
+      <Tree
+        showIcon
+        showLine
+        onSelect={(selected) => {
+          console.log(nodeMap.get(selected[0] as string));
+        }}
+        defaultExpandAll
+        switcherIcon={<DownOutlined />}
+        treeData={[antTree]}
+      />
+    );
+  }
 
   return <div>{rootId}</div>;
 }