feat(experiments): Add input field for editing selector (#26487)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Nov 30, 2024 · b4d51e3 · b4d51e3
1 parent 9e145db
commit b4d51e3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/frontend/src/toolbar/experiments/ExperimentsToolbarMenu.tsx b/frontend/src/toolbar/experiments/ExperimentsToolbarMenu.tsx
@@ -23,14 +23,16 @@ const ExperimentsListToolbarMenu = (): JSX.Element => {
     const { allExperiments, sortedExperiments, allExperimentsLoading } = useValues(experimentsLogic)
     const { apiURL } = useValues(toolbarConfigLogic)
 
+    const isWebExperimentsDisabled = Boolean(window?.parent?.posthog?.config?.disable_web_experiments)
+
     useEffect(() => {
         getExperiments()
     }, [])
 
     return (
         <ToolbarMenu>
             <ToolbarMenu.Header>
-                {window.parent.posthog.config.disable_web_experiments && (
+                {isWebExperimentsDisabled && (
                     <div className="p-2">
                         <LemonBanner type="warning">
                             Web experiments are disabled in your PostHog web snippet configuration. To run experiments,

diff --git a/frontend/src/toolbar/experiments/WebExperimentTransformField.tsx b/frontend/src/toolbar/experiments/WebExperimentTransformField.tsx
@@ -1,4 +1,5 @@
-import { IconAIText, IconCheckCircle, IconCode, IconMessage } from '@posthog/icons'
+import { IconAIText, IconCheckCircle, IconCode, IconMessage, IconPencil } from '@posthog/icons'
+import { LemonDivider, LemonInput } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonSegmentedButton } from 'lib/lemon-ui/LemonSegmentedButton'
@@ -30,6 +31,8 @@ export function WebExperimentTransformField({
     const { setExperimentFormValue, selectVariant, selectElementType, inspectForElementWithIndex } =
         useActions(experimentsTabLogic)
 
+    const [editSelectorShowing, setEditSelectorShowing] = useState(false)
+
     return (
         <>
             <div className="flex-1 mb-2">
@@ -67,6 +70,17 @@ export function WebExperimentTransformField({
                                             </LemonButton>
                                         )
                                     })}
+                                    <LemonDivider className="my-1" />
+                                    <LemonButton
+                                        fullWidth
+                                        type="tertiary"
+                                        icon={<IconPencil />}
+                                        onClick={() => {
+                                            setEditSelectorShowing(true)
+                                        }}
+                                    >
+                                        Edit selector
+                                    </LemonButton>
                                 </>
                             ),
                             placement: 'bottom',
@@ -77,6 +91,21 @@ export function WebExperimentTransformField({
                     {transform.selector ? 'Change element' : 'Select element'}
                 </LemonButton>
             </div>
+            {editSelectorShowing && (
+                <div className="mb-2">
+                    <LemonInput
+                        value={transform.selector}
+                        onChange={(value) => {
+                            if (experimentForm.variants) {
+                                const variants = { ...experimentForm.variants }
+                                variants[variant].transforms[tIndex].selector = value
+                                setExperimentFormValue('variants', variants)
+                            }
+                        }}
+                        placeholder="HTML element selector"
+                    />
+                </div>
+            )}
             <LemonSegmentedButton
                 fullWidth
                 options={[