Skip to content

Commit d71f506

Browse files
malwilleymalwilley
committed
ref(issues): Remove old UI from remaining event interface files
1 parent 22867f0 commit d71f506

File tree

4 files changed

+100
-299
lines changed

4 files changed

+100
-299
lines changed

‎static/app/components/events/interfaces/request/index.tsx‎

Lines changed: 89 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@ import {ExternalLink} from '@sentry/scraps/link';
77
import {SegmentedControl} from '@sentry/scraps/segmentedControl';
88
import {Text} from '@sentry/scraps/text';
99

10-
import {ClippedBox} from 'sentry/components/clippedBox';
1110
import {ErrorBoundary} from 'sentry/components/errorBoundary';
12-
import {EventDataSection} from 'sentry/components/events/eventDataSection';
11+
import {KeyValueList} from 'sentry/components/events/interfaces/keyValueList';
1312
import {GraphQlRequestBody} from 'sentry/components/events/interfaces/request/graphQlRequestBody';
1413
import {getCurlCommand, getFullUrl} from 'sentry/components/events/interfaces/utils';
1514
import {
1615
KeyValueData,
1716
type KeyValueDataContentProps,
1817
} from 'sentry/components/keyValueData';
18+
import {StructuredEventData} from 'sentry/components/structuredEventData';
19+
import {JsonEventData} from 'sentry/components/structuredEventData/jsonEventData';
1920
import {Truncate} from 'sentry/components/truncate';
2021
import {IconOpen} from 'sentry/icons';
2122
import {t, tct} from 'sentry/locale';
@@ -25,13 +26,8 @@ import {defined} from 'sentry/utils';
2526
import {isUrl} from 'sentry/utils/string/isUrl';
2627
import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
2728
import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
28-
import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
2929

30-
import {
31-
getBodyContent,
32-
RichHttpContentClippedBoxBodySection,
33-
} from './richHttpContentClippedBoxBodySection';
34-
import {RichHttpContentClippedBoxKeyValueList} from './richHttpContentClippedBoxKeyValueList';
30+
import {getTransformedData} from './getTransformedData';
3531

3632
interface RequestProps {
3733
data: EntryRequest['data'];
@@ -44,49 +40,86 @@ interface RequestBodyProps extends RequestProps {
4440

4541
type View = 'formatted' | 'curl';
4642

47-
function RequestBodySection({data, event, meta}: RequestBodyProps) {
48-
const hasStreamlinedUI = useHasStreamlinedUI();
43+
function getBodyContent({
44+
data,
45+
meta,
46+
inferredContentType,
47+
}: {
48+
data: EntryRequest['data']['data'];
49+
inferredContentType: EntryRequest['data']['inferredContentType'];
50+
meta: Record<any, any> | undefined;
51+
}) {
52+
switch (inferredContentType) {
53+
case 'application/json':
54+
return (
55+
<JsonEventData
56+
data-test-id="rich-http-content-body-context-data"
57+
data={data}
58+
showCopyButton
59+
/>
60+
);
61+
case 'application/x-www-form-urlencoded':
62+
case 'multipart/form-data': {
63+
const transformedData = getTransformedData(data, meta).map(d => {
64+
const [key, value] = d.data;
65+
return {
66+
key,
67+
subject: key,
68+
value,
69+
meta: d.meta,
70+
};
71+
});
4972

73+
if (!transformedData.length) {
74+
return null;
75+
}
76+
77+
return (
78+
<KeyValueList
79+
data-test-id="rich-http-content-body-key-value-list"
80+
data={transformedData}
81+
isContextData
82+
/>
83+
);
84+
}
85+
86+
default:
87+
return (
88+
<pre data-test-id="rich-http-content-body-section-pre">
89+
<StructuredEventData data={data} meta={meta} withAnnotatedText showCopyButton />
90+
</pre>
91+
);
92+
}
93+
}
94+
95+
function RequestBodySection({data, event, meta}: RequestBodyProps) {
5096
if (!defined(data.data)) {
5197
return null;
5298
}
5399

54100
if (data.apiTarget === 'graphql' && typeof data.data.query === 'string') {
55-
return hasStreamlinedUI ? (
56-
<RequestCardPanel>
57-
<KeyValueData.Title>{t('Body')}</KeyValueData.Title>
58-
<GraphQlRequestBody data={data.data} {...{event, meta}} />
59-
</RequestCardPanel>
60-
) : (
61-
<GraphQlRequestBody data={data.data} {...{event, meta}} />
62-
);
63-
}
64-
65-
if (hasStreamlinedUI) {
66-
const contentBody = getBodyContent({
67-
data: data.data,
68-
meta: meta?.data,
69-
inferredContentType: data.inferredContentType,
70-
});
71101
return (
72102
<RequestCardPanel>
73103
<KeyValueData.Title>{t('Body')}</KeyValueData.Title>
74-
{contentBody}
104+
<GraphQlRequestBody data={data.data} {...{event, meta}} />
75105
</RequestCardPanel>
76106
);
77107
}
78108

109+
const contentBody = getBodyContent({
110+
data: data.data,
111+
meta: meta?.data,
112+
inferredContentType: data.inferredContentType,
113+
});
79114
return (
80-
<RichHttpContentClippedBoxBodySection
81-
data={data.data}
82-
inferredContentType={data.inferredContentType}
83-
meta={meta?.data}
84-
/>
115+
<RequestCardPanel>
116+
<KeyValueData.Title>{t('Body')}</KeyValueData.Title>
117+
{contentBody}
118+
</RequestCardPanel>
85119
);
86120
}
87121

88122
export function Request({data, event}: RequestProps) {
89-
const hasStreamlinedUI = useHasStreamlinedUI();
90123
const entryIndex = event.entries.findIndex(entry => entry.type === EntryType.REQUEST);
91124
const meta = event._meta?.entries?.[entryIndex]?.data;
92125

@@ -133,99 +166,38 @@ export function Request({data, event}: RequestProps) {
133166
<TruncatedPathLink method={data.method} url={parsedUrl} fullUrl={fullUrl} />
134167
);
135168

136-
if (hasStreamlinedUI) {
137-
return (
138-
<FoldSection
139-
sectionKey={SectionKey.REQUEST}
140-
title={t('HTTP Request')}
141-
actions={actions}
142-
>
143-
{title}
144-
{view === 'curl' ? (
145-
<CodeBlock language="bash">{getCurlCommand(data)}</CodeBlock>
146-
) : (
147-
<Fragment>
148-
<RequestBodySection data={data} event={event} meta={meta} />
149-
<RequestDataCard
150-
title={t('Query String')}
151-
data={data.query}
152-
meta={meta?.query}
153-
/>
154-
<RequestDataCard
155-
title={t('Fragment')}
156-
data={data.fragment}
157-
meta={undefined}
158-
/>
159-
<RequestDataCard
160-
title={t('Cookies')}
161-
data={data.cookies}
162-
meta={meta?.cookies}
163-
/>
164-
<RequestDataCard
165-
title={t('Headers')}
166-
data={data.headers}
167-
meta={meta?.headers}
168-
/>
169-
<RequestDataCard title={t('Environment')} data={data.env} meta={meta?.env} />
170-
</Fragment>
171-
)}
172-
</FoldSection>
173-
);
174-
}
175-
176169
return (
177-
<EventDataSection
178-
type={SectionKey.REQUEST}
179-
title={title}
170+
<FoldSection
171+
sectionKey={SectionKey.REQUEST}
172+
title={t('HTTP Request')}
180173
actions={actions}
181-
className="request"
182174
>
175+
{title}
183176
{view === 'curl' ? (
184177
<CodeBlock language="bash">{getCurlCommand(data)}</CodeBlock>
185178
) : (
186179
<Fragment>
187-
{defined(data.query) && (
188-
<RichHttpContentClippedBoxKeyValueList
189-
title={t('Query String')}
190-
data={data.query}
191-
meta={meta?.query}
192-
isContextData
193-
/>
194-
)}
195-
{defined(data.fragment) && (
196-
<ClippedBox title={t('Fragment')}>
197-
<ErrorBoundary mini>
198-
<pre>{data.fragment}</pre>
199-
</ErrorBoundary>
200-
</ClippedBox>
201-
)}
202-
<RequestBodySection {...{data, event, meta}} />
203-
{defined(data.cookies) && Object.keys(data.cookies).length > 0 && (
204-
<RichHttpContentClippedBoxKeyValueList
205-
defaultCollapsed
206-
title={t('Cookies')}
207-
data={data.cookies}
208-
meta={meta?.cookies}
209-
/>
210-
)}
211-
{defined(data.headers) && (
212-
<RichHttpContentClippedBoxKeyValueList
213-
title={t('Headers')}
214-
data={data.headers}
215-
meta={meta?.headers}
216-
/>
217-
)}
218-
{defined(data.env) && (
219-
<RichHttpContentClippedBoxKeyValueList
220-
defaultCollapsed
221-
title={t('Environment')}
222-
data={data.env}
223-
meta={meta?.env}
224-
/>
225-
)}
180+
<RequestBodySection data={data} event={event} meta={meta} />
181+
<RequestDataCard
182+
title={t('Query String')}
183+
data={data.query}
184+
meta={meta?.query}
185+
/>
186+
<RequestDataCard title={t('Fragment')} data={data.fragment} meta={undefined} />
187+
<RequestDataCard
188+
title={t('Cookies')}
189+
data={data.cookies}
190+
meta={meta?.cookies}
191+
/>
192+
<RequestDataCard
193+
title={t('Headers')}
194+
data={data.headers}
195+
meta={meta?.headers}
196+
/>
197+
<RequestDataCard title={t('Environment')} data={data.env} meta={meta?.env} />
226198
</Fragment>
227199
)}
228-
</EventDataSection>
200+
</FoldSection>
229201
);
230202
}
231203

‎static/app/components/events/interfaces/request/richHttpContentClippedBoxBodySection.tsx‎

Lines changed: 0 additions & 82 deletions
This file was deleted.

0 commit comments

Comments
 (0)