Add tracking for live editting

Reviewed By: lblasa

Differential Revision: D51707053

fbshipit-source-id: 5946020546271319d679cf9ecce32981d61b2799

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

@@ -85,6 +85,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
     snapshot,
     mutableLiveClientData,
     client,
+    metadata,
   );
 
   const perfEvents = createDataSource<PerformanceStatsEvent, 'txId'>([], {

desktop/plugins/public/ui-debugger/plugin/uiActions.tsx

@@ -8,13 +8,14 @@
  */
 
 import {Atom, PluginClient} from 'flipper-plugin';
-import {debounce} from 'lodash';
+import {debounce, last} from 'lodash';
 import {
   ClientNode,
   CompoundTypeHint,
   Events,
   FrameworkEventType,
   Id,
+  Metadata,
   MetadataId,
   Methods,
   SnapshotInfo,
@@ -37,6 +38,7 @@ export function uiActions(
   snapshot: Atom<SnapshotInfo | null>,
   liveClientData: LiveClientState,
   client: PluginClient<Events, Methods>,
+  metadata: Atom<Map<MetadataId, Metadata>>,
 ): UIActions {
   const onExpandNode = (node: Id) => {
     uiState.expandedNodes.update((draft) => {
@@ -226,13 +228,34 @@ export function uiActions(
         metadataIdPath,
         compoundTypeHint,
       });
+      trackLiveEditDebounced(nodeId, metadataIdPath, value);
       return true;
     } catch (error) {
       console.warn('[ui-debugger] Failed to edit attribute', error);
       return false;
     }
   };
 
+  const trackLiveEditDebounced = debounce(
+    (nodeId: Id, metadataIdPath: MetadataId[], value: any) => {
+      const node = nodes.get().get(nodeId);
+      const attributePath = metadataIdPath.map(
+        (id) => metadata.get().get(id)?.name ?? id.toString(),
+      );
+
+      tracker.track('attribute-editted', {
+        nodeId: nodeId,
+        nodeName: node?.name ?? 'Unknown',
+        attributeName: last(attributePath) ?? 'Unknown',
+        attributePath,
+        value: value,
+        attributeType: (typeof value).toString(),
+        tags: node?.tags ?? [],
+      });
+    },
+    100,
+  );
+
   return {
     onExpandNode,
     onCollapseNode,

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

@@ -9,7 +9,7 @@
 
 import {getFlipperLib} from 'flipper-plugin';
 
-import {FrameworkEventType, Tag} from '../ClientTypes';
+import {FrameworkEventType, Id, Tag} from '../ClientTypes';
 import {TraversalMode, SelectionSource} from '../DesktopTypes';
 
 const UI_DEBUGGER_IDENTIFIER = 'ui-debugger';
@@ -55,6 +55,15 @@ type TrackerEvents = {
     searchTerm: string;
     tags: Tag[];
   };
+  'attribute-editted': {
+    nodeId: Id;
+    attributeType: string;
+    nodeName: string;
+    attributeName: string;
+    attributePath: string[];
+    value: any;
+    tags: Tag[];
+  };
   'ide-opened': {
     ide: string;
     name: string;