feat: some activity item row improvements in replay

frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.stories.tsx

@@ -181,6 +181,10 @@ export function ReadOnlyDisplay(): JSX.Element {
     return <HTMLElementsDisplay elements={EXAMPLE_ELEMENTS} />
 }
 
+export function SmallReadOnlyDisplay(): JSX.Element {
+    return <HTMLElementsDisplay elements={EXAMPLE_ELEMENTS} size="small" />
+}
+
 export function WithoutCentralHighlightDisplay(): JSX.Element {
     return <HTMLElementsDisplay elements={EXAMPLE_ELEMENTS} highlight={false} />
 }
@@ -212,3 +216,15 @@ export function EditableDisplayWithPreselection(): JSX.Element {
 export function WithUniquenessCheck(): JSX.Element {
     return <HTMLElementsDisplay elements={EXAMPLE_ELEMENTS} highlight={false} editable={true} checkUniqueness={true} />
 }
+
+export function SmallWithUniquenessCheck(): JSX.Element {
+    return (
+        <HTMLElementsDisplay
+            elements={EXAMPLE_ELEMENTS}
+            highlight={false}
+            editable={true}
+            checkUniqueness={true}
+            size="small"
+        />
+    )
+}

frontend/src/lib/components/HTMLElementsDisplay/HTMLElementsDisplay.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { htmlElementsDisplayLogic } from 'lib/components/HTMLElementsDisplay/htmlElementsDisplayLogic'
 import { ParsedCSSSelector } from 'lib/components/HTMLElementsDisplay/preselectWithCSS'
@@ -13,7 +14,13 @@ function indent(level: number): string {
     return Array(level).fill('    ').join('')
 }
 
-function CloseAllTags({ elements }: { elements: ElementType[] }): JSX.Element {
+function CloseAllTags({
+    elements,
+    size = 'small',
+}: {
+    elements: ElementType[]
+    size?: 'small' | 'xsmall'
+}): JSX.Element {
     return (
         <>
             {[...elements]
@@ -28,7 +35,10 @@ function CloseAllTags({ elements }: { elements: ElementType[] }): JSX.Element {
                         }}
                     >
                         <pre
-                            className="whitespace-pre-wrap break-all p-0 m-0 rounded-none text-text-3000 text-sm"
+                            className={clsx(
+                                'whitespace-pre-wrap break-all p-0 m-0 rounded-none text-text-3000',
+                                size === 'xsmall' ? 'text-xs' : 'text-sm'
+                            )}
                             key={index}
                         >
                             {indent(elements.length - index - 2)}
@@ -47,13 +57,15 @@ function Tags({
     editable,
     onChange,
     selectedText,
+    size = 'small',
 }: {
     elements: ElementType[]
     parsedCSSSelectors: Record<number, ParsedCSSSelector>
     highlight: boolean
     editable: boolean
     onChange: (i: number, s: ParsedCSSSelector) => void
     selectedText?: string
+    size?: 'small' | 'xsmall'
 }): JSX.Element {
     return (
         <>
@@ -78,6 +90,7 @@ function Tags({
                             highlight={highlight}
                             parsedCSSSelector={parsedCSSSelectors[index]}
                             selectedText={selectedText}
+                            size={size}
                         />
                     </Fade>
                 )
@@ -92,6 +105,7 @@ interface HTMLElementsDisplayPropsBase {
     elements: ElementType[]
     highlight?: boolean
     selectedText?: string
+    size?: 'small' | 'xsmall'
 }
 
 type HTMLElementsDisplayProps =
@@ -119,6 +133,7 @@ export function HTMLElementsDisplay({
     highlight = true,
     editable = false,
     checkUniqueness = false,
+    size = 'small',
 }: HTMLElementsDisplayProps): JSX.Element {
     const [key] = useState(() => `HtmlElementsDisplay.${uniqueNode++}`)
 
@@ -137,12 +152,12 @@ export function HTMLElementsDisplay({
     const { setParsedSelectors, showAdditionalElements } = useActions(logic)
 
     return (
-        <div className="flex flex-col gap-1">
+        <div className={clsx('flex flex-col gap-1', size === 'xsmall' && 'text-xxs')}>
             {editable && !!parsedElements.length && (
                 <div className="flex flex-col gap-2 mb-2">
                     <div>Selector:</div>
                     <div className="w-full border rounded bg-bg-3000 px-4 py-2 select-text">
-                        <pre className="m-0">{chosenSelector}</pre>
+                        <pre className={clsx('m-0', size === 'xsmall' ? 'text-xxs' : 'text-sm')}>{chosenSelector}</pre>
                     </div>
                 </div>
             )}
@@ -161,7 +176,10 @@ export function HTMLElementsDisplay({
                     <>
                         {elementsToShowDepth ? (
                             <pre
-                                className="p-1 m-0 opacity-50 text-text-3000 text-sm cursor-pointer"
+                                className={clsx(
+                                    'p-1 m-0 opacity-50 text-text-3000 cursor-pointer',
+                                    size === 'xsmall' ? 'text-xxs' : 'text-sm'
+                                )}
                                 data-attr="elements-display-show-more-of-chain"
                                 onClick={showAdditionalElements}
                             >
@@ -177,8 +195,9 @@ export function HTMLElementsDisplay({
                             parsedCSSSelectors={parsedSelectors}
                             onChange={(index, s) => setParsedSelectors({ ...parsedSelectors, [index]: s })}
                             selectedText={selectedText}
+                            size={size}
                         />
-                        <CloseAllTags elements={parsedElements} />
+                        <CloseAllTags elements={parsedElements} size={size} />
                     </>
                 ) : (
                     <div>No elements to display</div>

frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.tsx

@@ -193,6 +193,7 @@ export function SelectableElement({
     highlight,
     parsedCSSSelector,
     selectedText,
+    size = 'small',
 }: {
     element: ElementType
     isDeepestChild: boolean
@@ -202,6 +203,7 @@ export function SelectableElement({
     highlight?: boolean
     parsedCSSSelector?: ParsedCSSSelector
     selectedText?: string
+    size?: 'small' | 'xsmall'
 }): JSX.Element {
     const setParsedCSSSelector = (newParsedCSSSelector: ParsedCSSSelector): void => {
         if (!objectsEqual(newParsedCSSSelector, parsedCSSSelector)) {
@@ -212,8 +214,9 @@ export function SelectableElement({
     return (
         <pre
             className={clsx(
-                'p-0 m-0 rounded whitespace-pre-wrap break-all text-text-3000 text-sm',
-                isDeepestChild && highlight ? 'bg-brand-red' : 'bg-transparent'
+                'p-0 m-0 rounded whitespace-pre-wrap break-all text-text-3000',
+                isDeepestChild && highlight ? 'bg-brand-red' : 'bg-transparent',
+                size === 'xsmall' ? 'text-xs' : 'text-sm'
             )}
         >
             {indent}

frontend/src/lib/taxonomy.tsx

@@ -279,16 +279,13 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
         },
         $lib_rate_limit_remaining_tokens: {
             label: 'Clientside rate limit remaining tokens',
-            description: (
-                <span>
-                    Remaining rate limit tokens for the posthog-js library client-side rate limiting implementation.
-                </span>
-            ),
+            description:
+                'Remaining rate limit tokens for the posthog-js library client-side rate limiting implementation.',
             examples: ['100'],
         },
         token: {
             label: 'Token',
-            description: <span>Token used for authentication.</span>,
+            description: 'Token used for authentication.',
             examples: ['ph_abcdefg'],
         },
         $ce_version: {
@@ -335,12 +332,12 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
         // session recording
         $replay_minimum_duration: {
             label: 'Replay config - minimum duration',
-            description: <span>Config for minimum duration before emitting a session recording.</span>,
+            description: 'Config for minimum duration before emitting a session recording.',
             examples: ['1000'],
         },
         $replay_sample_rate: {
             label: 'Replay config - sample rate',
-            description: <span>Config for sampling rate of session recordings.</span>,
+            description: 'Config for sampling rate of session recordings.',
             examples: ['0.1'],
         },
         $console_log_recording_enabled_server_side: {
@@ -356,40 +353,39 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
         },
         $session_recording_start_reason: {
             label: 'Session recording start reason',
-            description: (
-                <span>
-                    Reason for starting the session recording. Useful for e.g. if you have sampling enabled and want to
-                    see on batch exported events which sessions have recordings available.
-                </span>
-            ),
+            description:
+                'Reason for starting the session recording. Useful for e.g. if you have sampling enabled and want to see on batch exported events which sessions have recordings available.',
             examples: ['sampling_override', 'recording_initialized', 'linked_flag_match'],
         },
         $session_recording_canvas_recording: {
             label: 'Session recording canvas recording',
-            description: <span>Session recording canvas capture config.</span>,
+            description: 'Session recording canvas capture config.',
             examples: ['{"enabled": false}'],
         },
         $session_recording_network_payload_capture: {
             label: 'Session recording network payload capture',
-            description: <span>Session recording network payload capture config.</span>,
+            description: 'Session recording network payload capture config.',
             examples: ['{"recordHeaders": false}'],
         },
+        $configured_session_timeout_ms: {
+            label: 'Configured session timeout',
+            description: 'Configured session timeout in milliseconds.',
+            examples: ['1800000'],
+        },
+        $replay_script_config: {
+            label: 'Replay script config',
+            description: 'Sets an alternative recorder script for the web sdk.',
+            examples: ['{"script": "recorder-next""}'],
+        },
         $session_recording_url_trigger_activated_session: {
             label: 'Session recording URL trigger activated session',
-            description: (
-                <span>
-                    Session recording URL trigger activated session config. Used by posthog-js to track URL activation
-                    of session replay.
-                </span>
-            ),
+            description:
+                'Session recording URL trigger activated session config. Used by posthog-js to track URL activation of session replay.',
         },
         $session_recording_url_trigger_status: {
             label: 'Session recording URL trigger status',
-            description: (
-                <span>
-                    Session recording URL trigger status. Used by posthog-js to track URL activation of session replay.
-                </span>
-            ),
+            description:
+                'Session recording URL trigger status. Used by posthog-js to track URL activation of session replay.',
         },
         $recording_status: {
             label: 'Session recording status',
@@ -464,17 +460,17 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
         },
         $exception_capture_endpoint: {
             label: 'Exception capture endpoint',
-            description: <span>Endpoint used by posthog-js exception autocapture.</span>,
+            description: 'Endpoint used by posthog-js exception autocapture.',
             examples: ['/e/'],
         },
         $exception_capture_endpoint_suffix: {
             label: 'Exception capture endpoint',
-            description: <span>Endpoint used by posthog-js exception autocapture.</span>,
+            description: 'Endpoint used by posthog-js exception autocapture.',
             examples: ['/e/'],
         },
         $exception_capture_enabled_server_side: {
             label: 'Exception capture enabled server side',
-            description: <span>Whether exception autocapture was enabled in remote config.</span>,
+            description: 'Whether exception autocapture was enabled in remote config.',
         },
 
         // GeoIP
@@ -1193,7 +1189,7 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
         },
         $web_vitals_allowed_metrics: {
             label: 'Web vitals allowed metrics',
-            description: <span>Allowed web vitals metrics config.</span>,
+            description: 'Allowed web vitals metrics config.',
             examples: ['["LCP", "CLS"]'],
         },
 
@@ -1319,72 +1315,72 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
         },
         $start_timestamp: {
             label: 'Start timestamp',
-            description: <span>The timestamp of the first event from this session.</span>,
+            description: 'The timestamp of the first event from this session.',
             examples: [new Date().toISOString()],
         },
         $end_timestamp: {
             label: 'End timestamp',
-            description: <span>The timestamp of the last event from this session</span>,
+            description: 'The timestamp of the last event from this session',
             examples: [new Date().toISOString()],
         },
         $entry_current_url: {
             label: 'Entry URL',
-            description: <span>The first URL visited in this session</span>,
+            description: 'The first URL visited in this session.',
             examples: ['https://example.com/interesting-article?parameter=true'],
         },
         $entry_pathname: {
             label: 'Entry pathname',
-            description: <span>The first pathname visited in this session</span>,
+            description: 'The first pathname visited in this session.',
             examples: ['/interesting-article?parameter=true'],
         },
         $end_current_url: {
             label: 'Entry URL',
-            description: <span>The first URL visited in this session</span>,
+            description: 'The first URL visited in this session.',
             examples: ['https://example.com/interesting-article?parameter=true'],
         },
         $end_pathname: {
             label: 'Entry pathname',
-            description: <span>The first pathname visited in this session</span>,
+            description: 'The first pathname visited in this session.',
             examples: ['/interesting-article?parameter=true'],
         },
         $exit_current_url: {
             label: 'Exit URL',
-            description: <span>The last URL visited in this session</span>,
+            description: 'The last URL visited in this session.',
             examples: ['https://example.com/interesting-article?parameter=true'],
         },
         $exit_pathname: {
             label: 'Exit pathname',
-            description: <span>The last pathname visited in this session</span>,
+            description: 'The last pathname visited in this session.',
             examples: ['https://example.com/interesting-article?parameter=true'],
         },
         $pageview_count: {
             label: 'Pageview count',
-            description: <span>The number of page view events in this session</span>,
+            description: 'The number of page view events in this session.',
             examples: ['123'],
         },
         $autocapture_count: {
             label: 'Autocapture count',
-            description: <span>The number of autocapture events in this session</span>,
+            description: 'The number of autocapture events in this session.',
             examples: ['123'],
         },
         $screen_count: {
             label: 'Screen count',
-            description: <span>The number of screen events in this session</span>,
+            description: 'The number of screen events in this session.',
             examples: ['123'],
         },
         $channel_type: {
             label: 'Channel type',
-            description: <span>What type of acquisition channel this traffic came from.</span>,
+            description: 'What type of acquisition channel this traffic came from.',
             examples: ['Paid Search', 'Organic Video', 'Direct'],
         },
         $is_bounce: {
             label: 'Is bounce',
-            description: <span>Whether the session was a bounce.</span>,
+            description: 'Whether the session was a bounce.',
             examples: ['true', 'false'],
         },
         $last_external_click_url: {
             label: 'Last external click URL',
-            description: <span>The last external URL clicked in this session</span>,
+            description: 'The last external URL clicked in this session.',
             examples: ['https://example.com/interesting-article?parameter=true'],
         },
         $vitals_lcp: {