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

Co-authored-by: Suchintan Singh <suchintan@skyvern.com>

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

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}

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>
   );