From ccec5a6abe6ecb3b66183d53d11849926c2e2644 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@fb.com>
Date: Wed, 7 Sep 2022 06:46:41 -0700
Subject: [PATCH] Add a very simple attributes inspector

Summary: Add a very simple attributes inspector

Reviewed By: LukeDefeo

Differential Revision: D39306728

fbshipit-source-id: 0e46b3efc617253d0b3006e81a46f00fdf8e8457
---
 .../public/ui-debugger/components/main.tsx    | 52 ++++++++++++++-----
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index 7e6658398..e13bf1965 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/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,19 +121,22 @@ 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));
-          }}
-          defaultExpandAll
-          expandedKeys={[...nodes.keys()]}
-          switcherIcon={<DownOutlined />}
-          treeData={[antTree]}
-        />
-      </Layout.ScrollContainer>
+      <>
+        <Layout.ScrollContainer>
+          <Tree
+            showIcon
+            showLine
+            onSelect={(selected) => {
+              setSelectedNode(selected[0] as string);
+            }}
+            defaultExpandAll
+            expandedKeys={[...nodes.keys()]}
+            switcherIcon={<DownOutlined />}
+            treeData={[antTree]}
+          />
+        </Layout.ScrollContainer>
+        {selectedNode && renderAttributesInspector(nodes.get(selectedNode))}
+      </>
     );
   }