Merge branch 'master' into fix-async-calculation

cypress/e2e/before-onboarding.cy.ts

@@ -0,0 +1,35 @@
+describe('Before Onboarding', () => {
+    before(() => {
+        cy.request({
+            method: 'PATCH',
+            url: '/api/projects/1/',
+            body: { completed_snippet_onboarding: false },
+            headers: { Authorization: 'Bearer e2e_demo_api_key' },
+        })
+    })
+
+    after(() => {
+        cy.request({
+            method: 'PATCH',
+            url: '/api/projects/1/',
+            body: { completed_snippet_onboarding: true },
+            headers: { Authorization: 'Bearer e2e_demo_api_key' },
+        })
+    })
+
+    it('Navigate to /products when a product has not been set up', () => {
+        cy.visit('/project/1/data-management/events')
+
+        cy.get('[data-attr=top-bar-name] > span').contains('Products')
+    })
+
+    it('Navigate to a settings page even when a product has not been set up', () => {
+        cy.visit('/settings/user')
+
+        cy.get('[data-attr=top-bar-name] > span').contains('User')
+
+        cy.visit('/settings/organization')
+
+        cy.get('[data-attr=top-bar-name] > span').contains('Organization')
+    })
+})

cypress/e2e/onboarding.cy.ts

@@ -1,4 +1,3 @@
-import { urls } from 'scenes/urls'
 import { decideResponse } from '../fixtures/api/decide'
 
 describe('Onboarding', () => {

cypress/e2e/signup.cy.ts

@@ -12,7 +12,7 @@ describe('Signup', () => {
         cy.get('[data-attr=signup-email]').type('[email protected]').should('have.value', '[email protected]')
         cy.get('[data-attr=password]').type('12345678').should('have.value', '12345678')
         cy.get('[data-attr=signup-start]').click()
-        cy.get('[data-attr=signup-first-name]').type('Jane').should('have.value', 'Jane')
+        cy.get('[data-attr=signup-name]').type('Jane Doe').should('have.value', 'Jane Doe')
         cy.get('[data-attr=signup-organization-name]').type('Hogflix Movies').should('have.value', 'Hogflix Movies')
         cy.get('[data-attr=signup-role-at-organization]').click()
         cy.get('.Popover li:first-child').click()
@@ -39,18 +39,53 @@ describe('Signup', () => {
         cy.get('.text-danger').should('not.contain', 'Password must be at least 8 characters') // Validation error removed on keystroke
     })
 
-    it('Can create user account', () => {
+    it('Can create user account with first name, last name and organization name', () => {
+        cy.intercept('POST', '/api/signup/').as('signupRequest')
+
         const email = `new_user+${Math.floor(Math.random() * 10000)}@posthog.com`
         cy.get('[data-attr=signup-email]').type(email).should('have.value', email)
         cy.get('[data-attr=password]').type('12345678').should('have.value', '12345678')
         cy.get('[data-attr=signup-start]').click()
-        cy.get('[data-attr=signup-first-name]').type('Alice').should('have.value', 'Alice')
+        cy.get('[data-attr=signup-name]').type('Alice Bob').should('have.value', 'Alice Bob')
         cy.get('[data-attr=signup-organization-name]').type('Hogflix SpinOff').should('have.value', 'Hogflix SpinOff')
         cy.get('[data-attr=signup-role-at-organization]').click()
         cy.get('.Popover li:first-child').click()
         cy.get('[data-attr=signup-role-at-organization]').contains('Engineering')
         cy.get('[data-attr=signup-submit]').click()
 
+        cy.wait('@signupRequest').then((interception) => {
+            expect(interception.request.body).to.have.property('first_name')
+            expect(interception.request.body.first_name).to.equal('Alice')
+            expect(interception.request.body).to.have.property('last_name')
+            expect(interception.request.body.last_name).to.equal('Bob')
+            expect(interception.request.body).to.have.property('organization_name')
+            expect(interception.request.body.organization_name).to.equal('Hogflix SpinOff')
+        })
+
+        // lazy regex for a guid
+        cy.location('pathname').should('match', /\/verify_email\/[a-zA-Z0-9_.-]*/)
+    })
+
+    it('Can create user account with just a first name', () => {
+        cy.intercept('POST', '/api/signup/').as('signupRequest')
+
+        const email = `new_user+${Math.floor(Math.random() * 10000)}@posthog.com`
+        cy.get('[data-attr=signup-email]').type(email).should('have.value', email)
+        cy.get('[data-attr=password]').type('12345678').should('have.value', '12345678')
+        cy.get('[data-attr=signup-start]').click()
+        cy.get('[data-attr=signup-name]').type('Alice').should('have.value', 'Alice')
+        cy.get('[data-attr=signup-role-at-organization]').click()
+        cy.get('.Popover li:first-child').click()
+        cy.get('[data-attr=signup-role-at-organization]').contains('Engineering')
+        cy.get('[data-attr=signup-submit]').click()
+
+        cy.wait('@signupRequest').then((interception) => {
+            expect(interception.request.body).to.have.property('first_name')
+            expect(interception.request.body.first_name).to.equal('Alice')
+            expect(interception.request.body).to.not.have.property('last_name')
+            expect(interception.request.body).to.not.have.property('organization_name')
+        })
+
         // lazy regex for a guid
         cy.location('pathname').should('match', /\/verify_email\/[a-zA-Z0-9_.-]*/)
     })
@@ -74,7 +109,7 @@ describe('Signup', () => {
         cy.get('.Toastify [data-attr="error-toast"]').contains('Inactive social login session.')
     })
 
-    it.only('Shows redirect notice if redirecting for maintenance', () => {
+    it('Shows redirect notice if redirecting for maintenance', () => {
         cy.intercept('**/decide/*', (req) =>
             req.reply(
                 decideResponse({

cypress/support/e2e.ts

@@ -61,10 +61,15 @@ beforeEach(() => {
             email: '[email protected]',
             password: '12345678',
         })
-        cy.visit('/insights')
-        cy.wait('@getInsights').then(() => {
-            cy.get('.saved-insights tr').should('exist')
-        })
+
+        if (Cypress.spec.name.includes('before-onboarding')) {
+            cy.visit('/?no-preloaded-app-context=true')
+        } else {
+            cy.visit('/insights')
+            cy.wait('@getInsights').then(() => {
+                cy.get('.saved-insights tr').should('exist')
+            })
+        }
     }
 })
 

ee/api/debug_ch_queries.py

@@ -15,7 +15,7 @@
 
 class DebugCHQueries(viewsets.ViewSet):
     """
-    Show recent queries for this user
+    List recent CH queries initiated by this user.
     """
 
     def _get_path(self, query: str) -> Optional[str]:
@@ -30,16 +30,21 @@ def list(self, request):
 
         response = sync_execute(
             """
-            select
-                query, query_start_time, exception, toInt8(type), query_duration_ms
-            from clusterAllReplicas(%(cluster)s, system, query_log)
-            where
-                query LIKE %(query)s and
-                query_start_time > %(start_time)s and
-                type != 1 and
-                query not like %(not_query)s
-            order by query_start_time desc
-            limit 100""",
+            SELECT
+                query_id, argMax(query, type), argMax(query_start_time, type), argMax(exception, type),
+                argMax(query_duration_ms, type), max(type) AS status
+            FROM (
+                SELECT
+                    query_id, query, query_start_time, exception, query_duration_ms, toInt8(type) AS type
+                FROM clusterAllReplicas(%(cluster)s, system, query_log)
+                WHERE
+                    query LIKE %(query)s AND
+                    query NOT LIKE %(not_query)s AND
+                    query_start_time > %(start_time)s
+                ORDER BY query_start_time desc
+                LIMIT 100
+            )
+            GROUP BY query_id""",
             {
                 "query": f"/* user_id:{request.user.pk} %",
                 "start_time": (now() - relativedelta(minutes=10)).timestamp(),
@@ -50,12 +55,13 @@ def list(self, request):
         return Response(
             [
                 {
-                    "query": resp[0],
-                    "timestamp": resp[1],
-                    "exception": resp[2],
-                    "type": resp[3],
+                    "query_id": resp[0],
+                    "query": resp[1],
+                    "timestamp": resp[2],
+                    "exception": resp[3],
                     "execution_time": resp[4],
-                    "path": self._get_path(resp[0]),
+                    "status": resp[5],
+                    "path": self._get_path(resp[1]),
                 }
                 for resp in response
             ]

ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap

@@ -1036,7 +1036,7 @@ exports[`replay/transform transform can process unknown types without error 1`]
                   {
                     "attributes": {
                       "data-rrweb-id": 12345,
-                      "style": "background-color: #f3f4ef;color: #35373e;width: 100px;height: 30px;position: fixed;left: 25px;top: 42px;align-items: center;justify-content: center;display: flex;",
+                      "style": "background-color: #f3f4ef;background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg==");background-size: auto;background-repeat: unset;color: #35373e;width: 100px;height: 30px;position: fixed;left: 25px;top: 42px;align-items: center;justify-content: center;display: flex;",
                     },
                     "childNodes": [
                       {
@@ -7035,7 +7035,7 @@ exports[`replay/transform transform inputs open keyboard custom event 1`] = `
         "node": {
           "attributes": {
             "data-rrweb-id": 10,
-            "style": "background-color: #f3f4ef;color: #35373e;width: 100vw;height: 150px;bottom: 0;position: fixed;align-items: center;justify-content: center;display: flex;",
+            "style": "background-color: #f3f4ef;background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg==");background-size: auto;background-repeat: unset;color: #35373e;width: 100vw;height: 150px;bottom: 0;position: fixed;align-items: center;justify-content: center;display: flex;",
           },
           "childNodes": [
             {
@@ -7145,7 +7145,7 @@ exports[`replay/transform transform inputs placeholder - $inputType - $value 1`]
                 {
                   "attributes": {
                     "data-rrweb-id": 12365,
-                    "style": "background-color: #f3f4ef;color: #35373e;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
+                    "style": "background-color: #f3f4ef;background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg==");background-size: auto;background-repeat: unset;color: #35373e;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
                   },
                   "childNodes": [
                     {
@@ -8295,7 +8295,7 @@ exports[`replay/transform transform inputs web_view - $inputType - $value 1`] =
                 {
                   "attributes": {
                     "data-rrweb-id": 12365,
-                    "style": "background-color: #f3f4ef;color: #35373e;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
+                    "style": "background-color: #f3f4ef;background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg==");background-size: auto;background-repeat: unset;color: #35373e;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
                   },
                   "childNodes": [
                     {
@@ -8431,7 +8431,7 @@ exports[`replay/transform transform inputs web_view with URL 1`] = `
                 {
                   "attributes": {
                     "data-rrweb-id": 12365,
-                    "style": "background-color: #f3f4ef;color: #35373e;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
+                    "style": "background-color: #f3f4ef;background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg==");background-size: auto;background-repeat: unset;color: #35373e;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
                   },
                   "childNodes": [
                     {
@@ -8715,7 +8715,7 @@ exports[`replay/transform transform omitting x and y is equivalent to setting th
                   {
                     "attributes": {
                       "data-rrweb-id": 12345,
-                      "style": "background-color: #f3f4ef;color: #35373e;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
+                      "style": "background-color: #f3f4ef;background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg==");background-size: auto;background-repeat: unset;color: #35373e;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;align-items: center;justify-content: center;display: flex;",
                     },
                     "childNodes": [
                       {

ee/frontend/mobile-replay/transformer/transformers.ts

@@ -11,6 +11,7 @@ import {
 } from '@rrweb/types'
 import { captureMessage } from '@sentry/react'
 import { isObject } from 'lib/utils'
+import { PLACEHOLDER_SVG_DATA_IMAGE_URL } from 'scenes/session-recordings/player/rrweb'
 
 import {
     attributes,
@@ -277,6 +278,9 @@ export function makePlaceholderElement(
                     horizontalAlign: 'center',
                     backgroundColor: wireframe.style?.backgroundColor || BACKGROUND,
                     color: wireframe.style?.color || FOREGROUND,
+                    backgroundImage: PLACEHOLDER_SVG_DATA_IMAGE_URL,
+                    backgroundSize: 'auto',
+                    backgroundRepeat: 'unset',
                     ...context.styleOverride,
                 }),
                 'data-rrweb-id': wireframe.id,

ee/frontend/mobile-replay/transformer/types.ts

@@ -14,4 +14,4 @@ export interface ConversionContext {
 // StyleOverride is defined here and not in the schema
 // because these are overrides that the transformer is allowed to make
 // not that clients are allowed to request
-export type StyleOverride = MobileStyles & { bottom?: true }
+export type StyleOverride = MobileStyles & { bottom?: true; backgroundRepeat?: 'no-repeat' | 'unset' }

ee/frontend/mobile-replay/transformer/wireframeStyle.ts

@@ -229,10 +229,13 @@ export function makeBackgroundStyles(wireframe: wireframe, styleOverride?: Style
     }
 
     if (combinedStyles.backgroundImage) {
+        const backgroundImageURL = combinedStyles.backgroundImage.startsWith('url(')
+            ? combinedStyles.backgroundImage
+            : `url('${dataURIOrPNG(combinedStyles.backgroundImage)}')`
         styleParts = styleParts.concat([
-            `background-image: url('${dataURIOrPNG(combinedStyles.backgroundImage)}')`,
+            `background-image: ${backgroundImageURL}`,
             `background-size: ${combinedStyles.backgroundSize || 'contain'}`,
-            'background-repeat: no-repeat',
+            `background-repeat: ${combinedStyles.backgroundRepeat || 'no-repeat'}`,
         ])
     }
 

frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx

@@ -25,7 +25,11 @@ export interface Query {
     timestamp: string
     query: string
     exception: string
-    type: number
+    /**
+     * 1 means running, 2 means finished, 3 means errored before execution, 4 means errored during execution.
+     *
+     * @see `type` column in https://clickhouse.com/docs/en/operations/system-tables/query_log */
+    status: 1 | 2 | 3 | 4
     execution_time: number
     path: string
 }
@@ -146,9 +150,13 @@ function DebugCHQueries(): JSX.Element {
                             )
                         },
                     },
+
                     {
                         title: 'Duration',
                         render: function exec(_, item) {
+                            if (item.status === 1) {
+                                return 'In progress…'
+                            }
                             return <>{Math.round((item.execution_time + Number.EPSILON) * 100) / 100} ms</>
                         },
                         align: 'right',

frontend/src/lib/components/DatabaseTableTree/DatabaseTableTree.tsx

@@ -15,8 +15,9 @@ export type TreeItem = TreeItemFolder | TreeItemLeaf
 
 export interface TreeItemFolder {
     name: string
-    items: TreeItemLeaf[]
+    items: TreeItem[]
     emptyLabel?: JSX.Element
+    isLoading?: boolean
 }
 
 export interface TreeItemLeaf {
@@ -33,7 +34,10 @@ export function DatabaseTableTree({
     ...props
 }: TreeProps): JSX.Element {
     return (
-        <ul className={`bg-bg-light p-4 rounded-lg ${className}`} {...props}>
+        <ul
+            className={`bg-bg-light ${depth == 1 ? 'p-4 overflow-y-scroll h-full' : ''} rounded-lg ${className}`}
+            {...props}
+        >
             {items.map((item, index) => {
                 if ('items' in item) {
                     return (

frontend/src/lib/components/DatabaseTableTree/TreeRow.tsx

@@ -1,6 +1,7 @@
 import './TreeRow.scss'
 
 import { IconChevronDown } from '@posthog/icons'
+import { Spinner } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { IconChevronRight } from 'lib/lemon-ui/icons'
 import { useCallback, useState } from 'react'
@@ -58,7 +59,7 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderR
                         depth={depth + 1}
                         onSelectRow={onClick}
                         selectedRow={selectedRow}
-                        style={{ marginLeft: `${2 * depth}rem`, padding: 0 }}
+                        style={{ marginLeft: `2rem`, padding: 0 }}
                     />
                 ) : (
                     <div
@@ -67,7 +68,13 @@ export function TreeFolderRow({ item, depth, onClick, selectedRow }: TreeFolderR
                             marginLeft: `${2 * depth}rem`,
                         }}
                     >
-                        {emptyLabel ? emptyLabel : <span className="text-muted">No tables found</span>}
+                        {item.isLoading ? (
+                            <Spinner className="mt-2" />
+                        ) : emptyLabel ? (
+                            emptyLabel
+                        ) : (
+                            <span className="text-muted">No tables found</span>
+                        )}
                     </div>
                 ))}
         </li>