feat: Sidebar cohorts and annotations movement (#18200)

cypress/e2e/a11y.cy.ts

@@ -16,9 +16,7 @@ describe('a11y', () => {
         'experiments',
         'events',
         'datamanagement',
-        'persons',
-        'cohorts',
-        'annotations',
+        'personsmanagement',
         'apps',
         'toolbarlaunch',
         'projectsettings',

cypress/e2e/annotations.cy.ts

@@ -1,10 +1,10 @@
 describe('Annotations', () => {
     beforeEach(() => {
-        cy.clickNavMenu('annotations')
+        cy.clickNavMenu('datamanagement')
+        cy.get('[data-attr=data-management-annotations-tab]').click()
     })
 
     it('Annotations loaded', () => {
-        cy.get('h1').should('contain', 'Annotations')
         cy.get('h2').should('contain', 'Create your first annotation')
         cy.get('[data-attr="product-introduction-docs-link"]').should('contain', 'Learn more about Annotations')
     })

cypress/e2e/cohorts.cy.ts

@@ -1,17 +1,22 @@
 describe('Cohorts', () => {
+    const goToCohorts = (): void => {
+        cy.clickNavMenu('personsmanagement')
+        cy.get('[data-attr=persons-management-cohorts-tab]').click()
+    }
+
     beforeEach(() => {
-        cy.clickNavMenu('cohorts')
+        goToCohorts()
     })
 
     it('Cohorts new and list', () => {
         // load an empty page
-        cy.get('h1').should('contain', 'Cohorts')
-        cy.title().should('equal', 'Cohorts • PostHog')
+        cy.get('h1').should('contain', 'People')
+        cy.title().should('equal', 'Cohorts • People • PostHog')
         cy.get('h2').should('contain', 'Create your first cohort')
         cy.get('[data-attr="product-introduction-docs-link"]').should('contain', 'Learn more about Cohorts')
 
         // go to create a new cohort
-        cy.get('[data-attr="create-cohort"]').click()
+        cy.get('[data-attr="new-cohort"]').click()
 
         // select "add filter" and "property"
         cy.get('[data-attr="cohort-selector-field-value"]').click()
@@ -34,7 +39,7 @@ describe('Cohorts', () => {
         cy.get('[data-attr=success-toast]').contains('Cohort saved').should('exist')
 
         // back to cohorts
-        cy.clickNavMenu('cohorts')
+        goToCohorts()
         cy.get('tbody').contains('Test Cohort')
         cy.get('h2').should('not.have.text', 'Create your first cohort')
 
@@ -69,7 +74,7 @@ describe('Cohorts', () => {
         // delete cohort
         cy.get('[data-attr="more-button"]').click()
         cy.get('.Popover__content').contains('Delete cohort').click()
-        cy.clickNavMenu('cohorts')
+        goToCohorts()
         cy.get('tbody').should('not.have.text', 'Test Cohort (dynamic copy) (static copy)')
     })
 })

cypress/e2e/insights-unsaved-confirmation.cy.ts

@@ -38,11 +38,9 @@ describe('Insights', () => {
             const insightName = randomString('to save and then navigate away from')
             insight.create(insightName)
 
-            cy.get('[data-attr="menu-item-annotations"]').click()
+            cy.get('[data-attr="menu-item-dashboards"]').click()
 
-            // the annotations API call is made before the annotations page loads, so we can't wait for it
-            cy.get('[data-attr="annotations-content"]').should('exist')
-            cy.url().should('include', '/annotations')
+            cy.url().should('include', '/dashboard')
         })
 
         it('Can keep editing changed new insight after navigating away with confirm() rejection (case 1)', () => {

cypress/e2e/person.cy.ts

@@ -1,8 +1,8 @@
 describe('Person Visualization Check', () => {
     beforeEach(() => {
-        cy.clickNavMenu('persons')
+        cy.clickNavMenu('personsmanagement')
         cy.location('pathname').should('eq', '/persons')
-        cy.get('.ant-spin-spinning').should('not.exist') // Wait until initial table load to be able to use the search
+        cy.wait(1000)
         cy.get('[data-attr=persons-search]').type('deb').should('have.value', 'deb')
         cy.contains('[email protected]').should('not.exist')
         cy.contains('[email protected]').click()

cypress/e2e/persons.cy.ts

@@ -1,10 +1,10 @@
 describe('Persons', () => {
     beforeEach(() => {
-        cy.clickNavMenu('persons')
+        cy.clickNavMenu('personsmanagement')
     })
 
     it('All tabs work', () => {
-        cy.get('h1').should('contain', 'Persons')
+        cy.get('h1').should('contain', 'People')
         cy.get('[data-attr=persons-search]').type('marisol').type('{enter}').should('have.value', 'marisol')
         cy.wait(200)
         cy.get('[data-row-key]').its('length').should('be.gte', 0)

frontend/src/layout/navigation-3000/components/NavbarButton.tsx

@@ -4,6 +4,7 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import clsx from 'clsx'
 import { useValues } from 'kea'
 import { sceneLogic } from 'scenes/sceneLogic'
+import { SidebarChangeNoticeContent, useSidebarChangeNotices } from '~/layout/navigation/SideBar/SidebarChangeNotice'
 import { navigation3000Logic } from '../navigationLogic'
 import { LemonTag } from '@posthog/lemon-ui'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
@@ -63,29 +64,46 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
         }
     }
 
+    const buttonContent = (
+        <LemonButton
+            ref={ref}
+            data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
+            onMouseEnter={() => setHasBeenClicked(false)}
+            onClick={() => {
+                setHasBeenClicked(true)
+                onClick?.()
+            }}
+            className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
+            fullWidth
+            {...buttonProps}
+        >
+            {content}
+        </LemonButton>
+    )
+
+    const [notices, onAcknowledged] = useSidebarChangeNotices({ identifier })
+
     return (
         <li className="w-full">
-            <Tooltip
-                title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
-                placement="right"
-                delayMs={0}
-                visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
-            >
-                <LemonButton
-                    ref={ref}
-                    data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
-                    onMouseEnter={() => setHasBeenClicked(false)}
-                    onClick={() => {
-                        setHasBeenClicked(true)
-                        onClick?.()
-                    }}
-                    className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
-                    fullWidth
-                    {...buttonProps}
+            {notices.length ? (
+                <Tooltip
+                    title={<SidebarChangeNoticeContent notices={notices} onAcknowledged={onAcknowledged} />}
+                    placement={notices[0].placement ?? 'right'}
+                    delayMs={0}
+                    visible={true}
+                >
+                    {buttonContent}
+                </Tooltip>
+            ) : (
+                <Tooltip
+                    title={isNavCollapsedActually ? (here ? `${title} (you are here)` : title) : null}
+                    placement="right"
+                    delayMs={0}
+                    visible={!persistentTooltip && hasBeenClicked ? false : undefined} // Force-hide tooltip after button click
                 >
-                    {content}
-                </LemonButton>
-            </Tooltip>
+                    {buttonContent}
+                </Tooltip>
+            )}
         </li>
     )
 })

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

@@ -19,9 +19,7 @@ import {
     IconHome,
     IconLive,
     IconPeople,
-    IconPerson,
     IconPieChart,
-    IconQuestion,
     IconRewindPlay,
     IconTestTube,
     IconToggle,
@@ -32,8 +30,6 @@ import {
     IconChat,
 } from '@posthog/icons'
 import { urls } from 'scenes/urls'
-import { annotationsSidebarLogic } from './sidebars/annotations'
-import { cohortsSidebarLogic } from './sidebars/cohorts'
 import { dashboardsSidebarLogic } from './sidebars/dashboards'
 import { dataManagementSidebarLogic } from './sidebars/dataManagement'
 import { experimentsSidebarLogic } from './sidebars/experiments'
@@ -322,33 +318,12 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             to: isUsingSidebar ? undefined : urls.eventDefinitions(),
                         },
                         {
-                            identifier: Scene.Persons,
-                            label: 'People and groups',
-                            icon: <IconPerson />,
+                            identifier: Scene.PersonsManagement,
+                            label: 'People',
+                            icon: <IconPeople />,
                             logic: isUsingSidebar ? personsAndGroupsSidebarLogic : undefined,
                             to: isUsingSidebar ? undefined : urls.persons(),
                         },
-                        {
-                            identifier: Scene.Cohorts,
-                            label: 'Cohorts',
-                            icon: <IconPeople />,
-                            logic: isUsingSidebar ? cohortsSidebarLogic : undefined,
-                            to: isUsingSidebar ? undefined : urls.cohorts(),
-                        },
-                        {
-                            identifier: Scene.Annotations,
-                            label: 'Annotations',
-                            icon: <IconQuestion />,
-                            logic: isUsingSidebar ? annotationsSidebarLogic : undefined,
-                            to: isUsingSidebar ? undefined : urls.annotations(),
-                        },
-                        {
-                            identifier: Scene.ToolbarLaunch,
-                            label: 'Toolbar',
-                            icon: <IconToolbar />,
-                            logic: isUsingSidebar ? toolbarSidebarLogic : undefined,
-                            to: isUsingSidebar ? undefined : urls.toolbarLaunch(),
-                        },
                     ],
                     [
                         {
@@ -415,6 +390,13 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconApps />,
                             to: urls.projectApps(),
                         },
+                        {
+                            identifier: Scene.ToolbarLaunch,
+                            label: 'Toolbar',
+                            icon: <IconToolbar />,
+                            logic: isUsingSidebar ? toolbarSidebarLogic : undefined,
+                            to: isUsingSidebar ? undefined : urls.toolbarLaunch(),
+                        },
                     ],
                 ]
             },

frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.test.ts

@@ -7,7 +7,7 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { Scene } from 'scenes/sceneTypes'
 
 const blankScene = (): any => ({ scene: { component: () => null, logic: null } })
-const scenes: any = { [Scene.Annotations]: blankScene, [Scene.Dashboards]: blankScene }
+const scenes: any = { [Scene.SavedInsights]: blankScene, [Scene.Dashboards]: blankScene }
 
 describe('breadcrumbsLogic', () => {
     let logic: ReturnType<typeof breadcrumbsLogic.build>
@@ -24,9 +24,9 @@ describe('breadcrumbsLogic', () => {
         logic.mount()
 
         // test with .delay because subscriptions happen async
-        router.actions.push(urls.annotations())
-        await expectLogic(logic).delay(1).toMatchValues({ documentTitle: 'Annotations • PostHog' })
-        expect(global.document.title).toEqual('Annotations • PostHog')
+        router.actions.push(urls.savedInsights())
+        await expectLogic(logic).delay(1).toMatchValues({ documentTitle: 'Insights • PostHog' })
+        expect(global.document.title).toEqual('Insights • PostHog')
 
         router.actions.push(urls.dashboards())
         await expectLogic(logic).delay(1).toMatchValues({ documentTitle: 'Dashboards • PostHog' })

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

@@ -6,6 +6,7 @@ import { Scene } from 'scenes/sceneTypes'
 import { LemonButton, LemonButtonProps, LemonButtonWithSideAction, SideAction } from 'lib/lemon-ui/LemonButton'
 import { sceneConfigurations } from 'scenes/scenes'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
+import { SidebarChangeNoticeTooltip } from '~/layout/navigation/SideBar/SidebarChangeNotice'
 
 export interface PageButtonProps extends Pick<LemonButtonProps, 'icon' | 'onClick' | 'to'> {
     /** Used for highlighting the active scene. `identifier` of type number means dashboard ID instead of scene. */
@@ -32,48 +33,51 @@ export function PageButton({ title, sideAction, identifier, highlight, ...button
 
     return (
         <li>
-            {sideAction ? (
-                <LemonButtonWithSideAction
-                    fullWidth
-                    status={buttonStatus}
-                    active={isActive}
-                    onClick={hideSideBarMobile}
-                    sideAction={{
-                        ...sideAction,
-                        'data-attr': sideAction.identifier
-                            ? `menu-item-${sideAction.identifier.toLowerCase()}`
-                            : undefined,
-                    }}
-                    data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
-                    {...buttonProps}
-                >
-                    <span className="text-default">{title}</span>
-                </LemonButtonWithSideAction>
-            ) : (
-                <LemonButton
-                    fullWidth
-                    status={buttonStatus}
-                    active={isActive}
-                    data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
-                    onClick={hideSideBarMobile}
-                    {...buttonProps}
-                >
-                    <span className="text-default grow">{title}</span>
-                    {highlight === 'alpha' ? (
-                        <LemonTag type="completion" className="ml-1 float-right uppercase">
-                            Alpha
-                        </LemonTag>
-                    ) : highlight === 'beta' ? (
-                        <LemonTag type="warning" className="ml-1 float-right uppercase">
-                            Beta
-                        </LemonTag>
-                    ) : highlight === 'new' ? (
-                        <LemonTag type="success" className="ml-1 float-right uppercase">
-                            New
-                        </LemonTag>
-                    ) : null}
-                </LemonButton>
-            )}
+            <SidebarChangeNoticeTooltip identifier={identifier}>
+                {sideAction ? (
+                    <LemonButtonWithSideAction
+                        fullWidth
+                        status={buttonStatus}
+                        active={isActive}
+                        onClick={hideSideBarMobile}
+                        sideAction={{
+                            ...sideAction,
+                            'data-attr': sideAction.identifier
+                                ? `menu-item-${sideAction.identifier.toLowerCase()}`
+                                : undefined,
+                        }}
+                        data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
+                        {...buttonProps}
+                    >
+                        <span className="text-default">{title}</span>
+                    </LemonButtonWithSideAction>
+                ) : (
+                    <LemonButton
+                        fullWidth
+                        status={buttonStatus}
+                        active={isActive}
+                        data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
+                        onClick={hideSideBarMobile}
+                        sideIcon={null}
+                        {...buttonProps}
+                    >
+                        <span className="text-default grow">{title}</span>
+                        {highlight === 'alpha' ? (
+                            <LemonTag type="completion" className="ml-1 float-right uppercase">
+                                Alpha
+                            </LemonTag>
+                        ) : highlight === 'beta' ? (
+                            <LemonTag type="warning" className="ml-1 float-right uppercase">
+                                Beta
+                            </LemonTag>
+                        ) : highlight === 'new' ? (
+                            <LemonTag type="success" className="ml-1 float-right uppercase">
+                                New
+                            </LemonTag>
+                        ) : null}
+                    </LemonButton>
+                )}
+            </SidebarChangeNoticeTooltip>
         </li>
     )
 }