Fixed up when it gets shown

frontend/src/layout/navigation-3000/sidepanel/SidePanel.stories.tsx

@@ -1,5 +1,15 @@
 import { Meta, StoryFn } from '@storybook/react'
+import { useActions } from 'kea'
+import { router } from 'kea-router'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { useEffect } from 'react'
 import { App } from 'scenes/App'
+import { urls } from 'scenes/urls'
+
+import { setFeatureFlags } from '~/mocks/browser'
+import { SidePanelTab } from '~/types'
+
+import { sidePanelStateLogic } from './sidePanelStateLogic'
 
 const meta: Meta = {
     title: 'Scenes-App/SidePanels',
@@ -10,6 +20,34 @@ const meta: Meta = {
     },
 }
 export default meta
-export const SidePanelDocs: StoryFn = () => {
+
+const BaseTemplate = (props: { panel: SidePanelTab }): JSX.Element => {
+    const { openSidePanel } = useActions(sidePanelStateLogic)
+    setFeatureFlags([FEATURE_FLAGS.POSTHOG_3000])
+    useEffect(() => {
+        router.actions.push(urls.dashboards())
+        openSidePanel(props.panel)
+    }, [])
+
     return <App />
 }
+
+export const SidePanelDocs: StoryFn = () => {
+    return <BaseTemplate panel={SidePanelTab.Docs} />
+}
+
+export const SidePanelWelcome: StoryFn = () => {
+    return <BaseTemplate panel={SidePanelTab.Welcome} />
+}
+
+export const SidePanelSettings: StoryFn = () => {
+    return <BaseTemplate panel={SidePanelTab.Settings} />
+}
+
+export const SidePanelActivation: StoryFn = () => {
+    return <BaseTemplate panel={SidePanelTab.Activation} />
+}
+
+export const SidePanelNotebooks: StoryFn = () => {
+    return <BaseTemplate panel={SidePanelTab.Notebooks} />
+}

frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx

@@ -1,4 +1,4 @@
-import { actions, afterMount, connect, kea, path, reducers, selectors } from 'kea'
+import { afterMount, connect, kea, path, reducers, selectors } from 'kea'
 import { activationLogic } from 'lib/components/ActivationSidebar/activationLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -37,7 +37,11 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
         shouldShowWelcomeAnnouncement: [
             (s) => [s.welcomeAnnouncementAcknowledged, s.featureFlags],
             (welcomeAnnouncementAcknowledged, featureFlags) => {
-                if (featureFlags[FEATURE_FLAGS.POSTHOG_3000] && !welcomeAnnouncementAcknowledged) {
+                if (
+                    featureFlags[FEATURE_FLAGS.POSTHOG_3000] &&
+                    featureFlags[FEATURE_FLAGS.POSTHOG_3000_WELCOME_ANNOUNCEMENT] &&
+                    !welcomeAnnouncementAcknowledged
+                ) {
                     return true
                 }
 

frontend/src/lib/constants.tsx

@@ -140,6 +140,7 @@ export const FEATURE_FLAGS = {
     QUERY_ASYNC: 'query-async', // owner: @webjunkie
     POSTHOG_3000: 'posthog-3000', // owner: @Twixes
     POSTHOG_3000_NAV: 'posthog-3000-nav', // owner: @Twixes
+    POSTHOG_3000_WELCOME_ANNOUNCEMENT: 'posthog-3000-welcome-announcement', // owner: #posthog-3000
     ENABLE_PROMPTS: 'enable-prompts', // owner: @lharries
     FEEDBACK_SCENE: 'feedback-scene', // owner: @lharries
     NOTEBOOKS: 'notebooks', // owner: #team-monitoring