yaak-mountain-loop/src-web/components/ConfirmLargeRequestBody.tsx

import type { HttpRequest } from "@yaakapp-internal/models";
import { patchModel } from "@yaakapp-internal/models";
import type { ReactNode } from "react";
import { useToggle } from "../hooks/useToggle";
import { showConfirm } from "../lib/confirm";
import { Banner } from "./core/Banner";
import { Button } from "./core/Button";
import { InlineCode } from "./core/InlineCode";
import { Link } from "./core/Link";
import { SizeTag } from "./core/SizeTag";
import { HStack } from "./core/Stacks";

interface Props {
  children: ReactNode;
  request: HttpRequest;
}

const LARGE_TEXT_BYTES = 2 * 1000 * 1000;

export function ConfirmLargeRequestBody({ children, request }: Props) {
  const [showLargeResponse, toggleShowLargeResponse] = useToggle();

  if (request.body?.text == null) {
    return children;
  }

  const contentLength = request.body.text.length ?? 0;
  const tooLargeBytes = LARGE_TEXT_BYTES;
  const isLarge = contentLength > tooLargeBytes;
  if (!showLargeResponse && isLarge) {
    return (
      <Banner color="primary" className="flex flex-col gap-3">
        <p>
          Rendering content over{" "}
          <InlineCode>
            <SizeTag contentLength={tooLargeBytes} />
          </InlineCode>{" "}
          may impact performance.
        </p>
        <p>
          See{" "}
          <Link href="https://feedback.yaak.app/en/help/articles/1198684-working-with-large-values">
            Working With Large Values
          </Link>{" "}
          for tips.
        </p>
        <HStack wrap space={2}>
          <Button color="primary" size="xs" onClick={toggleShowLargeResponse}>
            Reveal Body
          </Button>
          <Button
            color="danger"
            size="xs"
            variant="border"
            onClick={async () => {
              const confirm = await showConfirm({
                id: `delete-body-${request.id}`,
                confirmText: "Delete Body",
                title: "Delete Body Text",
                description: "Are you sure you want to delete the request body text?",
                color: "danger",
              });
              if (confirm) {
                await patchModel(request, { body: { ...request.body, text: "" } });
              }
            }}
          >
            Delete Body
          </Button>
        </HStack>
      </Banner>
    );
  }

  return <>{children}</>;
}