feat: Improvements to the toolbar launch page

frontend/src/lib/components/AuthorizedUrlList/authorizedUrlListLogic.ts

@@ -190,19 +190,17 @@ export interface AuthorizedUrlListLogicProps {
     actionId: number | null
     experimentId: ExperimentIdType | null
     type: AuthorizedUrlListType
-    query: string | null | undefined
     allowWildCards?: boolean
 }
 
 export const defaultAuthorizedUrlProperties = {
     actionId: null,
     experimentId: null,
-    query: null,
 }
 
 export const authorizedUrlListLogic = kea<authorizedUrlListLogicType>([
     path((key) => ['lib', 'components', 'AuthorizedUrlList', 'authorizedUrlListLogic', key]),
-    key((props) => (props.experimentId ? `${props.type}-${props.experimentId}` : `${props.type}-${props.actionId}`)),
+    key((props) => `${props.type}-${props.experimentId}-${props.actionId}`), // Some will be undefined but that's ok, this avoids experiment/action with same ID sharing same store
     props({} as AuthorizedUrlListLogicProps),
     connect({
         values: [teamLogic, ['currentTeam', 'currentTeamId']],

frontend/src/scenes/toolbar-launch/ToolbarLaunch.stories.tsx

@@ -0,0 +1,87 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { useActions, useValues } from 'kea'
+import { router } from 'kea-router'
+import { useEffect } from 'react'
+import { teamLogic } from 'scenes/teamLogic'
+import { urls } from 'scenes/urls'
+
+import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
+import { TeamPublicType } from '~/types'
+
+import { ToolbarLaunch } from './ToolbarLaunch'
+
+const meta: Meta = {
+    title: 'Scenes-Other/ToolbarLaunch',
+    parameters: {
+        layout: 'fullscreen',
+        testOptions: {
+            includeNavigationInSnapshot: true,
+        },
+        featureFlags: ['web-experiments', 'web-vitals', 'web-vitals-toolbar'],
+        viewMode: 'story',
+        mockDate: '2024-01-01',
+    },
+    decorators: [
+        mswDecorator({
+            post: {
+                '/api/environments/:environment_id/query/': () => [
+                    200,
+                    {
+                        results: [
+                            ['https://posthog.com', 150],
+                            ['https://app.posthog.com', 100],
+                            ['https://docs.posthog.com', 75],
+                        ],
+                    },
+                ],
+            },
+        }),
+    ],
+}
+export default meta
+
+const Template: StoryFn = () => {
+    useEffect(() => {
+        router.actions.push(urls.dashboards())
+    }, [])
+
+    return <ToolbarLaunch />
+}
+
+export const Default = Template.bind({})
+
+export const NoUrlsTemplate: StoryFn = () => {
+    const { currentTeam } = useValues(teamLogic)
+    const { loadCurrentTeamSuccess } = useActions(teamLogic)
+
+    useEffect(() => {
+        const team = { ...currentTeam, app_urls: [] }
+        loadCurrentTeamSuccess(team as TeamPublicType)
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    return <Template />
+}
+
+export const NoSuggestionsTemplate: StoryFn = () => {
+    useStorybookMocks({
+        post: { '/api/environments/:environment_id/query/': () => [200, { results: [] }] },
+    })
+
+    return <Template />
+}
+
+export const EmptyStateTemplate: StoryFn = () => {
+    const { currentTeam } = useValues(teamLogic)
+    const { loadCurrentTeamSuccess } = useActions(teamLogic)
+
+    useEffect(() => {
+        const team = { ...currentTeam, app_urls: [] }
+        loadCurrentTeamSuccess(team as TeamPublicType)
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    useStorybookMocks({
+        post: { '/api/environments/:environment_id/query/': () => [200, { results: [] }] },
+    })
+
+    return <Template />
+}

frontend/src/scenes/toolbar-launch/ToolbarLaunch.tsx

@@ -1,9 +1,10 @@
 import './ToolbarLaunch.scss'
 
-import { IconFlag, IconSearch } from '@posthog/icons'
+import { IconFlag, IconPieChart, IconSearch, IconTestTube } from '@posthog/icons'
 import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUrlList'
 import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
 import { PageHeader } from 'lib/components/PageHeader'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconGroupedEvents, IconHeatmap } from 'lib/lemon-ui/icons'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { Link } from 'lib/lemon-ui/Link'
@@ -14,7 +15,11 @@ export const scene: SceneExport = {
     component: ToolbarLaunch,
 }
 
-function ToolbarLaunch(): JSX.Element {
+export function ToolbarLaunch(): JSX.Element {
+    const isExperimentsEnabled = useFeatureFlag('WEB_EXPERIMENTS')
+    const isWebVitalsEnabled = useFeatureFlag('WEB_VITALS')
+    const isWebVitalsToolbarEnabled = useFeatureFlag('WEB_VITALS_TOOLBAR')
+
     const features: FeatureHighlightProps[] = [
         {
             title: 'Heatmaps',
@@ -36,6 +41,24 @@ function ToolbarLaunch(): JSX.Element {
             caption: 'Inspect clickable elements on your website.',
             icon: <IconSearch />,
         },
+        ...(isExperimentsEnabled
+            ? [
+                  {
+                      title: 'Experiments',
+                      caption: 'Run experiments and A/B test your website.',
+                      icon: <IconTestTube />,
+                  },
+              ]
+            : []),
+        ...(isWebVitalsEnabled && isWebVitalsToolbarEnabled
+            ? [
+                  {
+                      title: 'Web Vitals',
+                      caption: "Measure your website's performance.",
+                      icon: <IconPieChart />,
+                  },
+              ]
+            : []),
     ]
 
     return (
@@ -48,8 +71,9 @@ function ToolbarLaunch(): JSX.Element {
             </h2>
             <p>
                 Click on the URL to launch the toolbar.{' '}
-                {window.location.host.includes('.posthog.com') && 'Remember to disable your adblocker.'}
+                {window.location.host.includes('.posthog.com') && <span>Remember to disable your adblocker.</span>}
             </p>
+
             <AuthorizedUrlList type={AuthorizedUrlListType.TOOLBAR_URLS} addText="Add authorized URL" />
 
             <div className="footer-caption text-muted mt-4 text-center">