Wire up Tracking to different ant.design elements

Summary:
This wires up tracking directly to the ANT component library for the following components:

1. `Button`
2. `Collapse.Panel`
3. `Tabs`

Other less commonly used elements can be connected in the future if needed.
I played a bit with different patterns, but in testing the patch-package patching give the most reliable results. Alternatives considered:

1. Expect users to explicitly wrap there components, e.g. `<Tracked><Button>Hi</Button></Tracked>`
    1. Didn't implement this because it would be very common to forget, and at the moment you want to make some analysis you'll discover there is no interesting data available. I think for tracking we want to have opt-out rather than opt-in
    2. The additional wrapping can cause some subtile layout issues due to static field inspection / forwarded refs (e.g. Ant often has an assumption that relevant children types are _directly_ nested under their parent element. For examle `<Tooltip><Tracked><Button>` does not work as expected
2. Expose our own `Button` / `Collapse` / `Tabs` that applies `Tracked` to an underlying Ant component.
    1. also suffers from 1.b.
    2. It is gonna be quite confusing for other devs that some elements would need to be imported from `flipper-plugin`, ant some from `antd`, and that this is likely to change over time. We could lint against it, but it will be still suboptimal

Reviewed By: jknoxville

Differential Revision: D25196321

fbshipit-source-id: b559356498c3191a283062a88daacb354b0f79f4

desktop/flipper-plugin/src/ui/Tracked.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import React from 'react';
+import React, {useMemo} from 'react';
 import {Children, cloneElement, createContext, useContext} from 'react';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 
@@ -97,28 +97,49 @@ export function Tracked({
   }) as any;
 }
 
+export function useTrackedCallback<T extends Function>(
+  action: string,
+  fn: T,
+  deps: any[],
+): T {
+  const scope = useContext(TrackingScopeContext);
+  return useMemo(() => {
+    return wrapInteractionHandler(fn, null, '', scope, action);
+    // eslint-disable-next-line
+  }, deps) as any;
+}
+
 // Exported for test
-export function wrapInteractionHandler(
-  fn: Function,
-  element: React.ReactElement,
+export function wrapInteractionHandler<T extends Function>(
+  fn: T,
+  element: React.ReactElement | null | string,
   event: string,
   scope: string,
   action?: string,
-) {
+): T {
   function report(start: number, initialEnd: number, error?: any) {
     globalInteractionReporter({
       duration: initialEnd - start,
       totalDuration: Date.now() - start,
       success: error ? 0 : 1,
       error: error ? '' + error : undefined,
-      componentType: describeElementType(element),
-      action: action ?? describeElement(element),
+      componentType:
+        element === null
+          ? 'unknown'
+          : typeof element === 'string'
+          ? element
+          : describeElementType(element),
+      action:
+        action ??
+        (element && typeof element != 'string'
+          ? describeElement(element)
+          : 'unknown'),
       scope,
       event,
     });
   }
 
-  return function trappedInteractionHandler(this: any) {
+  const res = function trappedInteractionHandler(this: any) {
     let res: any;
     const start = Date.now();
     const r = report.bind(null, start);
@@ -144,7 +165,9 @@ export function wrapInteractionHandler(
       r(initialEnd);
     }
     return res;
-  };
+  } as any;
+  res.flipperTracked = true; // Avoid double wrapping / handling, if e.g. Button is wrapped in Tracked
+  return res;
 }
 
 export function describeElement(element: React.ReactElement): string {
@@ -155,7 +178,7 @@ export function describeElement(element: React.ReactElement): string {
   if (typeof element.key === 'string') {
     return element.key;
   }
-  return reactElementToJSXString(element).substr(0, 200).replace(/\n/g, ' ');
+  return stringifyElement(element);
 }
 
 function describeElementType(element: React.ReactElement): string {
@@ -171,7 +194,7 @@ export function withTrackingScope(Component: any) {
   return function WithTrackingScope(props: any) {
     const scope =
       Component.displayName ?? Component.name ?? Component.constructor?.name;
-    if (!scope) {
+    if (!scope || typeof scope !== 'string') {
       throw new Error('Failed to find component name for trackingScope');
     }
     return (
@@ -181,3 +204,42 @@ export function withTrackingScope(Component: any) {
     );
   };
 }
+
+// @ts-ignore
+global.FlipperTrackingScopeContext = TrackingScopeContext;
+//@ts-ignore
+global.FlipperTracked = Tracked;
+
+// @ts-ignore
+global.flipperTrackInteraction = function flipperTrackInteraction(
+  elementType: string,
+  event: string,
+  scope: string,
+  action: string | React.ReactElement | null,
+  fn: Function,
+  ...args: any[]
+): void {
+  // @ts-ignore
+  if (fn.flipperTracked) {
+    return fn(...args);
+  }
+  return wrapInteractionHandler(
+    fn,
+    elementType,
+    event,
+    scope,
+    !action
+      ? 'unknown action'
+      : typeof action === 'string'
+      ? action
+      : stringifyElement(action),
+  )(...args);
+};
+
+function stringifyElement(element: any): string {
+  if (!element) return 'unknown element';
+  if (typeof element === 'string') return element;
+  if (Array.isArray(element))
+    return element.filter(Boolean).map(stringifyElement).join('');
+  return reactElementToJSXString(element).substr(0, 200).replace(/\n/g, ' ');
+}