Merge branch 'master' into chore/Django-4.1-upgrade

# Conflicts:
#	requirements.txt

.eslintrc.js

@@ -12,7 +12,7 @@ const globals = {
 }
 
 module.exports = {
-    ignorePatterns: ['node_modules', 'plugin-server'],
+    ignorePatterns: ['node_modules', 'plugin-server', 'cypress'],
     env,
     settings: {
         react: {
@@ -27,12 +27,12 @@ module.exports = {
     },
     extends: [
         'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-type-checked',
         'plugin:react/recommended',
         'plugin:eslint-comments/recommended',
         'plugin:storybook/recommended',
-        'prettier',
         'plugin:compat/recommended',
+        'prettier',
     ],
     globals,
     parser: '@typescript-eslint/parser',
@@ -42,12 +42,25 @@ module.exports = {
         },
         ecmaVersion: 2018,
         sourceType: 'module',
+        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],
@@ -72,7 +85,27 @@ module.exports = {
         '@typescript-eslint/no-empty-function': 'off',
         '@typescript-eslint/no-inferrable-types': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
-        '@typescript-eslint/no-non-null-assertion': 'error',
+        '@typescript-eslint/require-await': 'off', // TODO: Enable - this rule is useful, but doesn't have an autofix
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-enum-comparison': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        '@typescript-eslint/no-unsafe-return': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/restrict-template-expressions': 'off',
+        '@typescript-eslint/explicit-function-return-type': [
+            'error',
+            {
+                allowExpressions: true,
+            },
+        ],
+        '@typescript-eslint/explicit-module-boundary-types': [
+            'error',
+            {
+                allowArgumentsExplicitlyTypedAsAny: true,
+            },
+        ],
         curly: 'error',
         'no-restricted-imports': [
             'error',
@@ -91,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.',
+                    },
                 ],
             },
         ],
@@ -210,6 +248,10 @@ module.exports = {
                         element: 'a',
                         message: 'use <Link> instead',
                     },
+                    {
+                        element: 'Alert',
+                        message: 'use <LemonBanner> instead',
+                    },
                 ],
             },
         ],
@@ -230,43 +272,37 @@ module.exports = {
                 ...globals,
                 given: 'readonly',
             },
+            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: {
-                '@typescript-eslint/no-explicit-any': ['off'],
-                '@typescript-eslint/ban-types': ['off'],
+                'no-restricted-imports': 'off',
+                '@typescript-eslint/ban-types': 'off',
+                'simple-import-sort/imports': 'off',
+                'simple-import-sort/exports': 'off',
             },
         },
         {
-            // enable the rule specifically for TypeScript files
-            files: ['*.ts', '*.tsx'],
+            files: ['frontend/src/scenes/notebooks/Nodes/*'], // Notebooks code weirdly relies on its order of sorting
             rules: {
-                '@typescript-eslint/no-explicit-any': ['off'],
-                '@typescript-eslint/explicit-function-return-type': [
-                    'error',
-                    {
-                        allowExpressions: true,
-                    },
-                ],
-                '@typescript-eslint/explicit-module-boundary-types': [
-                    'error',
-                    {
-                        allowArgumentsExplicitlyTypedAsAny: true,
-                    },
-                ],
+                'simple-import-sort/imports': 'off',
+                'simple-import-sort/exports': 'off',
             },
         },
         {
             files: ['*.js'],
             rules: {
                 '@typescript-eslint/no-var-requires': 'off',
+                '@typescript-eslint/explicit-function-return-type': 'off',
+                '@typescript-eslint/explicit-module-boundary-types': 'off',
             },
         },
         {
             files: 'eslint-rules/**/*',
-            extends: ['eslint:recommended'],
             rules: {
                 '@typescript-eslint/no-var-requires': 'off',
             },

.github/workflows/ci-frontend.yml

@@ -2,10 +2,6 @@ name: Frontend CI
 
 on:
     pull_request:
-    # NOTE: by running on master, aside from highlight issues on master it also
-    # ensures we have e.g. node modules cached for master, which can then be
-    # used for branches. See https://github.com/actions/cache#cache-scopes for
-    # scope details.
     push:
         branches:
             - master
@@ -15,51 +11,112 @@ concurrency:
     cancel-in-progress: true
 
 jobs:
+    # Job to decide if we should run frontend ci
+    # See https://github.com/dorny/paths-filter#conditional-execution for more details
+    # we skip each step individually, so   they are still reported as success
+    # because many of them are required for CI checks to be green
+    changes:
+        runs-on: ubuntu-latest
+        timeout-minutes: 5
+        name: Determine need to run frontend checks
+        outputs:
+            frontend: ${{ steps.filter.outputs.frontend }}
+        steps:
+            # For pull requests it's not necessary to check out the code, but we
+            # also want this to run on master, so we need to check out
+            - uses: actions/checkout@v3
+
+            - uses: dorny/paths-filter@v2
+              id: filter
+              with:
+                  filters: |
+                      frontend:
+                        # Avoid running frontend tests for irrelevant changes
+                        # NOTE: we are at risk of missing a dependency here. 
+                        - 'bin/**'
+                        - 'frontend/**'
+                        # Make sure we run if someone is explicitly change the workflow
+                        - .github/workflows/ci-frontend.yml
+                        # various JS config files
+                        - .eslintrc.js
+                        - .prettier*
+                        - babel.config.js
+                        - jest.*.ts
+                        - tsconfig.json
+                        - tsconfig.*.json
+                        - webpack.config.js
+                        - postcss.config.js
+                        - stylelint*
+
     frontend-code-quality:
         name: Code quality checks
+        needs: changes
         # kea typegen and typescript:check need some more oomph
         runs-on: ubuntu-latest
         steps:
+            # we need at least one thing to run to make sure we include everything for required jobs
             - uses: actions/checkout@v3
 
             - name: Install pnpm
+              if: needs.changes.outputs.frontend == 'true'
               uses: pnpm/action-setup@v2
               with:
                   version: 8.x.x
 
             - name: Set up Node.js
-              uses: buildjet/setup-node@v3
+              if: needs.changes.outputs.frontend == 'true'
+              uses: actions/setup-node@v3
               with:
                   node-version: 18
 
             - name: Get pnpm cache directory path
+              if: needs.changes.outputs.frontend == 'true'
               id: pnpm-cache-dir
               run: echo "PNPM_STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
             - uses: actions/cache@v3
+              if: needs.changes.outputs.frontend == 'true'
               id: pnpm-cache
               with:
                   path: ${{ steps.pnpm-cache-dir.outputs.PNPM_STORE_PATH }}
                   key: ${{ runner.os }}-pnpm-cypress-${{ hashFiles('pnpm-lock.yaml') }}
                   restore-keys: ${{ runner.os }}-pnpm-cypress-
 
             - name: Install package.json dependencies with pnpm
+              if: needs.changes.outputs.frontend == 'true'
               run: pnpm install --frozen-lockfile
 
             - name: Check formatting with prettier
+              if: needs.changes.outputs.frontend == 'true'
               run: pnpm prettier:check
 
-            - name: Lint with ESLint
-              run: pnpm eslint
+            - name: Lint with Stylelint
+              if: needs.changes.outputs.frontend == 'true'
+              run: pnpm lint:css
 
             - name: Generate logic types and run typescript with strict
+              if: needs.changes.outputs.frontend == 'true'
               run: pnpm typegen:write && pnpm typescript:check
 
+            - name: Lint with ESLint
+              if: needs.changes.outputs.frontend == 'true'
+              run: pnpm lint:js
+
             - name: Check if "schema.json" is up to date
+              if: needs.changes.outputs.frontend == 'true'
               run: pnpm schema:build:json && git diff --exit-code
 
+            - name: Check toolbar bundle size
+              if: needs.changes.outputs.frontend == 'true'
+              uses: preactjs/compressed-size-action@v2
+              with:
+                  build-script: 'build'
+                  compression: 'none'
+                  pattern: 'frontend/dist/toolbar.js'
+
     jest:
         runs-on: ubuntu-latest
+        needs: changes
         name: Jest test (${{ matrix.chunk }})
 
         strategy:
@@ -69,24 +126,29 @@ jobs:
                 chunk: [1, 2, 3]
 
         steps:
+            # we need at least one thing to run to make sure we include everything for required jobs
             - uses: actions/checkout@v3
 
             - name: Install pnpm
+              if: needs.changes.outputs.frontend == 'true'
               uses: pnpm/action-setup@v2
               with:
                   version: 8.x.x
 
             - name: Set up Node.js
-              uses: buildjet/setup-node@v3
+              if: needs.changes.outputs.frontend == 'true'
+              uses: actions/setup-node@v3
               with:
                   node-version: 18
                   cache: pnpm
 
             - name: Install package.json dependencies with pnpm
+              if: needs.changes.outputs.frontend == 'true'
               run: pnpm install --frozen-lockfile
 
             - name: Test with Jest
               # set maxWorkers or Jest only uses 1 CPU in GitHub Actions
               run: pnpm test:unit --maxWorkers=2 --shard=${{ matrix.chunk }}/3
+              if: needs.changes.outputs.frontend == 'true'
               env:
                   NODE_OPTIONS: --max-old-space-size=6144

.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
 

.run/Dev.run.xml

@@ -0,0 +1,9 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Dev" type="CompoundRunConfigurationType">
+    <toRun name="PostHog" type="Python.DjangoServer" />
+    <toRun name="Frontend" type="js.build_tools.npm" />
+    <toRun name="Plugin Server" type="js.build_tools.npm" />
+    <toRun name="Celery" type="PythonConfigurationType" />
+    <method v="2" />
+  </configuration>
+</component>

.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.