Merge branch 'master' into dw-info-tab

frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx

@@ -166,7 +166,7 @@ function ValueDisplay({
                             }
                         >
                             <LemonTag
-                                className="font-mono uppercase ml-1"
+                                className="ml-1 font-mono uppercase"
                                 type={isTypeMismatched ? 'danger' : 'muted'}
                                 icon={isTypeMismatched ? <IconWarning /> : undefined}
                             >
@@ -222,8 +222,8 @@ export function PropertiesTable({
     parent,
 }: PropertiesTableType): JSX.Element {
     const [searchTerm, setSearchTerm] = useState('')
-    const { hidePostHogPropertiesInTable } = useValues(userPreferencesLogic)
-    const { setHidePostHogPropertiesInTable } = useActions(userPreferencesLogic)
+    const { hidePostHogPropertiesInTable, hideNullValues } = useValues(userPreferencesLogic)
+    const { setHidePostHogPropertiesInTable, setHideNullValues } = useActions(userPreferencesLogic)
     const { isCloudOrDev } = useValues(preflightLogic)
 
     const objectProperties = useMemo(() => {
@@ -283,11 +283,18 @@ export function PropertiesTable({
             })
         }
 
-        if (filterable && hidePostHogPropertiesInTable) {
-            entries = entries.filter(([key]) => {
-                const isPostHogProperty = key.startsWith('$') || PROPERTY_KEYS.includes(key)
-                const isNonDollarPostHogProperty = isCloudOrDev && CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key)
-                return !isPostHogProperty && !isNonDollarPostHogProperty
+        if (filterable) {
+            entries = entries.filter(([key, value]) => {
+                if (hideNullValues && value === null) {
+                    return false
+                }
+                if (hidePostHogPropertiesInTable) {
+                    const isPostHogProperty = key.startsWith('$') || PROPERTY_KEYS.includes(key)
+                    const isNonDollarPostHogProperty =
+                        isCloudOrDev && CLOUD_INTERNAL_POSTHOG_PROPERTY_KEYS.includes(key)
+                    return !isPostHogProperty && !isNonDollarPostHogProperty
+                }
+                return true
             })
         }
 
@@ -299,7 +306,7 @@ export function PropertiesTable({
             })
         }
         return entries
-    }, [properties, sortProperties, searchTerm, hidePostHogPropertiesInTable])
+    }, [properties, sortProperties, searchTerm, hidePostHogPropertiesInTable, hideNullValues])
 
     if (Array.isArray(properties)) {
         return (
@@ -424,25 +431,34 @@ export function PropertiesTable({
         return (
             <>
                 {(searchable || filterable) && (
-                    <div className="flex justify-between items-center gap-2 mb-2">
+                    <div className="flex items-center justify-between gap-2 mb-2">
                         <span className="flex justify-between gap-2">
                             {searchable && (
                                 <LemonInput
                                     type="search"
                                     placeholder="Search property keys and values"
                                     value={searchTerm || ''}
                                     onChange={setSearchTerm}
-                                    className="max-w-full w-64"
+                                    className="w-64 max-w-full"
                                 />
                             )}
 
                             {filterable && (
-                                <LemonCheckbox
-                                    checked={hidePostHogPropertiesInTable}
-                                    label="Hide PostHog properties"
-                                    bordered
-                                    onChange={setHidePostHogPropertiesInTable}
-                                />
+                                <>
+                                    <LemonCheckbox
+                                        checked={hidePostHogPropertiesInTable}
+                                        label="Hide PostHog properties"
+                                        bordered
+                                        onChange={setHidePostHogPropertiesInTable}
+                                    />
+
+                                    <LemonCheckbox
+                                        checked={hideNullValues}
+                                        label="Hide null values"
+                                        bordered
+                                        onChange={setHideNullValues}
+                                    />
+                                </>
                             )}
                         </span>
 
@@ -467,6 +483,7 @@ export function PropertiesTable({
                                         onClick={() => {
                                             setSearchTerm('')
                                             setHidePostHogPropertiesInTable(false)
+                                            setHideNullValues(false)
                                         }}
                                     >
                                         Clear filters

frontend/src/lib/components/ViewRecordingButton.tsx

@@ -10,20 +10,27 @@ import { EventType } from '~/types'
 export default function ViewRecordingButton({
     sessionId,
     timestamp,
+    inModal = false,
     ...props
 }: Pick<LemonButtonProps, 'size' | 'type' | 'data-attr' | 'fullWidth' | 'className' | 'disabledReason'> & {
     sessionId: string
     timestamp?: string | Dayjs
+    // whether to open in a modal or navigate to the replay page
+    inModal?: boolean
 }): JSX.Element {
     const { openSessionPlayer } = useActions(sessionPlayerModalLogic)
 
     return (
         <LemonButton
-            to={urls.replaySingle(sessionId)}
-            onClick={() => {
-                const fiveSecondsBeforeEvent = dayjs(timestamp).valueOf() - 5000
-                openSessionPlayer({ id: sessionId }, Math.max(fiveSecondsBeforeEvent, 0))
-            }}
+            to={inModal ? undefined : urls.replaySingle(sessionId)}
+            onClick={
+                inModal
+                    ? () => {
+                          const fiveSecondsBeforeEvent = timestamp ? dayjs(timestamp).valueOf() - 5000 : 0
+                          openSessionPlayer({ id: sessionId }, Math.max(fiveSecondsBeforeEvent, 0))
+                      }
+                    : undefined
+            }
             sideIcon={<IconPlayCircle />}
             {...props}
         >

frontend/src/lib/constants.tsx

@@ -222,7 +222,6 @@ export const FEATURE_FLAGS = {
     EXPERIMENTS_HOGQL: 'experiments-hogql', // owner: @jurajmajerik #team-experiments
     ROLE_BASED_ACCESS_CONTROL: 'role-based-access-control', // owner: @zach
     MESSAGING: 'messaging', // owner @mariusandra #team-cdp
-    SESSION_REPLAY_URL_BLOCKLIST: 'session-replay-url-blocklist', // owner: @richard-better #team-replay
     BILLING_TRIAL_FLOW: 'billing-trial-flow', // owner: @zach
     EDIT_DWH_SOURCE_CONFIG: 'edit_dwh_source_config', // owner: @Gilbert09 #team-data-warehouse
     AI_SURVEY_RESPONSE_SUMMARY: 'ai-survey-response-summary', // owner: @pauldambra

frontend/src/lib/logic/userPreferencesLogic.ts

@@ -7,6 +7,7 @@ export const userPreferencesLogic = kea<userPreferencesLogicType>([
     path(['lib', 'logic', 'userPreferencesLogic']),
     actions({
         setHidePostHogPropertiesInTable: (enabled: boolean) => ({ enabled }),
+        setHideNullValues: (enabled: boolean) => ({ enabled }),
     }),
     reducers(() => ({
         hidePostHogPropertiesInTable: [
@@ -16,5 +17,6 @@ export const userPreferencesLogic = kea<userPreferencesLogicType>([
                 setHidePostHogPropertiesInTable: (_, { enabled }) => enabled,
             },
         ],
+        hideNullValues: [true, { persist: true }, { setHideNullValues: (_, { enabled }) => enabled }],
     })),
 ])

frontend/src/queries/nodes/DataNode/dataNodeLogic.ts

@@ -630,23 +630,26 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
             (s) => [s.nextAllowedRefresh, s.lastRefresh],
             (nextAllowedRefresh: string | null, lastRefresh: string | null) => (): string => {
                 const now = dayjs()
-                let disabledReason = ''
-                if (!!nextAllowedRefresh && now.isBefore(dayjs(nextAllowedRefresh))) {
-                    // If this is a saved insight, the result will contain nextAllowedRefresh, and we use that to disable the button
-                    disabledReason = `You can refresh this insight again ${dayjs(nextAllowedRefresh).from(now)}`
-                } else if (
-                    !!lastRefresh &&
-                    now.subtract(UNSAVED_INSIGHT_MIN_REFRESH_INTERVAL_MINUTES - 0.5, 'minutes').isBefore(lastRefresh)
-                ) {
-                    // Unsaved insights don't get cached and get refreshed on every page load, but we avoid allowing users to click
-                    // 'refresh' more than once every UNSAVED_INSIGHT_MIN_REFRESH_INTERVAL_MINUTES. This can be bypassed by simply
-                    // refreshing the page though, as there's no cache layer on the backend
-                    disabledReason = `You can refresh this insight again ${dayjs(lastRefresh)
-                        .add(UNSAVED_INSIGHT_MIN_REFRESH_INTERVAL_MINUTES, 'minutes')
-                        .from(now)}`
+                // Saved insights has a nextAllowedRefresh we use to check if the user can refresh again
+                if (nextAllowedRefresh) {
+                    const nextRefreshTime = dayjs(nextAllowedRefresh)
+                    if (now.isBefore(nextRefreshTime)) {
+                        return `You can refresh this insight again ${nextRefreshTime.from(now)}`
+                    }
                 }
-
-                return disabledReason
+                // For unsaved insights we check the last refresh time
+                if (lastRefresh) {
+                    const earliestRefresh = dayjs(lastRefresh).add(
+                        UNSAVED_INSIGHT_MIN_REFRESH_INTERVAL_MINUTES,
+                        'minutes'
+                    )
+                    if (now.isBefore(earliestRefresh)) {
+                        return `You can refresh this insight again ${earliestRefresh.from(now)}`
+                    }
+                }
+                // If we don't have a nextAllowedRefresh or lastRefresh, we can refresh, so we
+                // return an empty string
+                return ''
             },
         ],
         timings: [

frontend/src/queries/nodes/DataTable/EventRowActions.tsx

@@ -55,6 +55,7 @@ export function EventRowActions({ event }: EventActionProps): JSX.Element {
                     )}
                     <ViewRecordingButton
                         fullWidth
+                        inModal
                         sessionId={event.properties.$session_id}
                         timestamp={event.timestamp}
                         disabledReason={

frontend/src/queries/nodes/HogQLX/render.tsx

@@ -44,6 +44,7 @@ export function renderHogQLX(value: any): JSX.Element {
             return (
                 <ErrorBoundary>
                     <ViewRecordingButton
+                        inModal
                         sessionId={sessionId}
                         type="primary"
                         size="xsmall"

frontend/src/queries/nodes/InsightViz/ComputationTimeWithRefresh.tsx

@@ -1,9 +1,11 @@
-import { Link } from '@posthog/lemon-ui'
+import { Link, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { dayjs } from 'lib/dayjs'
 import { usePeriodicRerender } from 'lib/hooks/usePeriodicRerender'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { userLogic } from 'scenes/userLogic'
 
 import { dataNodeLogic } from '../DataNode/dataNodeLogic'
 
@@ -13,6 +15,11 @@ export function ComputationTimeWithRefresh({ disableRefresh }: { disableRefresh?
     const { insightProps } = useValues(insightLogic)
     const { getInsightRefreshButtonDisabledReason } = useValues(insightDataLogic(insightProps))
     const { loadData } = useActions(insightDataLogic(insightProps))
+    const disabledReason = getInsightRefreshButtonDisabledReason()
+
+    const { user } = useValues(userLogic)
+    const { isDev } = useValues(preflightLogic)
+    const canBypassRefreshDisabled = user?.is_staff || user?.is_impersonated || isDev
 
     usePeriodicRerender(15000) // Re-render every 15 seconds for up-to-date `insightRefreshButtonDisabledReason`
 
@@ -26,9 +33,21 @@ export function ComputationTimeWithRefresh({ disableRefresh }: { disableRefresh?
             {!disableRefresh && (
                 <>
                     <span className="px-1">•</span>
-                    <Link disabledReason={getInsightRefreshButtonDisabledReason()} onClick={() => loadData(true)}>
-                        Refresh
-                    </Link>
+                    <Tooltip
+                        title={
+                            canBypassRefreshDisabled && disabledReason
+                                ? `${disabledReason} (you can bypass this due to dev env / staff permissions)`
+                                : undefined
+                        }
+                    >
+                        <Link
+                            onClick={() => loadData(true)}
+                            className={disabledReason ? 'opacity-50' : ''}
+                            disabledReason={canBypassRefreshDisabled ? '' : disabledReason}
+                        >
+                            Refresh
+                        </Link>
+                    </Tooltip>
                 </>
             )}
         </div>

frontend/src/queries/schema.json

@@ -2279,7 +2279,6 @@
                 "probability",
                 "significance_code",
                 "significant",
-                "stats_version",
                 "timezone",
                 "variants"
             ],
@@ -4615,7 +4614,6 @@
                                 "probability",
                                 "significance_code",
                                 "significant",
-                                "stats_version",
                                 "variants"
                             ],
                             "type": "object"
@@ -6176,7 +6174,6 @@
                 "probability",
                 "significant",
                 "significance_code",
-                "stats_version",
                 "p_value",
                 "credible_intervals"
             ],
@@ -9907,7 +9904,6 @@
                         "probability",
                         "significant",
                         "significance_code",
-                        "stats_version",
                         "p_value",
                         "credible_intervals"
                     ],
@@ -10540,7 +10536,6 @@
                         "probability",
                         "significance_code",
                         "significant",
-                        "stats_version",
                         "variants"
                     ],
                     "type": "object"

frontend/src/queries/schema.ts

@@ -2008,7 +2008,7 @@ export interface ExperimentTrendsQueryResponse {
     probability: Record<string, number>
     significant: boolean
     significance_code: ExperimentSignificanceCode
-    stats_version: integer
+    stats_version?: integer
     p_value: number
     credible_intervals: Record<string, [number, number]>
 }