diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png index 4bde22ba9411e..92867161bd2d9 100644 Binary files a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-activation.png differ diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png index 39cd3c7afdae1..9586d57b1f8a9 100644 Binary files a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png differ diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png index 9239f91079f77..b9b6b50b3fccd 100644 Binary files a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png differ diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-welcome.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-welcome.png new file mode 100644 index 0000000000000..5c018f3b47b98 Binary files /dev/null and b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-welcome.png differ diff --git a/frontend/public/3000/3000-command-palette-dark.png b/frontend/public/3000/3000-command-palette-dark.png new file mode 100644 index 0000000000000..b3875f96db422 Binary files /dev/null and b/frontend/public/3000/3000-command-palette-dark.png differ diff --git a/frontend/public/3000/3000-command-palette.png b/frontend/public/3000/3000-command-palette.png new file mode 100644 index 0000000000000..4fab3331e77a8 Binary files /dev/null and b/frontend/public/3000/3000-command-palette.png differ diff --git a/frontend/public/3000/3000-dark-mode.png b/frontend/public/3000/3000-dark-mode.png new file mode 100644 index 0000000000000..823f35d5cc30e Binary files /dev/null and b/frontend/public/3000/3000-dark-mode.png differ diff --git a/frontend/public/3000/3000-nav-dark.png b/frontend/public/3000/3000-nav-dark.png new file mode 100644 index 0000000000000..0c0994cbf8bd4 Binary files /dev/null and b/frontend/public/3000/3000-nav-dark.png differ diff --git a/frontend/public/3000/3000-nav.png b/frontend/public/3000/3000-nav.png new file mode 100644 index 0000000000000..1f94942fce5ec Binary files /dev/null and b/frontend/public/3000/3000-nav.png differ diff --git a/frontend/public/3000/3000-notebooks-dark.png b/frontend/public/3000/3000-notebooks-dark.png new file mode 100644 index 0000000000000..9e8e19effcd38 Binary files /dev/null and b/frontend/public/3000/3000-notebooks-dark.png differ diff --git a/frontend/public/3000/3000-notebooks.png b/frontend/public/3000/3000-notebooks.png new file mode 100644 index 0000000000000..c806c5eb19cd2 Binary files /dev/null and b/frontend/public/3000/3000-notebooks.png differ diff --git a/frontend/public/3000/3000-search-dark.png b/frontend/public/3000/3000-search-dark.png new file mode 100644 index 0000000000000..6a9a770609f9d Binary files /dev/null and b/frontend/public/3000/3000-search-dark.png differ diff --git a/frontend/public/3000/3000-search.png b/frontend/public/3000/3000-search.png new file mode 100644 index 0000000000000..6ceda306e1299 Binary files /dev/null and b/frontend/public/3000/3000-search.png differ diff --git a/frontend/public/3000/3000-side-panel-dark.png b/frontend/public/3000/3000-side-panel-dark.png new file mode 100644 index 0000000000000..35b826c1ae0b8 Binary files /dev/null and b/frontend/public/3000/3000-side-panel-dark.png differ diff --git a/frontend/public/3000/3000-side-panel.png b/frontend/public/3000/3000-side-panel.png new file mode 100644 index 0000000000000..4f12f93cf59cf Binary files /dev/null and b/frontend/public/3000/3000-side-panel.png differ diff --git a/frontend/public/3000/3000-toolbar.png b/frontend/public/3000/3000-toolbar.png new file mode 100644 index 0000000000000..f1b5e51f4b6cd Binary files /dev/null and b/frontend/public/3000/3000-toolbar.png differ diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss index 0501126e792dd..f2796b41f109e 100644 --- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss +++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss @@ -18,7 +18,7 @@ .posthog-3000 & { padding: 0.125rem 0.25rem; - font-size: 0.625rem; + font-size: 0.75rem; border-color: var(--secondary-3000-button-border-hover); border-bottom-width: 2px; } diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss index 946b01aefd9d2..59d909f573728 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss +++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss @@ -14,7 +14,7 @@ // NOTE: This is only a default, as the resizer will override this width: min(30%, 40rem); - min-width: 30rem; + min-width: 28rem; max-width: 60%; @media (max-width: 1200px) { diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.stories.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.stories.tsx index 9c03a98d5763f..8ba31c7cea05e 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.stories.tsx +++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.stories.tsx @@ -44,6 +44,10 @@ export const SidePanelDocs: StoryFn = () => { return } +export const SidePanelWelcome: StoryFn = () => { + return +} + export const SidePanelSettings: StoryFn = () => { return } diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx index 8320ee506611c..4f66dfee38514 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx +++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx @@ -1,6 +1,7 @@ import './SidePanel.scss' import { + IconConfetti, IconEllipsis, IconFeatures, IconGear, @@ -25,6 +26,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' @@ -55,18 +57,27 @@ export const SidePanelTabs: Record diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss new file mode 100644 index 0000000000000..6010d7179b0ee --- /dev/null +++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.scss @@ -0,0 +1,7 @@ +.welcome-card { + background: var(--primary-alt-highlight-3000); + + body[theme='dark'] & { + background: #2b2b33; + } +} diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx new file mode 100644 index 0000000000000..b81b95b28e4be --- /dev/null +++ b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx @@ -0,0 +1,250 @@ +import './SidePanelWelcome.scss' + +import { IconArrowLeft, IconEllipsis, IconExternal, IconX } from '@posthog/icons' +import { LemonButton } from '@posthog/lemon-ui' +import clsx from 'clsx' +import { useActions, useValues } from 'kea' +import posthog from 'posthog-js' +import featureCommandPalette from 'public/3000/3000-command-palette.png' +import featureCommandPaletteDark from 'public/3000/3000-command-palette-dark.png' +import featureDarkMode from 'public/3000/3000-dark-mode.png' +import featureNav from 'public/3000/3000-nav.png' +import featureNavDark from 'public/3000/3000-nav-dark.png' +import featureNotebooks from 'public/3000/3000-notebooks.png' +import featureNotebooksDark from 'public/3000/3000-notebooks-dark.png' +import featureSearch from 'public/3000/3000-search.png' +import featureSearchDark from 'public/3000/3000-search-dark.png' +import featureSidePanel from 'public/3000/3000-side-panel.png' +import featureSidePanelDark from 'public/3000/3000-side-panel-dark.png' +import featureToolbar from 'public/3000/3000-toolbar.png' +import { useEffect } from 'react' + +import { themeLogic } from '~/layout/navigation-3000/themeLogic' + +import { KeyboardShortcut } from '../../components/KeyboardShortcut' +import { sidePanelStateLogic } from '../sidePanelStateLogic' + +const BLOG_POST_URL = 'https://posthog.com/blog/posthog-as-a-dev-tool' + +type RowProps = { + className?: string + columns?: string + children: React.ReactNode +} + +const Row = ({ className, columns, children }: RowProps): JSX.Element => ( +
+ {children} +
+) + +type CardProps = { + children: React.ReactNode + className?: string +} + +const Card = ({ children, className }: CardProps): JSX.Element => ( +
{children}
+) + +const Title = ({ children }: { children: React.ReactNode }): JSX.Element => ( +

{children}

+) +const Description = ({ children }: { children: React.ReactNode }): JSX.Element => ( +

{children}

+) +const Image = ({ + src, + alt, + width, + height, + style, +}: { + src: string + alt: string + width?: number | string + height?: number | string + style?: React.CSSProperties +}): JSX.Element => {alt} + +export const SidePanelWelcome = (): JSX.Element => { + const { closeSidePanel } = useActions(sidePanelStateLogic) + const { isDarkModeOn } = useValues(themeLogic) + + useEffect(() => { + return () => { + // Linked to the FF to ensure it isn't shown again + posthog.capture('3000 welcome acknowledged', { + $set: { + [`3000-welcome-acknowledged`]: true, + }, + }) + } + }, []) + + return ( + <> +
+
+ What's new? +
+
+ +
+
+
+

+ 👋 Say hello to +
PostHog 3000
+

+

+ We're past zero to one. +
+ In this new version of PostHog, we're going from one… to 3000. +
+ And this is just the beginning. +

+ } + className="mb-5 self-start" + > + Read the blog post + + + + + Dark mode + + Toggle between light and dark. Synced with your system by default. + +
+ Dark mode +
+
+
+ + + + Updated nav + Sub-products are now split out from project & data. +
+ Updated nav +
+
+ + Notebooks + + Analyze data from different angles and share results with your team - all in + a single document. + +
+ Notebooks +
+
+
+ + + +
+
+ Side panel + + It's this multipurpose thing you're looking at right now! + + Create notebooks, read docs, contact support, and more. +
+
+ Side panel +
+
+
+
+ + + + Improved search + + Search for anything with + +
+ Improved search +
+
+ +
+ Command bar + + Navigate faster with + +
+
+ Command bar +
+
+
+ + + + Toolbar redesigned + + Dark mode: on. Same features, but easier to use. And we finally put the "bar" + in "toolbar". + +
+ Toolbar +
+
+
+ +
+ + + Pro tip: Access this panel again from the{' '} + + + {' '} + menu + +
+
+ + ) +} diff --git a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx index 4e2191614a118..8e4ff16df7e41 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx +++ b/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' @@ -10,7 +10,12 @@ import { notificationsLogic } from './panels/activity/notificationsLogic' import type { sidePanelLogicType } from './sidePanelLogicType' import { sidePanelStateLogic } from './sidePanelStateLogic' -const ALWAYS_EXTRA_TABS = [SidePanelTab.Settings, SidePanelTab.FeaturePreviews, SidePanelTab.Activity] +const ALWAYS_EXTRA_TABS = [ + SidePanelTab.Settings, + SidePanelTab.FeaturePreviews, + SidePanelTab.Activity, + SidePanelTab.Welcome, +] export const sidePanelLogic = kea([ path(['scenes', 'navigation', 'sidepanel', 'sidePanelLogic']), @@ -28,9 +33,35 @@ export const sidePanelLogic = kea([ notificationsLogic, ['unreadCount'], ], + 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, s.isReady, s.hasCompletedAllTasks], (featureFlags, isCloudOrDev, isReady, hasCompletedAllTasks) => { @@ -50,6 +81,7 @@ export const sidePanelLogic = kea([ tabs.push(SidePanelTab.Activation) } tabs.push(SidePanelTab.Activity) + tabs.push(SidePanelTab.Welcome) if (featureFlags[FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON]) { tabs.push(SidePanelTab.FeaturePreviews) @@ -84,4 +116,10 @@ export const sidePanelLogic = kea([ }, ], }), + + afterMount(({ values }) => { + if (values.shouldShowWelcomeAnnouncement) { + sidePanelStateLogic.findMounted()?.actions.openSidePanel(SidePanelTab.Welcome) + } + }), ]) diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx index 43458d1dde12f..63bdf73a8d885 100644 --- a/frontend/src/lib/constants.tsx +++ b/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-replay diff --git a/frontend/src/lib/lemon-ui/Link/Link.tsx b/frontend/src/lib/lemon-ui/Link/Link.tsx index bbbaacb3f42ec..3f7813e75f070 100644 --- a/frontend/src/lib/lemon-ui/Link/Link.tsx +++ b/frontend/src/lib/lemon-ui/Link/Link.tsx @@ -54,8 +54,8 @@ const isPostHogDomain = (url: string): boolean => { return /^https:\/\/((www|app|eu)\.)?posthog\.com/.test(url) } -const isPostHogComDomain = (url: string): boolean => { - return /^https:\/\/(www\.)?posthog\.com/.test(url) +const isPostHogComDocs = (url: string): boolean => { + return /^https:\/\/(www\.)?posthog\.com\/docs/.test(url) } /** @@ -103,7 +103,7 @@ export const Link: React.FC> = Reac return } - if (typeof to === 'string' && is3000 && isPostHogComDomain(to)) { + if (typeof to === 'string' && is3000 && isPostHogComDocs(to)) { event.preventDefault() openDocsPage(to) return diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 309fb338084dd..59b0060413c6a 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -3489,6 +3489,7 @@ export enum SidePanelTab { Docs = 'docs', Activation = 'activation', Settings = 'settings', + Welcome = 'welcome', FeaturePreviews = 'feature-previews', Activity = 'activity', }