Don't load response when blocking large responses

src-tauri/yaak-models/src/queries.rs

@@ -2106,57 +2106,68 @@ pub async fn batch_upsert<R: Runtime>(
 ) -> Result<BatchUpsertResult> {
     let mut imported_resources = BatchUpsertResult::default();
 
-    for v in workspaces {
+    if workspaces.len() > 0 {
-        let x = upsert_workspace(&window, v, update_source).await?;
+        for v in workspaces {
-        imported_resources.workspaces.push(x.clone());
+            let x = upsert_workspace(&window, v, update_source).await?;
+            imported_resources.workspaces.push(x.clone());
+        }
+        info!("Imported {} workspaces", imported_resources.workspaces.len());
     }
-    info!("Imported {} workspaces", imported_resources.workspaces.len());
 
-    while imported_resources.environments.len() < environments.len() {
+    if environments.len() > 0 {
-        for v in environments.clone() {
+        while imported_resources.environments.len() < environments.len() {
-            if let Some(fid) = v.environment_id.clone() {
+            for v in environments.clone() {
-                let imported_parent = imported_resources.environments.iter().find(|f| f.id == fid);
+                if let Some(fid) = v.environment_id.clone() {
-                if imported_parent.is_none() {
+                    let imported_parent =
+                        imported_resources.environments.iter().find(|f| f.id == fid);
+                    if imported_parent.is_none() {
+                        continue;
+                    }
+                }
+                if let Some(_) = imported_resources.environments.iter().find(|f| f.id == v.id) {
                     continue;
                 }
+                let x = upsert_environment(&window, v, update_source).await?;
+                imported_resources.environments.push(x.clone());
             }
-            if let Some(_) = imported_resources.environments.iter().find(|f| f.id == v.id) {
-                continue;
-            }
-            let x = upsert_environment(&window, v, update_source).await?;
-            imported_resources.environments.push(x.clone());
         }
+        info!("Imported {} environments", imported_resources.environments.len());
     }
-    info!("Imported {} environments", imported_resources.environments.len());
 
-    while imported_resources.folders.len() < folders.len() {
+    if folders.len() > 0 {
-        for v in folders.clone() {
+        while imported_resources.folders.len() < folders.len() {
-            if let Some(fid) = v.folder_id.clone() {
+            for v in folders.clone() {
-                let imported_parent = imported_resources.folders.iter().find(|f| f.id == fid);
+                if let Some(fid) = v.folder_id.clone() {
-                if imported_parent.is_none() {
+                    let imported_parent = imported_resources.folders.iter().find(|f| f.id == fid);
+                    if imported_parent.is_none() {
+                        continue;
+                    }
+                }
+                if let Some(_) = imported_resources.folders.iter().find(|f| f.id == v.id) {
                     continue;
                 }
+                let x = upsert_folder(&window, v, update_source).await?;
+                imported_resources.folders.push(x.clone());
             }
-            if let Some(_) = imported_resources.folders.iter().find(|f| f.id == v.id) {
-                continue;
-            }
-            let x = upsert_folder(&window, v, update_source).await?;
-            imported_resources.folders.push(x.clone());
         }
+        info!("Imported {} folders", imported_resources.folders.len());
     }
-    info!("Imported {} folders", imported_resources.folders.len());
 
-    for v in http_requests {
+    if http_requests.len() > 0 {
-        let x = upsert_http_request(&window, v, update_source).await?;
+        for v in http_requests {
-        imported_resources.http_requests.push(x.clone());
+            let x = upsert_http_request(&window, v, update_source).await?;
+            imported_resources.http_requests.push(x.clone());
+        }
+        info!("Imported {} http_requests", imported_resources.http_requests.len());
     }
-    info!("Imported {} http_requests", imported_resources.http_requests.len());
 
-    for v in grpc_requests {
+    if grpc_requests.len() > 0 {
-        let x = upsert_grpc_request(&window, v, update_source).await?;
+        for v in grpc_requests {
-        imported_resources.grpc_requests.push(x.clone());
+            let x = upsert_grpc_request(&window, v, update_source).await?;
+            imported_resources.grpc_requests.push(x.clone());
+        }
+        info!("Imported {} grpc_requests", imported_resources.grpc_requests.len());
     }
-    info!("Imported {} grpc_requests", imported_resources.grpc_requests.len());
 
     Ok(imported_resources)
 }
@@ -2211,7 +2222,7 @@ fn timestamp_for_upsert(update_source: &UpdateSource, dt: NaiveDateTime) -> Naiv
             } else {
                 dt
             }
-        },
+        }
         // Other sources will always update to the latest time
         _ => Utc::now().naive_utc(),
     }

src-web/components/ConfirmLargeResponse.tsx

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

src-web/components/CopyButton.tsx

@@ -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 {
+interface Props extends Omit<ButtonProps, 'onClick'> {
-  text: string;
+  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={() => {
+      onClick={async () => {
-        copy(text);
+        const content = typeof text === 'function' ? await text() : text;
-        setCopied();
+        if (content == null) {
+          showToast({
+            id: 'failed-to-copy',
+            color: 'danger',
+            message: 'Failed to copy',
+          });
+        } else {
+            copy(content);
+            setCopied();
+        }
       }}
     >
       {copied ? 'Copied' : 'Copy'}

src-web/components/ResponsePane.tsx

@@ -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 ? (
+                <ConfirmLargeResponse response={activeResponse}>
-                  <div className="pb-2 h-full">
+                  {!activeResponse.contentLength ? (
-                    <EmptyStateText>Empty Body</EmptyStateText>
+                    <div className="pb-2 h-full">
-                  </div>
+                      <EmptyStateText>Empty Body</EmptyStateText>
-                ) : contentType?.match(/^text\/event-stream$/i) && viewMode === 'pretty' ? (
+                    </div>
-                  <EventStreamViewer response={activeResponse} />
+                  ) : contentType?.match(/^text\/event-stream$/i) && viewMode === 'pretty' ? (
-                ) : contentType?.match(/^image\/svg/) ? (
+                    <EventStreamViewer response={activeResponse} />
-                  <SvgViewer response={activeResponse} />
+                  ) : contentType?.match(/^image\/svg/) ? (
-                ) : contentType?.match(/^image/i) ? (
+                    <SvgViewer response={activeResponse} />
-                  <EnsureCompleteResponse response={activeResponse} render={ImageViewer} />
+                  ) : contentType?.match(/^image/i) ? (
-                ) : contentType?.match(/^audio/i) ? (
+                    <EnsureCompleteResponse response={activeResponse} render={ImageViewer} />
-                  <EnsureCompleteResponse response={activeResponse} render={AudioViewer} />
+                  ) : contentType?.match(/^audio/i) ? (
-                ) : contentType?.match(/^video/i) ? (
+                    <EnsureCompleteResponse response={activeResponse} render={AudioViewer} />
-                  <EnsureCompleteResponse response={activeResponse} render={VideoViewer} />
+                  ) : contentType?.match(/^video/i) ? (
-                ) : contentType?.match(/pdf/i) ? (
+                    <EnsureCompleteResponse response={activeResponse} render={VideoViewer} />
-                  <EnsureCompleteResponse response={activeResponse} render={PdfViewer} />
+                  ) : contentType?.match(/pdf/i) ? (
-                ) : contentType?.match(/csv|tab-separated/i) ? (
+                    <EnsureCompleteResponse response={activeResponse} render={PdfViewer} />
-                  <CsvViewer className="pb-2" response={activeResponse} />
+                  ) : contentType?.match(/csv|tab-separated/i) ? (
-                ) : (
+                    <CsvViewer className="pb-2" response={activeResponse} />
-                  // ) : viewMode === 'pretty' && contentType?.includes('json') ? (
+                  ) : (
-                  //   <JsonAttributeTree attrValue={activeResponse} />
+                    // ) : viewMode === 'pretty' && contentType?.includes('json') ? (
-                  <HTMLOrTextViewer
+                    //   <JsonAttributeTree attrValue={activeResponse} />
-                    textViewerClassName="-mr-2 bg-surface" // Pull to the right
+                    <HTMLOrTextViewer
-                    response={activeResponse}
+                      textViewerClassName="-mr-2 bg-surface" // Pull to the right
-                    pretty={viewMode === 'pretty'}
+                      response={activeResponse}
-                  />
+                      pretty={viewMode === 'pretty'}
-                )}
+                    />
+                  )}
+                </ConfirmLargeResponse>
               </TabContent>
               <TabContent value={TAB_HEADERS}>
                 <ResponseHeaders response={activeResponse} />

src-web/components/core/Dropdown.tsx

@@ -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"

src-web/components/core/Tabs/Tabs.tsx

@@ -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]`);

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({
+export function TextViewer({ language, text, responseId, requestId, pretty, className }: Props) {
-  language,
-  text,
-  responseId,
-  requestId,
-  pretty,
-  className,
-  onSaveResponse,
-}: 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;
   }

src-web/lib/contentType.ts

@@ -1,3 +1,4 @@
+import MimeType from 'whatwg-mimetype';
 import type { EditorProps } from '../components/core/Editor/Editor';
 
 export function languageFromContentType(
@@ -40,10 +41,39 @@ export function isJSON(content: string | null | undefined): boolean {
   if (typeof content !== 'string') return false;
 
   try {
-    JSON.parse(content)
+    JSON.parse(content);
     return true;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (err) {
     return false;
   }
 }
+
+export function isProbablyTextContentType(contentType: string | null): boolean {
+  if (contentType == null) return false;
+
+  const mimeType = getMimeTypeFromContentType(contentType).essence;
+  const normalized = mimeType.toLowerCase();
+
+  // Check if it starts with "text/"
+  if (normalized.startsWith('text/')) {
+    return true;
+  }
+
+  // Common text mimetypes and suffixes
+  return [
+    'application/json',
+    'application/xml',
+    'application/javascript',
+    'application/yaml',
+    '+json',
+    '+xml',
+    '+yaml',
+    '+text',
+  ].some((textType) => normalized === textType || normalized.endsWith(textType));
+}
+
+export function getMimeTypeFromContentType(contentType: string) {
+  const mimeType = new MimeType(contentType);
+  return mimeType;
+}

src-web/lib/model_util.ts

@@ -5,7 +5,7 @@ import type {
   HttpResponse,
   HttpResponseHeader,
 } from '@yaakapp-internal/models';
-import MimeType from 'whatwg-mimetype';
+import { getMimeTypeFromContentType } from './contentType';
 
 export const BODY_TYPE_NONE = null;
 export const BODY_TYPE_GRAPHQL = 'graphql';
@@ -61,6 +61,6 @@ export function getCharsetFromContentType(headers: HttpResponseHeader[]): string
   const contentType = getContentTypeHeader(headers);
   if (contentType == null) return null;
 
-  const mimeType = new MimeType(contentType);
+  const mimeType = getMimeTypeFromContentType(contentType);
   return mimeType.parameters.get('charset') ?? null;
 }