fix: support minimal top bar for onboarding screens (#18077)

PostHog · Oct 19, 2023 · 1dc09c2 · 1dc09c2
1 parent c1f3e94
commit 1dc09c2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 19 deletions.
diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png
diff --git a/frontend/src/layout/navigation/TopBar/TopBar.tsx b/frontend/src/layout/navigation/TopBar/TopBar.tsx
@@ -22,8 +22,14 @@ import ActivationSidebarToggle from 'lib/components/ActivationSidebar/Activation
 import { NotebookButton } from '~/layout/navigation/TopBar/NotebookButton'
 
 export function TopBar(): JSX.Element {
-    const { isSideBarShown, bareNav, mobileLayout, isCreateOrganizationModalShown, isCreateProjectModalShown } =
-        useValues(navigationLogic)
+    const {
+        isSideBarShown,
+        noSidebar,
+        minimalTopBar,
+        mobileLayout,
+        isCreateOrganizationModalShown,
+        isCreateProjectModalShown,
+    } = useValues(navigationLogic)
     const { toggleSideBarBase, toggleSideBarMobile, hideCreateOrganizationModal, hideCreateProjectModal } =
         useActions(navigationLogic)
     const { isInviteModalShown } = useValues(inviteLogic)
@@ -55,7 +61,7 @@ export function TopBar(): JSX.Element {
             <Announcement />
             <header className="TopBar">
                 <div className="TopBar__segment TopBar__segment--left">
-                    {!bareNav && (
+                    {!noSidebar && (
                         <div
                             className="TopBar__hamburger"
                             onClick={() => (mobileLayout ? toggleSideBarMobile() : toggleSideBarBase())}
@@ -66,15 +72,25 @@ export function TopBar(): JSX.Element {
                     <Link to="/" className="TopBar__logo">
                         <Logo />
                     </Link>
-
-                    <div className="grow">
-                        <UniversalSearchPopover groupType={TaxonomicFilterGroupType.Events} groupTypes={groupTypes} />
-                    </div>
-                    <ActivationSidebarToggle />
+                    {!minimalTopBar && (
+                        <>
+                            <div className="grow">
+                                <UniversalSearchPopover
+                                    groupType={TaxonomicFilterGroupType.Events}
+                                    groupTypes={groupTypes}
+                                />
+                            </div>
+                            <ActivationSidebarToggle />
+                        </>
+                    )}
                 </div>
                 <div className="TopBar__segment TopBar__segment--right">
-                    {hasNotebooks && <NotebookButton />}
-                    <NotificationBell />
+                    {!minimalTopBar && (
+                        <>
+                            {hasNotebooks && <NotebookButton />}
+                            <NotificationBell />
+                        </>
+                    )}
                     <HelpButton />
                     <SitePopover />
                 </div>

diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts
@@ -8,6 +8,7 @@ import { userLogic } from 'scenes/userLogic'
 import type { navigationLogicType } from './navigationLogicType'
 import { membersLogic } from 'scenes/organization/Settings/membersLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { Scene } from 'scenes/sceneTypes'
 
 export type ProjectNoticeVariant =
     | 'demo_project'
@@ -19,7 +20,7 @@ export type ProjectNoticeVariant =
 export const navigationLogic = kea<navigationLogicType>({
     path: ['layout', 'navigation', 'navigationLogic'],
     connect: {
-        values: [sceneLogic, ['sceneConfig'], membersLogic, ['members', 'membersLoading']],
+        values: [sceneLogic, ['sceneConfig', 'activeScene'], membersLogic, ['members', 'membersLoading']],
         actions: [eventUsageLogic, ['reportProjectNoticeDismissed']],
     },
     actions: {
@@ -117,20 +118,27 @@ export const navigationLogic = kea<navigationLogicType>({
         mobileLayout: (window) => window.innerWidth < 992, // Sync width threshold with Sass variable $lg!
     }),
     selectors: {
-        /** `bareNav` whether the current scene should display a sidebar at all */
-        bareNav: [
+        /** `noSidebar` whether the current scene should display a sidebar at all */
+        noSidebar: [
             (s) => [s.fullscreen, s.sceneConfig],
             (fullscreen, sceneConfig) => fullscreen || sceneConfig?.layout === 'plain',
         ],
+        minimalTopBar: [
+            (s) => [s.activeScene],
+            (activeScene) => {
+                const minimalTopBarScenes = [Scene.Products, Scene.Onboarding]
+                return activeScene && minimalTopBarScenes.includes(activeScene)
+            },
+        ],
         isSideBarShown: [
-            (s) => [s.mobileLayout, s.isSideBarShownBase, s.isSideBarShownMobile, s.bareNav],
-            (mobileLayout, isSideBarShownBase, isSideBarShownMobile, bareNav) =>
-                !bareNav && (mobileLayout ? isSideBarShownMobile : isSideBarShownBase),
+            (s) => [s.mobileLayout, s.isSideBarShownBase, s.isSideBarShownMobile, s.noSidebar],
+            (mobileLayout, isSideBarShownBase, isSideBarShownMobile, noSidebar) =>
+                !noSidebar && (mobileLayout ? isSideBarShownMobile : isSideBarShownBase),
         ],
         isActivationSideBarShown: [
-            (s) => [s.mobileLayout, s.isActivationSideBarShownBase, s.isSideBarShownMobile, s.bareNav],
-            (mobileLayout, isActivationSideBarShownBase, isSideBarShownMobile, bareNav) =>
-                !bareNav &&
+            (s) => [s.mobileLayout, s.isActivationSideBarShownBase, s.isSideBarShownMobile, s.noSidebar],
+            (mobileLayout, isActivationSideBarShownBase, isSideBarShownMobile, noSidebar) =>
+                !noSidebar &&
                 (mobileLayout ? isActivationSideBarShownBase && !isSideBarShownMobile : isActivationSideBarShownBase),
         ],
         systemStatus: [