chore(3000): remove activation sidebar

frontend/src/layout/navigation/SideBar/SideBar.tsx

@@ -1,11 +1,9 @@
-import { ActivationSidebar } from 'lib/components/ActivationSidebar/ActivationSidebar'
 import { DebugNotice } from 'lib/components/DebugNotice'
 
 export function SideBar(): JSX.Element {
     return (
         <div>
             <DebugNotice />
-            <ActivationSidebar />
         </div>
     )
 }

frontend/src/layout/navigation/SideBar/SidebarChangeNotice.tsx

@@ -1,4 +1,4 @@
-import { LemonButton, LemonDivider, Tooltip, TooltipProps } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, TooltipProps } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { IconClose } from 'lib/lemon-ui/icons'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -102,29 +102,3 @@ export function useSidebarChangeNotices({ identifier }: SidebarChangeNoticeProps
 
     return [!noticeAcknowledged ? notices : [], onAcknowledged]
 }
-
-export function SidebarChangeNoticeTooltip({ identifier, children }: SidebarChangeNoticeTooltipProps): JSX.Element {
-    const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
-
-    if (!notices.length) {
-        return <>{children}</>
-    }
-
-    return (
-        <Tooltip
-            visible
-            placement={notices[0].placement}
-            delayMs={0}
-            title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
-        >
-            {React.cloneElement(children as React.ReactElement, {
-                onClick: () => {
-                    onAcknowledged()
-                    if (React.isValidElement(children)) {
-                        children.props.onClick?.()
-                    }
-                },
-            })}
-        </Tooltip>
-    )
-}

frontend/src/layout/navigation/navigationLogic.ts

@@ -26,10 +26,6 @@ export const navigationLogic = kea<navigationLogicType>([
         actions: [eventUsageLogic, ['reportProjectNoticeDismissed']],
     })),
     actions({
-        toggleActivationSideBar: true,
-        showActivationSideBar: true,
-        hideActivationSideBar: true,
-        hideSideBarMobile: true,
         openSitePopover: true,
         closeSitePopover: true,
         toggleSitePopover: true,
@@ -55,22 +51,6 @@ export const navigationLogic = kea<navigationLogicType>([
         mobileLayout: (window: Window) => window.innerWidth < 992, // Sync width threshold with Sass variable $lg!
     })),
     reducers({
-        // Non-mobile base
-        isSideBarShownBase: [true, { persist: true }, {}],
-        // Mobile, applied on top of base, so that the sidebar does not show up annoyingly when shrinking the window
-        isSideBarShownMobile: [
-            false,
-            {
-                hideSideBarMobile: () => false,
-            },
-        ],
-        isActivationSideBarShownBase: [
-            false,
-            {
-                showActivationSideBar: () => true,
-                hideActivationSideBar: () => false,
-            },
-        ],
         isSitePopoverOpen: [
             false,
             {
@@ -95,17 +75,6 @@ export const navigationLogic = kea<navigationLogicType>([
         ],
     }),
     selectors({
-        /** `noSidebar` whether the current scene should display a sidebar at all */
-        noSidebar: [
-            (s) => [s.fullscreen, s.sceneConfig],
-            (fullscreen, sceneConfig) => fullscreen || sceneConfig?.layout === 'plain',
-        ],
-        isActivationSideBarShown: [
-            (s) => [s.mobileLayout, s.isActivationSideBarShownBase, s.isSideBarShownMobile, s.noSidebar],
-            (mobileLayout, isActivationSideBarShownBase, isSideBarShownMobile, noSidebar) =>
-                !noSidebar &&
-                (mobileLayout ? isActivationSideBarShownBase && !isSideBarShownMobile : isActivationSideBarShownBase),
-        ],
         systemStatusHealthy: [
             (s) => [s.navigationStatus, preflightLogic.selectors.siteUrlMisconfigured],
             (status, siteUrlMisconfigured) => {
@@ -167,16 +136,9 @@ export const navigationLogic = kea<navigationLogicType>([
             },
         ],
     }),
-    listeners(({ actions, values }) => ({
+    listeners(({ actions }) => ({
         closeProjectNotice: ({ projectNoticeVariant }) => {
             actions.reportProjectNoticeDismissed(projectNoticeVariant)
         },
-        toggleActivationSideBar: () => {
-            if (values.isActivationSideBarShown) {
-                actions.hideActivationSideBar()
-            } else {
-                actions.showActivationSideBar()
-            }
-        },
     })),
 ])

frontend/src/lib/components/ActivationSidebar/ActivationSidebar.tsx

@@ -1,15 +1,8 @@
-import './ActivationSidebar.scss'
-
 import { LemonButton, LemonButtonWithSideActionProps } from '@posthog/lemon-ui'
-import { Progress } from 'antd'
-import clsx from 'clsx'
-import { useActions, useValues } from 'kea'
+import { useActions } from 'kea'
 import { IconCheckmark, IconClose } from 'lib/lemon-ui/icons'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 
-import { navigationLogic } from '~/layout/navigation/navigationLogic'
-
-import { ProfessorHog } from '../hedgehogs'
 import { activationLogic, ActivationTaskType } from './activationLogic'
 
 export const ActivationTask = ({
@@ -67,58 +60,3 @@ export const ActivationTask = ({
         </li>
     )
 }
-
-export const ActivationSidebar = (): JSX.Element => {
-    const { isActivationSideBarShown } = useValues(navigationLogic)
-    const { hideActivationSideBar } = useActions(navigationLogic)
-    const { activeTasks, completedTasks, completionPercent } = useValues(activationLogic)
-
-    return (
-        <div className={clsx('ActivationSideBar', !isActivationSideBarShown && 'ActivationSideBar--hidden')}>
-            <div className="ActivationSideBar__content pt-2 px-4 pb-16">
-                <div className="ActivationSideBar__close_button">
-                    <LemonButton icon={<IconClose />} onClick={() => hideActivationSideBar()} />
-                </div>
-                <>
-                    <h2 className="subtitle">Quick Start</h2>
-                    <p>Use our Quick Start guide to learn about everything PostHog can do for you and your product.</p>
-                    <div className="my-4 flex items-center justify-center">
-                        <div className="flex flex-col items-center">
-                            <Progress
-                                type="circle"
-                                strokeWidth={10}
-                                percent={completionPercent}
-                                format={() => activeTasks.length}
-                                strokeColor="#345cff" // primary-light
-                            />
-                            <p className="text-muted mt-2">still to go</p>
-                        </div>
-                        <div className="ActivationSideBar__hog">
-                            <ProfessorHog className="max-h-full w-auto object-contain" />
-                        </div>
-                    </div>
-                    {activeTasks.length > 0 && (
-                        <div className="mt-4">
-                            <div className="text-muted uppercase text-xs">What's next?</div>
-                            <ul>
-                                {activeTasks.map((task: ActivationTaskType) => (
-                                    <ActivationTask key={task.id} {...task} />
-                                ))}
-                            </ul>
-                        </div>
-                    )}
-                    {completedTasks.length > 0 && (
-                        <div className="mt-4">
-                            <div className="text-muted uppercase text-xs">Completed</div>
-                            <ul>
-                                {completedTasks.map((task: ActivationTaskType) => (
-                                    <ActivationTask key={task.id} {...task} />
-                                ))}
-                            </ul>
-                        </div>
-                    )}
-                </>
-            </div>
-        </div>
-    )
-}

frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts

@@ -4,7 +4,6 @@ import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { teamLogic } from 'scenes/teamLogic'
 
-import { navigationLogic } from '~/layout/navigation/navigationLogic'
 import { initKeaTests } from '~/test/init'
 
 import { activationLogic } from './activationLogic'
@@ -16,17 +15,12 @@ describe('activationLogic', () => {
         initKeaTests()
         logic = activationLogic()
         logic.mount()
-        await expectLogic(logic).toMount([inviteLogic, membersLogic, teamLogic, pluginsLogic, navigationLogic])
+        await expectLogic(logic).toMount([inviteLogic, membersLogic, teamLogic, pluginsLogic])
     })
 
     afterEach(() => logic.unmount())
 
     it('should load custom events on mount', async () => {
         expectLogic(logic).toDispatchActions(['loadCustomEvents', 'loadInsights'])
     })
-
-    it('should report activation sidebar shown', async () => {
-        navigationLogic.actions.showActivationSideBar()
-        expectLogic(logic).toDispatchActions(['reportActivationSidebarShown'])
-    })
 })