Merge branch 'master' into revert-19258-revert-18830-chore/Django-4.1…

…-upgrade

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

@@ -201,7 +201,7 @@ export type wireframeProgress = wireframeInputBase & {
      */
     max?: number
     style?: MobileStyles & {
-        bar: 'horizontal' | 'circular'
+        bar: 'horizontal' | 'circular' | 'rating'
     }
 }
 
@@ -224,9 +224,9 @@ export type wireframeText = wireframeBase & {
 export type wireframeImage = wireframeBase & {
     type: 'image'
     /**
-     * @description this will be used as base64 encoded image source, with no other attributes it is assumed to be a PNG
+     * @description this will be used as base64 encoded image source, with no other attributes it is assumed to be a PNG, if omitted a placeholder is rendered
      */
-    base64: string
+    base64?: string
 }
 
 export type wireframeRectangle = wireframeBase & {

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

@@ -350,7 +350,7 @@
             "additionalProperties": false,
             "properties": {
                 "base64": {
-                    "description": "this will be used as base64 encoded image source, with no other attributes it is assumed to be a PNG",
+                    "description": "this will be used as base64 encoded image source, with no other attributes it is assumed to be a PNG, if omitted a placeholder is rendered",
                     "type": "string"
                 },
                 "childWireframes": {
@@ -382,7 +382,7 @@
                     "type": "number"
                 }
             },
-            "required": ["base64", "height", "id", "type", "width", "x", "y"],
+            "required": ["height", "id", "type", "width", "x", "y"],
             "type": "object"
         },
         "wireframeInput": {

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

@@ -453,6 +453,27 @@ describe('replay/transform', () => {
                 ).toMatchSnapshot()
             })
 
+            test('progress rating', () => {
+                expect(
+                    posthogEEModule.mobileReplay?.transformEventToWeb({
+                        type: 2,
+                        data: {
+                            wireframes: [
+                                {
+                                    id: 12365,
+                                    width: 100,
+                                    height: 30,
+                                    type: 'progress',
+                                    max: '12',
+                                    value: '6', // i.e 50%
+                                },
+                            ],
+                        },
+                        timestamp: 1,
+                    })
+                ).toMatchSnapshot()
+            })
+
             test('radio_group', () => {
                 expect(
                     posthogEEModule.mobileReplay?.transformEventToWeb({

ee/frontend/mobile-replay/transformers.ts

@@ -29,6 +29,7 @@ import {
     makeHTMLStyles,
     makeIndeterminateProgressStyles,
     makeMinimalStyles,
+    makePositionStyles,
     makeStylesString,
 } from './wireframeStyle'
 
@@ -378,6 +379,85 @@ function makeProgressElement(
                 ...children,
             ],
         }
+    } else if (wireframe.style?.bar === 'rating') {
+        // value needs to be expressed as a number between 0 and 100
+        const max = wireframe.max || 1
+        let value = wireframe.value || null
+        if (_isPositiveInteger(value) && value <= max) {
+            value = (value / max) * 100
+        } else {
+            value = null
+        }
+
+        if (value === null) {
+            return makePlaceholderElement(wireframe, children)
+        }
+
+        const stylingChildren: serializedNodeWithId[] = [
+            {
+                type: NodeType.Element,
+                tagName: 'style',
+                attributes: {
+                    type: 'text/css',
+                },
+                id: idSequence.next().value,
+                childNodes: [
+                    {
+                        type: NodeType.Text,
+                        textContent: `.stars {position: relative;display:inline-block;font-size: ${
+                            wireframe.height
+                        }px;height: ${wireframe.height}px;line-height: ${
+                            wireframe.height
+                        }px;}.stars:before {content: "\\2606\\2606\\2606\\2606\\2606";}.stars:after {content: "\\2605\\2605\\2605\\2605\\2605";position:absolute;  left:0;overflow:hidden;width:var(--w,50%);color: ${
+                            wireframe.style?.color || 'rgb(255, 200, 0)'
+                        };z-index:-1;}`,
+                        id: idSequence.next().value,
+                    },
+                ],
+            },
+        ]
+
+        const ratingBar = {
+            type: NodeType.Element,
+            tagName: 'ul',
+            id: idSequence.next().value,
+            attributes: {
+                // unset UL styles
+                style: 'list-style-type: none; margin: 0; padding: 0;',
+            },
+            childNodes: [
+                {
+                    type: NodeType.Element,
+                    tagName: 'li',
+                    id: idSequence.next().value,
+                    attributes: {
+                        style: 'list-style-type: none;',
+                    },
+                    childNodes: [
+                        {
+                            type: NodeType.Element,
+                            tagName: 'div',
+                            attributes: {
+                                style: `--w: ${value}%;`,
+                                class: 'stars',
+                            },
+                            id: idSequence.next().value,
+                            childNodes: [],
+                        },
+                    ],
+                },
+            ],
+        } as serializedNodeWithId
+
+        return {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                style: makeMinimalStyles(wireframe),
+            },
+            id: wireframe.id,
+            childNodes: [...stylingChildren, ratingBar, ...children],
+        }
     } else {
         return {
             type: NodeType.Element,
@@ -389,20 +469,61 @@ function makeProgressElement(
     }
 }
 
-function makeToggleElement(
-    wireframe: wireframeToggle,
-    children: serializedNodeWithId[]
-): (elementNode & { id: number }) | null {
-    // first return simply a checkbox
+function makeToggleParts(wireframe: wireframeToggle): serializedNodeWithId[] {
+    const togglePosition = wireframe.checked ? 'right' : 'left'
+    const defaultColor = wireframe.checked ? '#1d4aff' : BACKGROUND
+    return [
+        {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                'data-toggle-part': 'slider',
+                style: `position:absolute;top:33%;left:5%;display:inline-block;width:75%;height:33%;background-color:${
+                    wireframe.style?.color || defaultColor
+                };opacity: 0.2;border-radius:7.5%;`,
+            },
+            id: idSequence.next().value,
+            childNodes: [],
+        },
+        {
+            type: NodeType.Element,
+            tagName: 'div',
+            attributes: {
+                'data-toggle-part': 'handle',
+                style: `position:absolute;top:1.5%;${togglePosition}:5%;display:flex;align-items:center;justify-content:center;width:40%;height:75%;cursor:inherit;background-color:${
+                    wireframe.style?.color || defaultColor
+                };border:2px solid ${
+                    wireframe.style?.borderColor || wireframe.style?.color || defaultColor
+                };border-radius:50%;`,
+            },
+            id: idSequence.next().value,
+            childNodes: [],
+        },
+    ]
+}
+
+function makeToggleElement(wireframe: wireframeToggle): (elementNode & { id: number }) | null {
+    const isLabelled = 'label' in wireframe
     return {
         type: NodeType.Element,
-        tagName: 'input',
+        tagName: 'div',
         attributes: {
-            ...inputAttributes(wireframe),
-            type: 'checkbox',
+            // if labelled take up available space, otherwise use provided positioning
+            style: isLabelled ? `height:100%;flex:1` : makePositionStyles(wireframe),
         },
         id: wireframe.id,
-        childNodes: children,
+        childNodes: [
+            {
+                type: NodeType.Element,
+                tagName: 'div',
+                attributes: {
+                    // relative position, fills parent
+                    style: 'position:relative;width:100%;height:100%;',
+                },
+                id: idSequence.next().value,
+                childNodes: makeToggleParts(wireframe),
+            },
+        ],
     }
 }
 
@@ -428,7 +549,7 @@ function makeInputElement(
 
     const theInputElement: (elementNode & { id: number }) | null =
         wireframe.inputType === 'toggle'
-            ? makeToggleElement(wireframe, children)
+            ? makeToggleElement(wireframe)
             : {
                   type: NodeType.Element,
                   tagName: 'input',

ee/frontend/mobile-replay/wireframeStyle.ts

@@ -47,7 +47,7 @@ function makeBorderStyles(wireframe: wireframe, styleOverride?: MobileStyles): s
     return styles
 }
 
-function makePositionStyles(wireframe: wireframe): string {
+export function makePositionStyles(wireframe: wireframe): string {
     let styles = ''
     if (isNumber(wireframe.width)) {
         styles += `width: ${ensureUnit(wireframe.width)};`

frontend/src/layout/navigation-3000/components/TopBar.tsx

@@ -237,6 +237,7 @@ function Here({ breadcrumb }: HereProps): JSX.Element {
                     placeholder="Unnamed"
                     compactButtons="xsmall"
                     editingIndication="underlined"
+                    autoFocus
                 />
             ) : (
                 <span>{breadcrumb.name}</span>

frontend/src/layout/navigation/TopBar/YearInHogButton.tsx

@@ -29,7 +29,7 @@ export function YearInHogButton({ url }: { url: string | null }): JSX.Element |
                 onMouseEnter={() => setIsHovering(true)}
                 onMouseLeave={() => setIsHovering(false)}
             >
-                PostHog unwrapped
+                PostHog Unwrapped
             </LemonButton>
         </div>
     ) : null