feat(3000): Welcome panel

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

@@ -0,0 +1,53 @@
+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',
+    parameters: {
+        layout: 'fullscreen',
+        viewMode: 'story',
+        mockDate: '2023-07-04', // To stabilize relative dates
+    },
+}
+export default meta
+
+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/SidePanel.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { Resizer } from 'lib/components/Resizer/Resizer'
 import { resizerLogic, ResizerLogicProps } from 'lib/components/Resizer/resizerLogic'
+import { IconFlare } from 'lib/lemon-ui/icons'
 import { useEffect, useRef } from 'react'
 import { NotebookPanel } from 'scenes/notebooks/NotebookPanel/NotebookPanel'
 
@@ -16,6 +17,7 @@ import { SidePanelDocs } from './panels/SidePanelDocs'
 import { SidePanelFeaturePreviews } from './panels/SidePanelFeaturePreviews'
 import { SidePanelSettings } from './panels/SidePanelSettings'
 import { SidePanelSupport } from './panels/SidePanelSupport'
+import { SidePanelWelcome } from './panels/SidePanelWelcome'
 import { sidePanelLogic } from './sidePanelLogic'
 import { sidePanelStateLogic } from './sidePanelStateLogic'
 
@@ -46,11 +48,17 @@ export const SidePanelTabs: Record<SidePanelTab, { label: string; Icon: any; Con
         Icon: IconGear,
         Content: SidePanelSettings,
     },
+
     [SidePanelTab.FeaturePreviews]: {
         label: 'Previews',
         Icon: IconFeatures,
         Content: SidePanelFeaturePreviews,
     },
+    [SidePanelTab.Welcome]: {
+        label: 'Welcome',
+        Icon: IconFlare,
+        Content: SidePanelWelcome,
+    },
 }
 
 export function SidePanel(): JSX.Element | null {

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

@@ -0,0 +1,114 @@
+import { IconCursorClick, IconGear, IconHome, IconInfo, IconNight, IconNotebook, IconSearch } from '@posthog/icons'
+import { LemonButton, Link } from '@posthog/lemon-ui'
+import { useActions } from 'kea'
+import posthog from 'posthog-js'
+import { useEffect } from 'react'
+
+import { KeyboardShortcut } from '../../components/KeyboardShortcut'
+import { sidePanelStateLogic } from '../sidePanelStateLogic'
+
+const blogPostUrl = 'https://posthog.com/blog/why-redesign'
+
+export const SidePanelWelcome = (): JSX.Element => {
+    const { closeSidePanel } = useActions(sidePanelStateLogic)
+
+    useEffect(() => {
+        return () => {
+            // Linked to the FF to ensure it isn't shown again
+            posthog.capture('3000 welcome acknowledged', {
+                $set: {
+                    [`3000-welcome-acknowledged`]: true,
+                },
+            })
+        }
+    }, [])
+
+    return (
+        <div className="flex flex-col items-center justify-center m-4 my-10 flex-1">
+            <h1 className="font-bold text-4xl text-center">
+                Welcome to <span className="text-primary-3000">PostHog&nbsp;3000</span>
+            </h1>
+
+            <p className="max-w-120 text-center">
+                <b>PostHog 3000</b> is the codename for our revamped user experience. You can{' '}
+                <Link to={blogPostUrl}>read more about it here</Link> but the headline features you will notice are:
+            </p>
+            <ul className="space-y-4">
+                <li className="bg-bg-3000 border rounded p-4 flex gap-4 items-center">
+                    <IconNight className="text-3xl" />
+                    <div className="flex-1">
+                        <h3 className="mb-0 font-semibold">Colors, data density, dark mode</h3>
+                        <span>
+                            A general refresh of our look and feel for enhanced visibility with improved data density
+                            and a dark mode option
+                        </span>
+                    </div>
+                </li>
+                <li className="bg-bg-3000 border rounded p-4 flex gap-4 items-center">
+                    <IconHome className="text-3xl" />
+                    <div className="flex-1">
+                        <h3 className="mb-0 font-semibold">New navigation menu </h3>
+                        <span>
+                            Organized into two main sections: 'project & data' and 'products', collapsible for even more
+                            space
+                        </span>
+                    </div>
+                </li>
+                <li className="bg-bg-3000 border rounded p-4 flex gap-4 items-center">
+                    <IconInfo className="text-3xl" />
+                    <div className="flex-1">
+                        <h3 className="mb-0 font-semibold">Side panel</h3>
+                        <span>
+                            A collapsible side panel for easy access to notebooks, in-app documentation, and support
+                        </span>
+                    </div>
+                </li>
+                <li className="bg-bg-3000 border rounded p-4 flex gap-4 items-center">
+                    <IconNotebook className="text-3xl" />
+                    <div className="flex-1">
+                        <h3 className="mb-0 font-semibold">Notebooks</h3>
+                        <span>
+                            A feature for aggregating multiple insights, replays, persons or anything else on a single
+                            page, aiding in data exploration and team collaboration
+                        </span>
+                    </div>
+                </li>
+                <li className="bg-bg-3000 border rounded p-4 flex gap-4 items-center">
+                    <IconCursorClick className="text-3xl" />
+                    <div className="flex-1">
+                        <h3 className="mb-0 font-semibold">Toolbar 3000</h3>
+                        <span>An updated toolbar with a modern design and dark mode compatibility</span>
+                    </div>
+                </li>
+                <li className="bg-bg-3000 border rounded p-4 flex gap-4 items-center">
+                    <IconSearch className="text-3xl" />
+                    <div className="flex-1">
+                        <h3 className="mb-0 font-semibold">Search + commands bar</h3>
+                        <span>
+                            A unified feature enabling navigation to most of PostHog's built-in features using keyboard
+                            shortcuts - try it with <KeyboardShortcut shift k />
+                        </span>
+                    </div>
+                </li>
+                <li className="bg-bg-3000 border rounded p-4 flex gap-4 items-center">
+                    <IconGear className="text-3xl" />
+                    <div className="flex-1">
+                        <h3 className="mb-0 font-semibold">Reorganized settings</h3>
+                        <span>
+                            An improved organization of the project settings page for easier access and management
+                        </span>
+                    </div>
+                </li>
+            </ul>
+
+            <div className="flex items-center gap-2 mt-8">
+                <LemonButton to={blogPostUrl} size="large" type="secondary">
+                    Tell me more
+                </LemonButton>
+                <LemonButton size="large" type="primary" onClick={() => closeSidePanel()}>
+                    Get started
+                </LemonButton>
+            </div>
+        </div>
+    )
+}

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

@@ -1,4 +1,4 @@
-import { connect, kea, path, 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'
@@ -9,7 +9,7 @@ import { SidePanelTab } from '~/types'
 import type { sidePanelLogicType } from './sidePanelLogicType'
 import { sidePanelStateLogic } from './sidePanelStateLogic'
 
-const SECRET_TABS = [SidePanelTab.Settings, SidePanelTab.FeaturePreviews]
+const SECRET_TABS = [SidePanelTab.Settings, SidePanelTab.FeaturePreviews, SidePanelTab.Welcome]
 
 export const sidePanelLogic = kea<sidePanelLogicType>([
     path(['scenes', 'navigation', 'sidepanel', 'sidePanelLogic']),
@@ -24,9 +24,35 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
             sidePanelStateLogic,
             ['selectedTab', 'sidePanelOpen'],
         ],
+        actions: [sidePanelStateLogic, ['closeSidePanel']],
     }),
 
+    reducers(() => ({
+        welcomeAnnouncementAcknowledged: [
+            false,
+            { persist: true },
+            {
+                closeSidePanel: () => true,
+            },
+        ],
+    })),
+
     selectors({
+        shouldShowWelcomeAnnouncement: [
+            (s) => [s.welcomeAnnouncementAcknowledged, s.featureFlags],
+            (welcomeAnnouncementAcknowledged, featureFlags) => {
+                if (
+                    featureFlags[FEATURE_FLAGS.POSTHOG_3000] &&
+                    featureFlags[FEATURE_FLAGS.POSTHOG_3000_WELCOME_ANNOUNCEMENT] &&
+                    !welcomeAnnouncementAcknowledged
+                ) {
+                    return true
+                }
+
+                return false
+            },
+        ],
+
         enabledTabs: [
             (s) => [s.featureFlags, s.isCloudOrDev],
             (featureFlags, isCloudOrDev) => {
@@ -43,6 +69,7 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
                 tabs.push(SidePanelTab.Docs)
                 tabs.push(SidePanelTab.Settings)
                 tabs.push(SidePanelTab.Activation)
+                tabs.push(SidePanelTab.Welcome)
 
                 if (featureFlags[FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON]) {
                     tabs.push(SidePanelTab.FeaturePreviews)
@@ -74,4 +101,10 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
             },
         ],
     }),
+
+    afterMount(({ values }) => {
+        if (values.shouldShowWelcomeAnnouncement) {
+            sidePanelStateLogic.findMounted()?.actions.openSidePanel(SidePanelTab.Welcome)
+        }
+    }),
 ])

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

frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss

@@ -10,6 +10,11 @@
     border: solid 1px var(--border-3000);
     border-radius: var(--radius);
 
+    &.LemonBanner--compact {
+        flex-direction: column;
+        padding: 0.5rem;
+    }
+
     &.LemonBanner--info {
         background-color: var(--primary-alt-highlight);
     }
@@ -29,13 +34,17 @@
         background-color: var(--success-highlight);
     }
 
-    p {
-        margin-bottom: 0.25em;
+    .LemonBanner__icon {
+        line-height: 0;
     }
 
     > .LemonIcon {
         flex-shrink: 0;
         font-size: 1.5rem;
         line-height: 0;
     }
+
+    p {
+        margin-bottom: 0.25em;
+    }
 }

frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.stories.tsx

@@ -45,3 +45,22 @@ Dismissable.args = {
     dismissKey: 'storybook-banner',
     onClose: () => alert('👋'),
 }
+
+export const Small: Story = Template.bind({})
+Small.args = {
+    type: 'info',
+    children: 'This is a one-time message. Acknowledge it and move on with your life.',
+    className: 'w-50 resize-x overflow-hidden',
+}
+
+export const SmallWithButtons: Story = Template.bind({})
+SmallWithButtons.args = {
+    type: 'info',
+    children: 'This is a one-time message. Acknowledge it and move on with your life.',
+    onClose: () => alert('👋'),
+    action: {
+        children: 'Acknowledge',
+        onClick: () => alert('👋'),
+    },
+    className: 'w-50 resize-x overflow-hidden',
+}

frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx

@@ -2,6 +2,7 @@ import './LemonBanner.scss'
 
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
+import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { IconClose, IconInfo, IconWarning } from 'lib/lemon-ui/icons'
 import { LemonButton, SideAction } from 'lib/lemon-ui/LemonButton'
 import { LemonButtonPropsBase } from 'lib/lemon-ui/LemonButton/LemonButton'
@@ -46,20 +47,39 @@ export function LemonBanner({
         return <></>
     }
 
+    const { ref: wrapperRef, size } = useResizeBreakpoints({
+        0: 'compact',
+        400: 'normal',
+    })
+
+    const isCompact = size === 'compact'
+
     return (
-        <div className={clsx('LemonBanner', `LemonBanner--${type}`, className)}>
-            {type === 'warning' || type === 'error' ? <IconWarning /> : <IconInfo />}
-            <div className="flex-1">{children}</div>
-            {action && <LemonButton type="secondary" {...action} />}
-            {showCloseButton && (
-                <LemonButton
-                    status="primary-alt"
-                    size="small"
-                    icon={<IconClose />}
-                    onClick={_onClose}
-                    aria-label="close"
-                />
-            )}
+        <div
+            className={clsx('LemonBanner', `LemonBanner--${type}`, isCompact && 'LemonBanner--compact', className)}
+            ref={wrapperRef}
+        >
+            <div className="flex items-center gap-2 grow">
+                {!isCompact ? (
+                    type === 'warning' || type === 'error' ? (
+                        <IconWarning className="LemonBanner__icon" />
+                    ) : (
+                        <IconInfo className="LemonBanner__icon" />
+                    )
+                ) : null}
+                <div className="grow">{children}</div>
+                {!isCompact && action && <LemonButton type="secondary" {...action} />}
+                {showCloseButton && (
+                    <LemonButton
+                        status="primary-alt"
+                        size="small"
+                        icon={<IconClose />}
+                        onClick={_onClose}
+                        aria-label="close"
+                    />
+                )}
+            </div>
+            {isCompact && action && <LemonButton type="secondary" fullWidth {...action} />}
         </div>
     )
 }