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
This commit is contained in:
Michel Weststrate
2020-12-03 04:13:07 -08:00
committed by Facebook GitHub Bot
parent 3394f85fc7
commit dd6f39c2b3
8 changed files with 149 additions and 12 deletions

View File

@@ -202,3 +202,4 @@ export {checkIdbIsInstalled} from './utils/iOSContainerUtility';
export {default as SidebarExtensions} from './fb-stubs/LayoutInspectorSidebarExtensions';
export {IDEFileResolver, IDEType} from './fb-stubs/IDEFileResolver';
export {renderMockFlipperWithPlugin} from './test-utils/createMockFlipperWithPlugin';
export {Tracked} from 'flipper-plugin'; // To be able to use it in legacy plugins