Merge branch 'master' into chore/remove-old-ingestion

cypress/e2e/billingv2.cy.ts

@@ -9,12 +9,14 @@ describe('Billing', () => {
         cy.intercept('/api/billing-v2/deactivate?products=product_analytics', {
             fixture: 'api/billing-v2/billing-v2-unsubscribed-product-analytics.json',
         }).as('unsubscribeProductAnalytics')
+
         cy.get('[data-attr=more-button]').first().click()
         cy.contains('.LemonButton', 'Unsubscribe').click()
         cy.get('.LemonModal__content h3').should(
             'contain',
             'Why are you unsubscribing from Product analytics + data stack?'
         )
+        cy.get('[data-attr=unsubscribe-reason-survey-textarea]').type('Product analytics')
         cy.contains('.LemonModal .LemonButton', 'Unsubscribe').click()
 
         cy.get('.LemonModal').should('not.exist')

ee/clickhouse/queries/test/__snapshots__/test_lifecycle.ambr

@@ -352,7 +352,7 @@
              AND event = '$pageview'
              AND timestamp >= toDateTime(dateTrunc('day', toDateTime('2021-04-28 00:00:00', 'UTC'))) - INTERVAL 1 day
              AND timestamp < toDateTime(dateTrunc('day', toDateTime('2021-05-05 23:59:59', 'UTC'))) + INTERVAL 1 day
-             AND (and(like(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(properties, '$current_url'), ''), 'null'), '^"|"$', ''), '%example%'), 1))
+             AND (and(ifNull(like(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(properties, '$current_url'), ''), 'null'), '^"|"$', ''), '%example%'), 0), 1))
            GROUP BY pdi.person_id)
         GROUP BY start_of_period,
                  status)
@@ -426,7 +426,7 @@
              AND event = '$pageview'
              AND timestamp >= toDateTime(dateTrunc('day', toDateTime('2021-04-28 00:00:00', 'UTC'))) - INTERVAL 1 day
              AND timestamp < toDateTime(dateTrunc('day', toDateTime('2021-05-05 23:59:59', 'UTC'))) + INTERVAL 1 day
-             AND (and(like(nullIf(nullIf(events.`mat_$current_url`, ''), 'null'), '%example%'), 1))
+             AND (and(ifNull(like(nullIf(nullIf(events.`mat_$current_url`, ''), 'null'), '%example%'), 0), 1))
            GROUP BY pdi.person_id)
         GROUP BY start_of_period,
                  status)
@@ -501,7 +501,7 @@
              AND event = '$pageview'
              AND timestamp >= toDateTime(dateTrunc('day', toDateTime('2021-04-28 00:00:00', 'UTC'))) - INTERVAL 1 day
              AND timestamp < toDateTime(dateTrunc('day', toDateTime('2021-05-05 23:59:59', 'UTC'))) + INTERVAL 1 day
-             AND (like(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(person_properties, 'email'), ''), 'null'), '^"|"$', ''), '%test.com'))
+             AND (ifNull(like(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(person_properties, 'email'), ''), 'null'), '^"|"$', ''), '%test.com'), 0))
            GROUP BY pdi.person_id)
         GROUP BY start_of_period,
                  status)
@@ -576,7 +576,7 @@
              AND event = '$pageview'
              AND timestamp >= toDateTime(dateTrunc('day', toDateTime('2021-04-28 00:00:00', 'UTC'))) - INTERVAL 1 day
              AND timestamp < toDateTime(dateTrunc('day', toDateTime('2021-05-05 23:59:59', 'UTC'))) + INTERVAL 1 day
-             AND (like(nullIf(nullIf(mat_pp_email, ''), 'null'), '%test.com'))
+             AND (ifNull(like(nullIf(nullIf(mat_pp_email, ''), 'null'), '%test.com'), 0))
            GROUP BY pdi.person_id)
         GROUP BY start_of_period,
                  status)

ee/clickhouse/views/test/__snapshots__/test_clickhouse_experiments.ambr

@@ -1613,8 +1613,7 @@
        AND toTimeZone(timestamp, 'UTC') >= toDateTime('2020-01-01 00:00:00', 'UTC')
        AND toTimeZone(timestamp, 'UTC') <= toDateTime('2020-01-06 00:00:00', 'UTC')
        AND ((has(['control', 'test'], replaceRegexpAll(JSONExtractRaw(e.properties, '$feature/a-b-test'), '^"|"$', '')))
-            AND (ifNull(ilike(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(properties, 'hogql'), ''), 'null'), '^"|"$', ''), 'true'), isNull(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(properties, 'hogql'), ''), 'null'), '^"|"$', ''))
-                        and isNull('true'))))
+            AND (ifNull(ilike(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(properties, 'hogql'), ''), 'null'), '^"|"$', ''), 'true'), 0)))
      GROUP BY value
      ORDER BY count DESC, value DESC
      LIMIT 25
@@ -1655,8 +1654,7 @@
            WHERE e.team_id = 2
              AND event = '$pageview'
              AND ((has(['control', 'test'], replaceRegexpAll(JSONExtractRaw(e.properties, '$feature/a-b-test'), '^"|"$', '')))
-                  AND (ifNull(ilike(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(properties, 'hogql'), ''), 'null'), '^"|"$', ''), 'true'), isNull(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(properties, 'hogql'), ''), 'null'), '^"|"$', ''))
-                              and isNull('true'))))
+                  AND (ifNull(ilike(replaceRegexpAll(nullIf(nullIf(JSONExtractRaw(properties, 'hogql'), ''), 'null'), '^"|"$', ''), 'true'), 0)))
              AND toTimeZone(timestamp, 'UTC') >= toDateTime('2020-01-01 00:00:00', 'UTC')
              AND toTimeZone(timestamp, 'UTC') <= toDateTime('2020-01-06 00:00:00', 'UTC')
              AND replaceRegexpAll(JSONExtractRaw(properties, '$feature/a-b-test'), '^"|"$', '') in (['test', 'control'])

frontend/src/layout/GlobalModals.tsx

@@ -13,6 +13,7 @@ import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { Prompt } from 'lib/logic/newPrompt/Prompt'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { InviteModal } from 'scenes/settings/organization/InviteModal'
+import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
 
 export const globalModalsLogic = kea<globalModalsLogicType>([
     path(['layout', 'navigation', 'globalModalsLogic']),
@@ -76,6 +77,7 @@ export function GlobalModals(): JSX.Element {
             <FlaggedFeature flag="enable-prompts">
                 <Prompt />
             </FlaggedFeature>
+            <HedgehogBuddyWithLogic />
         </>
     )
 }

frontend/src/layout/navigation-3000/Navigation.scss

@@ -52,7 +52,14 @@
 
         .LemonButton {
             min-height: 2.25rem !important; // Reduce minimum height
-            padding: 0.375rem !important; // Use a custom padding for the navbar only
+
+            > span {
+                padding: 0.25rem !important;
+            }
+
+            .LemonButton__content {
+                font-size: 0.813rem;
+            }
         }
 
         ul {
@@ -64,7 +71,7 @@
         }
 
         li + li {
-            margin-top: 1px;
+            margin-top: 0.25rem;
         }
     }
 }

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

@@ -124,7 +124,7 @@ interface HereProps {
 function Here({ breadcrumb }: HereProps): JSX.Element {
     return (
         <h1 className="Breadcrumbs3000__here">
-            <span>{breadcrumb.name || <LemonSkeleton className="w-40" />}</span>
+            <span>{breadcrumb.name || <LemonSkeleton className="w-40 h-4" />}</span>
         </h1>
     )
 }

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

@@ -1,7 +1,6 @@
 import { LemonBadge } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { HelpButton } from 'lib/components/HelpButton/HelpButton'
-import { IconQuestion, IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
+import { IconGear, IconDay, IconNight, IconAsterisk } from '@posthog/icons'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { Scene } from 'scenes/sceneTypes'
@@ -91,17 +90,6 @@ export function Navbar(): JSX.Element {
                             onClick={() => toggleTheme()}
                             persistentTooltip
                         />
-                        <HelpButton
-                            customComponent={
-                                <NavbarButton
-                                    icon={<IconQuestion />}
-                                    identifier="help-button"
-                                    title="Need any help?"
-                                    shortTitle="Help"
-                                />
-                            }
-                            placement="right-end"
-                        />
                         <NavbarButton
                             icon={<IconGear />}
                             identifier={Scene.Settings}

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

@@ -45,7 +45,7 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
             if (tag === 'alpha') {
                 content = (
                     <>
-                        {content}
+                        <span className="grow">{content}</span>
                         <LemonTag type="completion" size="small" className="ml-2">
                             ALPHA
                         </LemonTag>
@@ -54,7 +54,7 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
             } else if (tag === 'beta') {
                 content = (
                     <>
-                        {content}
+                        <span className="grow">{content}</span>
                         <LemonTag type="warning" size="small" className="ml-2">
                             BETA
                         </LemonTag>
@@ -75,6 +75,8 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
             }}
             className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
             fullWidth
+            type="secondary"
+            stealth={true}
             {...buttonProps}
         >
             {content}

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

@@ -98,6 +98,8 @@ export function SidePanel(): JSX.Element | null {
                                 }
                                 data-attr={`sidepanel-tab-${tab}`}
                                 active={activeTab === tab}
+                                type="secondary"
+                                stealth={true}
                             >
                                 {label}
                             </LemonButton>

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

@@ -15,6 +15,7 @@ import {
     IconCorporate,
     IconPlus,
     IconRedeem,
+    IconFlare,
 } from 'lib/lemon-ui/icons'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
 import { Link } from 'lib/lemon-ui/Link'
@@ -38,6 +39,8 @@ import { FEATURE_FLAGS } from 'lib/constants'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { featurePreviewsLogic } from '~/layout/FeaturePreviews/featurePreviewsLogic'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { IconLive } from '@posthog/icons'
+import { hedgehogbuddyLogic } from 'lib/components/HedgehogBuddy/hedgehogbuddyLogic'
 
 function SitePopoverSection({ title, children }: { title?: string | JSX.Element; children: any }): JSX.Element {
     return (
@@ -237,6 +240,8 @@ export function SitePopoverOverlay(): JSX.Element {
     const { preflight } = useValues(preflightLogic)
     const { closeSitePopover } = useActions(navigationLogic)
     const { billing } = useValues(billingLogic)
+    const { hedgehogModeEnabled } = useValues(hedgehogbuddyLogic)
+    const { setHedgehogModeEnabled } = useActions(hedgehogbuddyLogic)
 
     return (
         <>
@@ -277,11 +282,30 @@ export function SitePopoverOverlay(): JSX.Element {
                     <InstanceSettings />
                 </SitePopoverSection>
             )}
-            <FlaggedFeature flag={FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON}>
-                <SitePopoverSection>
+            <SitePopoverSection>
+                <LemonButton
+                    onClick={closeSitePopover}
+                    to={'https://posthog.com/changelog'}
+                    icon={<IconLive />}
+                    fullWidth
+                    data-attr="whats-new-button"
+                    targetBlank
+                >
+                    What's new?
+                </LemonButton>
+                <FlaggedFeature flag={FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON}>
                     <FeaturePreviewsButton />
-                </SitePopoverSection>
-            </FlaggedFeature>
+                </FlaggedFeature>
+
+                <LemonButton
+                    onClick={() => setHedgehogModeEnabled(!hedgehogModeEnabled)}
+                    icon={<IconFlare />}
+                    fullWidth
+                    data-attr="hedgehog-mode-button"
+                >
+                    {hedgehogModeEnabled ? 'Disable' : 'Enable'} hedgehog mode
+                </LemonButton>
+            </SitePopoverSection>
             <SitePopoverSection>
                 <SignOutButton />
             </SitePopoverSection>

frontend/src/lib/components/ActivityLog/ActivityLog.tsx

@@ -39,7 +39,7 @@ const SkeletonLog = (): JSX.Element => {
         <div className="activity-log-row items-start">
             <LemonSkeleton.Circle />
             <div className="details space-y-4 mt-2">
-                <LemonSkeleton className="w-1/2" />
+                <LemonSkeleton className="w-1/2 h-4" />
                 <LemonSkeleton />
             </div>
         </div>

frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx

@@ -194,7 +194,6 @@ export function FilterBasedCardContent({
         <BindLogic logic={dataNodeLogic} props={dataNodeLogicProps}>
             <div
                 className="InsightCard__viz"
-                // eslint-disable-next-line react/forbid-dom-props
                 onClick={
                     setAreDetailsShown
                         ? () => {

frontend/src/lib/components/Cards/TextCard/TextCard.tsx

@@ -32,7 +32,6 @@ interface TextCardBodyProps extends Pick<React.HTMLAttributes<HTMLDivElement>, '
 
 export function TextContent({ text, closeDetails, className }: TextCardBodyProps): JSX.Element {
     return (
-        // eslint-disable-next-line react/forbid-dom-props
         <div className={clsx('p-2 w-full overflow-auto', className)} onClick={() => closeDetails?.()}>
             <LemonMarkdown>{text}</LemonMarkdown>
         </div>

frontend/src/lib/components/CommandBar/ActionBar.tsx

@@ -2,10 +2,10 @@ import { useValues } from 'kea'
 
 import { actionBarLogic } from './actionBarLogic'
 
-import ActionInput from './ActionInput'
-import ActionResults from './ActionResults'
+import { ActionInput } from './ActionInput'
+import { ActionResults } from './ActionResults'
 
-const ActionBar = (): JSX.Element => {
+export const ActionBar = (): JSX.Element => {
     const { activeFlow } = useValues(actionBarLogic)
 
     return (
@@ -15,5 +15,3 @@ const ActionBar = (): JSX.Element => {
         </div>
     )
 }
-
-export default ActionBar

frontend/src/lib/components/CommandBar/ActionInput.tsx

@@ -19,7 +19,7 @@ const PrefixIcon = ({ activeFlow }: PrefixIconProps): React.ReactElement | null
     }
 }
 
-const ActionInput = (): JSX.Element => {
+export const ActionInput = (): JSX.Element => {
     const { input, activeFlow } = useValues(actionBarLogic)
     const { setInput } = useActions(actionBarLogic)
 
@@ -39,5 +39,3 @@ const ActionInput = (): JSX.Element => {
         </div>
     )
 }
-
-export default ActionInput

frontend/src/lib/components/CommandBar/ActionResult.tsx

@@ -10,7 +10,7 @@ type SearchResultProps = {
     focused: boolean
 }
 
-const ActionResult = ({ result, focused }: SearchResultProps): JSX.Element => {
+export const ActionResult = ({ result, focused }: SearchResultProps): JSX.Element => {
     const { executeResult, onMouseEnterResult, onMouseLeaveResult } = useActions(actionBarLogic)
 
     const ref = useRef<HTMLDivElement | null>(null)
@@ -51,5 +51,3 @@ const ActionResult = ({ result, focused }: SearchResultProps): JSX.Element => {
         </div>
     )
 }
-
-export default ActionResult

frontend/src/lib/components/CommandBar/ActionResults.tsx

@@ -3,7 +3,7 @@ import { useValues } from 'kea'
 import { CommandResultDisplayable } from '../CommandPalette/commandPaletteLogic'
 
 import { actionBarLogic } from './actionBarLogic'
-import ActionResult from './ActionResult'
+import { ActionResult } from './ActionResult'
 import { getNameFromActionScope } from 'lib/components/CommandBar/utils'
 
 type ResultsGroupProps = {
@@ -27,7 +27,7 @@ const ResultsGroup = ({ scope, results, activeResultIndex }: ResultsGroupProps):
     )
 }
 
-const ActionResults = (): JSX.Element => {
+export const ActionResults = (): JSX.Element => {
     const { commandSearchResultsGrouped, activeResultIndex } = useValues(actionBarLogic)
 
     return (
@@ -38,5 +38,3 @@ const ActionResults = (): JSX.Element => {
         </div>
     )
 }
-
-export default ActionResults

frontend/src/lib/components/CommandBar/CommandBar.tsx

@@ -7,24 +7,43 @@ import { commandBarLogic } from './commandBarLogic'
 import { BarStatus } from './types'
 
 import './index.scss'
-import SearchBar from './SearchBar'
-import { LemonModal } from '@posthog/lemon-ui'
-import ActionBar from './ActionBar'
+import { SearchBar } from './SearchBar'
+import { ActionBar } from './ActionBar'
 
-function CommandBar(): JSX.Element | null {
+const CommandBarOverlay = ({ children }: { children?: React.ReactNode }): JSX.Element => (
+    <div
+        className="fixed top-0 left-0 w-full h-full flex flex-col items-center justify-center p-3"
+        // eslint-disable-next-line react/forbid-dom-props
+        style={{
+            zIndex: 'var(--z-command-palette)',
+            // background: 'color-mix(in srgb, var(--bg-light) 75%, transparent)',
+            backgroundColor: 'var(--modal-backdrop-color)',
+            backdropFilter: 'blur(var(--modal-backdrop-blur))',
+        }}
+    >
+        {children}
+    </div>
+)
+
+export function CommandBar(): JSX.Element | null {
     const containerRef = useRef<HTMLDivElement | null>(null)
     const { barStatus } = useValues(commandBarLogic)
     const { hideCommandBar } = useActions(commandBarLogic)
 
     useOutsideClickHandler(containerRef, hideCommandBar, [])
 
+    if (barStatus === BarStatus.HIDDEN) {
+        return null
+    }
+
     return (
-        <LemonModal isOpen={barStatus !== BarStatus.HIDDEN} simple closable={false} width={800}>
-            <div className="w-full h-160 max-w-lg bg-bg-3000 rounded overflow-hidden flex flex-col" ref={containerRef}>
+        <CommandBarOverlay>
+            <div
+                className="w-full h-160 max-w-lg bg-bg-3000 rounded overflow-hidden flex flex-col border shadow"
+                ref={containerRef}
+            >
                 {barStatus === BarStatus.SHOW_SEARCH ? <SearchBar /> : <ActionBar />}
             </div>
-        </LemonModal>
+        </CommandBarOverlay>
     )
 }
-
-export default CommandBar