feat(Experiments): UX feedback from private beta of no-code experimen…

…ts. (#25694)

This PR addresses feedback from a private beta customer of no-code experiments.

Can't tell if all transforms apply on Element selection in a variant.
Allow editing variants before an experiment is launched.
Cannot select SPAN & H2 elements

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/actionUtils.ts

@@ -20,7 +20,6 @@ export const EXPERIMENT_TARGETS = [
     'del',
     'details',
     'dfn',
-    'div',
     'footer',
     'header',
     'ol',

frontend/src/toolbar/experiments/WebExperimentTransformField.tsx

@@ -1,7 +1,7 @@
-import { IconAIText, IconCode, IconMessage } from '@posthog/icons'
+import { IconAIText, IconCheckCircle, IconCode, IconMessage } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { LemonSegmentedButton, LemonSegmentedButtonOption } from 'lib/lemon-ui/LemonSegmentedButton'
+import { LemonSegmentedButton } from 'lib/lemon-ui/LemonSegmentedButton'
 import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
 import { useState } from 'react'
 
@@ -13,31 +13,15 @@ interface WebExperimentTransformFieldProps {
     tIndex: number
     transform: WebExperimentTransform
 }
-type elementTransformKind = 'html' | 'text' | 'css'
-const ELEMENT_TRANSFORM_OPTIONS: LemonSegmentedButtonOption<elementTransformKind>[] = [
-    {
-        value: 'html',
-        label: 'HTML',
-        icon: <IconCode />,
-    },
-    {
-        value: 'text',
-        label: 'Text',
-        icon: <IconMessage />,
-    },
-    {
-        value: 'css',
-        label: 'CSS',
-        icon: <IconAIText />,
-    },
-]
 
 export function WebExperimentTransformField({
     variant,
     tIndex,
     transform,
 }: WebExperimentTransformFieldProps): JSX.Element {
-    const [transformSelected, setTransformSelected] = useState(transform.html ? 'html' : 'text')
+    const [transformSelected, setTransformSelected] = useState(
+        transform.html && transform.html.length > 0 ? 'html' : 'text'
+    )
     const { experimentForm, inspectingElement, selectedVariant } = useValues(experimentsTabLogic)
     const { setExperimentFormValue, selectVariant, inspectForElementWithIndex } = useActions(experimentsTabLogic)
     return (
@@ -57,7 +41,38 @@ export function WebExperimentTransformField({
             </div>
             <LemonSegmentedButton
                 fullWidth
-                options={ELEMENT_TRANSFORM_OPTIONS}
+                options={[
+                    {
+                        value: 'html',
+                        label: 'HTML',
+                        icon:
+                            transform.html && transform.html.length > 0 ? (
+                                <IconCheckCircle className="text-success" />
+                            ) : (
+                                <IconCode />
+                            ),
+                    },
+                    {
+                        value: 'text',
+                        label: 'Text',
+                        icon:
+                            transform.text && transform.text.length > 0 ? (
+                                <IconCheckCircle className="text-success" />
+                            ) : (
+                                <IconMessage />
+                            ),
+                    },
+                    {
+                        value: 'css',
+                        label: 'CSS',
+                        icon:
+                            transform.css && transform.css.length > 0 ? (
+                                <IconCheckCircle className="text-success" />
+                            ) : (
+                                <IconAIText />
+                            ),
+                    },
+                ]}
                 onChange={(e) => {
                     setTransformSelected(e)
                     if (experimentForm.variants) {

frontend/src/toolbar/experiments/WebExperimentVariant.tsx

@@ -22,7 +22,7 @@ export function WebExperimentVariant({ variant }: WebExperimentVariantProps): JS
             {selectedExperimentId === 'new' && experimentForm.variants && experimentForm.variants[variant].is_new && (
                 <LemonInput
                     key="variant-name-small"
-                    className="m-2"
+                    className="mb-2"
                     value={localTentativeValue}
                     onChange={(newName) => {
                         setLocalTentativeValue(newName)

frontend/src/toolbar/experiments/experimentsTabLogic.tsx

@@ -208,7 +208,7 @@ export const experimentsTabLogic = kea<experimentsTabLogicType>([
                 /*Only show the add button if all of these conditions are met:
                 1. Its a new Experiment
                 2. The experiment is still in draft form*/
-                return selectedExperimentId === 'new' && experimentForm.start_date == null
+                return selectedExperimentId === 'new' || experimentForm.start_date == null
             },
         ],
         selectedExperiment: [

frontend/src/toolbar/utils.ts

@@ -95,7 +95,8 @@ export function getParent(element: HTMLElement): HTMLElement | null {
     return null
 }
 
-export function trimElement(element: HTMLElement): HTMLElement | null {
+export function trimElement(element: HTMLElement, selector?: string): HTMLElement | null {
+    const target_selector = selector || CLICK_TARGET_SELECTOR
     if (!element) {
         return null
     }
@@ -123,7 +124,7 @@ export function trimElement(element: HTMLElement): HTMLElement | null {
         }
 
         // return when we find a click target
-        if (loopElement.matches?.(CLICK_TARGET_SELECTOR)) {
+        if (loopElement.matches?.(target_selector)) {
             return loopElement
         }
 
@@ -168,7 +169,7 @@ export function getAllClickTargets(
         .map((el: HTMLElement) => (el.shadowRoot ? getAllClickTargets(el.shadowRoot, targetSelector) : []))
         .reduce((a, b) => [...a, ...b], [])
     const selectedElements = [...elements, ...pointerElements, ...shadowElements]
-        .map((e) => trimElement(e))
+        .map((e) => trimElement(e, targetSelector))
         .filter((e) => e)
     const uniqueElements = Array.from(new Set(selectedElements)) as HTMLElement[]