From 879cf20891b1ff81b8deb05af823519c866050c0 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 28 Feb 2025 17:04:53 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88(frontend)=20add=20data=20attribute?=
 =?UTF-8?q?s=20to=20key=20UI=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add data attributes to important buttons in the frontend to enable tracking
through PostHog actions. Allows measurement of user interaction with key
features to inform future product decisions.
---
 .../features/rooms/livekit/components/Transcript.tsx | 12 ++++++++++--
 .../livekit/components/controls/ReactionsToggle.tsx  |  1 +
 .../livekit/components/controls/TranscriptToggle.tsx |  1 +
 .../components/effects/EffectsConfiguration.tsx      |  5 ++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/Transcript.tsx b/src/frontend/src/features/rooms/livekit/components/Transcript.tsx
index b0f503e7..5b7fb648 100644
--- a/src/frontend/src/features/rooms/livekit/components/Transcript.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Transcript.tsx
@@ -77,7 +77,11 @@ export const Transcript = () => {
             {t('stop.body')}
           </Text>
           <div className={css({ height: '2rem' })} />
-          <Button isDisabled={isLoading} onPress={() => handleTranscript()}>
+          <Button
+            isDisabled={isLoading}
+            onPress={() => handleTranscript()}
+            data-attr="stop-transcript"
+          >
             <RiStopCircleLine style={{ marginRight: '0.5rem' }} />{' '}
             {t('stop.button')}
           </Button>
@@ -89,7 +93,11 @@ export const Transcript = () => {
             {t('start.body')}
           </Text>
           <div className={css({ height: '2rem' })} />
-          <Button isDisabled={isLoading} onPress={() => handleTranscript()}>
+          <Button
+            isDisabled={isLoading}
+            onPress={() => handleTranscript()}
+            data-attr="start-transcript"
+          >
             <RiRecordCircleLine style={{ marginRight: '0.5rem' }} />{' '}
             {t('start.button')}
           </Button>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx
index 4bfa88e6..f0819a60 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx
@@ -131,6 +131,7 @@ export const ReactionsToggle = () => {
                   aria-label={t('send', { emoji })}
                   variant="quaternaryText"
                   size="sm"
+                  data-attr={`send-reaction-${emoji}`}
                 >
                   <span
                     className={css({
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx
index a1e78012..12c34c0a 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx
@@ -38,6 +38,7 @@ export const TranscriptToggle = ({
           onPress?.(e)
         }}
         {...props}
+        data-attr="toggle-transcript"
       >
         <RiBardLine />
       </ToggleButton>
diff --git a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
index 649b8095..b5765ded 100644
--- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
@@ -275,6 +275,7 @@ export const EffectsConfiguration = ({
                     isSelected={isSelected(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.LIGHT,
                     })}
+                    data-attr="toggle-blur-light"
                   >
                     <BlurOn />
                   </ToggleButton>
@@ -295,6 +296,7 @@ export const EffectsConfiguration = ({
                     isSelected={isSelected(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.NORMAL,
                     })}
+                    data-attr="toggle-blur-normal"
                   >
                     <BlurOnStrong />
                   </ToggleButton>
@@ -349,7 +351,8 @@ export const EffectsConfiguration = ({
                         style={{
                           backgroundImage: `url(${thumbnailPath})`,
                         }}
-                      ></ToggleButton>
+                        data-attr={`toggle-virtual-${i}`}
+                      />
                     )
                   })}
                 </div>