starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-26 11:21:16 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Don't load response when blocking large responses

Browse Source
This commit is contained in:
Gregory Schier
2025-01-10 06:27:57 -08:00
parent f694456ddc
commit 8b5b66acf0
10 changed files with 197 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src-web/components/ConfirmLargeResponse.tsx Normal file
View File

@@ -0,0 +1,60 @@
import type { HttpResponse } from '@yaakapp-internal/models';
import { useMemo, type ReactNode } from 'react';
import { useSaveResponse } from '../hooks/useSaveResponse';
import { useToggle } from '../hooks/useToggle';
import { isProbablyTextContentType } from '../lib/contentType';
import { getContentTypeHeader } from '../lib/model_util';
import { getResponseBodyText } from '../lib/responseBody';
import { CopyButton } from './CopyButton';
import { Banner } from './core/Banner';
import { Button } from './core/Button';
import { InlineCode } from './core/InlineCode';
import { SizeTag } from './core/SizeTag';
import { HStack } from './core/Stacks';
interface Props {
children: ReactNode;
response: HttpResponse;
}
const LARGE_TEXT_BYTES = 2 * 1000 * 1000;
const LARGE_OTHER_BYTES = 10 * 1000 * 1000;
export function ConfirmLargeResponse({ children, response }: Props) {
const { mutate: saveResponse } = useSaveResponse(response);
const [showLargeResponse, toggleShowLargeResponse] = useToggle();
const isProbablyText = useMemo(() => {
const contentType = getContentTypeHeader(response.headers);
return isProbablyTextContentType(contentType);
}, [response.headers]);
const contentLength = response.contentLength ?? 0;
const tooLargeBytes = isProbablyText ? LARGE_TEXT_BYTES : LARGE_OTHER_BYTES;
const isLarge = contentLength > tooLargeBytes;
if (!showLargeResponse && isLarge) {
return (
<Banner color="primary" className="h-full flex flex-col gap-3">
<p>
Showing responses over{' '}
<InlineCode>
<SizeTag contentLength={tooLargeBytes} />
</InlineCode>{' '}
may impact performance
</p>
<HStack wrap space={2}>
<Button color="primary" size="xs" onClick={toggleShowLargeResponse}>
Reveal Response
</Button>
<Button color="secondary" variant="border" size="xs" onClick={() => saveResponse()}>
Save to File
</Button>
{isProbablyText && (
<CopyButton color="secondary" variant="border" size="xs" text={() => getResponseBodyText(response)} />
)}
</HStack>
</Banner>
);
}
return <>{children}</>;
}

20
src-web/components/CopyButton.tsx
View File

@@ -1,10 +1,11 @@
import { useCopy } from '../hooks/useCopy';
import { useTimedBoolean } from '../hooks/useTimedBoolean';
import { showToast } from '../lib/toast';
import type { ButtonProps } from './core/Button';
import { Button } from './core/Button';
interface Props extends ButtonProps {
text: string;
interface Props extends Omit<ButtonProps, 'onClick'> {
text: string | (() => Promise<string | null>);
}
export function CopyButton({ text, ...props }: Props) {
@@ -13,9 +14,18 @@ export function CopyButton({ text, ...props }: Props) {
return (
<Button
{...props}
onClick={() => {
copy(text);
setCopied();
onClick={async () => {
const content = typeof text === 'function' ? await text() : text;
if (content == null) {
showToast({
id: 'failed-to-copy',
color: 'danger',
message: 'Failed to copy',
});
} else {
copy(content);
setCopied();
}
}}
>
{copied ? 'Copied' : 'Copy'}

59
src-web/components/ResponsePane.tsx
View File

@@ -27,8 +27,9 @@ import { EventStreamViewer } from './responseViewers/EventStreamViewer';
import { HTMLOrTextViewer } from './responseViewers/HTMLOrTextViewer';
import { ImageViewer } from './responseViewers/ImageViewer';
import { PdfViewer } from './responseViewers/PdfViewer';
import {SvgViewer} from "./responseViewers/SvgViewer";
import { SvgViewer } from './responseViewers/SvgViewer';
import { VideoViewer } from './responseViewers/VideoViewer';
import { ConfirmLargeResponse } from './ConfirmLargeResponse';
interface Props {
style?: CSSProperties;
@@ -162,33 +163,35 @@ export const ResponsePane = memo(function ResponsePane({
tabListClassName="mt-1.5"
>
<TabContent value={TAB_BODY}>
{!activeResponse.contentLength ? (
<div className="pb-2 h-full">
<EmptyStateText>Empty Body</EmptyStateText>
</div>
) : contentType?.match(/^text\/event-stream$/i) && viewMode === 'pretty' ? (
<EventStreamViewer response={activeResponse} />
) : contentType?.match(/^image\/svg/) ? (
<SvgViewer response={activeResponse} />
) : contentType?.match(/^image/i) ? (
<EnsureCompleteResponse response={activeResponse} render={ImageViewer} />
) : contentType?.match(/^audio/i) ? (
<EnsureCompleteResponse response={activeResponse} render={AudioViewer} />
) : contentType?.match(/^video/i) ? (
<EnsureCompleteResponse response={activeResponse} render={VideoViewer} />
) : contentType?.match(/pdf/i) ? (
<EnsureCompleteResponse response={activeResponse} render={PdfViewer} />
) : contentType?.match(/csv|tab-separated/i) ? (
<CsvViewer className="pb-2" response={activeResponse} />
) : (
// ) : viewMode === 'pretty' && contentType?.includes('json') ? (
// <JsonAttributeTree attrValue={activeResponse} />
<HTMLOrTextViewer
textViewerClassName="-mr-2 bg-surface" // Pull to the right
response={activeResponse}
pretty={viewMode === 'pretty'}
/>
)}
<ConfirmLargeResponse response={activeResponse}>
{!activeResponse.contentLength ? (
<div className="pb-2 h-full">
<EmptyStateText>Empty Body</EmptyStateText>
</div>
) : contentType?.match(/^text\/event-stream$/i) && viewMode === 'pretty' ? (
<EventStreamViewer response={activeResponse} />
) : contentType?.match(/^image\/svg/) ? (
<SvgViewer response={activeResponse} />
) : contentType?.match(/^image/i) ? (
<EnsureCompleteResponse response={activeResponse} render={ImageViewer} />
) : contentType?.match(/^audio/i) ? (
<EnsureCompleteResponse response={activeResponse} render={AudioViewer} />
) : contentType?.match(/^video/i) ? (
<EnsureCompleteResponse response={activeResponse} render={VideoViewer} />
) : contentType?.match(/pdf/i) ? (
<EnsureCompleteResponse response={activeResponse} render={PdfViewer} />
) : contentType?.match(/csv|tab-separated/i) ? (
<CsvViewer className="pb-2" response={activeResponse} />
) : (
// ) : viewMode === 'pretty' && contentType?.includes('json') ? (
// <JsonAttributeTree attrValue={activeResponse} />
<HTMLOrTextViewer
textViewerClassName="-mr-2 bg-surface" // Pull to the right
response={activeResponse}
pretty={viewMode === 'pretty'}
/>
)}
</ConfirmLargeResponse>
</TabContent>
<TabContent value={TAB_HEADERS}>
<ResponseHeaders response={activeResponse} />

5
src-web/components/core/Dropdown.tsx
View File

@@ -437,6 +437,11 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
<motion.div
tabIndex={0}
onKeyDown={handleMenuKeyDown}
onContextMenu={e => {
// Prevent showing any ancestor context menus
e.stopPropagation();
e.preventDefault();
}}
initial={{ opacity: 0, y: (styles.upsideDown ? 1 : -1) * 5, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
role="menu"

2
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -42,6 +42,8 @@ export function Tabs({
}: Props) {
const ref = useRef<HTMLDivElement | null>(null);
value = value ?? tabs[0]?.value;
// Update tabs when value changes
useEffect(() => {
const tabs = ref.current?.querySelectorAll<HTMLDivElement>(`[data-tab]`);

5
src-web/components/responseViewers/HTMLOrTextViewer.tsx
View File

@@ -1,7 +1,6 @@
import type { HttpResponse } from '@yaakapp-internal/models';
import { useContentTypeFromHeaders } from '../../hooks/useContentTypeFromHeaders';
import { useResponseBodyText } from '../../hooks/useResponseBodyText';
import { useSaveResponse } from '../../hooks/useSaveResponse';
import { languageFromContentType } from '../../lib/contentType';
import { BinaryViewer } from './BinaryViewer';
import { TextViewer } from './TextViewer';
@@ -19,7 +18,6 @@ export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Prop
useContentTypeFromHeaders(response.headers),
rawTextBody.data ?? '',
);
const saveResponse = useSaveResponse(response);
if (rawTextBody.isLoading) {
return null;
@@ -31,7 +29,7 @@ export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Prop
}
if (language === 'html' && pretty) {
return <WebPageViewer response={response}/>;
return <WebPageViewer response={response} />;
} else {
return (
<TextViewer
@@ -39,7 +37,6 @@ export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Prop
text={rawTextBody.data}
pretty={pretty}
className={textViewerClassName}
onSaveResponse={saveResponse.mutate}
responseId={response.id}
requestId={response.requestId}
/>

51
src-web/components/responseViewers/TextViewer.tsx
View File

@@ -2,25 +2,16 @@ import classNames from 'classnames';
import type { ReactNode } from 'react';
import { useCallback, useMemo } from 'react';
import { createGlobalState } from 'react-use';
import { useCopy } from '../../hooks/useCopy';
import { useDebouncedValue } from '../../hooks/useDebouncedValue';
import { useFilterResponse } from '../../hooks/useFilterResponse';
import { useFormatText } from '../../hooks/useFormatText';
import { useToggle } from '../../hooks/useToggle';
import { CopyButton } from '../CopyButton';
import { Banner } from '../core/Banner';
import { Button } from '../core/Button';
import { hyperlink } from '../core/Editor/hyperlink/extension';
import { IconButton } from '../core/IconButton';
import { InlineCode } from '../core/InlineCode';
import { Input } from '../core/Input';
import { SizeTag } from '../core/SizeTag';
import { HStack } from '../core/Stacks';
import type { EditorProps } from '../core/Editor/Editor';
import { Editor } from '../core/Editor/Editor';
import { hyperlink } from '../core/Editor/hyperlink/extension';
import { IconButton } from '../core/IconButton';
import { Input } from '../core/Input';
const extraExtensions = [hyperlink];
const LARGE_RESPONSE_BYTES = 2 * 1000 * 1000;
interface Props {
pretty: boolean;
@@ -29,24 +20,13 @@ interface Props {
language: EditorProps['language'];
responseId: string;
requestId: string;
onSaveResponse: () => void;
}
const useFilterText = createGlobalState<Record<string, string | null>>({});
export function TextViewer({
language,
text,
responseId,
requestId,
pretty,
className,
onSaveResponse,
}: Props) {
export function TextViewer({ language, text, responseId, requestId, pretty, className }: Props) {
const [filterTextMap, setFilterTextMap] = useFilterText();
const [showLargeResponse, toggleShowLargeResponse] = useToggle();
const filterText = filterTextMap[requestId] ?? null;
const copy = useCopy();
const debouncedFilterText = useDebouncedValue(filterText, 200);
const setFilterText = useCallback(
(v: string | null) => {
@@ -121,29 +101,6 @@ export function TextViewer({
const formattedBody = useFormatText({ text, language, pretty });
if (!showLargeResponse && text.length > LARGE_RESPONSE_BYTES) {
return (
<Banner color="primary" className="h-full flex flex-col gap-3">
<p>
Showing responses over{' '}
<InlineCode>
<SizeTag contentLength={LARGE_RESPONSE_BYTES} />
</InlineCode>{' '}
may impact performance
</p>
<HStack wrap space={2}>
<Button color="primary" size="xs" onClick={toggleShowLargeResponse}>
Reveal Response
</Button>
<Button variant="border" size="xs" onClick={onSaveResponse}>
Save to File
</Button>
<CopyButton variant="border" size="xs" onClick={() => copy(text)} text={text} />
</HStack>
</Banner>
);
}
if (formattedBody.data == null) {
return null;
}