Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(onboarding-templates): create custom variable selector panel #24770

Merged
merged 9 commits into from
Sep 5, 2024

Conversation

raquelmsmith
Copy link
Member

@raquelmsmith raquelmsmith commented Sep 3, 2024

Problem

For #23065

We want the template variable selector process to be as simple as possible for new users - they can always add more complex filters and stuff later. At this point they need two options - select from site, or define a custom event name.

Changes

  • Simplifies variable select view (makes a completely new component for it)
  • Extends variable logic to handle the new component style
  • Adds option to use a custom event name for the variable
  • When clicking "Select from site" it doesn't actually work yet - that's next
Screen.Recording.2024-09-03.at.8.59.13.PM.mov

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Does this work well for both Cloud and self-hosted?

How did you test this code?

Clicked around a bunch to handle all the edge cases but LMK if you find any :)

@raquelmsmith raquelmsmith marked this pull request as ready for review September 3, 2024 23:39
Comment on lines +57 to +77
onChange={(v) => {
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)
}
}}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like this is pretty poor handling...

Copy link
Contributor

github-actions bot commented Sep 3, 2024

Size Change: +1.69 kB (+0.15%)

Total Size: 1.12 MB

Filename Size Change
frontend/dist/toolbar.js 1.12 MB +1.69 kB (+0.15%)

compressed-size-action

status="alt"
onClick={() => {
setShowCustomEventField(false)
setVariable(variable.name, { events: [FALLBACK_EVENT] })
Copy link
Member Author

@raquelmsmith raquelmsmith Sep 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in a follow-up PR this will actually get the action from the toolbar in the iframe, but for now it just sets fallback event info

Copy link
Contributor

@zlwaterfield zlwaterfield left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, it looks good. I haven't gotten this fully up locally because my ingestion isn't working, so I need to wipe my local inf. Then, I will try again and add more feedback. But I don't want to block you in the meantime.

I have added a few comments about skipping and some of the chosen copy.

@raquelmsmith raquelmsmith enabled auto-merge (squash) September 5, 2024 17:41
@raquelmsmith raquelmsmith merged commit 6f6a80a into master Sep 5, 2024
86 checks passed
@raquelmsmith raquelmsmith deleted the feat/onboarding-templates-select-from-site branch September 5, 2024 17:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants