From 4b91e83b0a02ee3b73c7cf427f4e5ae9585c2a61 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Fri, 26 Feb 2021 07:24:40 -0800
Subject: [PATCH] Add tracking to legacy Tabs component

Summary:
Per title

As requested in https://fb.workplace.com/groups/flippersupport/permalink/1080030509144273/

Reviewed By: fabiomassimo

Differential Revision: D26691262

fbshipit-source-id: d7863749700c4a0f3af736f251c9c3f03d4f71b9
---
 desktop/app/src/ui/components/Tabs.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/desktop/app/src/ui/components/Tabs.tsx b/desktop/app/src/ui/components/Tabs.tsx
index 0d4b0f2f7..16d1838e9 100644
--- a/desktop/app/src/ui/components/Tabs.tsx
+++ b/desktop/app/src/ui/components/Tabs.tsx
@@ -16,6 +16,7 @@ import Tab, {Props as TabProps} from './Tab';
 import {Property} from 'csstype';
 import React, {useContext} from 'react';
 import {TabsContext} from './TabsContainer';
+import {_wrapInteractionHandler} from 'flipper-plugin';
 
 const TabList = styled(FlexRow)({
   justifyContent: 'center',
@@ -168,6 +169,7 @@ export default function Tabs(props: {
   classic?: boolean;
 }) {
   let tabsContainer = useContext(TabsContext);
+  const scope = useContext((global as any).FlipperTrackingScopeContext);
   if (props.classic === true) {
     tabsContainer = false;
   }
@@ -245,11 +247,17 @@ export default function Tabs(props: {
           container={tabsContainer}
           onMouseDown={
             !isActive && onActive
-              ? (event: React.MouseEvent<HTMLDivElement>) => {
-                  if (event.target !== closeButton) {
-                    onActive(key);
-                  }
-                }
+              ? _wrapInteractionHandler(
+                  (event: React.MouseEvent<HTMLDivElement>) => {
+                    if (event.target !== closeButton) {
+                      onActive(key);
+                    }
+                  },
+                  'Tabs',
+                  'onTabClick',
+                  scope as any,
+                  'tab:' + key + ':' + comp.props.label,
+                )
               : undefined
           }>
           {comp.props.label}