From be80b35711a3b797651213ec6eacdd59974800d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= Date: Thu, 28 Dec 2023 23:57:14 +0100 Subject: [PATCH 1/6] remove activation sidebar from sidebar --- frontend/src/layout/navigation/SideBar/SideBar.tsx | 2 -- 1 file changed, 2 deletions(-) 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 (
-
) } From 4bbcd4f89201fa33275c88a3c6185e143756fea1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= Date: Fri, 29 Dec 2023 00:11:20 +0100 Subject: [PATCH 2/6] remove unneeded styles and kea things --- .../src/layout/navigation/navigationLogic.ts | 39 +---------- .../ActivationSidebar/ActivationSidebar.scss | 52 --------------- .../ActivationSidebar/ActivationSidebar.tsx | 64 +------------------ .../ActivationSidebar/activationLogic.test.ts | 5 -- .../ActivationSidebar/activationLogic.ts | 17 ----- 5 files changed, 2 insertions(+), 175 deletions(-) delete mode 100644 frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts index b36da24b97921..b8c212bffee3b 100644 --- a/frontend/src/layout/navigation/navigationLogic.ts +++ b/frontend/src/layout/navigation/navigationLogic.ts @@ -26,9 +26,6 @@ export const navigationLogic = kea([ actions: [eventUsageLogic, ['reportProjectNoticeDismissed']], })), actions({ - toggleActivationSideBar: true, - showActivationSideBar: true, - hideActivationSideBar: true, hideSideBarMobile: true, openSitePopover: true, closeSitePopover: true, @@ -55,22 +52,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 +76,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 +137,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..6b5b05d926780 100644 --- a/frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts +++ b/frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts @@ -24,9 +24,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() } }, })), From 5a0a9633b8f0982a5e1fefe6ebfa35b50595f1c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= Date: Fri, 29 Dec 2023 00:18:18 +0100 Subject: [PATCH 3/6] remove hideSideBarMobile action --- frontend/src/layout/navigation/SideBar/PageButton.tsx | 8 +++----- frontend/src/layout/navigation/navigationLogic.ts | 1 - 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/frontend/src/layout/navigation/SideBar/PageButton.tsx b/frontend/src/layout/navigation/SideBar/PageButton.tsx index 9912db9345f56..d11b2ba20bb6f 100644 --- a/frontend/src/layout/navigation/SideBar/PageButton.tsx +++ b/frontend/src/layout/navigation/SideBar/PageButton.tsx @@ -1,11 +1,10 @@ -import { useActions, useValues } from 'kea' +import { 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' @@ -22,7 +21,6 @@ export interface PageButtonProps extends Pick {}} sideAction={{ ...sideAction, 'data-attr': sideAction.identifier @@ -58,7 +56,7 @@ export function PageButton({ title, sideAction, identifier, highlight, ...button fullWidth active={isActive} data-attr={`menu-item-${identifier.toString().toLowerCase()}`} - onClick={hideSideBarMobile} + onClick={() => {}} sideIcon={null} {...buttonProps} > diff --git a/frontend/src/layout/navigation/navigationLogic.ts b/frontend/src/layout/navigation/navigationLogic.ts index b8c212bffee3b..675598457ed4d 100644 --- a/frontend/src/layout/navigation/navigationLogic.ts +++ b/frontend/src/layout/navigation/navigationLogic.ts @@ -26,7 +26,6 @@ export const navigationLogic = kea([ actions: [eventUsageLogic, ['reportProjectNoticeDismissed']], })), actions({ - hideSideBarMobile: true, openSitePopover: true, closeSitePopover: true, toggleSitePopover: true, From 57806977e198d7590eefda8a6627fb488e068801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= Date: Fri, 29 Dec 2023 00:22:54 +0100 Subject: [PATCH 4/6] remove page button and sidebar change notice tooltip --- .../SideBar/SidebarChangeNotice.tsx | 28 +------------------ 1 file changed, 1 insertion(+), 27 deletions(-) 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?.() - } - }, - })} - - ) -} From 93eb0cfcae4b2eaf9e0c25fbc787462b4b4e7f55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= Date: Fri, 29 Dec 2023 00:36:53 +0100 Subject: [PATCH 5/6] fix test --- .../lib/components/ActivationSidebar/activationLogic.test.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts b/frontend/src/lib/components/ActivationSidebar/activationLogic.test.ts index 6b5b05d926780..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()) From bbe2a6834065c0535040d9a1fd3b52e8d0548e0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= Date: Tue, 9 Jan 2024 15:30:32 +0100 Subject: [PATCH 6/6] remove page button --- .../layout/navigation/SideBar/PageButton.tsx | 82 ------------------- 1 file changed, 82 deletions(-) delete mode 100644 frontend/src/layout/navigation/SideBar/PageButton.tsx diff --git a/frontend/src/layout/navigation/SideBar/PageButton.tsx b/frontend/src/layout/navigation/SideBar/PageButton.tsx deleted file mode 100644 index d11b2ba20bb6f..0000000000000 --- a/frontend/src/layout/navigation/SideBar/PageButton.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { 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 { 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 { 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 ? ( - {}} - sideAction={{ - ...sideAction, - 'data-attr': sideAction.identifier - ? `menu-item-${sideAction.identifier.toLowerCase()}` - : undefined, - }} - data-attr={`menu-item-${identifier.toString().toLowerCase()}`} - {...buttonProps} - > - {title} - - ) : ( - {}} - sideIcon={null} - {...buttonProps} - > - {title} - {highlight === 'alpha' ? ( - - Alpha - - ) : highlight === 'beta' ? ( - - Beta - - ) : highlight === 'new' ? ( - - New - - ) : null} - - )} - -
    • - ) -}