Control use diagnostics

Summary:
Current control diagnostics:
- Play/Pause
- Search
- Framework Event Monitoring
- Toggle more options

Reviewed By: LukeDefeo

Differential Revision: D44292835

fbshipit-source-id: c1ef6181141ef47262de8e75abeeb88ffebd4bd6

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

@@ -28,6 +28,12 @@ import {
 } from '@ant-design/icons';
 import {usePlugin, useValue, Layout} from 'flipper-plugin';
 import {FrameworkEventType} from '../types';
+import {tracker} from '../tracker';
+import {debounce} from 'lodash';
+
+const searchTermUpdated = debounce((searchTerm: string) => {
+  tracker.track('search-term-updated', {searchTerm});
+}, 250);
 
 export const Controls: React.FC = () => {
   const instance = usePlugin(plugin);
@@ -42,6 +48,7 @@ export const Controls: React.FC = () => {
     eventType: FrameworkEventType,
     monitored: boolean,
   ) => void = (eventType: FrameworkEventType, monitored: boolean) => {
+    tracker.track('framework-event-monitored', {eventType, monitored});
     instance.uiState.frameworkEventMonitoring.update((draft) =>
       draft.set(eventType, monitored),
     );
@@ -51,14 +58,21 @@ export const Controls: React.FC = () => {
     <Layout.Horizontal pad="small" gap="small">
       <Input
         value={searchTerm}
-        onChange={(e) => instance.uiState.searchTerm.set(e.target.value)}
+        onChange={(e) => {
+          instance.uiState.searchTerm.set(e.target.value);
+          searchTermUpdated(e.target.value);
+        }}
         prefix={<SearchOutlined />}
         placeholder="Search"
       />
       <Button
         type="default"
         shape="circle"
-        onClick={() => instance.setPlayPause(!instance.uiState.isPaused.get())}
+        onClick={() => {
+          const isPaused = !instance.uiState.isPaused.get();
+          tracker.track('play-pause-toggled', {paused: isPaused});
+          instance.setPlayPause(isPaused);
+        }}
         icon={
           <Tooltip
             title={isPaused ? 'Resume live updates' : 'Pause incoming updates'}>
@@ -92,6 +106,7 @@ function MoreOptionsMenu({
     <Menu>
       <Menu.Item
         onClick={() => {
+          tracker.track('more-options-opened', {});
           setShowFrameworkEventsModal(true);
         }}>
         Framework event monitoring

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

@@ -27,7 +27,6 @@ import {
 } from './types';
 import {Draft} from 'immer';
 import {QueryClient, setLogger} from 'react-query';
-import {tracker} from './tracker';
 
 type SnapshotInfo = {nodeId: Id; base64Image: Snapshot};
 type LiveClientState = {
@@ -157,7 +156,6 @@ export function plugin(client: PluginClient<Events>) {
   });
 
   const setPlayPause = (isPaused: boolean) => {
-    tracker.track('play-pause', {paused: isPaused});
     uiState.isPaused.set(isPaused);
     if (!isPaused) {
       //When going back to play mode then set the atoms to the live state to rerender the latest

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

@@ -8,13 +8,22 @@
  */
 
 import {getFlipperLib} from 'flipper-plugin';
+import {FrameworkEventType} from './types';
 
 const UI_DEBUGGER_IDENTIFIER = 'ui-debugger';
 
 type TrackerEvents = {
-  'play-pause': {
+  'more-options-opened': {};
+  'play-pause-toggled': {
     paused: boolean;
   };
+  'framework-event-monitored': {
+    eventType: FrameworkEventType;
+    monitored: boolean;
+  };
+  'search-term-updated': {
+    searchTerm: string;
+  };
 };
 
 export interface Tracker {
@@ -25,7 +34,7 @@ export interface Tracker {
 }
 
 class UIDebuggerTracker implements Tracker {
-  track<Event extends 'play-pause'>(
+  track<Event extends keyof TrackerEvents>(
     event: Event,
     payload: TrackerEvents[Event],
   ): void {