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;
-    //expand entire ancestory in case it has been manually collapsed
+    if (node) {
+      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) {
-        expandedNodesDraft.add(cur);
-        cur = nodes.get().get(cur)?.parent;
+      while (current != null) {
+        expandedNodesDraft.add(current);
+        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) => {
-    uiState.focusedNode.set(focused);
+  const onFocusNode = (node?: Id) => {
+    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) => {