Skip to content

Commit

Permalink
feat(onboarding-templates): filtering & eventing & any pageview (#25011)
Browse files Browse the repository at this point in the history
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
raquelmsmith and github-actions[bot] authored Sep 17, 2024
1 parent a3ee2ea commit dfbd23b
Show file tree
Hide file tree
Showing 26 changed files with 277 additions and 104 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,9 @@ export const iframedToolbarBrowserLogic = kea<iframedToolbarBrowserLogicType>([
currentFullUrl: [
(s) => [s.browserUrl, s.currentPath],
(browserUrl, currentPath) => {
if (!browserUrl) {
return null
}
return browserUrl + '/' + currentPath
},
],
Expand Down Expand Up @@ -325,6 +328,12 @@ export const iframedToolbarBrowserLogic = kea<iframedToolbarBrowserLogicType>([
clearTimeout(cache.errorTimeout)
clearTimeout(cache.warnTimeout)
},
setIframeBanner: ({ banner }) => {
posthog.capture('in-app iFrame banner set', {
level: banner?.level,
message: banner?.message,
})
},
})),

afterMount(({ actions, values }) => {
Expand Down
112 changes: 62 additions & 50 deletions frontend/src/scenes/dashboard/DashboardTemplateChooser.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@ import {
} from 'scenes/dashboard/dashboards/templates/dashboardTemplatesLogic'
import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'

import { DashboardTemplateType } from '~/types'
import { DashboardTemplateType, TemplateAvailabilityContext } from '~/types'

export function DashboardTemplateChooser({
scope = 'default',
onItemClick,
redirectAfterCreation = true,
availabilityContexts,
}: DashboardTemplateProps): JSX.Element {
const templatesLogic = dashboardTemplatesLogic({ scope })
const { allTemplates, allTemplatesLoading } = useValues(templatesLogic)
Expand All @@ -35,61 +36,72 @@ export function DashboardTemplateChooser({
return (
<div>
<div className="DashboardTemplateChooser">
<TemplateItem
template={{
template_name: 'Blank dashboard',
dashboard_description: 'Create a blank dashboard',
image_url: BlankDashboardHog,
}}
onClick={() => {
if (isLoading) {
return
}
setIsLoading(true)
addDashboard({
name: 'New Dashboard',
show: true,
})
}}
index={0}
data-attr="create-dashboard-blank"
/>
{!availabilityContexts || availabilityContexts.includes(TemplateAvailabilityContext.GENERAL) ? (
<TemplateItem
template={{
template_name: 'Blank dashboard',
dashboard_description: 'Create a blank dashboard',
image_url: BlankDashboardHog,
}}
onClick={() => {
if (isLoading) {
return
}
setIsLoading(true)
addDashboard({
name: 'New Dashboard',
show: true,
})
}}
index={0}
data-attr="create-dashboard-blank"
/>
) : null}
{allTemplatesLoading ? (
<Spinner className="text-6xl" />
) : (
allTemplates.map((template, index) => (
<TemplateItem
key={index}
template={template}
onClick={() => {
if (isLoading) {
return
}
setIsLoading(true)
// while we might receive templates from the external repository
// we need to handle templates that don't have variables
if ((template.variables || []).length === 0) {
if (template.variables === null) {
template.variables = []
allTemplates
.filter((template) => {
if (availabilityContexts) {
return availabilityContexts.some((context) =>
template.availability_contexts?.includes(context)
)
}
return true
})
.map((template, index) => (
<TemplateItem
key={index}
template={template}
onClick={() => {
if (isLoading) {
return
}
createDashboardFromTemplate(
template,
template.variables || [],
redirectAfterCreation
)
} else {
if (!newDashboardModalVisible) {
showVariableSelectModal(template)
setIsLoading(true)
// while we might receive templates from the external repository
// we need to handle templates that don't have variables
if ((template.variables || []).length === 0) {
if (template.variables === null) {
template.variables = []
}
createDashboardFromTemplate(
template,
template.variables || [],
redirectAfterCreation
)
} else {
setActiveDashboardTemplate(template)
if (!newDashboardModalVisible) {
showVariableSelectModal(template)
} else {
setActiveDashboardTemplate(template)
}
}
}
onItemClick?.(template)
}}
index={index + 1}
data-attr="create-dashboard-from-template"
/>
))
onItemClick?.(template)
}}
index={index + 1}
data-attr="create-dashboard-from-template"
/>
))
)}
</div>
</div>
Expand Down
24 changes: 24 additions & 0 deletions frontend/src/scenes/dashboard/dashboardTemplateVariablesLogic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,15 @@ export const dashboardTemplateVariablesLogic = kea<dashboardTemplateVariablesLog
}),
setVariableFromAction: (variableName: string, action: ActionType) => ({ variableName, action }),
setVariableForPageview: (variableName: string, url: string) => ({ variableName, url }),
setVariableForScreenview: (variableName: string) => ({ variableName }),
setActiveVariableIndex: (index: number) => ({ index }),
incrementActiveVariableIndex: true,
possiblyIncrementActiveVariableIndex: true,
resetVariable: (variableId: string) => ({ variableId }),
goToNextUntouchedActiveVariableIndex: true,
setIsCurrentlySelectingElement: (isSelecting: boolean) => ({ isSelecting }),
setActiveVariableCustomEventName: (customEventName?: string | null) => ({ customEventName }),
maybeResetActiveVariableCustomEventName: true,
}),
reducers({
variables: [
Expand Down Expand Up @@ -194,12 +196,34 @@ export const dashboardTemplateVariablesLogic = kea<dashboardTemplateVariablesLog
actions.setVariable(variableName, filterGroup)
actions.setIsCurrentlySelectingElement(false)
},
setVariableForScreenview: ({ variableName }) => {
const step: TemplateVariableStep = {
id: '$screenview',
math: BaseMathType.UniqueUsers,
type: EntityTypes.EVENTS,
order: 0,
name: '$screenview',
custom_name: variableName,
}
const filterGroup: FilterType = {
events: [step],
}
actions.setVariable(variableName, filterGroup)
actions.setIsCurrentlySelectingElement(false)
},
toolbarMessageReceived: ({ type, payload }) => {
if (type === PostHogAppToolbarEvent.PH_NEW_ACTION_CREATED) {
actions.setVariableFromAction(payload.action.name, payload.action as ActionType)
actions.disableElementSelector()
}
},
maybeResetActiveVariableCustomEventName: () => {
if (!values.activeVariable?.touched || !values.activeVariable?.default?.custom_event) {
actions.setActiveVariableCustomEventName(null)
} else if (values.activeVariable?.default?.custom_event) {
actions.setActiveVariableCustomEventName(values.activeVariable.default.id)
}
},
})),
propsChanged(({ actions, props }, oldProps) => {
if (props.variables !== oldProps.variables) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { loaders } from 'kea-loaders'
import api from 'lib/api'
import { featureFlagLogic } from 'lib/logic/featureFlagLogic'

import { DashboardTemplateScope, DashboardTemplateType } from '~/types'
import { DashboardTemplateScope, DashboardTemplateType, TemplateAvailabilityContext } from '~/types'

import type { dashboardTemplatesLogicType } from './dashboardTemplatesLogicType'

Expand All @@ -12,6 +12,7 @@ export interface DashboardTemplateProps {
scope?: 'default' | DashboardTemplateScope
onItemClick?: (template: DashboardTemplateType) => void
redirectAfterCreation?: boolean
availabilityContexts?: TemplateAvailabilityContext[]
}

export const dashboardTemplatesLogic = kea<dashboardTemplatesLogicType>([
Expand Down
13 changes: 10 additions & 3 deletions frontend/src/scenes/dashboard/newDashboardLogic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,13 @@ export const newDashboardLogic = kea<newDashboardLogicType>([
createDashboardFromTemplate: (
template: DashboardTemplateType,
variables: DashboardTemplateVariableType[],
redirectAfterCreation?: boolean
redirectAfterCreation?: boolean,
creationContext: string | null = null
) => ({
template,
variables,
redirectAfterCreation,
creationContext,
}),
submitNewDashboardSuccessWithResult: (result: DashboardType, variables?: DashboardTemplateVariableType[]) => ({
result,
Expand Down Expand Up @@ -178,7 +180,12 @@ export const newDashboardLogic = kea<newDashboardLogicType>([
actions.clearActiveDashboardTemplate()
actions.resetNewDashboard()
},
createDashboardFromTemplate: async ({ template, variables, redirectAfterCreation = true }) => {
createDashboardFromTemplate: async ({
template,
variables,
redirectAfterCreation = true,
creationContext = null,
}) => {
actions.setIsLoading(true)
const tiles = makeTilesUsingVariables(template.tiles, variables)
const dashboardJSON = {
Expand All @@ -189,7 +196,7 @@ export const newDashboardLogic = kea<newDashboardLogicType>([
try {
const result: DashboardType = await api.create(
`api/projects/${teamLogic.values.currentTeamId}/dashboards/create_from_template_json`,
{ template: dashboardJSON }
{ template: dashboardJSON, creation_context: creationContext }
)
actions.hideNewDashboardModal()
actions.resetNewDashboard()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,12 @@ const UrlInput = ({ iframeRef }: { iframeRef: React.RefObject<HTMLIFrameElement>
const { setBrowserUrl, setInitialPath } = useActions(
iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true })
)
const { browserUrl, currentPath, currentFullUrl } = useValues(
const { browserUrl, currentPath } = useValues(
iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true })
)
const { snippetHosts } = useValues(sdksLogic)
const { addUrl } = useActions(authorizedUrlListLogic({ actionId: null, type: AuthorizedUrlListType.TOOLBAR_URLS }))
const [inputValue, setInputValue] = useState(currentPath)
const { activeDashboardTemplate } = useValues(newDashboardLogic)
const theDashboardTemplateVariablesLogic = dashboardTemplateVariablesLogic({
variables: activeDashboardTemplate?.variables || [],
})
const { setVariableForPageview, setActiveVariableCustomEventName } = useActions(theDashboardTemplateVariablesLogic)
const { activeVariable } = useValues(theDashboardTemplateVariablesLogic)
const { hideCustomEventField } = useActions(onboardingTemplateConfigLogic)

useEffect(() => {
setInputValue(currentPath)
Expand Down Expand Up @@ -87,18 +80,6 @@ const UrlInput = ({ iframeRef }: { iframeRef: React.RefObject<HTMLIFrameElement>
setInitialPath(inputValue || '')
}}
/>
<LemonButton
size="small"
type="primary"
status="alt"
onClick={() => {
setVariableForPageview(activeVariable.name, currentFullUrl)
setActiveVariableCustomEventName(null)
hideCustomEventField()
}}
>
Select pageview
</LemonButton>
</div>
)
}
Expand Down Expand Up @@ -272,6 +253,7 @@ export const OnboardingDashboardTemplateConfigureStep = ({
</Link>{' '}
(no need to send it now) .
</p>
<p className="italic">PS! These don't have to be perfect, you can fine-tune them later.</p>
<DashboardTemplateVariables hasSelectedSite={!!browserUrl} iframeRef={iframeRef} />
<div className="flex flex-wrap mt-6 w-full gap-x-2 gap-y-2 justify-center">
<div className="grow min-w-64">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { useEffect } from 'react'
import { DashboardTemplateChooser } from 'scenes/dashboard/DashboardTemplateChooser'
import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'

import { TemplateAvailabilityContext } from '~/types'

import { onboardingLogic, OnboardingStepKey } from '../onboardingLogic'
import { OnboardingStep } from '../OnboardingStep'
import { onboardingTemplateConfigLogic } from './onboardingTemplateConfigLogic'
Expand All @@ -15,7 +17,7 @@ export const OnboardingDashboardTemplateSelectStep = ({
}): JSX.Element => {
const { goToNextStep } = useActions(onboardingLogic)
const { clearActiveDashboardTemplate } = useActions(newDashboardLogic)
const { setDashboardCreatedDuringOnboarding } = useActions(onboardingTemplateConfigLogic)
const { setDashboardCreatedDuringOnboarding, reportTemplateSelected } = useActions(onboardingTemplateConfigLogic)

// TODO: this is hacky, find a better way to clear the active template when coming back to this screen
useEffect(() => {
Expand Down Expand Up @@ -44,12 +46,15 @@ export const OnboardingDashboardTemplateSelectStep = ({
</p>
<DashboardTemplateChooser
onItemClick={(template) => {
// clear the saved dashboard so we don't skip the next step
setDashboardCreatedDuringOnboarding(null)
reportTemplateSelected(template)
if (template.variables?.length && template.variables.length > 0) {
goToNextStep()
}
}}
redirectAfterCreation={false}
availabilityContexts={[TemplateAvailabilityContext.ONBOARDING]}
/>
</OnboardingStep>
)
Expand Down
Loading

0 comments on commit dfbd23b

Please sign in to comment.