feat: Sidebar cohorts and annotations movement

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

@@ -17,7 +17,6 @@ import {
     IconDatabase,
     IconApps,
     IconPerson,
-    IconQuestion,
     IconPeople,
     IconTestTube,
     IconToggle,
@@ -27,7 +26,6 @@ import {
     IconLive,
 } 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'
@@ -308,13 +306,6 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             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(),
-                        },
                     ],
                     [
                         {

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

@@ -7,7 +7,6 @@ import {
     IconApps,
     IconBarChart,
     IconCohort,
-    IconComment,
     IconDatabase,
     IconExperiment,
     IconFlag,
@@ -236,7 +235,6 @@ function Pages(): JSX.Element {
                         />
                     </FlaggedFeature>
                     <PageButton icon={<IconCohort />} identifier={Scene.Cohorts} to={urls.cohorts()} />
-                    <PageButton icon={<IconComment />} identifier={Scene.Annotations} to={urls.annotations()} />
                     {canViewPlugins(currentOrganization) || Object.keys(frontendApps).length > 0 ? (
                         <>
                             <div className="SideBar__heading">Apps</div>

frontend/src/scenes/annotations/AnnotationModal.tsx

@@ -9,6 +9,15 @@ import { IconWarning } from 'lib/lemon-ui/icons'
 import { shortTimeZone } from 'lib/utils'
 import { urls } from 'scenes/urls'
 
+export function NewAnnotationButton(): JSX.Element {
+    const { openModalToCreateAnnotation } = useActions(annotationModalLogic)
+    return (
+        <LemonButton type="primary" data-attr="create-annotation" onClick={() => openModalToCreateAnnotation()}>
+            New annotation
+        </LemonButton>
+    )
+}
+
 export function AnnotationModal({
     overlayRef,
     contentRef,

frontend/src/scenes/annotations/Annotations.tsx

@@ -5,9 +5,7 @@ import {
     annotationModalLogic,
     ANNOTATION_DAYJS_FORMAT,
 } from './annotationModalLogic'
-import { PageHeader } from 'lib/components/PageHeader'
 import { AnnotationScope, InsightShortId, AnnotationType, ProductKey } from '~/types'
-import { SceneExport } from 'scenes/sceneTypes'
 import { LemonTable, LemonTableColumns, LemonTableColumn } from 'lib/lemon-ui/LemonTable'
 import { createdAtColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
@@ -24,11 +22,6 @@ import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
 import { MicrophoneHog } from 'lib/components/hedgehogs'
 
-export const scene: SceneExport = {
-    component: Annotations,
-    logic: annotationModalLogic,
-}
-
 export function Annotations(): JSX.Element {
     const { currentTeam } = useValues(teamLogic)
     const { currentOrganization } = useValues(organizationLogic)
@@ -135,26 +128,6 @@ export function Annotations(): JSX.Element {
 
     return (
         <>
-            <PageHeader
-                title="Annotations"
-                caption={
-                    !shouldShowEmptyState && !shouldShowProductIntroduction ? (
-                        <>
-                            Annotations allow you to mark when certain changes happened so you can easily see how they
-                            impacted your metrics.
-                        </>
-                    ) : null
-                }
-                buttons={
-                    <LemonButton
-                        type="primary"
-                        data-attr="create-annotation"
-                        onClick={() => openModalToCreateAnnotation()}
-                    >
-                        New annotation
-                    </LemonButton>
-                }
-            />
             <div data-attr={'annotations-content'}>
                 {(shouldShowEmptyState || shouldShowProductIntroduction) && (
                     <div className="mt-4">

frontend/src/scenes/annotations/annotationModalLogic.ts

@@ -9,10 +9,8 @@ import { teamLogic } from 'scenes/teamLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { userLogic } from 'scenes/userLogic'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { actionToUrl, urlToAction } from 'kea-router'
-import { sceneLogic } from 'scenes/sceneLogic'
-import { urls } from '@posthog/apps-common'
-import { Scene } from 'scenes/sceneTypes'
+import { urlToAction } from 'kea-router'
+import { urls } from 'scenes/urls'
 
 export const ANNOTATION_DAYJS_FORMAT = 'MMMM DD, YYYY h:mm A'
 
@@ -176,7 +174,7 @@ export const annotationModalLogic = kea<annotationModalLogicType>([
         },
     })),
     urlToAction(({ values, actions, cache }) => ({
-        '/annotations/:id': ({ id }) => {
+        [urls.annotation(':id')]: ({ id }) => {
             cache.annotationToShowId = parseInt(id as string)
             const annotation = values.annotations.find((a) => a.id === cache.annotationToShowId)
             if (!annotation) {
@@ -185,7 +183,4 @@ export const annotationModalLogic = kea<annotationModalLogicType>([
             actions.openModalToEditAnnotation(annotation)
         },
     })),
-    actionToUrl(() => ({
-        closeModal: () => (sceneLogic.values.scene === Scene.Annotations ? urls.annotations() : undefined),
-    })),
 ])

frontend/src/scenes/appScenes.ts

@@ -11,18 +11,13 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.WebAnalytics]: () => import('./web-analytics/WebAnalyticsScene'),
     [Scene.Cohorts]: () => import('./cohorts/Cohorts'),
     [Scene.Cohort]: () => import('./cohorts/Cohort'),
-    [Scene.DataManagement]: () => import('./data-management/events/EventDefinitionsTable'),
+    [Scene.DataManagement]: () => import('./data-management/DataManagementScene'),
     [Scene.Events]: () => import('./events/Events'),
     [Scene.BatchExports]: () => import('./batch_exports/BatchExportsListScene'),
     [Scene.BatchExportEdit]: () => import('./batch_exports/BatchExportEditScene'),
     [Scene.BatchExport]: () => import('./batch_exports/BatchExportScene'),
-    [Scene.Actions]: () => import('./actions/ActionsTable'),
-    [Scene.EventDefinitions]: () => import('./data-management/events/EventDefinitionsTable'),
     [Scene.EventDefinition]: () => import('./data-management/definition/DefinitionView'),
-    [Scene.PropertyDefinitions]: () => import('./data-management/properties/PropertyDefinitionsTable'),
     [Scene.PropertyDefinition]: () => import('./data-management/definition/DefinitionView'),
-    [Scene.DataManagementHistory]: () => import('./data-management/history/History'),
-    [Scene.Database]: () => import('./data-management/database/DatabaseScene'),
     [Scene.Replay]: () => import('./session-recordings/SessionRecordings'),
     [Scene.ReplaySingle]: () => import('./session-recordings/detail/SessionRecordingDetail'),
     [Scene.ReplayPlaylist]: () => import('./session-recordings/playlist/SessionRecordingsPlaylistScene'),
@@ -57,7 +52,6 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.AsyncMigrations]: () => import('./instance/AsyncMigrations/AsyncMigrations'),
     [Scene.DeadLetterQueue]: () => import('./instance/DeadLetterQueue/DeadLetterQueue'),
     [Scene.MySettings]: () => import('./me/Settings'),
-    [Scene.Annotations]: () => import('./annotations/Annotations'),
     [Scene.PreflightCheck]: () => import('./PreflightCheck/PreflightCheck'),
     [Scene.Signup]: () => import('./authentication/signup/SignupContainer'),
     [Scene.InviteSignup]: () => import('./authentication/InviteSignup'),
@@ -73,7 +67,6 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.PasswordResetComplete]: () => import('./authentication/PasswordResetComplete'),
     [Scene.Unsubscribe]: () => import('./Unsubscribe/Unsubscribe'),
     [Scene.IntegrationsRedirect]: () => import('./IntegrationsRedirect/IntegrationsRedirect'),
-    [Scene.IngestionWarnings]: () => import('./data-management/ingestion-warnings/IngestionWarningsView'),
     [Scene.DebugQuery]: () => import('./debug/DebugScene'),
     [Scene.VerifyEmail]: () => import('./authentication/signup/verify-email/VerifyEmail'),
     [Scene.Feedback]: () => import('./feedback/Feedback'),