From 2df4f98049389e2e7a2f12a9ba9363e4186da82f Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Tue, 3 Sep 2024 15:44:31 -0700 Subject: [PATCH 1/9] create custom variable selector panel --- .../dashboardTemplateVariablesLogic.ts | 38 ++++++- .../DashboardTemplateConfigureStep.tsx | 12 ++- .../DashboardTemplateVariables.tsx | 100 ++++++++++++++++++ frontend/src/types.ts | 1 + 4 files changed, 146 insertions(+), 5 deletions(-) create mode 100644 frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx diff --git a/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts b/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts index 39b45617e66ac..24833f0bdb521 100644 --- a/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts +++ b/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts @@ -1,4 +1,4 @@ -import { actions, kea, path, props, propsChanged, reducers } from 'kea' +import { actions, kea, path, props, propsChanged, reducers, selectors } from 'kea' import { isEmptyObject } from 'lib/utils' import { DashboardTemplateVariableType, FilterType, Optional } from '~/types' @@ -24,6 +24,9 @@ export const dashboardTemplateVariablesLogic = kea ({ index }), + incrementActiveVariableIndex: true, + resetVariable: (variableId: string) => ({ variableId }), }), reducers({ variables: [ @@ -41,14 +44,43 @@ export const dashboardTemplateVariablesLogic = kea { if (v.name === variableName && filterGroup?.events?.length && filterGroup.events[0]) { - return { ...v, default: filterGroup.events[0] } + return { ...v, default: filterGroup.events[0], touched: true } } - return v + return { ...v } + }) + }, + resetVariable: (state, { variableId }) => { + return state.map((v: DashboardTemplateVariableType) => { + if (v.id === variableId) { + return { ...v, default: FALLBACK_EVENT, touched: false } + } + return { ...v } }) }, }, ], + activeVariableIndex: [ + 0, + { + setActiveVariableIndex: (_, { index }) => index, + incrementActiveVariableIndex: (state) => state + 1, + }, + ], }), + selectors(() => ({ + activeVariable: [ + (s) => [s.variables, s.activeVariableIndex], + (variables: DashboardTemplateVariableType[], activeVariableIndex: number) => { + return variables[activeVariableIndex] + }, + ], + allVariablesAreTouched: [ + (s) => [s.variables], + (variables: DashboardTemplateVariableType[]) => { + return variables.every((v) => v.touched) + }, + ], + })), propsChanged(({ actions, props }, oldProps) => { if (props.variables !== oldProps.variables) { actions.setVariables(props.variables) diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx index 1f67ee2abd399..518b0a1c5f044 100644 --- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx @@ -5,13 +5,13 @@ import { authorizedUrlListLogic, AuthorizedUrlListType } from 'lib/components/Au import { IframedToolbarBrowser } from 'lib/components/IframedToolbarBrowser/IframedToolbarBrowser' import { iframedToolbarBrowserLogic } from 'lib/components/IframedToolbarBrowser/iframedToolbarBrowserLogic' import { useRef, useState } from 'react' -import { DashboardTemplateVariables } from 'scenes/dashboard/DashboardTemplateVariables' import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTemplateVariablesLogic' import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic' import { OnboardingStepKey } from '../onboardingLogic' import { OnboardingStep } from '../OnboardingStep' import { sdksLogic } from '../sdks/sdksLogic' +import { DashboardTemplateVariables } from './DashboardTemplateVariables' import { onboardingTemplateConfigLogic } from './onboardingTemplateConfigLogic' export const OnboardingDashboardTemplateConfigureStep = ({ @@ -23,11 +23,14 @@ export const OnboardingDashboardTemplateConfigureStep = ({ const { activeDashboardTemplate } = useValues(onboardingTemplateConfigLogic) const { createDashboardFromTemplate } = useActions(newDashboardLogic) const { isLoading } = useValues(newDashboardLogic) - const { variables } = useValues(dashboardTemplateVariablesLogic) const { snippetHosts } = useValues(sdksLogic) const { addUrl } = useActions(authorizedUrlListLogic({ actionId: null, type: AuthorizedUrlListType.TOOLBAR_URLS })) const { setBrowserUrl } = useActions(iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true })) const { browserUrl } = useValues(iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true })) + const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({ + variables: activeDashboardTemplate?.variables || [], + }) + const { variables, allVariablesAreTouched } = useValues(theDashboardTemplateVariablesLogic) const [isSubmitting, setIsSubmitting] = useState(false) @@ -105,6 +108,10 @@ export const OnboardingDashboardTemplateConfigureStep = ({ )}
+

+ Follow the instructions below to map your data to PostHog events. When complete, we'll + automatically generate a dashboard for your analytics. +

Create dashboard diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx new file mode 100644 index 0000000000000..e18eba36f2628 --- /dev/null +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx @@ -0,0 +1,100 @@ +import { IconCheckCircle, IconTrash } from '@posthog/icons' +import { LemonButton, LemonCollapse, LemonLabel } from '@posthog/lemon-ui' +import { useActions, useValues } from 'kea' +import { useEffect } from 'react' +import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTemplateVariablesLogic' +import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic' + +import { DashboardTemplateVariableType } from '~/types' + +function VariableSelector({ variable }: { variable: DashboardTemplateVariableType }): JSX.Element { + const { activeDashboardTemplate } = useValues(newDashboardLogic) + const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({ + variables: activeDashboardTemplate?.variables || [], + }) + const { setVariable, resetVariable, incrementActiveVariableIndex } = useActions(theDashboardTemplateVariablesLogic) + + const FALLBACK_EVENT = { + id: '$other_event', + math: 'dau', + type: 'events', + } + + return ( +
+
+

Select the element that indicates:

+ {variable.description}}> + {variable.name} + +
+ {variable.touched && ( +
+
+ {' '} + Selected +

.md-invite-button

+
+
+ } + type="tertiary" + size="small" + onClick={() => resetVariable(variable.id)} + /> +
+
+ )} +
+ {variable.touched ? ( + + Continue + + ) : ( + setVariable(variable.name, { events: [FALLBACK_EVENT] })} + > + Select from site + + )} +
+
+ ) +} + +export function DashboardTemplateVariables(): JSX.Element { + const { activeDashboardTemplate } = useValues(newDashboardLogic) + const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({ + variables: activeDashboardTemplate?.variables || [], + }) + const { variables, activeVariableIndex } = useValues(theDashboardTemplateVariablesLogic) + const { setVariables } = useActions(theDashboardTemplateVariablesLogic) + + // TODO: onboarding-dashboard-templates: this is a hack, I'm not sure why it's not set properly initially. + useEffect(() => { + setVariables(activeDashboardTemplate?.variables || []) + }, [activeDashboardTemplate]) + + return ( +
+ ({ + key: v.id, + header: ( +
+ {v.name} + {v.touched && } +
+ ), + content: , + className: 'p-4 bg-white', + }))} + embedded + size="small" + /> +
+ ) +} diff --git a/frontend/src/types.ts b/frontend/src/types.ts index cbc91482a2bae..14580155a5823 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -1800,6 +1800,7 @@ export interface DashboardTemplateVariableType { type: 'event' default: Record required: boolean + touched?: boolean } export type DashboardLayoutSize = 'sm' | 'xs' From ad7751550566c11d409d4e640f0bb4b7dde8ef76 Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Tue, 3 Sep 2024 16:14:13 -0700 Subject: [PATCH 2/9] let someone define a custom event name --- .../DashboardTemplateVariables.tsx | 75 ++++++++++++++++--- 1 file changed, 65 insertions(+), 10 deletions(-) diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx index e18eba36f2628..606a6d96d7038 100644 --- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx @@ -1,7 +1,7 @@ import { IconCheckCircle, IconTrash } from '@posthog/icons' -import { LemonButton, LemonCollapse, LemonLabel } from '@posthog/lemon-ui' +import { LemonButton, LemonCollapse, LemonInput, LemonLabel } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTemplateVariablesLogic' import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic' @@ -13,6 +13,8 @@ function VariableSelector({ variable }: { variable: DashboardTemplateVariableTyp variables: activeDashboardTemplate?.variables || [], }) const { setVariable, resetVariable, incrementActiveVariableIndex } = useActions(theDashboardTemplateVariablesLogic) + const [customEventName, setCustomEventName] = useState(null) + const [showCustomEventField, setShowCustomEventField] = useState(false) const FALLBACK_EVENT = { id: '$other_event', @@ -28,7 +30,7 @@ function VariableSelector({ variable }: { variable: DashboardTemplateVariableTyp {variable.name}
- {variable.touched && ( + {variable.touched && !customEventName && (
{' '} @@ -45,19 +47,72 @@ function VariableSelector({ variable }: { variable: DashboardTemplateVariableTyp
)} + {showCustomEventField && ( +
+ + Custom event name + +
+ { + if (v) { + setCustomEventName(v) + setVariable(variable.name, { + events: [{ id: v, math: 'dau', type: 'events' }], + }) + } else { + setCustomEventName(null) + resetVariable(variable.id) + } + }} + onBlur={() => { + if (customEventName) { + setVariable(variable.name, { + events: [{ id: customEventName, math: 'dau', type: 'events' }], + }) + } else { + resetVariable(variable.id) + setShowCustomEventField(false) + } + }} + /> +
+ } + type="tertiary" + size="small" + onClick={() => { + resetVariable(variable.id) + setCustomEventName(null) + setShowCustomEventField(false) + }} + /> +
+
+
+ )}
{variable.touched ? ( Continue ) : ( - setVariable(variable.name, { events: [FALLBACK_EVENT] })} - > - Select from site - +
+ { + setShowCustomEventField(false) + setVariable(variable.name, { events: [FALLBACK_EVENT] }) + }} + > + Select from site + + setShowCustomEventField(true)}> + or use custom event + +
)}
From c4ae946ed02948e5c28651125825a1509727cc2b Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Tue, 3 Sep 2024 16:24:30 -0700 Subject: [PATCH 3/9] Navigate through the panels manually --- frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx | 7 ++++++- .../productAnalyticsSteps/DashboardTemplateVariables.tsx | 7 +++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx index 32b569226dcaa..ed3bd39277311 100644 --- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx +++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx @@ -96,6 +96,7 @@ interface LemonCollapsePanelProps { onChange: (isExpanded: boolean) => void className?: string dataAttr?: string + onHeaderClick?: () => void } function LemonCollapsePanel({ @@ -106,13 +107,17 @@ function LemonCollapsePanel({ className, dataAttr, onChange, + onHeaderClick, }: LemonCollapsePanelProps): JSX.Element { const { height: contentHeight, ref: contentRef } = useResizeObserver({ box: 'border-box' }) return (
onChange(!isExpanded)} + onClick={() => { + onHeaderClick && onHeaderClick() + onChange(!isExpanded) + }} icon={isExpanded ? : } className="LemonCollapsePanel__header" {...(dataAttr ? { 'data-attr': dataAttr } : {})} diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx index 606a6d96d7038..b51842ab56aba 100644 --- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx @@ -125,7 +125,7 @@ export function DashboardTemplateVariables(): JSX.Element { variables: activeDashboardTemplate?.variables || [], }) const { variables, activeVariableIndex } = useValues(theDashboardTemplateVariablesLogic) - const { setVariables } = useActions(theDashboardTemplateVariablesLogic) + const { setVariables, setActiveVariableIndex } = useActions(theDashboardTemplateVariablesLogic) // TODO: onboarding-dashboard-templates: this is a hack, I'm not sure why it's not set properly initially. useEffect(() => { @@ -136,7 +136,7 @@ export function DashboardTemplateVariables(): JSX.Element {
({ + panels={variables.map((v, i) => ({ key: v.id, header: (
@@ -146,6 +146,9 @@ export function DashboardTemplateVariables(): JSX.Element { ), content: , className: 'p-4 bg-white', + onHeaderClick: () => { + setActiveVariableIndex(i) + }, }))} embedded size="small" From 3e720050474e288b8e6d6eba37fd0210e8cb7de0 Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Tue, 3 Sep 2024 16:34:13 -0700 Subject: [PATCH 4/9] improve language --- .../DashboardTemplateConfigureStep.tsx | 4 ++-- .../productAnalyticsSteps/DashboardTemplateVariables.tsx | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx index 518b0a1c5f044..89f2841484b0e 100644 --- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx @@ -109,8 +109,8 @@ export const OnboardingDashboardTemplateConfigureStep = ({

- Follow the instructions below to map your data to PostHog events. When complete, we'll - automatically generate a dashboard for your analytics. + For each action below, select an element on your site that indicates when that action is + taken, or enter a custom event name that you'll send from your backend.

-

Select the element that indicates:

- {variable.description}}> - {variable.name} - +

+ {variable.description} +

{variable.touched && !customEventName && (
From b4d7d020ba87a38ece6aa2099f645475f4097981 Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Tue, 3 Sep 2024 18:37:06 -0700 Subject: [PATCH 5/9] update style --- .../DashboardTemplateVariables.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx index 2c71c81652b10..c75e33c6809fa 100644 --- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx @@ -48,9 +48,11 @@ function VariableSelector({ variable }: { variable: DashboardTemplateVariableTyp )} {showCustomEventField && (
- - Custom event name - + Custom event name +

+ Set the name that you'll use for a custom event (eg. a backend event) instead of selecting an + event from your site. +

Select from site - setShowCustomEventField(true)}> - or use custom event + setShowCustomEventField(true)}> + Use custom event
)} From c0e0d6f400483e73c7439598a8af66228e2939fa Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Tue, 3 Sep 2024 18:56:06 -0700 Subject: [PATCH 6/9] must select site before can fill vars --- .../DashboardTemplateConfigureStep.tsx | 2 +- .../DashboardTemplateVariables.tsx | 62 +++++++++++-------- 2 files changed, 37 insertions(+), 27 deletions(-) diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx index 89f2841484b0e..9d950bf5f7bc7 100644 --- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx @@ -112,7 +112,7 @@ export const OnboardingDashboardTemplateConfigureStep = ({ For each action below, select an element on your site that indicates when that action is taken, or enter a custom event name that you'll send from your backend.

- +
)} -
- {variable.touched ? ( - - Continue - - ) : ( -
- { - setShowCustomEventField(false) - setVariable(variable.name, { events: [FALLBACK_EVENT] }) - }} - > - Select from site - - setShowCustomEventField(true)}> - Use custom event + {!hasSelectedSite ? ( + Please select a site to continue. + ) : ( +
+ {variable.touched ? ( + + Continue -
- )} -
+ ) : ( +
+ { + setShowCustomEventField(false) + setVariable(variable.name, { events: [FALLBACK_EVENT] }) + }} + > + Select from site + + setShowCustomEventField(true)}> + Use custom event + +
+ )} +
+ )}
) } -export function DashboardTemplateVariables(): JSX.Element { +export function DashboardTemplateVariables({ hasSelectedSite }: { hasSelectedSite: boolean }): JSX.Element { const { activeDashboardTemplate } = useValues(newDashboardLogic) const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({ variables: activeDashboardTemplate?.variables || [], @@ -145,7 +155,7 @@ export function DashboardTemplateVariables(): JSX.Element { {v.touched && }
), - content: , + content: , className: 'p-4 bg-white', onHeaderClick: () => { setActiveVariableIndex(i) From 9f32c0c8bf3af65d0712cfa6fe42002f49b96bac Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Wed, 4 Sep 2024 12:50:09 -0700 Subject: [PATCH 7/9] improve navigation handling --- .../dashboardTemplateVariablesLogic.ts | 25 ++++++++++++++++++- .../DashboardTemplateVariables.tsx | 25 ++++++++++++++++--- 2 files changed, 45 insertions(+), 5 deletions(-) diff --git a/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts b/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts index 24833f0bdb521..da23d22466d25 100644 --- a/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts +++ b/frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts @@ -1,4 +1,4 @@ -import { actions, kea, path, props, propsChanged, reducers, selectors } from 'kea' +import { actions, kea, listeners, path, props, propsChanged, reducers, selectors } from 'kea' import { isEmptyObject } from 'lib/utils' import { DashboardTemplateVariableType, FilterType, Optional } from '~/types' @@ -26,7 +26,9 @@ export const dashboardTemplateVariablesLogic = kea ({ index }), incrementActiveVariableIndex: true, + possiblyIncrementActiveVariableIndex: true, resetVariable: (variableId: string) => ({ variableId }), + goToNextUntouchedActiveVariableIndex: true, }), reducers({ variables: [ @@ -81,6 +83,27 @@ export const dashboardTemplateVariablesLogic = kea ({ + possiblyIncrementActiveVariableIndex: () => { + if (props.variables.length > 0 && values.activeVariableIndex < props.variables.length - 1) { + actions.incrementActiveVariableIndex() + } + }, + goToNextUntouchedActiveVariableIndex: () => { + let nextIndex = values.variables.findIndex((v, i) => !v.touched && i > values.activeVariableIndex) + if (nextIndex !== -1) { + actions.setActiveVariableIndex(nextIndex) + return + } + if (nextIndex == -1) { + nextIndex = values.variables.findIndex((v) => !v.touched) + if (nextIndex == -1) { + nextIndex = values.activeVariableIndex + } + } + actions.setActiveVariableIndex(nextIndex) + }, + })), propsChanged(({ actions, props }, oldProps) => { if (props.variables !== oldProps.variables) { actions.setVariables(props.variables) diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx index f15a07123160a..60a7ff619e99d 100644 --- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx @@ -18,7 +18,9 @@ function VariableSelector({ const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({ variables: activeDashboardTemplate?.variables || [], }) - const { setVariable, resetVariable, incrementActiveVariableIndex } = useActions(theDashboardTemplateVariablesLogic) + const { setVariable, resetVariable, goToNextUntouchedActiveVariableIndex, incrementActiveVariableIndex } = + useActions(theDashboardTemplateVariablesLogic) + const { allVariablesAreTouched, variables, activeVariableIndex } = useValues(theDashboardTemplateVariablesLogic) const [customEventName, setCustomEventName] = useState(null) const [showCustomEventField, setShowCustomEventField] = useState(false) @@ -104,9 +106,24 @@ function VariableSelector({ ) : (
{variable.touched ? ( - - Continue - + <> + {!allVariablesAreTouched || + (allVariablesAreTouched && variables.length !== activeVariableIndex + 1) ? ( + + !allVariablesAreTouched + ? goToNextUntouchedActiveVariableIndex() + : variables.length !== activeVariableIndex + 1 + ? incrementActiveVariableIndex() + : null + } + > + Continue + + ) : null} + ) : (
Date: Thu, 5 Sep 2024 10:38:42 -0700 Subject: [PATCH 8/9] update language --- .../DashboardTemplateConfigureStep.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx index 9d950bf5f7bc7..2bed8e8a07d2f 100644 --- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx @@ -1,5 +1,5 @@ import { IconArrowRight } from '@posthog/icons' -import { LemonButton, LemonCard, LemonSkeleton } from '@posthog/lemon-ui' +import { LemonButton, LemonCard, LemonSkeleton, Link } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { authorizedUrlListLogic, AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic' import { IframedToolbarBrowser } from 'lib/components/IframedToolbarBrowser/IframedToolbarBrowser' @@ -110,7 +110,11 @@ export const OnboardingDashboardTemplateConfigureStep = ({

For each action below, select an element on your site that indicates when that action is - taken, or enter a custom event name that you'll send from your backend. + taken, or enter a custom event name that you'll send using{' '} + + posthog.capture() + {' '} + (no need to send it now) .

Date: Thu, 5 Sep 2024 10:41:01 -0700 Subject: [PATCH 9/9] update --- .../productAnalyticsSteps/DashboardTemplateVariables.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx index 60a7ff619e99d..e22f822eedcfe 100644 --- a/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx +++ b/frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateVariables.tsx @@ -59,7 +59,7 @@ function VariableSelector({ Custom event name

Set the name that you'll use for a custom event (eg. a backend event) instead of selecting an - event from your site. + event from your site. You can change this later if needed.