UI actions diagnostics

Summary:
Track:
- Element selected. Include name and tags. Useful to understand what type of elements engineers are selecting in a hierarchy i.e. ui framework, element type, etc.
- Element focused. Same as above.
- Context menu usage

Reviewed By: LukeDefeo

Differential Revision: D44294618

fbshipit-source-id: f2b9642e70818e8a382bbbddc28115a40734dfe8

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

@@ -27,6 +27,7 @@ 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 = {
@@ -297,12 +298,20 @@ function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
   };
   const onSelectNode = (node?: Id) => {
     uiState.selectedNode.set(node);
-    let cur = node;
+    if (node) {
-    //expand entire ancestory in case it has been manually collapsed
+      const selectedNode = nodes.get().get(node);
+      const tags = selectedNode?.tags;
+      if (tags) {
+        tracker.track('node-selected', {name: selectedNode.name, tags});
+      }
+    }
+
+    let current = node;
+    // expand entire ancestory in case it has been manually collapsed
     uiState.expandedNodes.update((expandedNodesDraft) => {
-      while (cur != null) {
+      while (current != null) {
-        expandedNodesDraft.add(cur);
+        expandedNodesDraft.add(current);
-        cur = nodes.get().get(cur)?.parent;
+        current = nodes.get().get(current)?.parent;
       }
     });
   };
@@ -318,11 +327,20 @@ function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
   };
 
   const onContextMenuOpen = (open: boolean) => {
+    tracker.track('context-menu-opened', {});
     uiState.isContextMenuOpen.set(open);
   };
 
-  const onFocusNode = (focused?: Id) => {
+  const onFocusNode = (node?: Id) => {
-    uiState.focusedNode.set(focused);
+    if (node) {
+      const focusedNode = nodes.get().get(node);
+      const tags = focusedNode?.tags;
+      if (tags) {
+        tracker.track('node-focused', {name: focusedNode.name, tags});
+      }
+    }
+
+    uiState.focusedNode.set(node);
   };
 
   const setVisualiserWidth = (width: number) => {

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

@@ -8,12 +8,18 @@
  */
 
 import {getFlipperLib} from 'flipper-plugin';
-import {FrameworkEventType} from './types';
+import {FrameworkEventType, Tag} from './types';
 
 const UI_DEBUGGER_IDENTIFIER = 'ui-debugger';
 
+type NodeEventPayload = {
+  name: string;
+  tags: Tag[];
+};
+
 type TrackerEvents = {
   'more-options-opened': {};
+  'context-menu-opened': {};
   'play-pause-toggled': {
     paused: boolean;
   };
@@ -24,6 +30,8 @@ type TrackerEvents = {
   'search-term-updated': {
     searchTerm: string;
   };
+  'node-selected': NodeEventPayload;
+  'node-focused': NodeEventPayload;
 };
 
 export interface Tracker {