From c598564a9e59f8152257ddb9e50177ff51ea3e97 Mon Sep 17 00:00:00 2001
From: Marius Andra <marius.andra@gmail.com>
Date: Tue, 8 Oct 2024 11:34:46 +0200
Subject: [PATCH] fix(cdp): improve ux around test globals (#25449)

---
 .../pipeline/hogfunctions/HogFunctionTest.tsx    | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionTest.tsx b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionTest.tsx
index 78934ac692826..9ee3c844ab66e 100644
--- a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionTest.tsx
+++ b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionTest.tsx
@@ -94,8 +94,9 @@ export function HogFunctionTest(props: HogFunctionTestLogicProps): JSX.Element {
                                         type="secondary"
                                         onClick={loadSampleGlobals}
                                         loading={sampleGlobalsLoading}
+                                        tooltip="Find the last event matching filters, and use it to populate the globals below."
                                     >
-                                        Reload context
+                                        Refresh globals
                                     </LemonButton>
                                     <LemonField name="mock_async_functions">
                                         {({ value, onChange }) => (
@@ -178,20 +179,15 @@ export function HogFunctionTest(props: HogFunctionTestLogicProps): JSX.Element {
                             </div>
                         ) : (
                             <div className="space-y-2">
-                                <LemonField name="globals" label="Test invocation context">
+                                <LemonField name="globals">
                                     {({ value, onChange }) => (
                                         <>
-                                            <div>
-                                                <p className="flex-1">
-                                                    The globals object is the context in which your function will be
-                                                    tested. It should contain all the data that your function will need
-                                                    to run
-                                                </p>
+                                            <div className="space-y-2">
+                                                <div>Here are all the global variables you can use in your code:</div>
                                                 {sampleGlobalsError ? (
-                                                    <p className="text-warning">{sampleGlobalsError}</p>
+                                                    <div className="text-warning">{sampleGlobalsError}</div>
                                                 ) : null}
                                             </div>
-
                                             <HogFunctionTestEditor value={value} onChange={onChange} />
                                         </>
                                     )}