Don't load response when blocking large responses

src-web/components/responseViewers/HTMLOrTextViewer.tsx

@@ -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}
       />

src-web/components/responseViewers/TextViewer.tsx

@@ -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;
   }