feat(3000): bring back pinned dashboards in navigation (#19743)

* feat(3000): bring back pinned dashboards in navigation * move loading state into overlay * add heading * use lemon menu overlay component
PostHog · Jan 16, 2024 · 60a29e1 · 60a29e1
1 parent 626e880
commit 60a29e1
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/frontend/src/layout/navigation-3000/navigationLogic.tsx b/frontend/src/layout/navigation-3000/navigationLogic.tsx
@@ -15,20 +15,23 @@ import {
     IconTestTube,
     IconToggle,
 } from '@posthog/icons'
-import { lemonToast } from '@posthog/lemon-ui'
+import { lemonToast, Spinner } from '@posthog/lemon-ui'
 import { captureException } from '@sentry/react'
 import { actions, connect, events, kea, listeners, path, props, reducers, selectors } from 'kea'
 import { router } from 'kea-router'
 import { subscriptions } from 'kea-subscriptions'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { IconPlusMini } from 'lib/lemon-ui/icons'
+import { LemonMenuOverlay } from 'lib/lemon-ui/LemonMenu/LemonMenu'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { isNotNil } from 'lib/utils'
 import React from 'react'
 import { sceneLogic } from 'scenes/sceneLogic'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
+import { dashboardsModel } from '~/models/dashboardsModel'
+
 import { navigationLogic } from '../navigation/navigationLogic'
 import type { navigation3000LogicType } from './navigationLogicType'
 import { dashboardsSidebarLogic } from './sidebars/dashboards'
@@ -312,8 +315,12 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
             (isNavCollapsedDesktop, mobileLayout): boolean => !mobileLayout && isNavCollapsedDesktop,
         ],
         navbarItems: [
-            () => [featureFlagLogic.selectors.featureFlags],
-            (featureFlags): NavbarItem[][] => {
+            () => [
+                featureFlagLogic.selectors.featureFlags,
+                dashboardsModel.selectors.dashboardsLoading,
+                dashboardsModel.selectors.pinnedDashboards,
+            ],
+            (featureFlags, dashboardsLoading, pinnedDashboards): NavbarItem[][] => {
                 const isUsingSidebar = featureFlags[FEATURE_FLAGS.POSTHOG_3000_NAV]
                 return [
                     [
@@ -329,6 +336,30 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             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,

diff --git a/frontend/src/layout/navigation-3000/types.ts b/frontend/src/layout/navigation-3000/types.ts
@@ -30,7 +30,7 @@ interface NavbarItemBase {
     icon: JSX.Element
     featureFlag?: (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
     tag?: 'alpha' | 'beta' | 'new'
-    sideAction?: Pick<SideAction, 'icon' | 'to' | 'onClick' | 'tooltip'> & { identifier: string }
+    sideAction?: Pick<SideAction, 'icon' | 'to' | 'onClick' | 'tooltip' | 'dropdown'> & { identifier: string }
 }
 export interface SceneNavbarItem extends NavbarItemBase {
     to: string