Log http block request body, make azure blob key parameterizable (#3300)

Co-authored-by: Suchintan Singh <suchintan@skyvern.com>
2025-08-25 17:36:29 -04:00
parent e64c47279f
commit 1167765867
8 changed files with 69 additions and 61 deletions
--- a/skyvern-frontend/src/components/BrowserStream.tsx
+++ b/skyvern-frontend/src/components/BrowserStream.tsx
@@ -334,7 +334,7 @@ function BrowserStream({
      ref={setCanvasContainerRef}
    >
      {isVncConnected && (
-        <div className="overlay z-10 flex items-center justify-center overflow-hidden">
+        <div className="overlay z-10 flex items-center justify-center">
          {showControlButtons && (
            <div className="control-buttons pointer-events-none relative flex h-full w-full items-center justify-center">
              <Button
--- a/skyvern-frontend/src/components/FloatingWindow.tsx
+++ b/skyvern-frontend/src/components/FloatingWindow.tsx
@@ -31,7 +31,6 @@ import { PowerIcon } from "./icons/PowerIcon";
 type OS = "Windows" | "macOS" | "Linux" | "Unknown";

 const Constants = {
-  HandleSize: "40px",
  MinHeight: 52,
  MinWidth: 256,
 } as const;
@@ -181,14 +180,11 @@ function FloatingWindow({
  title,
  zIndex,
  // --
-  onBlur,
  onBreakout,
  onCycle,
  onFocus,
+  onBlur,
  onInteract,
-  onMinimize,
-  onMaximize,
-  onRestore,
 }: {
  bounded?: boolean;
  children: React.ReactNode;
@@ -205,14 +201,11 @@ function FloatingWindow({
  title: string;
  zIndex?: number;
  // --
-  onBlur?: () => void;
  onBreakout?: () => void;
  onCycle?: () => void;
  onFocus?: () => void;
+  onBlur?: () => void;
  onInteract?: () => void;
-  onMinimize?: () => void;
-  onMaximize?: () => void;
-  onRestore?: () => void;
 }) {
  const [reloadKey, setReloadKey] = useState(0);
  const [isReloading, setIsReloading] = useState(false);
@@ -431,8 +424,6 @@ function FloatingWindow({
    });

    setPosition({ x: 0, y: 0 });
-
-    onMaximize?.();
  };

  const minimize = () => {
@@ -468,8 +459,6 @@ function FloatingWindow({
    });

    setPosition({ x: left, y: top });
-
-    onMinimize?.();
  };

  const restore = () => {
@@ -491,8 +480,6 @@ function FloatingWindow({

    setIsMaximized(false);
    setIsMinimized(false);
-
-    onRestore?.();
  };

  const reload = () => {
@@ -584,14 +571,12 @@ function FloatingWindow({
          })}
          handleStyles={{
            bottomLeft: {
-              width: isMinimized || isMaximized ? "0px" : Constants.HandleSize,
-              height: isMinimized || isMaximized ? "0px" : Constants.HandleSize,
-              zIndex: 20,
+              width: "40px",
+              height: "40px",
            },
            bottomRight: {
-              width: isMinimized || isMaximized ? "0px" : Constants.HandleSize,
-              height: isMinimized || isMaximized ? "0px" : Constants.HandleSize,
-              zIndex: 20,
+              width: "40px",
+              height: "40px",
            },
          }}
          minHeight={Constants.MinHeight}
--- a/skyvern-frontend/src/components/WorkflowBlockInput.tsx
+++ b/skyvern-frontend/src/components/WorkflowBlockInput.tsx
@@ -1,4 +1,5 @@
-import { PlusIcon } from "@radix-ui/react-icons";
+import { PlusIcon, EyeOpenIcon, EyeClosedIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
 import { cn } from "@/util/utils";
 import { Input } from "./ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
@@ -10,33 +11,54 @@ type Props = Omit<React.ComponentProps<typeof Input>, "onChange"> & {
 };

 function WorkflowBlockInput(props: Props) {
-  const { nodeId, onChange, ...inputProps } = props;
+  const { nodeId, onChange, type, ...inputProps } = props;
+  const [showPassword, setShowPassword] = useState(false);
+
+  const isPasswordField = type === "password";
+  const actualType = isPasswordField && showPassword ? "text" : type;

  return (
    <div className="relative">
      <Input
        {...inputProps}
-        className={cn("pr-9", props.className)}
+        type={actualType}
+        className={cn(isPasswordField ? "pr-18" : "pr-9", props.className)}
        onChange={(event) => {
          onChange(event.target.value);
        }}
      />
-      <div className="absolute right-0 top-0 flex size-9 cursor-pointer items-center justify-center">
-        <Popover>
-          <PopoverTrigger asChild>
-            <div className="rounded p-1 hover:bg-muted">
-              <PlusIcon className="size-4" />
+      <div className="absolute right-0 top-0 flex cursor-pointer items-center justify-center">
+        {isPasswordField && (
+          <div className="flex size-9 items-center justify-center">
+            <div
+              className="rounded p-1 hover:bg-muted"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {showPassword ? (
+                <EyeClosedIcon className="size-4" />
+              ) : (
+                <EyeOpenIcon className="size-4" />
+              )}
            </div>
-          </PopoverTrigger>
-          <PopoverContent className="w-[22rem]">
-            <WorkflowBlockParameterSelect
-              nodeId={nodeId}
-              onAdd={(parameterKey) => {
-                onChange(`${props.value ?? ""}{{${parameterKey}}}`);
-              }}
-            />
-          </PopoverContent>
-        </Popover>
+          </div>
+        )}
+        <div className="flex size-9 items-center justify-center">
+          <Popover>
+            <PopoverTrigger asChild>
+              <div className="rounded p-1 hover:bg-muted">
+                <PlusIcon className="size-4" />
+              </div>
+            </PopoverTrigger>
+            <PopoverContent className="w-[22rem]">
+              <WorkflowBlockParameterSelect
+                nodeId={nodeId}
+                onAdd={(parameterKey) => {
+                  onChange(`${props.value ?? ""}{{${parameterKey}}}`);
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
      </div>
    </div>
  );
--- a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
@@ -127,7 +127,6 @@ function Workspace({
    "history",
    "infiniteCanvas",
  ]);
-  const [hideControlButtons, setHideControlButtons] = useState(false);

  // ---start fya: https://github.com/frontyardart
  const hasForLoopNode = nodes.some((node) => node.type === "loop");
@@ -800,15 +799,6 @@ function Workspace({
          onBreakout={handleOnBreakout}
          onCycle={handleOnCycle}
          onFocus={() => promote("browserWindow")}
-          onMinimize={() => {
-            setHideControlButtons(true);
-          }}
-          onMaximize={() => {
-            setHideControlButtons(false);
-          }}
-          onRestore={() => {
-            setHideControlButtons(false);
-          }}
        >
          {activeDebugSession &&
          activeDebugSession.browser_session_id &&
@@ -816,7 +806,7 @@ function Workspace({
            <BrowserStream
              interactive={false}
              browserSessionId={activeDebugSession.browser_session_id}
-              showControlButtons={!hideControlButtons}
+              showControlButtons={true}
            />
          ) : (
            <div className="flex h-full w-full flex-col items-center justify-center gap-2 pb-2 pt-4 text-sm text-slate-400">
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/FileUploadNode/FileUploadNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/FileUploadNode/FileUploadNode.tsx
@@ -1,10 +1,10 @@
 import { HelpTooltip } from "@/components/HelpTooltip";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
 import { helpTooltips } from "../../helpContent";
 import { type FileUploadNode } from "./types";
 import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
+import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
 import { useState } from "react";
 import { cn } from "@/util/utils";
 import { NodeHeader } from "../components/NodeHeader";
@@ -137,12 +137,13 @@ function FileUploadNode({ id, data }: NodeProps<FileUploadNode>) {
                    }
                  />
                </div>
-                <Input
+                <WorkflowBlockInput
+                  nodeId={id}
                  type="password"
                  value={inputs.awsSecretAccessKey as string}
                  className="nopan text-xs"
-                  onChange={(event) => {
-                    handleChange("awsSecretAccessKey", event.target.value);
+                  onChange={(value) => {
+                    handleChange("awsSecretAccessKey", value);
                  }}
                />
              </div>
@@ -230,12 +231,13 @@ function FileUploadNode({ id, data }: NodeProps<FileUploadNode>) {
                    }
                  />
                </div>
-                <Input
+                <WorkflowBlockInput
+                  nodeId={id}
                  type="password"
                  value={inputs.azureStorageAccountKey as string}
                  className="nopan text-xs"
-                  onChange={(event) => {
-                    handleChange("azureStorageAccountKey", event.target.value);
+                  onChange={(value) => {
+                    handleChange("azureStorageAccountKey", value);
                  }}
                />
              </div>
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/types.ts
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/types.ts
@@ -47,7 +47,7 @@ export const workflowBlockTitle: {
  task: "Browser Task",
  text_prompt: "Text Prompt",
  upload_to_s3: "Upload To S3",
-  file_upload: "Upload Files",
+  file_upload: "Cloud Storage",
  validation: "Validation",
  wait: "Wait",
  pdf_parser: "PDF Parser",
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx
@@ -204,7 +204,7 @@ const nodeLibraryItems: Array<{
        className="size-6"
      />
    ),
-    title: "File Upload Block",
+    title: "Cloud Storage Block",
    description: "Upload files to storage",
  },
  {
--- a/skyvern/forge/sdk/workflow/models/block.py
+++ b/skyvern/forge/sdk/workflow/models/block.py
@@ -3208,8 +3208,8 @@ class HttpRequestBlock(Block):
                method=self.method,
                url=self.url,
                headers=self.headers,
-                has_body=bool(self.body),
                workflow_run_id=workflow_run_id,
+                body=self.body,
            )

            # Use the generic aiohttp_request function
@@ -3223,7 +3223,16 @@ class HttpRequestBlock(Block):
            )

            response_data = {
+                # Response information
                "status_code": status_code,
+                "response_headers": response_headers,
+                "response_body": response_body,
+                # Request information (what was sent)
+                "request_method": self.method,
+                "request_url": self.url,
+                "request_headers": self.headers,
+                "request_body": self.body,
+                # Backwards compatibility
                "headers": response_headers,
                "body": response_body,
                "url": self.url,