Foundations for inspector

Summary:
^

This laids the foundation for the inspector. It just reorganises a few bits.

Reviewed By: LukeDefeo

Differential Revision: D40319611

fbshipit-source-id: 8cf9b151c631faa1f26a7a6dfaa86b01abc42fe5

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

@@ -9,21 +9,14 @@
 
 import React, {useState} from 'react';
 import {plugin} from '../index';
-import {
-  DataInspector,
-  DetailSidebar,
-  Layout,
-  usePlugin,
-  useValue,
-} from 'flipper-plugin';
-import {Typography} from 'antd';
-
+import {DetailSidebar, Layout, usePlugin, useValue} from 'flipper-plugin';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {Id, Snapshot, UINode} from '../types';
 import {PerfStats} from './PerfStats';
 import {Tree} from './Tree';
 import {Visualization2D} from './Visualization2D';
 import {useKeyboardModifiers} from '../hooks/useKeyboardModifiers';
+import {Inspector} from './sidebar/Inspector';
 
 export function Component() {
   const instance = usePlugin(plugin);
@@ -39,19 +32,14 @@ export function Component() {
 
   const {ctrlPressed} = useKeyboardModifiers();
 
-  function renderAttributesInspector(node: UINode | undefined) {
+  function renderSidebar(node: UINode | undefined) {
     if (!node) {
       return;
     }
     return (
-      <>
-        <DetailSidebar>
-          <Layout.Container gap pad>
-            <Typography.Title level={2}>Attributes Inspector</Typography.Title>
-            <DataInspector data={node} expandRoot />
-          </Layout.Container>
-        </DetailSidebar>
-      </>
+      <DetailSidebar>
+        <Inspector node={node} />
+      </DetailSidebar>
     );
   }
 
@@ -81,7 +69,7 @@ export function Component() {
             />
           </Layout.Horizontal>
         </Layout.ScrollContainer>
-        {selectedNode && renderAttributesInspector(nodes.get(selectedNode))}
+        {selectedNode && renderSidebar(nodes.get(selectedNode))}
       </>
     );
   }

desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+// eslint-disable-next-line rulesdir/no-restricted-imports-clone
+import {Glyph} from 'flipper';
+import {Layout, Tab, Tabs} from 'flipper-plugin';
+import {UINode} from '../../types';
+import {IdentityInspector} from './inspector/IdentityInspector';
+import {AttributesInspector} from './inspector/AttributesInspector';
+import {DocumentationInspector} from './inspector/DocumentationInspector';
+import {LayoutInspector} from './inspector/LayoutInspector';
+
+type Props = {
+  node: UINode;
+};
+
+export const Inspector: React.FC<Props> = ({node}) => {
+  return (
+    <Layout.Container gap pad>
+      <Tabs grow centered>
+        <Tab
+          tab={
+            <Layout.Horizontal center>
+              <Glyph name="badge" size={16} />
+            </Layout.Horizontal>
+          }>
+          <IdentityInspector node={node} />
+        </Tab>
+        <Tab
+          tab={
+            <Layout.Horizontal center>
+              <Glyph name="data-table" size={16} />
+            </Layout.Horizontal>
+          }>
+          <AttributesInspector node={node} />
+        </Tab>
+        <Tab
+          tab={
+            <Layout.Horizontal center>
+              <Glyph name="square-ruler" size={16} />
+            </Layout.Horizontal>
+          }>
+          <LayoutInspector node={node} />
+        </Tab>
+        <Tab
+          tab={
+            <Layout.Horizontal center>
+              <Glyph name="info-circle" size={16} />
+            </Layout.Horizontal>
+          }>
+          <DocumentationInspector node={node} />
+        </Tab>
+      </Tabs>
+    </Layout.Container>
+  );
+};

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {Color, Inspectable, InspectableObject, UINode} from '../../../types';
+import {Panel} from 'flipper-plugin';
+
+type Props = {
+  node: UINode;
+};
+
+const TextAttributeInspector: React.FC<{name: string; value: string}> = ({
+  name,
+  value,
+}) => {
+  return (
+    <div>
+      {name}: {value}
+    </div>
+  );
+};
+
+const NumberAttributeInspector: React.FC<{name: string; value: number}> = ({
+  name,
+  value,
+}) => {
+  return (
+    <div>
+      {name}: {value}
+    </div>
+  );
+};
+
+const ColorAttributeInspector: React.FC<{name: string; value: Color}> = ({
+  name,
+  value,
+}) => {
+  return (
+    <div>
+      {name}: {JSON.stringify(value)}
+    </div>
+  );
+};
+
+const ObjectAttributeInspector: React.FC<{
+  name: string;
+  value: Record<string, Inspectable>;
+}> = ({name, value}) => {
+  return (
+    <div>
+      {name}: {JSON.stringify(value)}
+    </div>
+  );
+};
+
+function create(key: string, inspectable: Inspectable) {
+  switch (inspectable.type) {
+    case 'text':
+      return <TextAttributeInspector name={key} value={inspectable.value} />;
+    case 'number':
+      return <NumberAttributeInspector name={key} value={inspectable.value} />;
+    case 'color':
+      return <ColorAttributeInspector name={key} value={inspectable.value} />;
+    case 'object':
+      return <ObjectAttributeInspector name={key} value={inspectable.fields} />;
+    default:
+      return;
+  }
+}
+
+function createSection(name: string, inspectable: InspectableObject) {
+  return (
+    <Panel key={name} title={name}>
+      {' '}
+      {Object.keys(inspectable.fields).map(function (key, _) {
+        return create(key, inspectable.fields[key]);
+      })}
+    </Panel>
+  );
+}
+
+export const AttributesInspector: React.FC<Props> = ({node}) => {
+  // TODO: add raw panel to inspect data as received.
+  return (
+    <>
+      {Object.keys(node.attributes).map(function (key, _) {
+        return createSection(key, node.attributes[key] as InspectableObject);
+      })}
+    </>
+  );
+};

desktop/plugins/public/ui-debugger/components/sidebar/inspector/DocumentationInspector.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {UINode} from '../../../types';
+
+type Props = {
+  node: UINode;
+};
+
+export const DocumentationInspector: React.FC<Props> = () => {
+  return <p>Quick Help and Documentation</p>;
+};

desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {Col, Row} from 'antd';
+import {UINode} from '../../../types';
+
+type Props = {
+  node: UINode;
+};
+
+export const IdentityInspector: React.FC<Props> = ({node}) => {
+  return (
+    <>
+      <Row gutter={4} style={{marginTop: '10px'}}>
+        <Col flex="100px">
+          <div style={{padding: '0 16px'}}>Name:</div>
+        </Col>
+        <Col flex="auto">{node.name}</Col>
+      </Row>
+      <Row gutter={4}>
+        <Col flex="100px">
+          <div style={{padding: '0 16px'}}>Id:</div>
+        </Col>
+        <Col flex="auto">{node.id}</Col>
+      </Row>
+    </>
+  );
+};

desktop/plugins/public/ui-debugger/components/sidebar/inspector/LayoutInspector.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {UINode} from '../../../types';
+
+type Props = {
+  node: UINode;
+};
+
+export const LayoutInspector: React.FC<Props> = () => {
+  return <p>Origin and size</p>;
+};

desktop/plugins/public/ui-debugger/types.tsx

@@ -82,7 +82,7 @@ export type InspectableNumber = {
 };
 
 export type InspectableColor = {
-  type: 'number';
+  type: 'color';
   value: Color;
   mutable: boolean;
 };

desktop/static/icons.json

@@ -651,5 +651,11 @@
   ],
   "photo-arrows-left-right": [
     16
+  ],
+  "badge": [
+    16
+  ],
+  "square-ruler": [
+    16
   ]
-}
+}