Skip to content

Commit

Permalink
fix: onboarding navigation (#20744)
Browse files Browse the repository at this point in the history 
* hide nav items that aren't useful in onboarding

* let people see product intro pages if on control and first onboarding
  • Loading branch information
@raquelmsmith
raquelmsmith authored Mar 6, 2024
1 parent 63de132 commit 03d07d7
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 86 deletions.
165 changes: 84 additions & 81 deletions frontend/src/layout/navigation-3000/navigationLogic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,81 +343,80 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
): NavbarItem[][] => {
const isUsingSidebar = featureFlags[FEATURE_FLAGS.POSTHOG_3000_NAV]
const hasOnboardedFeatureFlags = currentTeam?.has_completed_onboarding_for?.[ProductKey.FEATURE_FLAGS]
const sectionOne: NavbarItem[] = [
{
identifier: Scene.Dashboards,
label: 'Dashboards',
icon: <IconDashboard />,
logic: isUsingSidebar ? dashboardsSidebarLogic : undefined,
to: isUsingSidebar ? undefined : urls.dashboards(),
sideAction: {
identifier: 'pinned-dashboards-dropdown',
dropdown: {
overlay: (
<LemonMenuOverlay
items={[
{
title: 'Pinned dashboards',
items: pinnedDashboards.map((dashboard) => ({
label: dashboard.name,
to: urls.dashboard(dashboard.id),
})),
footer: dashboardsLoading && (
<div className="px-2 py-1 text-text-secondary-3000">
<Spinner /> Loading…
</div>
),
},
]}
/>
),
placement: 'bottom-end',
},
},
},
{
identifier: Scene.Notebooks,
label: 'Notebooks',
icon: <IconNotebook />,
to: urls.notebooks(),
},
{
identifier: Scene.DataManagement,
label: 'Data management',
icon: <IconDatabase />,
logic: isUsingSidebar ? dataManagementSidebarLogic : undefined,
to: isUsingSidebar ? undefined : urls.eventDefinitions(),
},
{
identifier: Scene.PersonsManagement,
label: 'People',
icon: <IconPeople />,
logic: isUsingSidebar ? personsAndGroupsSidebarLogic : undefined,
to: isUsingSidebar ? undefined : urls.persons(),
},
{
identifier: Scene.Events,
label: 'Activity',
icon: <IconLive />,
to: urls.events(),
},
]

sectionOne.unshift(
hasOnboardedAnyProduct
? {
const sectionOne: NavbarItem[] = hasOnboardedAnyProduct
? [
{
identifier: Scene.ProjectHomepage,
label: 'Home',
icon: <IconHome />,
to: urls.projectHomepage(),
}
: {
},
{
identifier: Scene.Dashboards,
label: 'Dashboards',
icon: <IconDashboard />,
logic: isUsingSidebar ? dashboardsSidebarLogic : undefined,
to: isUsingSidebar ? undefined : urls.dashboards(),
sideAction: {
identifier: 'pinned-dashboards-dropdown',
dropdown: {
overlay: (
<LemonMenuOverlay
items={[
{
title: 'Pinned dashboards',
items: pinnedDashboards.map((dashboard) => ({
label: dashboard.name,
to: urls.dashboard(dashboard.id),
})),
footer: dashboardsLoading && (
<div className="px-2 py-1 text-text-secondary-3000">
<Spinner /> Loading…
</div>
),
},
]}
/>
),
placement: 'bottom-end',
},
},
},
{
identifier: Scene.Notebooks,
label: 'Notebooks',
icon: <IconNotebook />,
to: urls.notebooks(),
},
{
identifier: Scene.DataManagement,
label: 'Data management',
icon: <IconDatabase />,
logic: isUsingSidebar ? dataManagementSidebarLogic : undefined,
to: isUsingSidebar ? undefined : urls.eventDefinitions(),
},
{
identifier: Scene.PersonsManagement,
label: 'People',
icon: <IconPeople />,
logic: isUsingSidebar ? personsAndGroupsSidebarLogic : undefined,
to: isUsingSidebar ? undefined : urls.persons(),
},
{
identifier: Scene.Events,
label: 'Activity',
icon: <IconLive />,
to: urls.events(),
},
]
: [
{
identifier: Scene.Products,
label: 'Welcome to PostHog',
icon: <IconLogomark />,
to: urls.products(),
}
)
},
]

return [
sectionOne,
Expand Down Expand Up @@ -478,20 +477,24 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
to: urls.earlyAccessFeatures(),
}
: null,
{
identifier: Scene.DataWarehouse,
label: 'Data warehouse',
icon: <IconServer />,
to: urls.dataWarehouse(),
featureFlag: FEATURE_FLAGS.DATA_WAREHOUSE,
tag: 'beta' as const,
},
{
identifier: Scene.Apps,
label: 'Data pipeline',
icon: <IconDecisionTree />,
to: urls.projectApps(),
},
hasOnboardedAnyProduct
? {
identifier: Scene.DataWarehouse,
label: 'Data warehouse',
icon: <IconServer />,
to: urls.dataWarehouse(),
featureFlag: FEATURE_FLAGS.DATA_WAREHOUSE,
tag: 'beta' as const,
}
: null,
hasOnboardedAnyProduct
? {
identifier: Scene.Apps,
label: 'Data pipeline',
icon: <IconDecisionTree />,
to: urls.projectApps(),
}
: null,
{
identifier: Scene.Pipeline,
label: 'Data pipeline 3000',
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/scenes/sceneLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,10 +264,7 @@ export const sceneLogic = kea<sceneLogicType>([
const allProductUrls = Object.values(productUrlMapping).flat()
if (
!teamLogic.values.hasOnboardedAnyProduct &&
(values.featureFlags[FEATURE_FLAGS.PRODUCT_INTRO_PAGES] !== 'test' ||
!allProductUrls.some((path) =>
removeProjectIdIfPresent(location.pathname).startsWith(path)
))
!allProductUrls.some((path) => removeProjectIdIfPresent(location.pathname).startsWith(path))
) {
console.warn('No onboarding completed, redirecting to /products')
router.actions.replace(urls.products())
Expand Down Expand Up @@ -296,7 +293,10 @@ export const sceneLogic = kea<sceneLogicType>([
product_key: productKeyFromUrl,
is_onboarding_first_product: !teamLogic.values.hasOnboardedAnyProduct,
})
if (values.featureFlags[FEATURE_FLAGS.PRODUCT_INTRO_PAGES] === 'test') {
if (
values.featureFlags[FEATURE_FLAGS.PRODUCT_INTRO_PAGES] === 'test' ||
!teamLogic.values.hasOnboardedAnyProduct
) {
console.warn(
`Onboarding not completed for ${productKeyFromUrl}, redirecting to onboarding intro`
)
Expand Down

0 comments on commit 03d07d7

Please sign in to comment.