feat(commands): add commands for sidebar items (#19020)

PostHog · Dec 5, 2023 · f20d706 · f20d706
1 parent d703290
commit f20d706
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 9 deletions.
diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png
diff --git a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx
@@ -32,8 +32,8 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
 
     selectors({
         enabledTabs: [
-            (s) => [s.featureFlags, s.isCloudOrDev],
-            (featureFlags, isCloudOrDev) => {
+            (s) => [s.featureFlags, s.isCloudOrDev, s.isReady, s.hasCompletedAllTasks],
+            (featureFlags, isCloudOrDev, isReady, hasCompletedAllTasks) => {
                 const tabs: SidePanelTab[] = []
 
                 if (featureFlags[FEATURE_FLAGS.NOTEBOOKS]) {
@@ -46,7 +46,9 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
 
                 tabs.push(SidePanelTab.Docs)
                 tabs.push(SidePanelTab.Settings)
-                tabs.push(SidePanelTab.Activation)
+                if (isReady && !hasCompletedAllTasks) {
+                    tabs.push(SidePanelTab.Activation)
+                }
                 tabs.push(SidePanelTab.Activity)
 
                 if (featureFlags[FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON]) {
@@ -59,7 +61,7 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
 
         visibleTabs: [
             (s) => [s.enabledTabs, s.selectedTab, s.sidePanelOpen, s.isReady, s.hasCompletedAllTasks],
-            (enabledTabs, selectedTab, sidePanelOpen, isReady, hasCompletedAllTasks): SidePanelTab[] => {
+            (enabledTabs, selectedTab, sidePanelOpen): SidePanelTab[] => {
                 return enabledTabs.filter((tab: any) => {
                     if (tab === selectedTab && sidePanelOpen) {
                         return true
@@ -70,10 +72,6 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
                         return false
                     }
 
-                    if (tab === SidePanelTab.Activation && (!isReady || hasCompletedAllTasks)) {
-                        return false
-                    }
-
                     return true
                 })
             },

diff --git a/frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx b/frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx
@@ -46,7 +46,7 @@ import { actions, connect, events, kea, listeners, path, reducers, selectors } f
 import { router } from 'kea-router'
 import api from 'lib/api'
 import { FEATURE_FLAGS } from 'lib/constants'
-import { IconFlare } from 'lib/lemon-ui/icons'
+import { IconClose, IconFlare } from 'lib/lemon-ui/icons'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { isMobile, isURL, uniqueBy } from 'lib/utils'
@@ -59,6 +59,9 @@ import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
+import { SidePanelTabs } from '~/layout/navigation-3000/sidepanel/SidePanel'
+import { sidePanelLogic } from '~/layout/navigation-3000/sidepanel/sidePanelLogic'
+import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
 import { dashboardsModel } from '~/models/dashboardsModel'
 import { DashboardType, InsightType } from '~/types'
 
@@ -148,6 +151,8 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             ['setHedgehogModeEnabled'],
             commandBarLogic,
             ['setCommandBar'],
+            sidePanelStateLogic,
+            ['openSidePanel', 'closeSidePanel'],
         ],
         values: [
             teamLogic,
@@ -158,6 +163,10 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             ['featureFlags'],
             hedgehogbuddyLogic,
             ['hedgehogModeEnabled'],
+            sidePanelLogic,
+            ['enabledTabs'],
+            sidePanelStateLogic,
+            ['sidePanelOpen'],
         ],
         logic: [preflightLogic],
     }),
@@ -963,6 +972,34 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                 },
             }
 
+            const sidepanel: Command = {
+                key: 'sidepanel',
+                scope: GLOBAL_COMMAND_SCOPE,
+                resolver: [
+                    ...values.enabledTabs.map((tab) => {
+                        const { Icon, label } = SidePanelTabs[tab]
+                        return {
+                            icon: Icon,
+                            display: `Open ${label} side panel`,
+                            executor: () => {
+                                actions.openSidePanel(tab)
+                            },
+                        }
+                    }),
+                    ...(values.sidePanelOpen
+                        ? [
+                              {
+                                  icon: IconClose,
+                                  display: 'Close side panel',
+                                  executor: () => {
+                                      actions.closeSidePanel()
+                                  },
+                              },
+                          ]
+                        : []),
+                ],
+            }
+
             actions.registerCommand(goTo)
             actions.registerCommand(openUrls)
             actions.registerCommand(debugClickhouseQueries)
@@ -975,6 +1012,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                 actions.registerCommand(toggleTheme)
                 actions.registerCommand(toggleHedgehogMode)
                 actions.registerCommand(shortcuts)
+                actions.registerCommand(sidepanel)
             }
         },
         beforeUnmount: () => {
@@ -989,6 +1027,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             actions.deregisterCommand('toggle-theme')
             actions.deregisterCommand('toggle-hedgehog-mode')
             actions.deregisterCommand('shortcuts')
+            actions.deregisterCommand('sidepanel')
         },
     })),
 ])