Merge branch 'master' into limit-context-aware-queries

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

@@ -121,6 +121,22 @@ export type MobileStyles = {
      * @description maps to CSS font-family. Accepts any valid CSS font-family value.
      */
     fontFamily?: string
+    /**
+     * @description maps to CSS padding-left. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px
+     */
+    paddingLeft?: string | number
+    /**
+     * @description maps to CSS padding-right. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px
+     */
+    paddingRight?: string | number
+    /**
+     * @description maps to CSS padding-top. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px
+     */
+    paddingTop?: string | number
+    /**
+     * @description maps to CSS padding-bottom. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px
+     */
+    paddingBottom?: string | number
 }
 
 type wireframeBase = {

ee/frontend/mobile-replay/schema/mobile/rr-mobile-schema.json

@@ -334,6 +334,22 @@
                     "enum": ["left", "right", "center"],
                     "type": "string"
                 },
+                "paddingBottom": {
+                    "description": "maps to CSS padding-bottom. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px",
+                    "type": ["string", "number"]
+                },
+                "paddingLeft": {
+                    "description": "maps to CSS padding-left. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px",
+                    "type": ["string", "number"]
+                },
+                "paddingRight": {
+                    "description": "maps to CSS padding-right. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px",
+                    "type": ["string", "number"]
+                },
+                "paddingTop": {
+                    "description": "maps to CSS padding-top. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px",
+                    "type": ["string", "number"]
+                },
                 "verticalAlign": {
                     "description": "vertical alignment with respect to its parent",
                     "enum": ["top", "bottom", "center"],

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

@@ -58,6 +58,7 @@ describe('replay/transform', () => {
         beforeEach(async () => {
             posthogEEModule = await posthogEE()
         })
+
         test('can process unknown types without error', () => {
             expect(
                 posthogEEModule.mobileReplay?.transformToWeb([
@@ -535,6 +536,37 @@ describe('replay/transform', () => {
         })
 
         describe('inputs', () => {
+            test('input gets 0 padding by default but can be overridden', () => {
+                expect(
+                    posthogEEModule.mobileReplay?.transformEventToWeb({
+                        type: 2,
+                        data: {
+                            wireframes: [
+                                {
+                                    id: 12359,
+                                    width: 100,
+                                    height: 30,
+                                    type: 'input',
+                                    inputType: 'text',
+                                },
+                                {
+                                    id: 12361,
+                                    width: 100,
+                                    height: 30,
+                                    type: 'input',
+                                    inputType: 'text',
+                                    style: {
+                                        paddingLeft: '16px',
+                                        paddingRight: 16,
+                                    },
+                                },
+                            ],
+                        },
+                        timestamp: 1,
+                    })
+                ).toMatchSnapshot()
+            })
+
             test('buttons with nested elements', () => {
                 expect(
                     posthogEEModule.mobileReplay?.transformEventToWeb({

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

@@ -1383,6 +1383,7 @@ function makeCSSReset(context: ConversionContext): serializedNodeWithId {
                         border: 0;
                         outline: 0;
                         background: transparent;
+                        padding-block: 0 !important;
                     }
                     .input:focus {
                         outline: none;

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

@@ -130,9 +130,24 @@ function makeLayoutStyles(wireframe: wireframe, styleOverride?: StyleOverride):
             }`
         )
     }
+
     if (styleParts.length) {
         styleParts.push(`display: flex`)
     }
+
+    if (isUnitLike(combinedStyles.paddingLeft)) {
+        styleParts.push(`padding-left: ${ensureUnit(combinedStyles.paddingLeft)}`)
+    }
+    if (isUnitLike(combinedStyles.paddingRight)) {
+        styleParts.push(`padding-right: ${ensureUnit(combinedStyles.paddingRight)}`)
+    }
+    if (isUnitLike(combinedStyles.paddingTop)) {
+        styleParts.push(`padding-top: ${ensureUnit(combinedStyles.paddingTop)}`)
+    }
+    if (isUnitLike(combinedStyles.paddingBottom)) {
+        styleParts.push(`padding-bottom: ${ensureUnit(combinedStyles.paddingBottom)}`)
+    }
+
     return asStyleString(styleParts)
 }
 

frontend/src/layout/navigation-3000/sidepanel/panels/activation/SidePanelActivation.tsx

@@ -97,6 +97,9 @@ const ActivationTask = ({
     if (url) {
         params.to = url
         params.targetBlank = true
+        params.onClick = () => {
+            reportActivationSideBarTaskClicked(id)
+        }
     } else {
         params.onClick = () => {
             runTask(id)

frontend/src/layout/navigation-3000/sidepanel/panels/activation/activationLogic.ts

@@ -2,8 +2,8 @@ import { actions, connect, events, kea, listeners, path, reducers, selectors } f
 import { loaders } from 'kea-loaders'
 import { router } from 'kea-router'
 import api from 'lib/api'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { permanentlyMount } from 'lib/utils/kea-logic-builders'
+import posthog from 'posthog-js'
 import { membersLogic } from 'scenes/organization/membersLogic'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 import { savedInsightsLogic } from 'scenes/saved-insights/savedInsightsLogic'
@@ -25,6 +25,7 @@ export enum ActivationTasks {
     SetupSessionRecordings = 'setup_session_recordings',
     TrackCustomEvents = 'track_custom_events',
     InstallFirstApp = 'install_first_app',
+    SetUpReverseProxy = 'set_up_reverse_proxy',
 }
 
 export type ActivationTaskType = {
@@ -65,8 +66,6 @@ export const activationLogic = kea<activationLogicType>([
             ['loadPluginsSuccess', 'loadPluginsFailure'],
             sidePanelStateLogic,
             ['openSidePanel'],
-            eventUsageLogic,
-            ['reportActivationSideBarShown'],
             savedInsightsLogic,
             ['loadInsights', 'loadInsightsSuccess', 'loadInsightsFailure'],
             dashboardsModel,
@@ -282,6 +281,17 @@ export const activationLogic = kea<activationLogicType>([
                                 skipped: skippedTasks.includes(ActivationTasks.InstallFirstApp),
                             })
                             break
+                        case ActivationTasks.SetUpReverseProxy:
+                            tasks.push({
+                                id: ActivationTasks.SetUpReverseProxy,
+                                name: 'Set up a reverse proxy',
+                                description: 'Send your events from your own domain to avoid tracking blockers',
+                                completed: false,
+                                canSkip: true,
+                                skipped: skippedTasks.includes(ActivationTasks.SetUpReverseProxy),
+                                url: 'https://posthog.com/docs/advanced/proxy',
+                            })
+                            break
                         default:
                             break
                     }
@@ -342,6 +352,9 @@ export const activationLogic = kea<activationLogicType>([
             }
         },
         skipTask: ({ id }) => {
+            posthog.capture('activation sidebar task skipped', {
+                task: id,
+            })
             if (values.currentTeam?.id) {
                 actions.addSkippedTask(values.currentTeam.id, id)
             }

frontend/src/layout/navigation-3000/sidepanel/sidePanelStateLogic.tsx

@@ -1,6 +1,7 @@
 import { actions, kea, listeners, path, reducers } from 'kea'
 import { actionToUrl, router, urlToAction } from 'kea-router'
 import { windowValues } from 'kea-window-values'
+import posthog from 'posthog-js'
 
 import { SidePanelTab } from '~/types'
 
@@ -55,10 +56,12 @@ export const sidePanelStateLogic = kea<sidePanelStateLogicType>([
     listeners(({ actions, values }) => ({
         // NOTE: We explicitly reference the actions instead of connecting so that people don't accidentally
         // use this logic instead of sidePanelStateLogic
-        openSidePanel: () => {
+        openSidePanel: ({ tab }) => {
+            posthog.capture('sidebar opened', { tab })
             actions.setSidePanelOpen(true)
         },
         closeSidePanel: ({ tab }) => {
+            posthog.capture('sidebar closed', { tab })
             if (!tab) {
                 // If we aren't specifiying the tab we always close
                 actions.setSidePanelOpen(false)

frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.stories.tsx

@@ -54,9 +54,24 @@ MultipleSelect.args = {
 
 export const MultipleSelectWithCustom: Story = Template.bind({})
 MultipleSelectWithCustom.args = {
-    placeholder: 'Enter any email...',
+    placeholder: 'Pick a url...',
     mode: 'multiple',
     allowCustomValues: true,
+    options: [
+        {
+            key: 'http://posthog.com/docs',
+            label: 'http://posthog.com/docs',
+        },
+        {
+            key: 'http://posthog.com/pricing',
+            label: 'http://posthog.com/pricing',
+        },
+
+        {
+            key: 'http://posthog.com/products',
+            label: 'http://posthog.com/products',
+        },
+    ],
 }
 
 export const Disabled: Story = Template.bind({})