From b9bcc45cced4265127165d8f93fa087543a6047e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 17 Sep 2024 12:58:39 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88(frontend)=20add=20explicit=20data?=
 =?UTF-8?q?=20attributes=20for=20key=20event=20tracking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PostHog's autocapture is useful, but explicit tracking ensures cleaner, more
focused data. This initial pass targets high-impact actions; we'll iterate as
needed.
---
 .../src/features/home/components/LaterMeetingDialog.tsx   | 1 +
 src/frontend/src/features/home/routes/Home.tsx            | 8 ++++++--
 .../src/features/rooms/components/InviteDialog.tsx        | 1 +
 .../rooms/livekit/components/controls/ChatToggle.tsx      | 1 +
 .../rooms/livekit/components/controls/HandToggle.tsx      | 1 +
 .../rooms/livekit/components/controls/LeaveButton.tsx     | 1 +
 .../controls/Participants/HandRaisedListItem.tsx          | 1 +
 .../controls/Participants/LowerAllHandsButton.tsx         | 1 +
 .../controls/Participants/ParticipantListItem.tsx         | 1 +
 .../components/controls/Participants/ParticipantsList.tsx | 1 +
 .../controls/Participants/ParticipantsToggle.tsx          | 1 +
 .../livekit/components/controls/ScreenShareToggle.tsx     | 1 +
 12 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/home/components/LaterMeetingDialog.tsx b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx
index f50b27a4..307bae31 100644
--- a/src/frontend/src/features/home/components/LaterMeetingDialog.tsx
+++ b/src/frontend/src/features/home/components/LaterMeetingDialog.tsx
@@ -44,6 +44,7 @@ export const LaterMeetingDialog = ({
           setIsCopied(true)
         }}
         onHoverChange={setIsHovered}
+        data-attr="later-dialog-copy"
       >
         {isCopied ? (
           <>
diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx
index bd47d946..8e0cf174 100644
--- a/src/frontend/src/features/home/routes/Home.tsx
+++ b/src/frontend/src/features/home/routes/Home.tsx
@@ -45,7 +45,9 @@ export const Home = () => {
           <HStack gap="gutter">
             {isLoggedIn ? (
               <Menu>
-                <Button variant="primary">{t('createMeeting')}</Button>
+                <Button variant="primary" data-attr="create-meeting">
+                  {t('createMeeting')}
+                </Button>
                 <RACMenu>
                   <MenuItem
                     className={menuItemRecipe({ icon: true })}
@@ -57,6 +59,7 @@ export const Home = () => {
                         })
                       )
                     }}
+                    data-attr="create-option-instant"
                   >
                     <RiAddLine size={18} />
                     {t('createMenu.instantOption')}
@@ -69,6 +72,7 @@ export const Home = () => {
                         setLaterRoomId(data.slug)
                       )
                     }}
+                    data-attr="create-option-later"
                   >
                     <RiLink size={18} />
                     {t('createMenu.laterOption')}
@@ -76,7 +80,7 @@ export const Home = () => {
                 </RACMenu>
               </Menu>
             ) : (
-              <Button variant="primary" href={authUrl()}>
+              <Button variant="primary" href={authUrl()} data-attr="login">
                 {t('login', { ns: 'global' })}
               </Button>
             )}
diff --git a/src/frontend/src/features/rooms/components/InviteDialog.tsx b/src/frontend/src/features/rooms/components/InviteDialog.tsx
index 2006586f..464a20a7 100644
--- a/src/frontend/src/features/rooms/components/InviteDialog.tsx
+++ b/src/frontend/src/features/rooms/components/InviteDialog.tsx
@@ -90,6 +90,7 @@ export const InviteDialog = ({
               setIsCopied(true)
             }}
             onHoverChange={setIsHovered}
+            data-attr="share-dialog-copy"
           >
             {isCopied ? (
               <>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
index 847a01bd..77c74c54 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
@@ -24,6 +24,7 @@ export const ChatToggle = () => {
         tooltip={t(tooltipLabel)}
         isSelected={isChatOpen}
         onPress={() => toggleChat()}
+        data-attr={`controls-chat-${tooltipLabel}`}
       >
         <RiChat1Line />
       </ToggleButton>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx
index 65b1808d..0e16eb59 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx
@@ -44,6 +44,7 @@ export const HandToggle = () => {
           notifyOtherParticipants(isHandRaised)
           toggleRaisedHand()
         }}
+        data-attr={`controls-hand-${tooltipLabel}`}
       >
         <RiHand />
       </ToggleButton>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/LeaveButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/LeaveButton.tsx
index 600dbf7e..d456903a 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/LeaveButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/LeaveButton.tsx
@@ -25,6 +25,7 @@ export const LeaveButton = () => {
             navigateTo('feedback')
           })
       }}
+      data-attr="controls-leave"
     >
       <RiPhoneFill
         style={{
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx
index d932c1c3..e5ec64ef 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx
@@ -73,6 +73,7 @@ export const HandRaisedListItem = ({
         size="sm"
         onPress={() => lowerHandParticipant(participant)}
         tooltip={t('participants.lowerParticipantHand', { name })}
+        data-attr="participants-lower-hand"
       >
         <RiHand />
       </Button>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx
index 640a1fed..3f177bf9 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx
@@ -19,6 +19,7 @@ export const LowerAllHandsButton = ({
       fullWidth
       variant="text"
       onPress={() => lowerHandParticipants(participants)}
+      data-attr="participants-lower-hands"
     >
       {t('participants.lowerParticipantsHand')}
     </Button>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
index a9675e06..da337538 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
@@ -78,6 +78,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
             ? muteParticipant(participant)
             : setIsAlertOpen(true)
         }
+        data-attr="participants-mute"
       >
         {isMuted ? (
           <RiMicOffFill color={'gray'} />
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
index 1546d756..1144db1b 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
@@ -74,6 +74,7 @@ export const ParticipantsList = () => {
           onPress={() => (participantsStore.showParticipants = false)}
           aria-label={t('closeButton')}
           tooltip={t('closeButton')}
+          data-attr="participants-close"
         >
           <RiCloseLine />
         </Button>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
index 1766c020..46b5132b 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
@@ -34,6 +34,7 @@ export const ParticipantsToggle = () => {
         tooltip={t(tooltipLabel)}
         isSelected={isParticipantsOpen}
         onPress={() => toggleParticipants()}
+        data-attr={`controls-participants-${tooltipLabel}`}
       >
         <RiGroupLine />
       </ToggleButton>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx
index c451e210..c277d2e0 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx
@@ -37,6 +37,7 @@ export const ScreenShareToggle = (
         maxWidth: '46px',
         maxHeight: '46px',
       }}
+      data-attr={`controls-screenshare-${tooltipLabel}`}
     >
       <Div position="relative">
         <RiRectangleLine size={28} />