Export node as JSON

Summary:
There has been multiple requests to incorporate an export to plain text functionality for a while.

This diff adds it.

It will export a node and optionally its chidren as JSON.

Reviewed By: antonk52

Differential Revision: D49596476

fbshipit-source-id: 3681bc0c2d02e1ea64ff589e0e272f6d54ad0524

desktop/flipper-server-core/src/server/startServer.tsx

@@ -178,7 +178,9 @@ async function startHTTPServer(
   });
 
   return new Promise((resolve) => {
-    console.log(`Starting server on http://localhost:${config.port}`);
+    console.info(
+      `[flipper-server] Starting server on http://localhost:${config.port}`,
+    );
     const readyForIncomingConnections = (
       serverImpl: FlipperServerImpl,
       companionEnv: FlipperServerCompanionEnv,

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

@@ -134,6 +134,7 @@ export function Component() {
                 bottomPanel != null ? bottomPanelHeight : 0
               }
               nodes={nodes}
+              metadata={metadata}
               rootId={rootId}
             />
           </Layout.Container>

desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx

@@ -7,19 +7,25 @@
  * @format
  */
 
-import {FrameworkEvent, Id, ClientNode} from '../../ClientTypes';
+import {
+  FrameworkEvent,
+  Id,
+  ClientNode,
+  MetadataId,
+  Metadata,
+} from '../../ClientTypes';
 import {OnSelectNode, ViewMode} from '../../DesktopTypes';
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import {DataSource, getFlipperLib} from 'flipper-plugin';
-import {Dropdown, MenuProps} from 'antd';
+import {Dropdown, MenuProps, message} from 'antd';
 import {tracker} from '../../utils/tracker';
 import {
   bigGrepContextMenuItems,
   ideContextMenuItems,
 } from '../fb-stubs/IDEContextMenu';
 import {
-  CopyFilled,
   CopyOutlined,
+  ExportOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
   MenuFoldOutlined,
@@ -29,12 +35,14 @@ import {
   TableOutlined,
 } from '@ant-design/icons';
 import {filterOutFalsy} from '../../utils/array';
+import {exportNode} from '../../utils/dataTransform';
 
 type MenuItems = MenuProps['items'];
 
 export const ContextMenu: React.FC<{
   frameworkEvents: DataSource<FrameworkEvent>;
   nodes: Map<Id, ClientNode>;
+  metadata: Map<MetadataId, Metadata>;
   hoveredNodeId?: Id;
   focusedNodeId?: Id;
   onFocusNode: (id?: Id) => void;
@@ -57,6 +65,7 @@ export const ContextMenu: React.FC<{
   onCollapseRecursively,
   onCollapseNonAncestors,
   onSelectNode,
+  metadata,
 }) => {
   const [_, setIdeItemsRerender] = useState(0);
   const hoveredNode = nodes.get(hoveredNodeId ?? Number.MAX_SAFE_INTEGER);
@@ -166,6 +175,30 @@ export const ContextMenu: React.FC<{
               },
             }),
           ),
+          {type: 'divider'},
+          {
+            key: 'export-node',
+            label: 'Export',
+            icon: <ExportOutlined />,
+            onClick: () => {
+              getFlipperLib().writeTextToClipboard(
+                exportNode(hoveredNode, metadata, nodes),
+              );
+              message.success('Exported');
+            },
+          },
+          {
+            key: 'export-node-recursive',
+            label: 'Export with children',
+            icon: <ExportOutlined />,
+            onClick: () => {
+              getFlipperLib().writeTextToClipboard(
+                exportNode(hoveredNode, metadata, nodes, true),
+              );
+              message.success('Exported');
+            },
+          },
+          {type: 'divider'},
           ...(bigGrepContextMenuItems(hoveredNode) || []),
           ...(ideContextMenuItems(hoveredNode, () =>
             setIdeItemsRerender((value) => value + 1),

desktop/plugins/public/ui-debugger/components/tree/Tree.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Id, ClientNode} from '../../ClientTypes';
+import {Id, ClientNode, MetadataId, Metadata} from '../../ClientTypes';
 import {Color, OnSelectNode} from '../../DesktopTypes';
 import React, {
   CSSProperties,
@@ -55,11 +55,13 @@ export type TreeNode = ClientNode & {
 };
 export function Tree2({
   nodes,
+  metadata,
   rootId,
   additionalHeightOffset,
 }: {
   additionalHeightOffset: number;
   nodes: Map<Id, ClientNode>;
+  metadata: Map<MetadataId, Metadata>;
   rootId: Id;
 }) {
   const instance = usePlugin(plugin);
@@ -216,6 +218,7 @@ export function Tree2({
       text={searchTerm}
       highlightColor={theme.searchHighlightBackground.yellow}>
       <ContextMenu
+        metadata={metadata}
         frameworkEvents={instance.frameworkEvents}
         focusedNodeId={focusedNode}
         hoveredNodeId={hoveredNode}

desktop/plugins/public/ui-debugger/utils/dataTransform.tsx

@@ -8,6 +8,8 @@
  */
 
 import {
+  ClientNode,
+  Id,
   Inspectable,
   InspectableObject,
   Metadata,
@@ -73,3 +75,34 @@ export function transform(
   });
   return object;
 }
+
+export function exportNode(
+  node: ClientNode,
+  metadata: Map<MetadataId, Metadata>,
+  nodes: Map<Id, ClientNode>,
+  recursive: boolean = false,
+): any {
+  const rawExport: any = (
+    node: ClientNode,
+    metadata: Map<MetadataId, Metadata>,
+    nodes: Map<Id, ClientNode>,
+    recursive: boolean = false,
+  ) => {
+    return {
+      ...node,
+      attributes: transform(node.attributes, metadata),
+      children: recursive
+        ? node.children.map((child) => {
+            const childNode = nodes.get(child);
+            if (childNode == null) {
+              throw new Error(`Node ${child} not found`);
+            }
+
+            return rawExport(childNode, metadata, nodes, recursive);
+          })
+        : [],
+    };
+  };
+
+  return JSON.stringify(rawExport(node, metadata, nodes, recursive), null, 2);
+}