fix: Sidepanel Modal mode for small screens (#20298)

frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.stories.tsx → frontend/src/layout/FeaturePreviews/FeaturePreviews.stories.tsx

@@ -4,8 +4,8 @@ import { EarlyAccessFeature } from 'posthog-js'
 
 import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
 
+import { FeaturePreviews } from './FeaturePreviews'
 import { CONSTRAINED_PREVIEWS } from './featurePreviewsLogic'
-import { FeaturePreviewsModal as FeaturePreviewsModalComponent } from './FeaturePreviewsModal'
 
 interface StoryProps {
     earlyAccessFeatures: EarlyAccessFeature[]
@@ -14,7 +14,7 @@ interface StoryProps {
 
 type Story = StoryObj<(props: StoryProps) => JSX.Element>
 const meta: Meta<(props: StoryProps) => JSX.Element> = {
-    title: 'Layout/Feature Previews Modal',
+    title: 'Layout/Feature Previews',
     parameters: {
         layout: 'fullscreen',
         viewMode: 'story',
@@ -33,8 +33,8 @@ const Template: StoryFn<StoryProps> = ({ earlyAccessFeatures, enabledFeatureFlag
     setFeatureFlags(enabledFeatureFlags)
 
     return (
-        <div className="bg-default p-2">
-            <FeaturePreviewsModalComponent inline />
+        <div className="w-160 p-4 border rounded mx-auto my-2">
+            <FeaturePreviews />
         </div>
     )
 }

frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.tsx → frontend/src/layout/FeaturePreviews/FeaturePreviews.tsx

@@ -1,42 +1,11 @@
-import { LemonButton, LemonDivider, LemonModal, LemonSwitch, LemonTextArea, Link } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, LemonSwitch, LemonTextArea, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useAsyncActions, useValues } from 'kea'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner'
 import { useLayoutEffect, useState } from 'react'
 
-import { sidePanelStateLogic } from '../navigation-3000/sidepanel/sidePanelStateLogic'
 import { EnrichedEarlyAccessFeature, featurePreviewsLogic } from './featurePreviewsLogic'
 
-export function FeaturePreviewsModal({
-    inline,
-}: {
-    /** @deprecated This is only for Storybook. */
-    inline?: boolean
-}): JSX.Element | null {
-    const { featurePreviewsModalVisible } = useValues(featurePreviewsLogic)
-    const { hideFeaturePreviewsModal, loadEarlyAccessFeatures } = useActions(featurePreviewsLogic)
-    const { sidePanelAvailable } = useValues(sidePanelStateLogic)
-
-    useLayoutEffect(() => loadEarlyAccessFeatures(), [])
-
-    if (sidePanelAvailable) {
-        return null
-    }
-
-    return (
-        <LemonModal
-            isOpen={inline || featurePreviewsModalVisible}
-            onClose={hideFeaturePreviewsModal}
-            title="Feature previews"
-            description="Get early access to these upcoming features. Let us know what you think!"
-            width={528}
-            inline={inline}
-        >
-            <FeaturePreviews />
-        </LemonModal>
-    )
-}
-
 export function FeaturePreviews(): JSX.Element {
     const { earlyAccessFeatures, rawEarlyAccessFeaturesLoading } = useValues(featurePreviewsLogic)
     const { loadEarlyAccessFeatures } = useActions(featurePreviewsLogic)

frontend/src/layout/FeaturePreviews/featurePreviewsLogic.tsx

@@ -1,6 +1,5 @@
 import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
-import { actionToUrl, router, urlToAction } from 'kea-router'
 import { supportLogic } from 'lib/components/Support/supportLogic'
 import { FeatureFlagKey } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -24,8 +23,6 @@ export const featurePreviewsLogic = kea<featurePreviewsLogicType>([
         actions: [supportLogic, ['submitZendeskTicket']],
     }),
     actions({
-        showFeaturePreviewsModal: true,
-        hideFeaturePreviewsModal: true,
         updateEarlyAccessFeatureEnrollment: (flagKey: string, enabled: boolean) => ({ flagKey, enabled }),
         beginEarlyAccessFeatureFeedback: (flagKey: string) => ({ flagKey }),
         cancelEarlyAccessFeatureFeedback: true,
@@ -67,17 +64,9 @@ export const featurePreviewsLogic = kea<featurePreviewsLogicType>([
         ],
     })),
     reducers({
-        featurePreviewsModalVisible: [
-            false,
-            {
-                showFeaturePreviewsModal: () => true,
-                hideFeaturePreviewsModal: () => false,
-            },
-        ],
         activeFeedbackFlagKey: {
             beginEarlyAccessFeatureFeedback: (_, { flagKey }) => flagKey,
             cancelEarlyAccessFeatureFeedback: () => null,
-            hideFeaturePreviewsModal: () => null,
         },
     }),
     listeners(() => ({
@@ -111,25 +100,4 @@ export const featurePreviewsLogic = kea<featurePreviewsLogicType>([
                     }),
         ],
     }),
-    urlToAction(({ actions }) => ({
-        '*': (_, _search, hashParams) => {
-            if (hashParams['panel'] === 'feature-previews') {
-                actions.showFeaturePreviewsModal()
-            }
-        },
-    })),
-    actionToUrl(() => {
-        return {
-            showFeaturePreviewsModal: () => {
-                const hashParams = router.values.hashParams
-                hashParams['panel'] = 'feature-previews'
-                return [router.values.location.pathname, router.values.searchParams, hashParams]
-            },
-            hideFeaturePreviewsModal: () => {
-                const hashParams = router.values.hashParams
-                delete hashParams['panel']
-                return [router.values.location.pathname, router.values.searchParams, hashParams]
-            },
-        }
-    }),
 ])

frontend/src/layout/GlobalModals.tsx

@@ -12,7 +12,6 @@ import { InviteModal } from 'scenes/settings/organization/InviteModal'
 import { UpgradeModal } from 'scenes/UpgradeModal'
 import { userLogic } from 'scenes/userLogic'
 
-import { FeaturePreviewsModal } from './FeaturePreviews'
 import type { globalModalsLogicType } from './GlobalModalsType'
 
 export const globalModalsLogic = kea<globalModalsLogicType>([
@@ -53,7 +52,6 @@ export function GlobalModals(): JSX.Element {
             <InviteModal isOpen={isInviteModalShown} onClose={hideInviteModal} />
             <CreateOrganizationModal isVisible={isCreateOrganizationModalShown} onClose={hideCreateOrganizationModal} />
             <CreateProjectModal isVisible={isCreateProjectModalShown} onClose={hideCreateProjectModal} />
-            <FeaturePreviewsModal />
             <UpgradeModal />
 
             {user && user.organization?.enforce_2fa && !user.is_2fa_enabled && (

frontend/src/layout/navigation-3000/Navigation.tsx

@@ -62,7 +62,7 @@ export function Navigation({
                     {children}
                 </div>
             </main>
-            {!mobileLayout && <SidePanel />}
+            <SidePanel />
             <CommandBar />
         </div>
     )

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

@@ -1,7 +1,7 @@
 import './SidePanel.scss'
 
 import { IconEllipsis, IconFeatures, IconGear, IconInfo, IconNotebook, IconSupport } from '@posthog/icons'
-import { LemonButton, LemonMenu, LemonMenuItems } from '@posthog/lemon-ui'
+import { LemonButton, LemonMenu, LemonMenuItems, LemonModal } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { Resizer } from 'lib/components/Resizer/Resizer'
@@ -22,11 +22,15 @@ import { SidePanelSupport } from './panels/SidePanelSupport'
 import { sidePanelLogic } from './sidePanelLogic'
 import { sidePanelStateLogic } from './sidePanelStateLogic'
 
-export const SIDE_PANEL_TABS: Record<SidePanelTab, { label: string; Icon: any; Content: any }> = {
+export const SIDE_PANEL_TABS: Record<
+    SidePanelTab,
+    { label: string; Icon: any; Content: any; noModalSupport?: boolean }
+> = {
     [SidePanelTab.Notebooks]: {
         label: 'Notebooks',
         Icon: IconNotebook,
         Content: NotebookPanel,
+        noModalSupport: true,
     },
     [SidePanelTab.Support]: {
         label: 'Support',
@@ -37,6 +41,7 @@ export const SIDE_PANEL_TABS: Record<SidePanelTab, { label: string; Icon: any; C
         label: 'Docs',
         Icon: IconInfo,
         Content: SidePanelDocs,
+        noModalSupport: true,
     },
 
     [SidePanelTab.Activation]: {
@@ -70,14 +75,15 @@ export const SIDE_PANEL_TABS: Record<SidePanelTab, { label: string; Icon: any; C
         label: 'System status',
         Icon: SidePanelStatusIcon,
         Content: SidePanelStatus,
+        noModalSupport: true,
     },
 }
 
 const DEFAULT_WIDTH = 512
 
 export function SidePanel(): JSX.Element | null {
     const { visibleTabs, extraTabs } = useValues(sidePanelLogic)
-    const { selectedTab, sidePanelOpen } = useValues(sidePanelStateLogic)
+    const { selectedTab, sidePanelOpen, modalMode } = useValues(sidePanelStateLogic)
     const { openSidePanel, closeSidePanel, setSidePanelAvailable } = useActions(sidePanelStateLogic)
 
     const activeTab = sidePanelOpen && selectedTab
@@ -129,6 +135,21 @@ export function SidePanel(): JSX.Element | null {
           ]
         : undefined
 
+    if (modalMode) {
+        const supportsModal = activeTab ? !SIDE_PANEL_TABS[activeTab]?.noModalSupport : true
+        return (
+            <LemonModal
+                simple
+                isOpen={!!PanelConent && supportsModal}
+                onClose={closeSidePanel}
+                hideCloseButton
+                width="40rem"
+            >
+                {PanelConent ? <PanelConent /> : null}
+            </LemonModal>
+        )
+    }
+
     return (
         <div
             className={clsx(

frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPaneHeader.tsx

@@ -1,5 +1,6 @@
 import { LemonButton, Tooltip } from '@posthog/lemon-ui'
-import { useActions } from 'kea'
+import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
 import { IconClose } from 'lib/lemon-ui/icons'
 
 import { sidePanelStateLogic } from '../sidePanelStateLogic'
@@ -10,15 +11,30 @@ export type SidePanelPaneHeaderProps = {
 }
 
 export function SidePanelPaneHeader({ children, title }: SidePanelPaneHeaderProps): JSX.Element {
+    const { modalMode } = useValues(sidePanelStateLogic)
     const { closeSidePanel } = useActions(sidePanelStateLogic)
 
     return (
-        <header className="border-b shrink-0 p-1 flex items-center justify-end gap-1 h-10">
+        <header
+            className={clsx('border-b shrink-0 flex items-center justify-end gap-1', {
+                'p-1 h-10': !modalMode,
+                'pb-2 mt-2 mx-3': modalMode,
+            })}
+        >
             {title ? (
-                <h4 className="flex-1 flex items-center gap-1 font-semibold px-2 mb-0 truncate">{title}</h4>
+                <h3
+                    className={clsx('flex-1 flex items-center gap-1 font-semibold mb-0 truncate', {
+                        'text-base px-2': !modalMode,
+                    })}
+                >
+                    {title}
+                </h3>
             ) : null}
             {children}
-            <Tooltip placement="bottomRight" title="Close this side panel">
+            <Tooltip
+                placement={modalMode ? 'top' : 'bottomRight'}
+                title={modalMode ? 'Close' : 'Close this side panel'}
+            >
                 <LemonButton size="small" sideIcon={<IconClose />} onClick={() => closeSidePanel()} />
             </Tooltip>
         </header>

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

@@ -1,6 +1,6 @@
 import { LemonBanner } from '@posthog/lemon-ui'
 
-import { FeaturePreviews } from '~/layout/FeaturePreviews/FeaturePreviewsModal'
+import { FeaturePreviews } from '~/layout/FeaturePreviews/FeaturePreviews'
 
 import { SidePanelPaneHeader } from '../components/SidePanelPaneHeader'
 

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

@@ -19,29 +19,34 @@ export const SidePanelSupport = (): JSX.Element => {
         <>
             <SidePanelPaneHeader title={title} />
 
-            <div className="p-3 max-w-160 w-full mx-auto">
-                <SupportForm />
-                <LemonButton
-                    form="support-modal-form"
-                    htmlType="submit"
-                    type="primary"
-                    data-attr="submit"
-                    fullWidth
-                    center
-                    className="mt-4"
-                >
-                    Submit
-                </LemonButton>
-                <LemonButton
-                    form="support-modal-form"
-                    type="secondary"
-                    onClick={closeSupportForm}
-                    fullWidth
-                    center
-                    className="mt-2"
-                >
-                    Cancel
-                </LemonButton>
+            <div className="overflow-y-auto">
+                <div className="p-3 max-w-160 w-full mx-auto">
+                    <SupportForm />
+
+                    <footer>
+                        <LemonButton
+                            form="support-modal-form"
+                            htmlType="submit"
+                            type="primary"
+                            data-attr="submit"
+                            fullWidth
+                            center
+                            className="mt-4"
+                        >
+                            Submit
+                        </LemonButton>
+                        <LemonButton
+                            form="support-modal-form"
+                            type="secondary"
+                            onClick={closeSupportForm}
+                            fullWidth
+                            center
+                            className="mt-2"
+                        >
+                            Cancel
+                        </LemonButton>
+                    </footer>
+                </div>
             </div>
         </>
     )

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

@@ -1,5 +1,6 @@
 import { actions, kea, listeners, path, reducers } from 'kea'
 import { actionToUrl, router, urlToAction } from 'kea-router'
+import { windowValues } from 'kea-window-values'
 
 import { SidePanelTab } from '~/types'
 
@@ -48,6 +49,9 @@ export const sidePanelStateLogic = kea<sidePanelStateLogicType>([
             },
         ],
     })),
+    windowValues(() => ({
+        modalMode: (window: Window) => window.innerWidth < 992, // Sync width threshold with Sass variable $lg!
+    })),
     listeners(({ actions, values }) => ({
         // NOTE: We explicitly reference the actions instead of connecting so that people don't accidentally
         // use this logic instead of sidePanelStateLogic

frontend/src/layout/navigation/TopBar/AccountPopover.tsx

@@ -21,7 +21,6 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { ThemeSwitcher } from 'scenes/settings/user/ThemeSwitcher'
 
-import { featurePreviewsLogic } from '~/layout/FeaturePreviews/featurePreviewsLogic'
 import {
     AccessLevelIndicator,
     NewOrganizationButton,
@@ -161,13 +160,13 @@ function InstanceSettings(): JSX.Element | null {
 
 function FeaturePreviewsButton(): JSX.Element {
     const { closeAccountPopover } = useActions(navigationLogic)
-    const { showFeaturePreviewsModal } = useActions(featurePreviewsLogic)
+    const { openSidePanel } = useActions(sidePanelStateLogic)
 
     return (
         <LemonButton
             onClick={() => {
                 closeAccountPopover()
-                showFeaturePreviewsModal()
+                openSidePanel(SidePanelTab.FeaturePreviews)
             }}
             icon={<IconFeatures />}
             fullWidth