Merge branch 'master' into trends-thingies

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('test@posthog.com').should('have.value', 'test@posthog.com')
         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: 'test@posthog.com',
             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/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/scenes/authentication/signup/signupForm/panels/SignupPanel2.tsx

@@ -17,10 +17,10 @@ export function SignupPanel2(): JSX.Element | null {
     return (
         <div className="space-y-4 Signup__panel__2">
             <Form logic={signupLogic} formKey="signupPanel2" className="space-y-4" enableFormOnSubmit>
-                <LemonField name="first_name" label="Your name">
+                <LemonField name="name" label="Your name">
                     <LemonInput
                         className="ph-ignore-input"
-                        data-attr="signup-first-name"
+                        data-attr="signup-name"
                         placeholder="Jane Doe"
                         disabled={isSignupPanel2Submitting}
                     />

frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts

@@ -6,6 +6,7 @@ import { urlToAction } from 'kea-router'
 import api from 'lib/api'
 import { CLOUD_HOSTNAMES, FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import posthog from 'posthog-js'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { urls } from 'scenes/urls'
 
@@ -22,7 +23,7 @@ export interface AccountResponse {
 export interface SignupForm {
     email: string
     password: string
-    first_name: string
+    name: string
     organization_name: string
     role_at_organization: string
     referral_source: string
@@ -78,19 +79,27 @@ export const signupLogic = kea<signupLogicType>([
             alwaysShowErrors: true,
             showErrorsOnTouch: true,
             defaults: {
-                first_name: '',
+                name: '',
                 organization_name: '',
                 role_at_organization: '',
                 referral_source: '',
             } as SignupForm,
-            errors: ({ first_name, organization_name }) => ({
-                first_name: !first_name ? 'Please enter your name' : undefined,
-                organization_name: !organization_name ? 'Please enter your organization name' : undefined,
+            errors: ({ name }) => ({
+                name: !name ? 'Please enter your name' : undefined,
             }),
             submit: async (payload, breakpoint) => {
                 breakpoint()
                 try {
-                    const res = await api.create('api/signup/', { ...values.signupPanel1, ...payload })
+                    const res = await api.create('api/signup/', {
+                        ...values.signupPanel1,
+                        ...payload,
+                        first_name: payload.name.split(' ')[0],
+                        last_name: payload.name.split(' ')[1] || undefined,
+                        organization_name: payload.organization_name || undefined,
+                    })
+                    if (!payload.organization_name) {
+                        posthog.capture('sign up organization name not provided')
+                    }
                     location.href = res.redirect_url || '/'
                 } catch (e) {
                     actions.setSignupPanel2ManualErrors({
@@ -142,7 +151,7 @@ export const signupLogic = kea<signupLogicType>([
                         email,
                     })
                     actions.setSignupPanel2Values({
-                        first_name: 'X',
+                        name: 'X',
                         organization_name: 'Y',
                     })
                     actions.submitSignupPanel2()

frontend/src/scenes/onboarding/OnboardingReverseProxy.tsx

@@ -46,12 +46,7 @@ const proxyDocs = [
 
 export const OnboardingReverseProxy = ({ stepKey }: { stepKey: OnboardingStepKey }): JSX.Element => {
     return (
-        <OnboardingStep
-            title="Reverse proxy (optional)"
-            stepKey={stepKey}
-            continueText="I've already done this"
-            showSkip
-        >
+        <OnboardingStep title="Reverse proxy (optional)" stepKey={stepKey} showSkip>
             <div className="mb-6 mt-6">
                 <p>A reverse proxy allows you to send events to PostHog Cloud using your own domain.</p>
                 <p>

frontend/src/scenes/sceneLogic.ts

@@ -202,7 +202,7 @@ export const sceneLogic = kea<sceneLogicType>([
                         !teamLogic.values.currentTeam.is_demo &&
                         !removeProjectIdIfPresent(location.pathname).startsWith(urls.onboarding('')) &&
                         !removeProjectIdIfPresent(location.pathname).startsWith(urls.products()) &&
-                        !removeProjectIdIfPresent(location.pathname).startsWith(urls.settings())
+                        !removeProjectIdIfPresent(location.pathname).startsWith('/settings')
                     ) {
                         const allProductUrls = Object.values(productUrlMapping).flat()
                         if (