Don't load response when blocking large responses

mountain-loop · Jan 10, 2025 · 8b5b66a · 8b5b66a
1 parent f694456
commit 8b5b66a
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 121 deletions.
diff --git a/src-tauri/yaak-models/src/queries.rs b/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 {
-        let x = upsert_workspace(&window, v, update_source).await?;
-        imported_resources.workspaces.push(x.clone());
+    if workspaces.len() > 0 {
+        for v in workspaces {
+            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() {
-        for v in environments.clone() {
-            if let Some(fid) = v.environment_id.clone() {
-                let imported_parent = imported_resources.environments.iter().find(|f| f.id == fid);
-                if imported_parent.is_none() {
+    if environments.len() > 0 {
+        while imported_resources.environments.len() < environments.len() {
+            for v in environments.clone() {
+                if let Some(fid) = v.environment_id.clone() {
+                    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() {
-        for v in folders.clone() {
-            if let Some(fid) = v.folder_id.clone() {
-                let imported_parent = imported_resources.folders.iter().find(|f| f.id == fid);
-                if imported_parent.is_none() {
+    if folders.len() > 0 {
+        while imported_resources.folders.len() < folders.len() {
+            for v in folders.clone() {
+                if let Some(fid) = v.folder_id.clone() {
+                    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 {
-        let x = upsert_http_request(&window, v, update_source).await?;
-        imported_resources.http_requests.push(x.clone());
+    if http_requests.len() > 0 {
+        for v in http_requests {
+            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 {
-        let x = upsert_grpc_request(&window, v, update_source).await?;
-        imported_resources.grpc_requests.push(x.clone());
+    if grpc_requests.len() > 0 {
+        for v in grpc_requests {
+            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(),
     }

diff --git a/src-web/components/ConfirmLargeResponse.tsx b/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}</>;
+}
diff --git a/src-web/components/CopyButton.tsx b/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 {
-  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'}

diff --git a/src-web/components/ResponsePane.tsx b/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 ? (
-                  <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} />

diff --git a/src-web/components/core/Dropdown.tsx b/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"

diff --git a/src-web/components/core/Tabs/Tabs.tsx b/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]`);

diff --git a/src-web/components/responseViewers/HTMLOrTextViewer.tsx b/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,15 +29,14 @@ export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Prop
   }
 
   if (language === 'html' && pretty) {
-    return <WebPageViewer response={response}/>;
+    return <WebPageViewer response={response} />;
   } else {
     return (
       <TextViewer
         language={language}
         text={rawTextBody.data}
         pretty={pretty}
         className={textViewerClassName}
-        onSaveResponse={saveResponse.mutate}
         responseId={response.id}
         requestId={response.requestId}
       />