feat: clearer platform support in settings (#26649)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/scenes/settings/environment/SessionRecordingIngestionSettings.tsx

@@ -21,6 +21,7 @@ import { FEATURE_FLAGS, SESSION_REPLAY_MINIMUM_DURATION_OPTIONS } from 'lib/cons
 import { IconCancel } from 'lib/lemon-ui/icons'
 import { LemonField } from 'lib/lemon-ui/LemonField'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
+import { SupportedPlatforms } from 'scenes/settings/environment/SessionRecordingSettings'
 import { sessionReplayIngestionControlLogic } from 'scenes/settings/environment/sessionReplayIngestionControlLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { userLogic } from 'scenes/userLogic'
@@ -378,6 +379,8 @@ export function SessionRecordingIngestionSettings(): JSX.Element | null {
                     </Link>
                 </p>
 
+                <SupportedPlatforms web={true} />
+
                 {samplingControlFeatureEnabled && (
                     <>
                         <div className="flex flex-row justify-between">

frontend/src/scenes/settings/environment/SessionRecordingSettings.tsx

@@ -1,5 +1,15 @@
-import { IconPlus } from '@posthog/icons'
-import { LemonBanner, LemonButton, LemonDialog, LemonSwitch, LemonTag, Link } from '@posthog/lemon-ui'
+import { IconCheck, IconInfo, IconPlus, IconX } from '@posthog/icons'
+import {
+    LemonBanner,
+    LemonButton,
+    LemonDialog,
+    LemonDivider,
+    LemonSwitch,
+    LemonTag,
+    Link,
+    Tooltip,
+} from '@posthog/lemon-ui'
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUrlList'
 import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
@@ -8,18 +18,92 @@ import { PropertySelect } from 'lib/components/PropertySelect/PropertySelect'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { IconSelectEvents } from 'lib/lemon-ui/icons'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
-import { objectsEqual } from 'lib/utils'
+import { isObject, objectsEqual } from 'lib/utils'
+import { ReactNode } from 'react'
 import { teamLogic } from 'scenes/teamLogic'
 
 import { SessionRecordingAIConfig } from '~/types'
 
+interface SupportedPlatformProps {
+    note?: ReactNode
+    label: string
+    supported: boolean
+}
+
+function SupportedPlatform(props: SupportedPlatformProps): JSX.Element {
+    const node = (
+        <div
+            className={clsx(
+                props.supported ? 'bg-success-highlight' : 'bg-danger-highlight',
+                'px-1 py-0.5',
+                props.note && 'cursor-pointer'
+            )}
+        >
+            {props.note ? <IconInfo /> : props.supported ? <IconCheck /> : <IconX />} {props.label}
+        </div>
+    )
+    if (props.note) {
+        return <Tooltip title={props.note}>{node}</Tooltip>
+    }
+    return node
+}
+
+export function SupportedPlatforms(props: {
+    web?: boolean | { note?: ReactNode }
+    android?: boolean | { note?: ReactNode }
+    ios?: boolean | { note?: ReactNode }
+    reactNative?: boolean | { note?: ReactNode }
+    flutter?: boolean | { note?: ReactNode }
+}): JSX.Element {
+    return (
+        <div className="text-xs inline-flex flex-row bg-bg-3000 rounded items-center border overflow-hidden mb-2">
+            <span className="px-1 py-0.5 font-semibold">Supported platforms:</span>
+            <LemonDivider vertical className="h-full" />
+            <SupportedPlatform
+                note={isObject(props.web) ? props.web.note : undefined}
+                label="Web"
+                supported={!!props.web}
+            />
+
+            <LemonDivider vertical className="h-full" />
+            <SupportedPlatform
+                note={isObject(props.android) ? props.android.note : undefined}
+                label="Android"
+                supported={!!props.android}
+            />
+
+            <LemonDivider vertical className="h-full" />
+            <SupportedPlatform
+                note={isObject(props.ios) ? props.ios.note : undefined}
+                label="iOS"
+                supported={!!props.ios}
+            />
+
+            <LemonDivider vertical className="h-full" />
+            <SupportedPlatform
+                note={isObject(props.reactNative) ? props.reactNative.note : undefined}
+                label="React Native"
+                supported={!!props.reactNative}
+            />
+
+            <LemonDivider vertical className="h-full" />
+            <SupportedPlatform
+                note={isObject(props.flutter) ? props.flutter.note : undefined}
+                label="Flutter"
+                supported={!!props.flutter}
+            />
+        </div>
+    )
+}
+
 function LogCaptureSettings(): JSX.Element {
     const { updateCurrentTeam } = useActions(teamLogic)
     const { currentTeam } = useValues(teamLogic)
 
     return (
         <div>
             <h3>Log capture</h3>
+            <SupportedPlatforms android={true} ios={true} flutter={true} web={true} reactNative={true} />
             <p>
                 This setting controls if browser console logs will be captured as a part of recordings. The console logs
                 will be shown in the recording player to help you debug any issues.
@@ -52,6 +136,19 @@ function CanvasCaptureSettings(): JSX.Element | null {
     return (
         <div>
             <h3>Canvas capture</h3>
+            <SupportedPlatforms
+                android={false}
+                ios={false}
+                flutter={{
+                    note: (
+                        <>
+                            If you're using the `canvaskit` renderer on Flutter Web, you must also enable canvas capture
+                        </>
+                    ),
+                }}
+                web={true}
+                reactNative={false}
+            />
             <p>
                 This setting controls if browser canvas elements will be captured as part of recordings.{' '}
                 <b>
@@ -111,6 +208,7 @@ export function NetworkCaptureSettings(): JSX.Element {
 
     return (
         <>
+            <SupportedPlatforms android={true} ios={true} flutter={false} web={true} reactNative={false} />
             <p>
                 This setting controls if performance and network information will be captured alongside recordings. The
                 network requests and timings will be shown in the recording player to help you debug any issues.
@@ -140,7 +238,7 @@ export function NetworkCaptureSettings(): JSX.Element {
                         Learn how to mask header and payload values in our docs
                     </Link>
                 </p>
-                <p>Capture headers and body are only available for JavaScript Web.</p>
+                <SupportedPlatforms android={false} ios={false} flutter={false} web={true} reactNative={false} />
                 <LemonBanner type="info" className="mb-4">
                     <PayloadWarning />
                 </LemonBanner>
@@ -220,6 +318,7 @@ export function NetworkCaptureSettings(): JSX.Element {
 export function ReplayAuthorizedDomains(): JSX.Element {
     return (
         <div className="space-y-2">
+            <SupportedPlatforms android={false} ios={false} flutter={false} web={true} reactNative={false} />
             <p>
                 Use the settings below to restrict the domains where recordings will be captured. If no domains are
                 selected, then there will be no domain restriction.
@@ -399,6 +498,7 @@ export function ReplayGeneral(): JSX.Element {
     return (
         <div className="flex flex-col gap-4">
             <div>
+                <SupportedPlatforms android={true} ios={true} flutter={true} web={true} reactNative={true} />
                 <p>
                     Watch recordings of how users interact with your web app to see what can be improved.{' '}
                     <Link