Use event metadata in init event

Summary:
Previously we were checking the framework events stream for any new events and populating the map from that. Now we expect the init event to contain event types.

This allows us to know if the app supports framework event and therefore we dont show the controls to monitor it. Additionally we can fully populate the event monitoring dialog

Reviewed By: lblasa

Differential Revision: D42996552

fbshipit-source-id: 7850ada53d0630ba102af6c0d74d9d904f75eada

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

@@ -6,6 +6,7 @@
  *
  * @format
  */
+
 import React, {useState} from 'react';
 import {plugin} from '../index';
 import {
@@ -27,15 +28,6 @@ import {
 import {usePlugin, useValue, Layout} from 'flipper-plugin';
 import {FrameworkEventType} from '../types';
 
-/**
- * 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
- */
-
 export const Controls: React.FC = () => {
   const instance = usePlugin(plugin);
   const searchTerm = useValue(instance.uiState.searchTerm);
@@ -70,10 +62,12 @@ export const Controls: React.FC = () => {
             {isPaused ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
           </Tooltip>
         }></Button>
-      <MoreOptionsMenu
-        onSetEventMonitored={onSetEventMonitored}
-        frameworkEventTypes={[...frameworkEventMonitoring.entries()]}
-      />
+      {frameworkEventMonitoring.size > 0 && (
+        <MoreOptionsMenu
+          onSetEventMonitored={onSetEventMonitored}
+          frameworkEventTypes={[...frameworkEventMonitoring.entries()]}
+        />
+      )}
     </Layout.Horizontal>
   );
 };

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

@@ -53,6 +53,11 @@ export function plugin(client: PluginClient<Events>) {
 
   client.onMessage('init', (event) => {
     rootId.set(event.rootId);
+    uiState.frameworkEventMonitoring.update((draft) => {
+      event.frameworkEventMetadata.forEach((frameworkEventMeta) => {
+        draft.set(frameworkEventMeta.type, false);
+      });
+    });
   });
 
   client.onMessage('metadataUpdate', (event) => {
@@ -147,13 +152,6 @@ export function plugin(client: PluginClient<Events>) {
 
   const seenNodes = new Set<Id>();
   client.onMessage('subtreeUpdate', (subtreeUpdate) => {
-    uiState.frameworkEventMonitoring.update((draft) => {
-      (subtreeUpdate.frameworkEvents ?? []).forEach((frameworkEvent) => {
-        if (!draft.has(frameworkEvent.type))
-          draft.set(frameworkEvent.type, false);
-      });
-    });
-
     frameworkEvents.update((draft) => {
       if (subtreeUpdate.frameworkEvents) {
         subtreeUpdate.frameworkEvents.forEach((frameworkEvent) => {

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

@@ -29,19 +29,22 @@ export type SubtreeUpdateEvent = {
   frameworkEvents?: FrameworkEvent[];
 };
 
-export type Thread = 'Main' | 'Background';
-
 export type FrameworkEventType = string;
 
+export type FrameworkEventMetadata = {
+  type: FrameworkEventType;
+  documentation: string;
+};
+
 export type FrameworkEvent = {
   nodeId: Id;
   type: FrameworkEventType;
-  thread: Thread;
   timestamp: number;
 };
 
 export type InitEvent = {
   rootId: Id;
+  frameworkEventMetadata: FrameworkEventMetadata[];
 };
 
 export type PerfStatsEvent = {