refactor(frontend): Use breadcrumbs for navbar highlighting (#18902)

PostHog · Nov 27, 2023 · d317283 · d317283
1 parent 80cc07d
commit d317283
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 41 deletions.
diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
@@ -7,6 +7,7 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import React, { FunctionComponent, ReactElement, useState } from 'react'
 import { sceneLogic } from 'scenes/sceneLogic'
 
+import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic'
 import { SidebarChangeNoticeContent, useSidebarChangeNotices } from '~/layout/navigation/SideBar/SidebarChangeNotice'
 
 import { navigation3000Logic } from '../navigationLogic'
@@ -44,13 +45,14 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
         },
         ref
     ): JSX.Element => {
-        const { aliasedActiveScene } = useValues(sceneLogic)
+        const { activeScene } = useValues(sceneLogic)
+        const { sceneBreadcrumbKeys } = useValues(breadcrumbsLogic)
         const { isNavCollapsed } = useValues(navigation3000Logic)
         const isUsingNewNav = useFeatureFlag('POSTHOG_3000_NAV')
 
         const [hasBeenClicked, setHasBeenClicked] = useState(false)
 
-        const here = aliasedActiveScene === identifier
+        const here = activeScene === identifier || sceneBreadcrumbKeys.includes(identifier)
         const isNavCollapsedActually = isNavCollapsed || isUsingNewNav
 
         if (!isUsingNewNav) {

diff --git a/frontend/src/layout/navigation-3000/navigationLogic.tsx b/frontend/src/layout/navigation-3000/navigationLogic.tsx
@@ -464,14 +464,10 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                     : null,
         ],
         activeNavbarItemId: [
-            (s) => [
-                s.activeNavbarItemIdRaw,
-                sceneLogic.selectors.aliasedActiveScene,
-                featureFlagLogic.selectors.featureFlags,
-            ],
-            (activeNavbarItemIdRaw, aliasedActiveScene, featureFlags): string | null => {
+            (s) => [s.activeNavbarItemIdRaw, featureFlagLogic.selectors.featureFlags],
+            (activeNavbarItemIdRaw, featureFlags): string | null => {
                 if (!featureFlags[FEATURE_FLAGS.POSTHOG_3000_NAV]) {
-                    return aliasedActiveScene
+                    return null
                 }
                 return activeNavbarItemIdRaw
             },

diff --git a/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx b/frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx
@@ -164,6 +164,10 @@ export const breadcrumbsLogic = kea<breadcrumbsLogicType>([
                 return breadcrumbs
             },
         ],
+        sceneBreadcrumbKeys: [
+            (s) => [s.sceneBreadcrumbs],
+            (sceneBreadcrumbs): Breadcrumb['key'][] => sceneBreadcrumbs.map((breadcrumb) => breadcrumb.key),
+        ],
         breadcrumbs: [
             (s) => [s.appBreadcrumbs, s.sceneBreadcrumbs],
             (appBreadcrumbs, sceneBreadcrumbs): FinalizedBreadcrumb[] => {

diff --git a/frontend/src/layout/navigation/SideBar/PageButton.tsx b/frontend/src/layout/navigation/SideBar/PageButton.tsx
@@ -9,6 +9,8 @@ import { navigationLogic } from '~/layout/navigation/navigationLogic'
 import { SidebarChangeNoticeTooltip } from '~/layout/navigation/SideBar/SidebarChangeNotice'
 import { dashboardsModel } from '~/models/dashboardsModel'
 
+import { breadcrumbsLogic } from '../Breadcrumbs/breadcrumbsLogic'
+
 export interface PageButtonProps extends Pick<LemonButtonProps, 'icon' | 'onClick' | 'to'> {
     /** Used for highlighting the active scene. `identifier` of type number means dashboard ID instead of scene. */
     identifier: string | number
@@ -18,15 +20,16 @@ export interface PageButtonProps extends Pick<LemonButtonProps, 'icon' | 'onClic
 }
 
 export function PageButton({ title, sideAction, identifier, highlight, ...buttonProps }: PageButtonProps): JSX.Element {
-    const { aliasedActiveScene, activeScene } = useValues(sceneLogic)
+    const { activeScene } = useValues(sceneLogic)
+    const { sceneBreadcrumbKeys } = useValues(breadcrumbsLogic)
     const { hideSideBarMobile } = useActions(navigationLogic)
     const { lastDashboardId } = useValues(dashboardsModel)
 
-    const isActiveSide: boolean = sideAction?.identifier === aliasedActiveScene
+    const isActiveSide: boolean = !!sideAction?.identifier && activeScene === sideAction.identifier
     const isActive: boolean =
         isActiveSide ||
         (typeof identifier === 'string'
-            ? identifier === aliasedActiveScene
+            ? activeScene === identifier || sceneBreadcrumbKeys.includes(identifier)
             : activeScene === Scene.Dashboard && identifier === lastDashboardId)
 
     const buttonStatus = isActive ? 'primary' : 'stealth'

diff --git a/frontend/src/scenes/sceneLogic.ts b/frontend/src/scenes/sceneLogic.ts
@@ -16,31 +16,6 @@ import type { sceneLogicType } from './sceneLogicType'
 import { teamLogic } from './teamLogic'
 import { userLogic } from './userLogic'
 
-/** Mapping of some scenes that aren't directly accessible from the sidebar to ones that are - for the sidebar. */
-const sceneNavAlias: Partial<Record<Scene, Scene>> = {
-    [Scene.Action]: Scene.DataManagement,
-    [Scene.EventDefinition]: Scene.DataManagement,
-    [Scene.PropertyDefinition]: Scene.DataManagement,
-    [Scene.Person]: Scene.PersonsManagement,
-    [Scene.Cohort]: Scene.PersonsManagement,
-    [Scene.Experiment]: Scene.Experiments,
-    [Scene.Group]: Scene.PersonsManagement,
-    [Scene.Dashboard]: Scene.Dashboards,
-    [Scene.FeatureFlag]: Scene.FeatureFlags,
-    [Scene.EarlyAccessFeature]: Scene.EarlyAccessFeatures,
-    [Scene.Survey]: Scene.Surveys,
-    [Scene.SurveyTemplates]: Scene.Surveys,
-    [Scene.DataWarehousePosthog]: Scene.DataWarehouse,
-    [Scene.DataWarehouseExternal]: Scene.DataWarehouse,
-    [Scene.DataWarehouseSavedQueries]: Scene.DataWarehouse,
-    [Scene.DataWarehouseSettings]: Scene.DataWarehouse,
-    [Scene.DataWarehouseTable]: Scene.DataWarehouse,
-    [Scene.AppMetrics]: Scene.Apps,
-    [Scene.ReplaySingle]: Scene.Replay,
-    [Scene.ReplayPlaylist]: Scene.ReplayPlaylist,
-    [Scene.Site]: Scene.ToolbarLaunch,
-}
-
 export const sceneLogic = kea<sceneLogicType>([
     props(
         {} as {
@@ -143,10 +118,6 @@ export const sceneLogic = kea<sceneLogicType>([
                     : scene
             },
         ],
-        aliasedActiveScene: [
-            (s) => [s.activeScene],
-            (activeScene) => (activeScene ? sceneNavAlias[activeScene] || activeScene : null),
-        ],
         activeLoadedScene: [
             (s) => [s.activeScene, s.loadedScenes],
             (activeScene, loadedScenes) => (activeScene ? loadedScenes[activeScene] : null),