Merge branch 'master' into dn-chore/upgrade-playwright

.eslintrc.js

@@ -42,13 +42,25 @@ module.exports = {
         },
         ecmaVersion: 2018,
         sourceType: 'module',
-        project: 'tsconfig.json'
+        project: 'tsconfig.json',
     },
-    plugins: ['prettier', 'react', 'cypress', '@typescript-eslint', 'no-only-tests', 'jest', 'compat', 'posthog'],
+    plugins: [
+        'prettier',
+        'react',
+        'cypress',
+        '@typescript-eslint',
+        'no-only-tests',
+        'jest',
+        'compat',
+        'posthog',
+        'simple-import-sort',
+    ],
     rules: {
         'no-console': ['error', { allow: ['warn', 'error'] }],
         'no-debugger': 'error',
         'no-only-tests/no-only-tests': 'error',
+        'simple-import-sort/imports': 'error',
+        'simple-import-sort/exports': 'error',
         'react/prop-types': [0],
         'react/react-in-jsx-scope': [0],
         'react/no-unescaped-entities': [0],
@@ -112,6 +124,11 @@ module.exports = {
                         importNames: ['Tooltip'],
                         message: 'Please use Tooltip from @posthog/lemon-ui instead.',
                     },
+                    {
+                        name: 'antd',
+                        importNames: ['Alert'],
+                        message: 'Please use LemonBanner from @posthog/lemon-ui instead.',
+                    },
                 ],
             },
         ],
@@ -231,6 +248,10 @@ module.exports = {
                         element: 'a',
                         message: 'use <Link> instead',
                     },
+                    {
+                        element: 'Alert',
+                        message: 'use <LemonBanner> instead',
+                    },
                 ],
             },
         ],
@@ -254,14 +275,22 @@ module.exports = {
             rules: {
                 // The below complains needlessly about expect(api.createInvite).toHaveBeenCalledWith(...)
                 '@typescript-eslint/unbound-method': 'off',
-            }
+            },
         },
         {
-            // disable these rules for files generated by kea-typegen
-            files: ['*Type.ts', '*Type.tsx'],
+            files: ['*Type.ts', '*Type.tsx'], // Kea typegen output
             rules: {
                 'no-restricted-imports': 'off',
-                '@typescript-eslint/ban-types': ['off'],
+                '@typescript-eslint/ban-types': 'off',
+                'simple-import-sort/imports': 'off',
+                'simple-import-sort/exports': 'off',
+            },
+        },
+        {
+            files: ['frontend/src/scenes/notebooks/Nodes/*'], // Notebooks code weirdly relies on its order of sorting
+            rules: {
+                'simple-import-sort/imports': 'off',
+                'simple-import-sort/exports': 'off',
             },
         },
         {

.github/workflows/storybook-chromatic.yml

@@ -144,6 +144,7 @@ jobs:
                   HOME: /root
                   # Update snapshots for PRs on the main repo, verify on forks, which don't have access to PostHog Bot
                   VARIANT: ${{ github.event.pull_request.head.repo.full_name == github.repository && 'update' || 'verify' }}
+                  STORYBOOK_SKIP_TAGS: 'test-skip,test-skip-${{ matrix.browser }}'
               run: |
                   pnpm test:visual-regression:stories:ci:$VARIANT --browsers ${{ matrix.browser }} --shard ${{ matrix.shard }}/$SHARD_COUNT
 

.storybook/preview.tsx

@@ -8,7 +8,6 @@ import { getStorybookAppContext } from './app-context'
 import { withKea } from './decorators/withKea'
 import { withMockDate } from './decorators/withMockDate'
 import { defaultMocks } from '~/mocks/handlers'
-import { withSnapshotsDisabled } from './decorators/withSnapshotsDisabled'
 import { withFeatureFlags } from './decorators/withFeatureFlags'
 import { withTheme } from './decorators/withTheme'
 
@@ -79,7 +78,6 @@ export const parameters: Parameters = {
 
 // Setup storybook global decorators. See https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators
 export const decorators: Meta['decorators'] = [
-    withSnapshotsDisabled,
     // Make sure the msw service worker is started, and reset the handlers to defaults.
     withKea,
     // Allow us to time travel to ensure our stories don't change over time.

.storybook/test-runner.ts

@@ -13,11 +13,6 @@ declare module '@storybook/types' {
         options?: any
         layout?: 'padded' | 'fullscreen' | 'centered'
         testOptions?: {
-            /**
-             * Whether the test should be a no-op (doesn't jest.skip as @storybook/test-runner doesn't allow that).
-             * @default false
-             */
-            skip?: boolean
             /**
              * Whether we should wait for all loading indicators to disappear before taking a snapshot.
              * @default true
@@ -71,19 +66,20 @@ module.exports = {
         jest.retryTimes(RETRY_TIMES, { logErrorsBeforeRetry: true })
         jest.setTimeout(JEST_TIMEOUT_MS)
     },
-    async postRender(page, context) {
+    async postVisit(page, context) {
         const browserContext = page.context()
         const storyContext = (await getStoryContext(page, context)) as StoryContext
-        const { skip = false, snapshotBrowsers = ['chromium'] } = storyContext.parameters?.testOptions ?? {}
+        const { snapshotBrowsers = ['chromium'] } = storyContext.parameters?.testOptions ?? {}
 
         browserContext.setDefaultTimeout(PLAYWRIGHT_TIMEOUT_MS)
-        if (!skip) {
-            const currentBrowser = browserContext.browser()!.browserType().name() as SupportedBrowserName
-            if (snapshotBrowsers.includes(currentBrowser)) {
-                await expectStoryToMatchSnapshot(page, context, storyContext, currentBrowser)
-            }
+        const currentBrowser = browserContext.browser()!.browserType().name() as SupportedBrowserName
+        if (snapshotBrowsers.includes(currentBrowser)) {
+            await expectStoryToMatchSnapshot(page, context, storyContext, currentBrowser)
         }
     },
+    tags: {
+        skip: ['test-skip'], // NOTE: This is overridden by the CI action storybook-chromatic.yml to include browser specific skipping
+    },
 } as TestRunnerConfig
 
 async function expectStoryToMatchSnapshot(

.stylelintrc.js

@@ -10,6 +10,7 @@ module.exports = {
                 // CSS Color Module Level 3 says currentColor, Level 4 candidate says currentcolor
                 // Sticking to Level 3 for now
                 camelCaseSvgKeywords: true,
+                ignoreKeywords: ['BlinkMacSystemFont'], // BlinkMacSystemFont MUST have this particular casing
             },
         ],
         // Sadly Safari only started supporting the range syntax of media queries in 2023, so let's switch to that

cypress/e2e/featureFlags.cy.ts

@@ -48,6 +48,7 @@ describe('Feature Flags', () => {
         cy.get('[data-attr=save-feature-flag]').first().click()
 
         // after save there should be a delete button
+        cy.get('[data-attr="more-button"]').click()
         cy.get('button[data-attr="delete-feature-flag"]').should('have.text', 'Delete feature flag')
 
         // make sure the data is there as expected after a page reload!
@@ -83,11 +84,13 @@ describe('Feature Flags', () => {
         cy.get('[data-attr=save-feature-flag]').first().click()
 
         // after save there should be a delete button
+        cy.get('[data-attr="more-button"]').click()
         cy.get('button[data-attr="delete-feature-flag"]').should('have.text', 'Delete feature flag')
 
         cy.clickNavMenu('featureflags')
         cy.get('[data-attr=feature-flag-table]').should('contain', name)
         cy.get(`[data-row-key=${name}]`).contains(name).click()
+        cy.get('[data-attr="more-button"]').click()
         cy.get('[data-attr=delete-feature-flag]').click()
         cy.get('.Toastify').contains('Undo').should('be.visible')
     })

cypress/e2e/insights.cy.ts

@@ -1,7 +1,8 @@
 import { urls } from 'scenes/urls'
-import { randomString } from '../support/random'
+
 import { decideResponse } from '../fixtures/api/decide'
-import { savedInsights, createInsight, insight } from '../productAnalytics'
+import { createInsight, insight, savedInsights } from '../productAnalytics'
+import { randomString } from '../support/random'
 
 // For tests related to trends please check trendsElements.js
 // insight tests were split up because Cypress was struggling with this many tests in one file🙈

frontend/src/exporter/ExportedInsight/ExportedInsight.tsx

@@ -1,18 +1,20 @@
-import { ChartDisplayType, InsightLogicProps, InsightModel } from '~/types'
+import './ExportedInsight.scss'
+
+import clsx from 'clsx'
 import { BindLogic } from 'kea'
-import { insightLogic } from 'scenes/insights/insightLogic'
 import { FilterBasedCardContent } from 'lib/components/Cards/InsightCard/InsightCard'
-import './ExportedInsight.scss'
-import { Logo } from '~/toolbar/assets/Logo'
+import { QueriesUnsupportedHere } from 'lib/components/Cards/InsightCard/QueriesUnsupportedHere'
+import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
 import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
-import { ExportOptions, ExportType } from '~/exporter/types'
-import clsx from 'clsx'
 import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
+import { insightLogic } from 'scenes/insights/insightLogic'
 import { isTrendsFilter } from 'scenes/insights/sharedUtils'
-import { isDataTableNode } from '~/queries/utils'
-import { QueriesUnsupportedHere } from 'lib/components/Cards/InsightCard/QueriesUnsupportedHere'
+
+import { ExportOptions, ExportType } from '~/exporter/types'
 import { Query } from '~/queries/Query/Query'
-import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
+import { isDataTableNode } from '~/queries/utils'
+import { Logo } from '~/toolbar/assets/Logo'
+import { ChartDisplayType, InsightLogicProps, InsightModel } from '~/types'
 
 export function ExportedInsight({
     insight,

frontend/src/exporter/Exporter.stories.tsx

@@ -1,9 +1,11 @@
-import { useEffect } from 'react'
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { Exporter } from './Exporter'
+import { useEffect } from 'react'
+
 import { dashboard } from '~/exporter/__mocks__/Exporter.mocks'
 import { ExportType } from '~/exporter/types'
 
+import { Exporter } from './Exporter'
+
 type Story = StoryObj<typeof Exporter>
 const meta: Meta<typeof Exporter> = {
     title: 'Exporter/Exporter',

frontend/src/exporter/Exporter.tsx

@@ -1,18 +1,21 @@
 import '~/styles'
 import './Exporter.scss'
-import { useEffect } from 'react'
-import { ExportedData, ExportType } from '~/exporter/types'
-import { DashboardPlacement } from '~/types'
-import { ExportedInsight } from '~/exporter/ExportedInsight/ExportedInsight'
-import { Logo } from '~/toolbar/assets/Logo'
-import { Dashboard } from 'scenes/dashboard/Dashboard'
-import { useResizeObserver } from 'lib/hooks/useResizeObserver'
-import { Link } from 'lib/lemon-ui/Link'
+
 import clsx from 'clsx'
 import { useValues } from 'kea'
-import { teamLogic } from 'scenes/teamLogic'
+import { useResizeObserver } from 'lib/hooks/useResizeObserver'
+import { Link } from 'lib/lemon-ui/Link'
+import { useEffect } from 'react'
+import { Dashboard } from 'scenes/dashboard/Dashboard'
 import { SessionRecordingPlayer } from 'scenes/session-recordings/player/SessionRecordingPlayer'
 import { SessionRecordingPlayerMode } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
+import { teamLogic } from 'scenes/teamLogic'
+
+import { ExportedInsight } from '~/exporter/ExportedInsight/ExportedInsight'
+import { ExportedData, ExportType } from '~/exporter/types'
+import { Logo } from '~/toolbar/assets/Logo'
+import { DashboardPlacement } from '~/types'
+
 import { exporterViewLogic } from './exporterViewLogic'
 
 export function Exporter(props: ExportedData): JSX.Element {

frontend/src/exporter/__mocks__/Exporter.mocks.tsx

@@ -1,3 +1,5 @@
+import { FunnelLayout, ShownAsValue } from 'lib/constants'
+
 import {
     ChartDisplayType,
     DashboardTile,
@@ -7,7 +9,6 @@ import {
     InsightShortId,
     InsightType,
 } from '~/types'
-import { FunnelLayout, ShownAsValue } from 'lib/constants'
 
 export const dashboard: DashboardType = {
     id: 1,

frontend/src/exporter/exporterViewLogic.ts

@@ -1,7 +1,7 @@
 import { kea, path, props, selectors } from 'kea'
-import { ExportedData } from './types'
 
 import type { exporterViewLogicType } from './exporterViewLogicType'
+import { ExportedData } from './types'
 
 // This is a simple logic that is mounted by the Exporter view and then can be found by any nested callers
 // This simplifies passing props everywhere.

frontend/src/exporter/index.tsx

@@ -1,10 +1,13 @@
 import '~/styles'
 import './Exporter.scss'
+
 import { createRoot } from 'react-dom/client'
-import { loadPostHogJS } from '~/loadPostHogJS'
-import { initKea } from '~/initKea'
+
 import { Exporter } from '~/exporter/Exporter'
 import { ExportedData } from '~/exporter/types'
+import { initKea } from '~/initKea'
+import { loadPostHogJS } from '~/loadPostHogJS'
+
 import { ErrorBoundary } from '../layout/ErrorBoundary'
 
 // Disable tracking for all exports and embeds.

frontend/src/globals.d.ts

@@ -1,4 +1,5 @@
 import posthog from 'posthog-js'
+
 import { ExportedData } from '~/exporter/types'
 
 declare global {

frontend/src/index.tsx

@@ -1,16 +1,14 @@
 import '~/styles'
 
-import { createRoot } from 'react-dom/client'
 import { getContext } from 'kea'
-
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+import { createRoot } from 'react-dom/client'
 import { App } from 'scenes/App'
-import { initKea } from './initKea'
 
-import { loadPostHogJS } from './loadPostHogJS'
+import { initKea } from './initKea'
 import { ErrorBoundary } from './layout/ErrorBoundary'
-
-import { PostHogProvider } from 'posthog-js/react'
-import posthog from 'posthog-js'
+import { loadPostHogJS } from './loadPostHogJS'
 
 loadPostHogJS()
 initKea()

frontend/src/initKea.ts

@@ -1,13 +1,13 @@
 import { KeaPlugin, resetContext } from 'kea'
+import { formsPlugin } from 'kea-forms'
+import { loadersPlugin } from 'kea-loaders'
 import { localStoragePlugin } from 'kea-localstorage'
 import { routerPlugin } from 'kea-router'
-import { loadersPlugin } from 'kea-loaders'
-import { windowValuesPlugin } from 'kea-window-values'
-import { identifierToHuman } from 'lib/utils'
+import { subscriptionsPlugin } from 'kea-subscriptions'
 import { waitForPlugin } from 'kea-waitfor'
+import { windowValuesPlugin } from 'kea-window-values'
 import { lemonToast } from 'lib/lemon-ui/lemonToast'
-import { subscriptionsPlugin } from 'kea-subscriptions'
-import { formsPlugin } from 'kea-forms'
+import { identifierToHuman } from 'lib/utils'
 
 /*
 Actions for which we don't want to show error alerts,

frontend/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -1,8 +1,9 @@
-import { getCurrentHub, ErrorBoundary as SentryErrorBoundary } from '@sentry/react'
+import './ErrorBoundary.scss'
+
+import { ErrorBoundary as SentryErrorBoundary, getCurrentHub } from '@sentry/react'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'
 import { IconArrowDropDown } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import './ErrorBoundary.scss'
 
 export function ErrorBoundary({ children }: { children: React.ReactElement }): JSX.Element {
     const isSentryInitialized = !!getCurrentHub().getClient()

frontend/src/layout/ErrorNetwork.tsx

@@ -1,5 +1,5 @@
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { IconRefresh } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
 
 export function ErrorNetwork(): JSX.Element {
     return (

frontend/src/layout/ErrorProjectUnavailable.tsx

@@ -1,5 +1,6 @@
-import { PageHeader } from 'lib/components/PageHeader'
 import { useValues } from 'kea'
+import { PageHeader } from 'lib/components/PageHeader'
+
 import { organizationLogic } from '../scenes/organizationLogic'
 
 export function ErrorProjectUnavailable(): JSX.Element {

frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.stories.tsx

@@ -1,9 +1,11 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
-import { FeaturePreviewsModal as FeaturePreviewsModalComponent } from './FeaturePreviewsModal'
-import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
+import { FeatureFlagKey } from 'lib/constants'
 import { EarlyAccessFeature } from 'posthog-js'
+
+import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
+
 import { CONSTRAINED_PREVIEWS } from './featurePreviewsLogic'
-import { FeatureFlagKey } from 'lib/constants'
+import { FeaturePreviewsModal as FeaturePreviewsModalComponent } from './FeaturePreviewsModal'
 
 interface StoryProps {
     earlyAccessFeatures: EarlyAccessFeature[]