Merge branch 'master' into dn-fix/table-stickies

PostHog · Dec 5, 2023 · 25af306 · 25af306
2 parents e7d8165 + 82f3ff4
commit 25af306
Show file tree

Hide file tree

Showing 123 changed files with 2,687 additions and 4,879 deletions.
diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
diff --git a/ee/frontend/mobile-replay/transform.test.ts b/ee/frontend/mobile-replay/transform.test.ts
@@ -346,5 +346,25 @@ describe('replay/transform', () => {
             ])
             expect(textEvent).toMatchSnapshot()
         })
+        test('omitting x and y is equivalent to setting them to 0', () => {
+            expect(
+                posthogEEModule.mobileReplay?.transformToWeb([
+                    {
+                        type: 2,
+                        data: {
+                            wireframes: [
+                                {
+                                    id: 12345,
+                                    width: 100,
+                                    height: 30,
+                                    type: 'image',
+                                },
+                            ],
+                        },
+                        timestamp: 1,
+                    },
+                ])
+            ).toMatchSnapshot()
+        })
     })
 })
diff --git a/ee/frontend/mobile-replay/wireframeStyle.ts b/ee/frontend/mobile-replay/wireframeStyle.ts
@@ -1,17 +1,33 @@
 import { MobileStyles, wireframe } from './mobile.types'
 
+function isNumber(candidate: unknown): candidate is number {
+    return typeof candidate === 'number'
+}
+
+function isString(candidate: unknown): candidate is string {
+    return typeof candidate === 'string'
+}
+
+function isUnitLike(candidate: unknown): candidate is string | number {
+    return isNumber(candidate) || (isString(candidate) && candidate.length > 0)
+}
+
 function ensureUnit(value: string | number): string {
-    return typeof value === 'number' ? `${value}px` : value.replace(/px$/g, '') + 'px'
+    return isNumber(value) ? `${value}px` : value.replace(/px$/g, '') + 'px'
 }
 
 function makeBorderStyles(wireframe: wireframe): string {
     let styles = ''
 
-    if (wireframe.style?.borderWidth) {
+    if (!wireframe.style) {
+        return styles
+    }
+
+    if (isUnitLike(wireframe.style.borderWidth)) {
         const borderWidth = ensureUnit(wireframe.style.borderWidth)
         styles += `border-width: ${borderWidth};`
     }
-    if (wireframe.style?.borderRadius) {
+    if (isUnitLike(wireframe.style.borderRadius)) {
         const borderRadius = ensureUnit(wireframe.style.borderRadius)
         styles += `border-radius: ${borderRadius};`
     }
@@ -29,13 +45,17 @@ function makeBorderStyles(wireframe: wireframe): string {
 export function makeSvgBorder(style: MobileStyles | undefined): Record<string, string> {
     const svgBorderStyles: Record<string, string> = {}
 
-    if (style?.borderWidth) {
-        svgBorderStyles['stroke-width'] = style.borderWidth.toString()
+    if (!style) {
+        return svgBorderStyles
+    }
+
+    if (isUnitLike(style.borderWidth)) {
+        svgBorderStyles['stroke-width'] = ensureUnit(style.borderWidth)
     }
-    if (style?.borderColor) {
+    if (style.borderColor) {
         svgBorderStyles.stroke = style.borderColor
     }
-    if (style?.borderRadius) {
+    if (isUnitLike(style.borderRadius)) {
         svgBorderStyles.rx = ensureUnit(style.borderRadius)
     }
 
@@ -44,19 +64,22 @@ export function makeSvgBorder(style: MobileStyles | undefined): Record<string, s
 
 export function makePositionStyles(wireframe: wireframe): string {
     let styles = ''
-    if (wireframe.width) {
+    if (isNumber(wireframe.width)) {
         styles += `width: ${ensureUnit(wireframe.width)};`
     }
-    if (wireframe.height) {
+    if (isNumber(wireframe.height)) {
         styles += `height: ${ensureUnit(wireframe.height)};`
     }
-    if (wireframe.x || wireframe.y) {
-        styles += `position: absolute;`
-        if (wireframe.x) {
-            styles += `left: ${ensureUnit(wireframe.x)};`
+
+    const posX = wireframe.x || 0
+    const posY = wireframe.y || 0
+    if (isNumber(posX) || isNumber(posY)) {
+        styles += `position: fixed;`
+        if (isNumber(posX)) {
+            styles += `left: ${ensureUnit(posX)};`
         }
-        if (wireframe.y) {
-            styles += `top: ${ensureUnit(wireframe.y)};`
+        if (isNumber(posY)) {
+            styles += `top: ${ensureUnit(posY)};`
         }
     }
     return styles
@@ -82,11 +105,16 @@ function makeLayoutStyles(wireframe: wireframe): string {
 
 function makeFontStyles(wireframe: wireframe): string {
     let styles = ''
-    if (wireframe.style?.fontSize) {
+
+    if (!wireframe.style) {
+        return styles
+    }
+
+    if (isUnitLike(wireframe.style.fontSize)) {
         styles += `font-size: ${ensureUnit(wireframe.style?.fontSize)};`
     }
-    if (wireframe.style?.fontFamily) {
-        styles += `font-family: ${wireframe.style?.fontFamily};`
+    if (wireframe.style.fontFamily) {
+        styles += `font-family: ${wireframe.style.fontFamily};`
     }
     return styles
 }

diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-billing.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-billing.png
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-other-products.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-other-products.png
diff --git a/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks.png b/frontend/__snapshots__/scenes-other-onboarding--onboarding-sd-ks.png
diff --git a/frontend/__snapshots__/scenes-other-products--products.png b/frontend/__snapshots__/scenes-other-products--products.png
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic.tsx
@@ -43,7 +43,7 @@ export const sidePanelSettingsLogic = kea<sidePanelSettingsLogicType>([
 
     listeners(({ actions, values }) => ({
         openSettingsPanel: ({ settingsLogicProps }) => {
-            if (!values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'control') {
                 LemonDialog.open({
                     title: 'Settings',
                     content: <Settings {...settingsLogicProps} hideSections logicKey="modal" />,

diff --git a/frontend/src/layout/navigation-3000/themeLogic.ts b/frontend/src/layout/navigation-3000/themeLogic.ts
@@ -36,7 +36,7 @@ export const themeLogic = kea<themeLogicType>([
                 }
                 // Dark mode is a PostHog 3000 feature
                 // User-saved preference is used when set, oterwise we fall back to the system value
-                return featureFlags[FEATURE_FLAGS.POSTHOG_3000]
+                return featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
                     ? user?.theme_mode
                         ? user.theme_mode === 'dark'
                         : darkModeSystemPreference

diff --git a/frontend/src/layout/navigation/TopBar/NotebookButton.tsx b/frontend/src/layout/navigation/TopBar/NotebookButton.tsx
@@ -7,7 +7,7 @@ import { notebookPanelLogic } from 'scenes/notebooks/NotebookPanel/notebookPanel
 export function NotebookButton(): JSX.Element {
     const { visibility } = useValues(notebookPanelLogic)
     const { toggleVisibility } = useActions(notebookPanelLogic)
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const overrides3000: Partial<LemonButtonWithSideActionProps> = is3000
         ? {

diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
@@ -300,7 +300,7 @@ export function SitePopoverOverlay(): JSX.Element {
                 </SitePopoverSection>
             )}
             <SitePopoverSection>
-                <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000}>
+                <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000} match="test">
                     <ThemeSwitcher />
                 </FlaggedFeature>
                 <LemonButton

diff --git a/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx b/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx
@@ -142,7 +142,7 @@ export function CodeSnippet({
                 />
             </div>
             <SyntaxHighlighter
-                style={featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? synthwave84 : okaidia}
+                style={featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test' ? synthwave84 : okaidia}
                 language={language}
                 wrapLines={wrap}
                 lineProps={{ style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } }}

diff --git a/frontend/src/lib/components/CommandPalette/CommandPalette.tsx b/frontend/src/lib/components/CommandPalette/CommandPalette.tsx
@@ -17,7 +17,7 @@ import { CommandResults } from './CommandResults'
 export function CommandPalette(): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
 
-    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.POSTHOG_3000]
+    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
 
     if (isUsingCmdKSearch) {
         return <CommandBar />

diff --git a/frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx b/frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx
@@ -251,7 +251,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
     selectors({
         isUsingCmdKSearch: [
             (selectors) => [selectors.featureFlags],
-            (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000],
+            (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test',
         ],
         isSqueak: [
             (selectors) => [selectors.input],
@@ -1008,7 +1008,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             actions.registerCommand(createDashboard)
             actions.registerCommand(shareFeedback)
             actions.registerCommand(debugCopySessionRecordingURL)
-            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test') {
                 actions.registerCommand(toggleTheme)
                 actions.registerCommand(toggleHedgehogMode)
                 actions.registerCommand(shortcuts)

diff --git a/frontend/src/lib/components/NotFound/index.tsx b/frontend/src/lib/components/NotFound/index.tsx
@@ -2,6 +2,7 @@ import './NotFound.scss'
 
 import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { Link } from 'lib/lemon-ui/Link'
 import { capitalizeFirstLetter } from 'lib/utils'
 import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
@@ -17,6 +18,7 @@ interface NotFoundProps {
 export function NotFound({ object, caption }: NotFoundProps): JSX.Element {
     const { preflight } = useValues(preflightLogic)
     const { openSupportForm } = useActions(supportLogic)
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const nodeLogic = useNotebookNode()
 
@@ -47,7 +49,11 @@ export function NotFound({ object, caption }: NotFoundProps): JSX.Element {
             </p>
             <div className="flex justify-center">
                 {nodeLogic && (
-                    <LemonButton type="primary" status="danger" onClick={() => nodeLogic.actions.deleteNode()}>
+                    <LemonButton
+                        type={is3000 ? 'secondary' : 'primary'}
+                        status="danger"
+                        onClick={() => nodeLogic.actions.deleteNode()}
+                    >
                         Remove from Notebook
                     </LemonButton>
                 )}

diff --git a/frontend/src/lib/components/PageHeader.tsx b/frontend/src/lib/components/PageHeader.tsx
@@ -27,12 +27,13 @@ export function PageHeader({
     delimited,
     notebookProps,
 }: PageHeaderProps): JSX.Element | null {
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
     const { actionsContainer } = useValues(breadcrumbsLogic)
 
     return (
         <>
             {!is3000 && (
+                // eslint-disable-next-line react/forbid-dom-props
                 <div className="page-title-row flex justify-between" style={style}>
                     <div className="min-w-0">
                         {!is3000 &&

diff --git a/frontend/src/lib/components/Support/supportLogic.ts b/frontend/src/lib/components/Support/supportLogic.ts
@@ -336,7 +336,7 @@ export const supportLogic = kea<supportLogicType>([
     actionToUrl(({ values }) => {
         return {
             closeSupportForm: () => {
-                if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+                if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test') {
                     return
                 }
 

diff --git a/frontend/src/lib/hooks/use3000Body.ts b/frontend/src/lib/hooks/use3000Body.ts
@@ -6,7 +6,7 @@ import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { useFeatureFlag } from './useFeatureFlag'
 
 export function use3000Body(): void {
-    const is3000 = !!useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
     const { isDarkModeOn } = useValues(themeLogic)
 
     useEffect(() => {

diff --git a/frontend/src/lib/hooks/useFeatureFlag.ts b/frontend/src/lib/hooks/useFeatureFlag.ts
@@ -2,8 +2,12 @@ import { useValues } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 
-export const useFeatureFlag = (flag: keyof typeof FEATURE_FLAGS): boolean => {
+export const useFeatureFlag = (flag: keyof typeof FEATURE_FLAGS, match?: string): boolean => {
     const { featureFlags } = useValues(featureFlagLogic)
 
+    if (match) {
+        return featureFlags[FEATURE_FLAGS[flag]] === match
+    }
+
     return !!featureFlags[FEATURE_FLAGS[flag]]
 }
diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
@@ -131,7 +131,7 @@ export function LemonMenuOverlay({ items, tooltipPlacement, itemsRef }: LemonMen
     const { featureFlags } = useValues(featureFlagLogic)
     const sectionsOrItems = useMemo(() => normalizeItems(items), [items])
 
-    const buttonSize = featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? 'small' : 'medium'
+    const buttonSize = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test' ? 'small' : 'medium'
 
     return sectionsOrItems.length > 0 && isLemonMenuSection(sectionsOrItems[0]) ? (
         <LemonMenuSectionList

diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx
@@ -44,7 +44,7 @@ export function LemonSegmentedButton<T extends React.Key>({
         HTMLDivElement,
         HTMLLIElement
     >(value, 200)
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     let buttonProps = {}