diff --git a/frontend/src/lib/actionUtils.ts b/frontend/src/lib/actionUtils.ts index 87afffa1a0c4e..9096490300987 100644 --- a/frontend/src/lib/actionUtils.ts +++ b/frontend/src/lib/actionUtils.ts @@ -20,7 +20,6 @@ export const EXPERIMENT_TARGETS = [ 'del', 'details', 'dfn', - 'div', 'footer', 'header', 'ol', diff --git a/frontend/src/toolbar/experiments/WebExperimentTransformField.tsx b/frontend/src/toolbar/experiments/WebExperimentTransformField.tsx index 1ee5b270c8e06..1b9da75065393 100644 --- a/frontend/src/toolbar/experiments/WebExperimentTransformField.tsx +++ b/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[] = [ - { - value: 'html', - label: 'HTML', - icon: , - }, - { - value: 'text', - label: 'Text', - icon: , - }, - { - value: 'css', - label: 'CSS', - icon: , - }, -] 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({ 0 ? ( + + ) : ( + + ), + }, + { + value: 'text', + label: 'Text', + icon: + transform.text && transform.text.length > 0 ? ( + + ) : ( + + ), + }, + { + value: 'css', + label: 'CSS', + icon: + transform.css && transform.css.length > 0 ? ( + + ) : ( + + ), + }, + ]} onChange={(e) => { setTransformSelected(e) if (experimentForm.variants) { diff --git a/frontend/src/toolbar/experiments/WebExperimentVariant.tsx b/frontend/src/toolbar/experiments/WebExperimentVariant.tsx index 27a85d5b4b8b2..53b690316d16f 100644 --- a/frontend/src/toolbar/experiments/WebExperimentVariant.tsx +++ b/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 && ( { setLocalTentativeValue(newName) diff --git a/frontend/src/toolbar/experiments/experimentsTabLogic.tsx b/frontend/src/toolbar/experiments/experimentsTabLogic.tsx index aba3bd5024790..d5c9dc856eaa3 100644 --- a/frontend/src/toolbar/experiments/experimentsTabLogic.tsx +++ b/frontend/src/toolbar/experiments/experimentsTabLogic.tsx @@ -208,7 +208,7 @@ export const experimentsTabLogic = kea([ /*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: [ diff --git a/frontend/src/toolbar/utils.ts b/frontend/src/toolbar/utils.ts index 129cb6092ef4e..5eb07cdd47ea0 100644 --- a/frontend/src/toolbar/utils.ts +++ b/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[]