Add a very simple attributes inspector

Summary: Add a very simple attributes inspector

Reviewed By: LukeDefeo

Differential Revision: D39306728

fbshipit-source-id: 0e46b3efc617253d0b3006e81a46f00fdf8e8457

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

@@ -10,13 +10,15 @@
 import React, {useState} from 'react';
 import {PerfStatsEvent, plugin} from '../index';
 import {
+  DataInspector,
   DataTable,
   DataTableColumn,
+  DetailSidebar,
   Layout,
   usePlugin,
   useValue,
 } from 'flipper-plugin';
-import {Tree} from 'antd';
+import {Tree, Typography} from 'antd';
 import type {DataNode} from 'antd/es/tree';
 import {DownOutlined} from '@ant-design/icons';
 import {useHotkeys} from 'react-hotkeys-hook';
@@ -86,9 +88,28 @@ export function Component() {
   const nodes = useValue(instance.nodes);
 
   const [showPerfStats, setShowPerfStats] = useState(false);
+  const [selectedNode, setSelectedNode] = useState<string | undefined>(
+    undefined,
+  );
 
   useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
 
+  function renderAttributesInspector(node: UINode | undefined) {
+    if (!node) {
+      return;
+    }
+    return (
+      <>
+        <DetailSidebar>
+          <Layout.Container gap pad>
+            <Typography.Title level={2}>Attributes Inspector</Typography.Title>
+            <DataInspector data={node.attributes} expandRoot />
+          </Layout.Container>
+        </DetailSidebar>
+      </>
+    );
+  }
+
   if (showPerfStats)
     return (
       <DataTable<PerfStatsEvent>
@@ -100,12 +121,13 @@ export function Component() {
   if (rootId) {
     const antTree = nodesToAntTree(rootId, nodes);
     return (
+      <>
         <Layout.ScrollContainer>
           <Tree
             showIcon
             showLine
             onSelect={(selected) => {
-            console.log(nodes.get(selected[0] as string));
+              setSelectedNode(selected[0] as string);
             }}
             defaultExpandAll
             expandedKeys={[...nodes.keys()]}
@@ -113,6 +135,8 @@ export function Component() {
             treeData={[antTree]}
           />
         </Layout.ScrollContainer>
+        {selectedNode && renderAttributesInspector(nodes.get(selectedNode))}
+      </>
     );
   }