From c19dc150e63de8eb60424e12457620b8fe2473dd Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 6 Feb 2023 04:33:11 -0800
Subject: [PATCH] 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
---
 .../ui-debugger/components/Controls.tsx       | 20 +++++++------------
 desktop/plugins/public/ui-debugger/index.tsx  | 12 +++++------
 desktop/plugins/public/ui-debugger/types.tsx  |  9 ++++++---
 3 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Controls.tsx b/desktop/plugins/public/ui-debugger/components/Controls.tsx
index aff0b41d2..6d9b0acc6 100644
--- a/desktop/plugins/public/ui-debugger/components/Controls.tsx
+++ b/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>
   );
 };
diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx
index 1d2345e07..5e82c7f63 100644
--- a/desktop/plugins/public/ui-debugger/index.tsx
+++ b/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) => {
diff --git a/desktop/plugins/public/ui-debugger/types.tsx b/desktop/plugins/public/ui-debugger/types.tsx
index ac1e723ed..3e2740b74 100644
--- a/desktop/plugins/public/ui-debugger/types.tsx
+++ b/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 = {