Merge branch 'master' into survey-link-color

# Conflicts:
#	frontend/__snapshots__/components-empty-message--empty-message.png
#	frontend/__snapshots__/posthog-3000-navigation--navigation-3000.png
#	frontend/__snapshots__/posthog-3000-navigation--navigation-base.png

.eslintrc.js

@@ -114,13 +114,8 @@ module.exports = {
                     },
                     {
                         name: 'antd',
-                        importNames: ['Tooltip'],
-                        message: 'Please use Tooltip from @posthog/lemon-ui instead.',
-                    },
-                    {
-                        name: 'antd',
-                        importNames: ['Alert'],
-                        message: 'Please use LemonBanner from @posthog/lemon-ui instead.',
+                        importNames: ['Card', 'Col', 'Row', 'Alert', 'Tooltip'],
+                        message: 'please use the Lemon equivalent instead',
                     },
                 ],
             },
@@ -141,23 +136,10 @@ module.exports = {
             'warn',
             {
                 forbid: [
-                    {
-                        element: 'Row',
-                        message:
-                            'use flex utility classes instead, e.g. <Row align="middle"> could be <div className="flex items-center">',
-                    },
-                    {
-                        element: 'Col',
-                        message: 'use flex utility classes instead - most of the time can simply be a plain <div>',
-                    },
                     {
                         element: 'Divider',
                         message: 'use <LemonDivider> instead',
                     },
-                    {
-                        element: 'Card',
-                        message: 'use utility classes instead',
-                    },
                     {
                         element: 'Button',
                         message: 'use <LemonButton> instead',

.storybook/decorators/withTheme.tsx

@@ -1,40 +1,16 @@
 import type { Decorator } from '@storybook/react'
 
-import { FEATURE_FLAGS } from 'lib/constants'
-
 /** Global story decorator that is used by the theming control to
  * switch between themes.
  */
 export const withTheme: Decorator = (Story, context) => {
     const theme = context.globals.theme
 
-    // set the body class
-    const actualClassState = document.body.classList.contains('posthog-3000')
-    const desiredClassState = theme !== 'legacy'
-
-    if (actualClassState !== desiredClassState) {
-        if (desiredClassState) {
-            document.body.classList.add('posthog-3000')
-        } else {
-            document.body.classList.remove('posthog-3000')
-        }
-    }
-
-    // set the feature flag
-    const actualFeatureFlagState = window.POSTHOG_APP_CONTEXT!.persisted_feature_flags?.includes(
-        FEATURE_FLAGS.POSTHOG_3000
-    )
-    const desiredFeatureFlagState = theme !== 'legacy'
-
-    if (actualFeatureFlagState !== desiredFeatureFlagState) {
-        const currentFlags = window.POSTHOG_APP_CONTEXT!.persisted_feature_flags || []
-        if (desiredFeatureFlagState) {
-            window.POSTHOG_APP_CONTEXT!.persisted_feature_flags = [...currentFlags, FEATURE_FLAGS.POSTHOG_3000]
-        } else {
-            window.POSTHOG_APP_CONTEXT!.persisted_feature_flags = currentFlags.filter(
-                (f) => f !== FEATURE_FLAGS.POSTHOG_3000
-            )
-        }
+    // set the body class. unfortunately this doesn't work on the initial render,
+    // meaning we need to toggle the theme one time for it to work. won't fix
+    // this, since we're removing the body class soon enough.
+    if (!document.body.classList.contains('posthog-3000')) {
+        document.body.classList.add('posthog-3000')
     }
 
     // set the theme

.storybook/preview.tsx

@@ -114,11 +114,10 @@ const preview: Preview = {
     globalTypes: {
         theme: {
             description: '',
-            defaultValue: 'legacy',
+            defaultValue: 'light',
             toolbar: {
                 title: 'Theme',
                 items: [
-                    { value: 'legacy', icon: 'faceneutral', title: 'Legacy' },
                     { value: 'light', icon: 'sun', title: 'Light' },
                     { value: 'dark', icon: 'moon', title: 'Dark' },
                 ],

.storybook/storybook.scss

@@ -4,16 +4,13 @@
     .ant-modal-wrap {
         z-index: 1050 !important;
     }
+
     .ant-select-dropdown,
     .ant-picker-dropdown {
         z-index: 1060 !important;
     }
+
     .ant-tooltip {
         z-index: 1060 !important;
     }
 }
-
-// allow taking screenshots of a scene's main content without overlapping top bar
-.TopBar {
-    position: relative !important;
-}

.storybook/test-runner.ts

@@ -36,8 +36,6 @@ declare module '@storybook/types' {
             snapshotBrowsers?: SupportedBrowserName[]
             /** If taking a component snapshot, you can narrow it down by specifying the selector. */
             snapshotTargetSelector?: string
-            /** Include snapshots of buttons in 3000. */
-            include3000?: boolean
         }
         msw?: {
             mocks?: Mocks
@@ -99,7 +97,6 @@ async function expectStoryToMatchSnapshot(
         waitForLoadersToDisappear = true,
         waitForSelector,
         excludeNavigationFromSnapshot = false,
-        include3000 = false,
     } = storyContext.parameters?.testOptions ?? {}
 
     let check: (
@@ -139,22 +136,20 @@ async function expectStoryToMatchSnapshot(
         Array.from(document.querySelectorAll('img')).every((i: HTMLImageElement) => i.complete)
     )
 
-    await check(page, context, browser, 'legacy', storyContext.parameters?.testOptions?.snapshotTargetSelector)
-
-    if (include3000) {
-        await page.evaluate(() => {
-            document.body.classList.add('posthog-3000')
-            document.body.setAttribute('theme', 'light')
-        })
+    // snapshot light theme
+    await page.evaluate(() => {
+        document.body.classList.add('posthog-3000')
+        document.body.setAttribute('theme', 'light')
+    })
 
-        await check(page, context, browser, 'light', storyContext.parameters?.testOptions?.snapshotTargetSelector)
+    await check(page, context, browser, 'light', storyContext.parameters?.testOptions?.snapshotTargetSelector)
 
-        await page.evaluate(() => {
-            document.body.setAttribute('theme', 'dark')
-        })
+    // snapshot dark theme
+    await page.evaluate(() => {
+        document.body.setAttribute('theme', 'dark')
+    })
 
-        await check(page, context, browser, 'dark', storyContext.parameters?.testOptions?.snapshotTargetSelector)
-    }
+    await check(page, context, browser, 'dark', storyContext.parameters?.testOptions?.snapshotTargetSelector)
 }
 
 async function expectStoryToMatchFullPageSnapshot(
@@ -173,11 +168,11 @@ async function expectStoryToMatchSceneSnapshot(
     theme: SnapshotTheme
 ): Promise<void> {
     await page.evaluate(() => {
-        // The screenshot gets clipped by the overflow hidden of the sidebar
-        document.querySelector('.SideBar')?.setAttribute('style', 'overflow: visible;')
+        // The screenshot gets clipped by overflow hidden on .Navigation3000
+        document.querySelector('Navigation3000')?.setAttribute('style', 'overflow: visible;')
     })
 
-    await expectLocatorToMatchStorySnapshot(page.locator('.main-app-content'), context, browser, theme)
+    await expectLocatorToMatchStorySnapshot(page.locator('main'), context, browser, theme)
 }
 
 async function expectStoryToMatchComponentSnapshot(

cypress/e2e/actions.cy.ts

@@ -1,10 +1,10 @@
 const createAction = (actionName: string): void => {
     cy.get('[data-attr=create-action]').click()
     cy.get('.LemonButton').should('contain', 'From event or pageview')
-    cy.get('[data-attr=new-action-pageview]').click()
-    cy.get('[data-attr=action-name-create]').should('exist')
+    cy.get('[data-attr=new-action-pageview]').click({ force: true })
+    cy.get('input[name="item-name-large"]').should('exist')
 
-    cy.get('[data-attr=action-name-create]').type(actionName)
+    cy.get('input[name="item-name-large"]').type(actionName)
     cy.get('.LemonSegmentedButton > ul > :nth-child(3)').click()
     cy.get('[data-attr=edit-action-url-input]').click().type(Cypress.config().baseUrl)
 
@@ -40,11 +40,12 @@ describe('Action Events', () => {
         cy.get('[data-attr=trend-element-subject-1] span').should('contain', actionName)
     })
 
-    it('Notifies when an action event with this name already exists', () => {
+    // FIXME: This test fails after the 3000 rework, as the input field for new actions
+    // doesn't get cleared
+    it.skip('Notifies when an action event with this name already exists', () => {
         createAction(actionName)
         navigateToActionsTab()
         createAction(actionName)
-
         // Oh noes, there already is an action with name `actionName`
         cy.contains('Action with this name already exists').should('exist')
         // Let's see it
@@ -56,6 +57,6 @@ describe('Action Events', () => {
     it('Click on an action', () => {
         cy.get('[data-attr=actions-table]').should('exist')
         cy.get('[data-attr=action-link-0]').click()
-        cy.get('[data-attr=action-name-edit]').should('exist')
+        cy.get('[data-attr=edit-prop-item-name-large]').should('exist')
     })
 })

cypress/e2e/annotations.cy.ts

@@ -5,15 +5,15 @@ describe('Annotations', () => {
     })
 
     it('Annotations loaded', () => {
-        cy.get('h2').should('contain', 'Create your first annotation')
+        cy.contains('Create your first annotation').should('exist')
         cy.get('[data-attr="product-introduction-docs-link"]').should('contain', 'Learn more')
     })
 
     it('Create annotation', () => {
-        cy.get('.page-buttons [data-attr=create-annotation]').click()
+        cy.get('.TopBar3000 [data-attr=create-annotation]').click()
         cy.get('[data-attr=create-annotation-input]').type('Test Annotation')
         cy.get('[data-attr=create-annotation-submit]').click()
         cy.get('[data-attr=annotations-table]').contains('Test Annotation').should('exist')
-        cy.get('h2').should('not.have.text', 'Create your first annotation')
+        cy.contains('Create your first annotation').should('not.exist')
     })
 })

cypress/e2e/auth-password-reset.cy.ts

@@ -1,6 +1,6 @@
 describe('Password Reset', () => {
     beforeEach(() => {
-        cy.get('[data-attr=top-menu-toggle]').click()
+        cy.get('[data-attr=menu-item-me]').click()
         cy.get('[data-attr=top-menu-item-logout]').click()
         cy.location('pathname').should('eq', '/login')
     })

cypress/e2e/auth.cy.ts

@@ -2,7 +2,7 @@ import { urls } from 'scenes/urls'
 
 describe('Auth', () => {
     beforeEach(() => {
-        cy.get('[data-attr=top-menu-toggle]').click()
+        cy.get('[data-attr=menu-item-me]').click()
     })
 
     it('Logout', () => {

cypress/e2e/cohorts.cy.ts

@@ -10,9 +10,8 @@ describe('Cohorts', () => {
 
     it('Cohorts new and list', () => {
         // load an empty page
-        cy.get('h1').should('contain', 'People')
         cy.title().should('equal', 'Cohorts • People • PostHog')
-        cy.get('h2').should('contain', 'Create your first cohort')
+        cy.contains('Create your first cohort').should('exist')
         cy.get('[data-attr="product-introduction-docs-link"]').should('contain', 'Learn more')
 
         // go to create a new cohort
@@ -41,7 +40,7 @@ describe('Cohorts', () => {
         // back to cohorts
         goToCohorts()
         cy.get('tbody').contains('Test Cohort')
-        cy.get('h2').should('not.have.text', 'Create your first cohort')
+        cy.contains('Create your first cohort').should('not.exist')
 
         it('Cohorts new and list', () => {
             cy.get('[data-row-key]').first().click()

cypress/e2e/commandBar.cy.ts

@@ -0,0 +1,51 @@
+describe('Command Bar', () => {
+    it('Handles keyboard shortcuts', () => {
+        /** Show/hide search */
+        // show search
+        cy.get('body').type('{ctrl}k')
+        cy.get('[data-attr=search-bar-input]').should('exist')
+
+        // TODO: fix hiding search with cmd+k
+        // hide search with cmd+k
+        // cy.get('body').type('{cmd}k')
+        // cy.get('[data-attr=search-bar-input]').should('not.exist')
+
+        // show search
+        // cy.get('body').type('{ctrl}k')
+        // cy.get('[data-attr=search-bar-input]').should('exist')
+
+        // hide search with esc
+        cy.get('body').type('{esc}')
+        cy.get('[data-attr=search-bar-input]').should('not.exist')
+
+        /** Show/hide actions */
+        // show actions
+        cy.get('body').type('{ctrl}{shift}k')
+        cy.get('[data-attr=action-bar-input]').should('exist')
+
+        // TODO: fix hiding actions with cmd+shift+k
+        // hide actions with cmd+shift+k
+        // cy.get('body').type('{ctrl}{cmd}k')
+        // cy.get('[data-attr=action-bar-input]').should('not.exist')
+
+        // // show actions
+        // cy.get('body').type('{ctrl}{shift}k')
+        // cy.get('[data-attr=action-bar-input]').should('exist')
+
+        // hide actions with esc
+        cy.get('body').type('{esc}')
+        cy.get('[data-attr=action-bar-input]').should('not.exist')
+
+        /** Show/hide shortcuts */
+        // show shortcuts
+        cy.get('body').type('{shift}?')
+        cy.contains('Keyboard shortcuts').should('exist')
+
+        // hide shortcuts with esc
+        cy.get('body').type('{esc}')
+        cy.contains('Keyboard shortcuts').should('not.exist')
+
+        /** Toggle between search and actions */
+        // TODO: does not work at the moment
+    })
+})

cypress/e2e/dashboard-duplication.ts

@@ -32,7 +32,10 @@ describe('duplicating dashboards', () => {
                 cy.get('[data-attr="more-button"]').click()
             })
             duplicateDashboardFromMenu()
-            cy.get('h1.page-title').should('have.text', expectedCopiedDashboardName)
+            cy.get('[data-attr="top-bar-name"] .EditableField__display').should(
+                'have.text',
+                expectedCopiedDashboardName
+            )
 
             cy.wait('@createDashboard').then(() => {
                 cy.get('.CardMeta h4').should('have.text', insightName).should('not.have.text', '(Copy)')
@@ -50,7 +53,10 @@ describe('duplicating dashboards', () => {
                 cy.get('[data-attr="more-button"]').click()
             })
             duplicateDashboardFromMenu(true)
-            cy.get('h1.page-title').should('have.text', expectedCopiedDashboardName)
+            cy.get('[data-attr="top-bar-name"] .EditableField__display').should(
+                'have.text',
+                expectedCopiedDashboardName
+            )
 
             cy.wait('@createDashboard').then(() => {
                 cy.contains('h4', expectedCopiedInsightName).click()
@@ -69,7 +75,10 @@ describe('duplicating dashboards', () => {
 
             cy.get('[data-attr="dashboard-three-dots-options-menu"]').click()
             duplicateDashboardFromMenu()
-            cy.get('h1.page-title').should('have.text', expectedCopiedDashboardName)
+            cy.get('[data-attr="top-bar-name"] .EditableField__display').should(
+                'have.text',
+                expectedCopiedDashboardName
+            )
 
             cy.wait('@createDashboard').then(() => {
                 cy.get('.CardMeta h4').should('have.text', insightName).should('not.have.text', '(Copy)')
@@ -86,7 +95,10 @@ describe('duplicating dashboards', () => {
 
             cy.get('[data-attr="dashboard-three-dots-options-menu"]').click()
             duplicateDashboardFromMenu(true)
-            cy.get('h1.page-title').should('have.text', expectedCopiedDashboardName)
+            cy.get('[data-attr="top-bar-name"] .EditableField__display').should(
+                'have.text',
+                expectedCopiedDashboardName
+            )
 
             cy.wait('@createDashboard').then(() => {
                 cy.contains('h4', expectedCopiedInsightName).click()