diff --git a/frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--dark.png b/frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--dark.png index 304fd0d562d1f..c8104443b8bd4 100644 Binary files a/frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--dark.png and b/frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--dark.png differ diff --git a/frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--light.png b/frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--light.png index 9d44bcda9169f..39a8eef64f6f7 100644 Binary files a/frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--light.png and b/frontend/__snapshots__/errortracking-exceptioncard--exception-card-base--light.png differ diff --git a/frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--dark.png b/frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--dark.png index 8289f0de637d1..0fdfebab3b246 100644 Binary files a/frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--dark.png and b/frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--dark.png differ diff --git a/frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--light.png b/frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--light.png index b39785cfca54a..e4769e5b5889e 100644 Binary files a/frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--light.png and b/frontend/__snapshots__/errortracking-exceptioncard--exception-card-no-in-app--light.png differ diff --git a/products/error_tracking/frontend/components/DataSourceTable/DataSourceTable.tsx b/products/error_tracking/frontend/components/DataSourceTable/DataSourceTable.tsx index b68d1a4c6b02f..a0c390adf22cc 100644 --- a/products/error_tracking/frontend/components/DataSourceTable/DataSourceTable.tsx +++ b/products/error_tracking/frontend/components/DataSourceTable/DataSourceTable.tsx @@ -10,7 +10,8 @@ export interface DataSourceTableProps> { dataSource: BuiltLogic> className?: string children?: React.ReactNode - embedded?: boolean + embedded?: LemonTableProps['embedded'] + stealth?: LemonTableProps['stealth'] expandable?: LemonTableProps['expandable'] onRowClick?: (item: T, evt: MouseEvent) => void rowRibbonColor?: LemonTableProps['rowRibbonColor'] @@ -20,6 +21,7 @@ export function DataSourceTable>({ dataSource, className, embedded = false, + stealth = false, onRowClick, rowRibbonColor, expandable, @@ -35,6 +37,7 @@ export function DataSourceTable>({ 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 @@ -47,10 +50,8 @@ export function DataSourceTable>({ } 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>({ columns={columns} loading={itemsLoading} embedded={embedded} + stealth={stealth} onRow={onRow} className={className} footer={} @@ -102,6 +104,7 @@ export interface DataSourceTableColumnProps { title?: string align?: 'left' | 'right' | 'center' width?: string + className?: string cellRenderer: (item: T, itemIdx: number, rowCount: number) => React.ReactNode } diff --git a/products/error_tracking/frontend/components/EventsTable/EventsTable.tsx b/products/error_tracking/frontend/components/EventsTable/EventsTable.tsx index bfe45857b836e..43af75ed536b1 100644 --- a/products/error_tracking/frontend/components/EventsTable/EventsTable.tsx +++ b/products/error_tracking/frontend/components/EventsTable/EventsTable.tsx @@ -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 ( } + function renderRowSelectedIndicator(record: ErrorEventType): JSX.Element { + return ( +
+ ) + } + return ( dataSource={dataSource} embedded - onRowClick={undefined} + onRowClick={(record) => onEventSelect(record)} className="overflow-auto" > + className="p-0" cellRenderer={renderRowSelectedIndicator} /> title="Exception" cellRenderer={renderTitle} /> title="Labels" align="right" cellRenderer={renderAttributes} /> title="Actions" align="right" cellRenderer={Actions} /> diff --git a/products/error_tracking/frontend/components/ExceptionCard/ExceptionCard.tsx b/products/error_tracking/frontend/components/ExceptionCard/ExceptionCard.tsx index 7f4a6d73209e8..a8e849ed3f6a2 100644 --- a/products/error_tracking/frontend/components/ExceptionCard/ExceptionCard.tsx +++ b/products/error_tracking/frontend/components/ExceptionCard/ExceptionCard.tsx @@ -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 ( - +
diff --git a/products/error_tracking/frontend/scenes/ErrorTrackingIssueScene/ErrorTrackingIssueScene.tsx b/products/error_tracking/frontend/scenes/ErrorTrackingIssueScene/ErrorTrackingIssueScene.tsx index 16f47cd82d546..a72a81ea2b504 100644 --- a/products/error_tracking/frontend/scenes/ErrorTrackingIssueScene/ErrorTrackingIssueScene.tsx +++ b/products/error_tracking/frontend/scenes/ErrorTrackingIssueScene/ErrorTrackingIssueScene.tsx @@ -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 { {issue && ( -
- - - -
- } - /> - + <> +
+ + + +
+ } + /> +
-
- )} -
- - -
+
+
+ + +
+
+ + )} ) @@ -103,7 +106,7 @@ const RightHandColumn = (): JSX.Element => { const tagRenderer = useErrorTagRenderer() return ( -
+
{ width: desiredSize ?? '30%', minWidth: 320, }} - className="flex flex-col relative bg-bg-light" + className="flex flex-col relative bg-surface-primary" > { >
- + Exceptions @@ -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 (
- -
- - -
- - - ), - }, - ]} - /> +
+ +
+ + +
+ +
+
{ if (selectedEvent) { selectEvent(selectedEvent)