chore: make error tracking UI full with and remove card style (#42240)

Author: daibhin

frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--dark.png

@@ -10,7 +10,8 @@ export interface DataSourceTableProps<T extends Record<string, any>> {
     dataSource: BuiltLogic<DataSourceLogic<T>>
     className?: string
     children?: React.ReactNode
-    embedded?: boolean
+    embedded?: LemonTableProps<T>['embedded']
+    stealth?: LemonTableProps<T>['stealth']
     expandable?: LemonTableProps<T>['expandable']
     onRowClick?: (item: T, evt: MouseEvent) => void
     rowRibbonColor?: LemonTableProps<T>['rowRibbonColor']
@@ -20,6 +21,7 @@ export function DataSourceTable<T extends Record<string, any>>({
     dataSource,
     className,
     embedded = false,
+    stealth = false,
     onRowClick,
     rowRibbonColor,
     expandable,
@@ -35,6 +37,7 @@ export function DataSourceTable<T extends Record<string, any>>({
                 title: props.title,
                 align: props.align,
                 width: props.width,
+                className: props.className,
                 render: (_, record: T, recordIndex: number, rowCount: number) =>
                     props.cellRenderer(record, recordIndex, rowCount),
             } as LemonTableColumn<T, keyof T | undefined>
@@ -47,10 +50,8 @@ export function DataSourceTable<T extends Record<string, any>>({
             }
             return {
                 // onClick handler adds style to row we don't want
-                onClick: (event: MouseEvent) => {
-                    onRowClick(record, event)
-                },
-                className: 'hover:bg-fill-highlight-50',
+                onClick: (event: MouseEvent) => onRowClick(record, event),
+                className: 'hover:bg-color-accent-highlight-secondary',
             }
         },
         [onRowClick]
@@ -62,6 +63,7 @@ export function DataSourceTable<T extends Record<string, any>>({
             columns={columns}
             loading={itemsLoading}
             embedded={embedded}
+            stealth={stealth}
             onRow={onRow}
             className={className}
             footer={<DataSourceTableFooter dataSource={dataSource} />}
@@ -102,6 +104,7 @@ export interface DataSourceTableColumnProps<T> {
     title?: string
     align?: 'left' | 'right' | 'center'
     width?: string
+    className?: string
     cellRenderer: (item: T, itemIdx: number, rowCount: number) => React.ReactNode
 }
 

frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--light.png

@@ -12,6 +12,7 @@ import { IconLink, IconPlayCircle } from 'lib/lemon-ui/icons'
 import { ButtonPrimitive } from 'lib/ui/Button/ButtonPrimitives'
 import { isString } from 'lib/utils'
 import { copyToClipboard } from 'lib/utils/copyToClipboard'
+import { cn } from 'lib/utils/css-classes'
 import { PersonDisplay, PersonIcon } from 'scenes/persons/PersonDisplay'
 import { asDisplay } from 'scenes/persons/person-utils'
 import { urls } from 'scenes/urls'
@@ -32,10 +33,14 @@ export interface EventsTableProps {
     onEventSelect: (event: ErrorEventType | null) => void
 }
 
-export function EventsTable({ query, queryKey, onEventSelect }: EventsTableProps): JSX.Element {
+export function EventsTable({ query, queryKey, onEventSelect, selectedEvent }: EventsTableProps): JSX.Element {
     const tagRenderer = useErrorTagRenderer()
     const dataSource = eventsSourceLogic({ queryKey, query })
 
+    function isEventSelected(record: ErrorEventType): boolean {
+        return selectedEvent ? selectedEvent.uuid === record.uuid : false
+    }
+
     function renderTitle(record: ErrorEventType): JSX.Element {
         return (
             <LemonTableLink
@@ -74,13 +79,27 @@ export function EventsTable({ query, queryKey, onEventSelect }: EventsTableProps
         return <TZLabel time={record.timestamp} />
     }
 
+    function renderRowSelectedIndicator(record: ErrorEventType): JSX.Element {
+        return (
+            <div
+                className={cn(
+                    'w-1 min-h-[84px]',
+                    isEventSelected(record)
+                        ? 'bg-primary-3000 hover:bg-primary-3000'
+                        : 'hover:bg-color-accent-highlight-secondary'
+                )}
+            />
+        )
+    }
+
     return (
         <DataSourceTable<ErrorEventType>
             dataSource={dataSource}
             embedded
-            onRowClick={undefined}
+            onRowClick={(record) => onEventSelect(record)}
             className="overflow-auto"
         >
+            <DataSourceTableColumn<ErrorEventType> className="p-0" cellRenderer={renderRowSelectedIndicator} />
             <DataSourceTableColumn<ErrorEventType> title="Exception" cellRenderer={renderTitle} />
             <DataSourceTableColumn<ErrorEventType> title="Labels" align="right" cellRenderer={renderAttributes} />
             <DataSourceTableColumn<ErrorEventType> title="Actions" align="right" cellRenderer={Actions} />

frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--dark.png

@@ -8,7 +8,6 @@ import { ErrorPropertiesLogicProps, errorPropertiesLogic } from 'lib/components/
 import { ErrorEventType } from 'lib/components/Errors/types'
 import { TZLabel } from 'lib/components/TZLabel'
 import { TabsPrimitive, TabsPrimitiveList, TabsPrimitiveTrigger } from 'lib/ui/TabsPrimitive/TabsPrimitive'
-import { cn } from 'lib/utils/css-classes'
 
 import { ErrorTrackingRelationalIssue } from '~/queries/schema/schema-general'
 
@@ -64,7 +63,7 @@ function ExceptionCardContent({ issue, issueLoading, timestamp, label }: Excepti
     const { setCurrentTab } = useActions(exceptionCardLogic)
 
     return (
-        <LemonCard hoverEffect={false} className={cn('p-0 relative overflow-y-auto w-full')}>
+        <LemonCard hoverEffect={false} className="p-0 relative overflow-y-auto w-full border-0 rounded-none">
             <TabsPrimitive value={currentTab} onValueChange={setCurrentTab}>
                 <div className="flex justify-between h-[2rem] items-center w-full px-2 border-b">
                     <TabsPrimitiveList className="flex justify-between w-full h-full items-center">

frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--light.png

@@ -6,7 +6,7 @@ import { useEffect } from 'react'
 import { useRef } from 'react'
 
 import { IconFilter, IconList, IconSearch } from '@posthog/icons'
-import { LemonCollapse, LemonDivider } from '@posthog/lemon-ui'
+import { LemonDivider } from '@posthog/lemon-ui'
 
 import { Resizer } from 'lib/components/Resizer/Resizer'
 import { ResizerLogicProps, resizerLogic } from 'lib/components/Resizer/resizerLogic'
@@ -66,33 +66,36 @@ export function ErrorTrackingIssueScene(): JSX.Element {
         <ErrorTrackingSetupPrompt>
             <BindLogic logic={issueFiltersLogic} props={{ logicKey: ERROR_TRACKING_ISSUE_SCENE_LOGIC_KEY }}>
                 {issue && (
-                    <div className="px-4">
-                        <SceneTitleSection
-                            canEdit
-                            name={issue.name}
-                            onNameChange={updateName}
-                            description={null}
-                            resourceType={{ type: 'error_tracking' }}
-                            actions={
-                                <div className="flex items-center gap-1">
-                                    <IssueAssigneeSelect
-                                        assignee={issue.assignee}
-                                        onChange={updateAssignee}
-                                        disabled={issue.status != 'active'}
-                                    />
-                                    <IssueStatusSelect status={issue.status} onChange={updateStatus} />
-                                </div>
-                            }
-                        />
-
+                    <>
+                        <div className="px-4">
+                            <SceneTitleSection
+                                canEdit
+                                name={issue.name}
+                                onNameChange={updateName}
+                                description={null}
+                                resourceType={{ type: 'error_tracking' }}
+                                actions={
+                                    <div className="flex items-center gap-1">
+                                        <IssueAssigneeSelect
+                                            assignee={issue.assignee}
+                                            onChange={updateAssignee}
+                                            disabled={issue.status != 'active'}
+                                        />
+                                        <IssueStatusSelect status={issue.status} onChange={updateStatus} />
+                                    </div>
+                                }
+                            />
+                        </div>
                         <ErrorTrackingIssueScenePanel issue={issue} />
-                    </div>
-                )}
 
-                <div className="ErrorTrackingIssue flex h-[calc(100vh-var(--scene-layout-header-height)-50px)]">
-                    <LeftHandColumn />
-                    <RightHandColumn />
-                </div>
+                        <div className="ErrorTrackingIssue h-[calc(100vh-var(--scene-layout-header-height)-50px)] flex">
+                            <div className="flex flex-1 h-full">
+                                <LeftHandColumn />
+                                <RightHandColumn />
+                            </div>
+                        </div>
+                    </>
+                )}
             </BindLogic>
         </ErrorTrackingSetupPrompt>
     )
@@ -103,7 +106,7 @@ const RightHandColumn = (): JSX.Element => {
     const tagRenderer = useErrorTagRenderer()
 
     return (
-        <div className="flex flex-1 gap-y-1 px-4 py-3 overflow-y-auto min-w-[375px]">
+        <div className="flex flex-1 gap-y-1 overflow-y-auto min-w-[375px]">
             <PostHogSDKIssueBanner event={selectedEvent} />
 
             <ExceptionCard
@@ -139,7 +142,7 @@ const LeftHandColumn = (): JSX.Element => {
                 width: desiredSize ?? '30%',
                 minWidth: 320,
             }}
-            className="flex flex-col relative bg-bg-light"
+            className="flex flex-col relative bg-surface-primary"
         >
             <TabsPrimitive
                 value={category}
@@ -148,7 +151,7 @@ const LeftHandColumn = (): JSX.Element => {
             >
                 <div>
                     <ScrollableShadows direction="horizontal" className="border-b" hideScrollbars>
-                        <TabsPrimitiveList className="flex justify-between space-x-2">
+                        <TabsPrimitiveList className="flex justify-between space-x-0.5">
                             <TabsPrimitiveTrigger className="flex items-center px-2 py-1.5" value="exceptions">
                                 <IconList className="mr-1" />
                                 <span className="text-nowrap">Exceptions</span>
@@ -195,35 +198,26 @@ const LeftHandColumn = (): JSX.Element => {
 }
 
 const ExceptionsTab = (): JSX.Element => {
-    const { eventsQuery, eventsQueryKey } = useValues(errorTrackingIssueSceneLogic)
+    const { eventsQuery, eventsQueryKey, selectedEvent } = useValues(errorTrackingIssueSceneLogic)
     const { selectEvent } = useActions(errorTrackingIssueSceneLogic)
 
     return (
         <div className="flex flex-col h-full">
-            <LemonCollapse
-                embedded
-                panels={[
-                    {
-                        key: 'filters',
-                        header: 'Add filters',
-                        content: (
-                            <ErrorFilters.Root>
-                                <div className="flex gap-2 justify-between flex-wrap">
-                                    <ErrorFilters.DateRange />
-                                    <ErrorFilters.InternalAccounts />
-                                </div>
-                                <ErrorFilters.FilterGroup />
-                            </ErrorFilters.Root>
-                        ),
-                    },
-                ]}
-            />
+            <div className="px-2 py-3">
+                <ErrorFilters.Root>
+                    <div className="flex gap-2 justify-between flex-wrap">
+                        <ErrorFilters.DateRange />
+                        <ErrorFilters.InternalAccounts />
+                    </div>
+                    <ErrorFilters.FilterGroup />
+                </ErrorFilters.Root>
+            </div>
             <LemonDivider className="my-0" />
             <Metadata className="flex flex-col overflow-y-auto">
                 <EventsTable
                     query={eventsQuery}
                     queryKey={eventsQueryKey}
-                    selectedEvent={null}
+                    selectedEvent={selectedEvent}
                     onEventSelect={(selectedEvent) => {
                         if (selectedEvent) {
                             selectEvent(selectedEvent)