Show framework event metadata documentation in detail view and tree select

Reviewed By: lblasa

Differential Revision: D48348090

fbshipit-source-id: e48547508b78178b278f72ce72fc579c9f015570

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

@@ -19,6 +19,7 @@ import {
   PerformanceStatsEvent,
   SnapshotInfo,
   ClientNode,
+  FrameworkEventMetadata,
 } from './ClientTypes';
 import {
   UIState,
@@ -50,6 +51,10 @@ export function plugin(client: PluginClient<Events>) {
     limit: 10000,
   });
 
+  const frameworkEventMetadata = createState<
+    Map<FrameworkEventType, FrameworkEventMetadata>
+  >(new Map());
+
   const uiState: UIState = createUIState();
 
   //this is the client data is what drives all of desktop UI
@@ -78,6 +83,11 @@ export function plugin(client: PluginClient<Events>) {
         draft.set(frameworkEventMeta.type, false);
       });
     });
+    frameworkEventMetadata.update((draft) => {
+      event.frameworkEventMetadata?.forEach((frameworkEventMeta) => {
+        draft.set(frameworkEventMeta.type, frameworkEventMeta);
+      });
+    });
   });
 
   client.onConnect(() => {
@@ -301,6 +311,7 @@ export function plugin(client: PluginClient<Events>) {
     uiActions: uiActions(uiState, nodesAtom, snapshot, mutableLiveClientData),
     nodes: nodesAtom,
     frameworkEvents,
+    frameworkEventMetadata,
     snapshot,
     metadata,
     perfEvents,