diff --git a/frontend/__snapshots__/components-itemperformanceevent--initial-body-display--dark.png b/frontend/__snapshots__/components-itemperformanceevent--initial-body-display--dark.png new file mode 100644 index 0000000000000..a1aada324a692 Binary files /dev/null and b/frontend/__snapshots__/components-itemperformanceevent--initial-body-display--dark.png differ diff --git a/frontend/__snapshots__/components-itemperformanceevent--initial-body-display--light.png b/frontend/__snapshots__/components-itemperformanceevent--initial-body-display--light.png new file mode 100644 index 0000000000000..409ddc95e93d1 Binary files /dev/null and b/frontend/__snapshots__/components-itemperformanceevent--initial-body-display--light.png differ diff --git a/frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--dark.png b/frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--dark.png new file mode 100644 index 0000000000000..c6e46bbfdedf9 Binary files /dev/null and b/frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--dark.png differ diff --git a/frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--light.png b/frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--light.png new file mode 100644 index 0000000000000..bc602073b3194 Binary files /dev/null and b/frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--light.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-line--light--webkit.png index e6507b0269eff..d60cbfa5e7556 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line--light--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-line--light--webkit.png differ diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.stories.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.stories.tsx new file mode 100644 index 0000000000000..0edaa80036be1 --- /dev/null +++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.stories.tsx @@ -0,0 +1,33 @@ +import { Meta } from '@storybook/react' +import { + BodyDisplay, + HeadersDisplay, + ItemPerformanceEvent, +} from 'scenes/session-recordings/player/inspector/components/ItemPerformanceEvent' + +import { mswDecorator } from '~/mocks/browser' + +const meta: Meta = { + title: 'Components/ItemPerformanceEvent', + component: ItemPerformanceEvent, + decorators: [ + mswDecorator({ + get: {}, + }), + ], +} +export default meta + +export function InitialHeadersDisplay(): JSX.Element { + return +} + +export function InitialBodyDisplay(): JSX.Element { + return ( + + ) +} diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx index 10c4cb545efe9..76a28a190917c 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx @@ -364,6 +364,7 @@ export function ItemPerformanceEvent({ ), }, @@ -374,7 +375,11 @@ export function ItemPerformanceEvent({ ), }, @@ -386,7 +391,11 @@ export function ItemPerformanceEvent({ ), } @@ -424,7 +433,7 @@ export function ItemPerformanceEvent({ ) } -function BodyDisplay({ +export function BodyDisplay({ content, headers, emptyMessage, @@ -454,23 +463,26 @@ function BodyDisplay({ ) } -function HeadersDisplay({ +export function HeadersDisplay({ request, response, + isInitial, }: { request: Record | undefined response: Record | undefined + isInitial?: boolean }): JSX.Element | null { + const emptyMessage = isInitial ? 'captured before PostHog was initialized' : 'No headers captured' return (

Request Headers

- +

Response Headers

- +
)