Merge branch 'master' into support-panel-consolidation

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/exporter/Exporter.stories.tsx

@@ -40,6 +40,14 @@ const Template: StoryFn<typeof Exporter> = (props) => {
 export const TrendsLineInsight: Story = Template.bind({})
 TrendsLineInsight.args = { insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLine.json') }
 
+export const TrendsLineMultiInsight: Story = Template.bind({})
+TrendsLineMultiInsight.args = {
+    insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLineMulti.json'),
+}
+TrendsLineMultiInsight.parameters = {
+    mockDate: '2023-07-10',
+}
+
 export const TrendsLineBreakdownInsight: Story = Template.bind({})
 TrendsLineBreakdownInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/trendsLineBreakdown.json'),

frontend/src/layout/GlobalModals.tsx

@@ -0,0 +1,48 @@
+import { kea, path, actions, reducers, useActions, useValues } from 'kea'
+import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
+import { InviteModal } from 'scenes/organization/Settings/InviteModal'
+import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
+import { inviteLogic } from 'scenes/organization/Settings/inviteLogic'
+
+import type { globalModalsLogicType } from './GlobalModalsType'
+
+export const globalModalsLogic = kea<globalModalsLogicType>([
+    path(['layout', 'navigation', 'globalModalsLogic']),
+    actions({
+        showCreateOrganizationModal: true,
+        hideCreateOrganizationModal: true,
+        showCreateProjectModal: true,
+        hideCreateProjectModal: true,
+    }),
+    reducers({
+        isCreateOrganizationModalShown: [
+            false,
+            {
+                showCreateOrganizationModal: () => true,
+                hideCreateOrganizationModal: () => false,
+            },
+        ],
+        isCreateProjectModalShown: [
+            false,
+            {
+                showCreateProjectModal: () => true,
+                hideCreateProjectModal: () => false,
+            },
+        ],
+    }),
+])
+
+export function GlobalModals(): JSX.Element {
+    const { isCreateOrganizationModalShown, isCreateProjectModalShown } = useValues(globalModalsLogic)
+    const { hideCreateOrganizationModal, hideCreateProjectModal } = useActions(globalModalsLogic)
+    const { isInviteModalShown } = useValues(inviteLogic)
+    const { hideInviteModal } = useActions(inviteLogic)
+
+    return (
+        <>
+            <InviteModal isOpen={isInviteModalShown} onClose={hideInviteModal} />
+            <CreateOrganizationModal isVisible={isCreateOrganizationModalShown} onClose={hideCreateOrganizationModal} />
+            <CreateProjectModal isVisible={isCreateProjectModalShown} onClose={hideCreateProjectModal} />
+        </>
+    )
+}

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

@@ -12,6 +12,7 @@ import { Scene, SceneConfig } from 'scenes/sceneTypes'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { SidePanel } from './sidepanel/SidePanel'
+import { GlobalModals } from '../GlobalModals'
 
 export function Navigation({
     children,
@@ -48,6 +49,7 @@ export function Navigation({
             </main>
             <SidePanel />
             <CommandPalette />
+            <GlobalModals />
         </div>
     )
 }

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

@@ -75,6 +75,11 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
                         setPopoverShown(false)
                     }
                 }}
+                onClickInside={() => {
+                    if (popoverShown) {
+                        setPopoverShown(false)
+                    }
+                }}
             >
                 {breadcrumbContent}
             </Popover>

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/OrganizationSwitcher.tsx

@@ -11,6 +11,7 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { userLogic } from 'scenes/userLogic'
 import { AvailableFeature, OrganizationBasicType } from '~/types'
 import { navigationLogic } from './navigationLogic'
+import { globalModalsLogic } from '../GlobalModals'
 
 export function AccessLevelIndicator({ organization }: { organization: OrganizationBasicType }): JSX.Element {
     return (
@@ -44,7 +45,8 @@ export function OtherOrganizationButton({
 }
 
 export function NewOrganizationButton(): JSX.Element {
-    const { closeSitePopover, showCreateOrganizationModal } = useActions(navigationLogic)
+    const { closeSitePopover } = useActions(navigationLogic)
+    const { showCreateOrganizationModal } = useActions(globalModalsLogic)
     const { guardAvailableFeature } = useActions(sceneLogic)
 
     return (