From 73cae47ea312e79c4743462d856b19e71263bb7d Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Wed, 14 Feb 2024 11:59:42 +0000
Subject: [PATCH] add stories to see what it looks like

---
 .../ItemPerformanceEvent.stories.tsx          | 33 +++++++++++++++++++
 .../components/ItemPerformanceEvent.tsx       |  8 ++---
 2 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.stories.tsx

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<typeof ItemPerformanceEvent> = {
+    title: 'Components/ItemPerformanceEvent',
+    component: ItemPerformanceEvent,
+    decorators: [
+        mswDecorator({
+            get: {},
+        }),
+    ],
+}
+export default meta
+
+export function InitialHeadersDisplay(): JSX.Element {
+    return <HeadersDisplay request={undefined} response={undefined} isInitial={true} />
+}
+
+export function InitialBodyDisplay(): JSX.Element {
+    return (
+        <BodyDisplay
+            content={undefined}
+            headers={undefined}
+            emptyMessage="Response captured before PostHog was initialized"
+        />
+    )
+}
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 a943176f76440..76a28a190917c 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx
@@ -377,7 +377,7 @@ export function ItemPerformanceEvent({
                                                     headers={item.request_headers}
                                                     emptyMessage={
                                                         item.is_initial
-                                                            ? 'captured before PostHog was initialized'
+                                                            ? 'Request captured before PostHog was initialized'
                                                             : 'No request body captured'
                                                     }
                                                 />
@@ -393,7 +393,7 @@ export function ItemPerformanceEvent({
                                                           headers={item.response_headers}
                                                           emptyMessage={
                                                               item.is_initial
-                                                                  ? 'captured before PostHog was initialized'
+                                                                  ? 'Response captured before PostHog was initialized'
                                                                   : 'No response body captured'
                                                           }
                                                       />
@@ -433,7 +433,7 @@ export function ItemPerformanceEvent({
     )
 }
 
-function BodyDisplay({
+export function BodyDisplay({
     content,
     headers,
     emptyMessage,
@@ -463,7 +463,7 @@ function BodyDisplay({
     )
 }
 
-function HeadersDisplay({
+export function HeadersDisplay({
     request,
     response,
     isInitial,