diff --git a/frontend/src/layout/navigation/SideBar/PageButton.tsx b/frontend/src/layout/navigation/SideBar/PageButton.tsx deleted file mode 100644 index 9912db9345f56..0000000000000 --- a/frontend/src/layout/navigation/SideBar/PageButton.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { useActions, useValues } from 'kea' -import { LemonButton, LemonButtonProps, SideAction } from 'lib/lemon-ui/LemonButton' -import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag' -import { sceneLogic } from 'scenes/sceneLogic' -import { sceneConfigurations } from 'scenes/scenes' -import { Scene } from 'scenes/sceneTypes' - -import { navigationLogic } from '~/layout/navigation/navigationLogic' -import { SidebarChangeNoticeTooltip } from '~/layout/navigation/SideBar/SidebarChangeNotice' -import { dashboardsModel } from '~/models/dashboardsModel' - -import { breadcrumbsLogic } from '../Breadcrumbs/breadcrumbsLogic' - -export interface PageButtonProps extends Pick { - /** Used for highlighting the active scene. `identifier` of type number means dashboard ID instead of scene. */ - identifier: string | number - sideAction?: Omit & { identifier?: string } - title?: React.ReactNode - highlight?: 'alpha' | 'beta' | 'new' -} - -export function PageButton({ title, sideAction, identifier, highlight, ...buttonProps }: PageButtonProps): JSX.Element { - const { activeScene } = useValues(sceneLogic) - const { sceneBreadcrumbKeys } = useValues(breadcrumbsLogic) - const { hideSideBarMobile } = useActions(navigationLogic) - const { lastDashboardId } = useValues(dashboardsModel) - - const isActiveSide: boolean = !!sideAction?.identifier && activeScene === sideAction.identifier - const isActive: boolean = - isActiveSide || - (typeof identifier === 'string' - ? activeScene === identifier || sceneBreadcrumbKeys.includes(identifier) - : activeScene === Scene.Dashboard && identifier === lastDashboardId) - - title = title || sceneConfigurations[identifier]?.name || identifier - - return ( -
  • - - {sideAction ? ( - - {title} - - ) : ( - - {title} - {highlight === 'alpha' ? ( - - Alpha - - ) : highlight === 'beta' ? ( - - Beta - - ) : highlight === 'new' ? ( - - New - - ) : null} - - )} - -
  • - ) -} diff --git a/frontend/src/layout/navigation/SideBar/SideBar.tsx b/frontend/src/layout/navigation/SideBar/SideBar.tsx index 4b4b5832f129c..fe59d9e4a3c61 100644 --- a/frontend/src/layout/navigation/SideBar/SideBar.tsx +++ b/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 (
    -
    ) } diff --git a/frontend/src/layout/navigation/SideBar/SidebarChangeNotice.tsx b/frontend/src/layout/navigation/SideBar/SidebarChangeNotice.tsx index c95511a491e73..10f6047e42d34 100644 --- a/frontend/src/layout/navigation/SideBar/SidebarChangeNotice.tsx +++ b/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 ( - } - > - {React.cloneElement(children as React.ReactElement, { - onClick: () => { - onAcknowledged() - if (React.isValidElement(children)) { - children.props.onClick?.() - } - }, - })} - - ) -} diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts index b36da24b97921..675598457ed4d 100644 --- a/frontend/src/layout/navigation/navigationLogic.ts +++ b/frontend/src/layout/navigation/navigationLogic.ts @@ -26,10 +26,6 @@ export const navigationLogic = kea([ 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([ 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([ ], }), 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([ }, ], }), - listeners(({ actions, values }) => ({ + listeners(({ actions }) => ({ closeProjectNotice: ({ projectNoticeVariant }) => { actions.reportProjectNoticeDismissed(projectNoticeVariant) }, - toggleActivationSideBar: () => { - if (values.isActivationSideBarShown) { - actions.hideActivationSideBar() - } else { - actions.showActivationSideBar() - } - }, })), ]) diff --git a/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss b/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss deleted file mode 100644 index e4c2e54e02d40..0000000000000 --- a/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss +++ /dev/null @@ -1,52 +0,0 @@ -@import '../../../styles/mixins'; - -.ActivationSideBar { - position: absolute; - right: 0; - z-index: var(--z-lemon-sidebar); - flex-shrink: 0; - width: 25rem; - height: 100%; - margin-left: -25rem; - background: var(--side); - border-left: 1px solid var(--border); - transition: 200ms ease margin, 200ms ease transform; - - @include screen($lg) { - position: relative; - height: initial; - } -} - -.ActivationSideBar--hidden { - display: none; -} - -.ActivationSideBar__content { - position: sticky; - top: 3.5rem; - right: 0; - display: flex; - flex-direction: column; - width: 100%; - height: calc(100vh - 3.5rem); - overflow: scroll; - - > div > ul { - overflow: auto; - - li { - margin-top: 0.5rem; - } - } - - .ActivationSideBar__close_button { - position: absolute; - top: 0.5rem; - right: 1rem; - } - - .ActivationSideBar__hog { - height: 150px; - } -} diff --git a/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.tsx b/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.tsx index f0c29a90f0ccc..a0bce14a81e69 100644 --- a/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.tsx +++ b/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 = ({ ) } - -export const ActivationSidebar = (): JSX.Element => { - const { isActivationSideBarShown } = useValues(navigationLogic) - const { hideActivationSideBar } = useActions(navigationLogic) - const { activeTasks, completedTasks, completionPercent } = useValues(activationLogic) - - return ( -
    -
    -
    - } onClick={() => hideActivationSideBar()} /> -
    - <> -

    Quick Start

    -

    Use our Quick Start guide to learn about everything PostHog can do for you and your product.

    -
    -
    - activeTasks.length} - strokeColor="#345cff" // primary-light - /> -

    still to go

    -
    -
    - -
    -
    - {activeTasks.length > 0 && ( -
    -
    What's next?
    -
      - {activeTasks.map((task: ActivationTaskType) => ( - - ))} -
    -
    - )} - {completedTasks.length > 0 && ( -
    -
    Completed
    -
      - {completedTasks.map((task: ActivationTaskType) => ( - - ))} -
    -
    - )} - -
    -
    - ) -} diff --git a/frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts b/frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts index c9c61a55e8be6..251012313c4ba 100644 --- a/frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts +++ b/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,7 +15,7 @@ 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()) @@ -24,9 +23,4 @@ describe('activationLogic', () => { 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']) - }) }) diff --git a/frontend/src/lib/components/ActivationSidebar/activationLogic.ts b/frontend/src/lib/components/ActivationSidebar/activationLogic.ts index a46e6478c2fcf..5fe22dc5541be 100644 --- a/frontend/src/lib/components/ActivationSidebar/activationLogic.ts +++ b/frontend/src/lib/components/ActivationSidebar/activationLogic.ts @@ -11,7 +11,6 @@ import { inviteLogic } from 'scenes/settings/organization/inviteLogic' import { teamLogic } from 'scenes/teamLogic' import { urls } from 'scenes/urls' -import { navigationLogic } from '~/layout/navigation/navigationLogic' import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic' import { dashboardsModel } from '~/models/dashboardsModel' import { EventDefinitionType, ProductKey, SidePanelTab, TeamBasicType } from '~/types' @@ -66,8 +65,6 @@ export const activationLogic = kea([ ['showInviteModal', 'loadInvitesSuccess', 'loadInvitesFailure'], pluginsLogic, ['loadPluginsSuccess', 'loadPluginsFailure'], - navigationLogic, - ['toggleActivationSideBar', 'showActivationSideBar', 'hideActivationSideBar'], sidePanelStateLogic, ['openSidePanel'], eventUsageLogic, @@ -358,13 +355,6 @@ export const activationLogic = kea([ actions.addSkippedTask(values.currentTeam.id, id) } }, - showActivationSideBar: async () => { - actions.reportActivationSideBarShown( - values.activeTasks.length, - values.completedTasks.length, - values.completionPercent - ) - }, })), events(({ actions }) => ({ afterMount: () => { @@ -375,14 +365,7 @@ export const activationLogic = kea([ urlToAction(({ actions, values }) => ({ '*': (_, params) => { if (params?.onboarding_completed && !values.hasCompletedAllTasks) { - actions.toggleActivationSideBar() actions.openSidePanel(SidePanelTab.Activation) - router.actions.replace(router.values.location.pathname, { - ...router.values.searchParams, - onboarding_completed: undefined, - }) - } else { - actions.hideActivationSideBar() } }, })),