From f80b4d836549945a4e323e561f3fbd9ed28e2abf Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Wed, 14 Feb 2024 09:33:10 +0000
Subject: [PATCH] chore: more intrumentation support form (#20323)

* chore: add instrumentation to support form to enable experiment on replay docs

* data attr on container
---
 frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx     | 1 +
 .../navigation-3000/sidepanel/panels/SidePanelSupport.tsx       | 2 +-
 frontend/src/lib/components/Support/SupportForm.tsx             | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
index e1ccd80784230..46164e0270db1 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
@@ -177,6 +177,7 @@ export function SidePanel(): JSX.Element | null {
                                         activeTab === tab ? closeSidePanel() : openSidePanel(tab as SidePanelTab)
                                     }
                                     data-attr={`sidepanel-tab-${tab}`}
+                                    data-ph-capture-attribute-state-before-click={activeTab === tab ? 'open' : 'closed'}
                                     active={activeTab === tab}
                                     type="secondary"
                                     status="alt"
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
index f2a372f176643..381cd59181267 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelSupport.tsx
@@ -19,7 +19,7 @@ export const SidePanelSupport = (): JSX.Element => {
         <>
             <SidePanelPaneHeader title={title} />
 
-            <div className="overflow-y-auto">
+            <div className="overflow-y-auto" data-attr="side-panel-support-container">
                 <div className="p-3 max-w-160 w-full mx-auto">
                     <SupportForm />
 
diff --git a/frontend/src/lib/components/Support/SupportForm.tsx b/frontend/src/lib/components/Support/SupportForm.tsx
index 32cceed80fdd3..d1658f26cd263 100644
--- a/frontend/src/lib/components/Support/SupportForm.tsx
+++ b/frontend/src/lib/components/Support/SupportForm.tsx
@@ -90,6 +90,7 @@ export function SupportForm(): JSX.Element | null {
                     options={Object.entries(TARGET_AREA_TO_NAME).map(([key, value]) => ({
                         label: value,
                         value: key,
+                        'data-attr': `support-form-target-area-${key}`,
                     }))}
                 />
             </LemonField>