From d1f2f68611f49d248a573e39b1a67369336769c1 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <shu@skyvern.com>
Date: Thu, 7 Nov 2024 15:20:07 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20synced=20local=20'skyvern-fronte?=
 =?UTF-8?q?nd/src/'=20with=20remote=20'skyvern-frontend/src/'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- ELLIPSIS_HIDDEN -->

> [!IMPORTANT]
> Add scrollable areas to `WorkflowParameterAddPanel` and `WorkflowParameterEditPanel` to handle content overflow.
>
>   - **UI Enhancement**:
>     - Added `ScrollArea` and `ScrollAreaViewport` to `WorkflowParameterAddPanel.tsx` and `WorkflowParameterEditPanel.tsx` to handle overflow of content.
>     - Ensures UI remains usable with many parameters or long descriptions by making the panels scrollable.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=Skyvern-AI%2Fskyvern-cloud&utm_source=github&utm_medium=referral)<sup> for 8aafeb4c7dc7868273d5ec9712d58023d975f3c4. It will automatically update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->
---
 .../panels/WorkflowParameterAddPanel.tsx      | 479 +++++++++---------
 .../panels/WorkflowParameterEditPanel.tsx     | 479 +++++++++---------
 2 files changed, 488 insertions(+), 470 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx
index 52b984b920..6a451a399b 100644
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterAddPanel.tsx
@@ -18,6 +18,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { getDefaultValueForParameterType } from "../workflowEditorUtils";
 import { toast } from "@/components/ui/use-toast";
 import { SourceParameterKeySelector } from "../../components/SourceParameterKeySelector";
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 
 type Props = {
   type: "workflow" | "credential" | "context" | "secret";
@@ -69,254 +70,262 @@ function WorkflowParameterAddPanel({ type, onClose, onSave }: Props) {
   const [identityFields, setIdentityFields] = useState("");
 
   return (
-    <div className="space-y-4">
-      <header className="flex items-center justify-between">
-        <span>{header(type)}</span>
-        <Cross2Icon className="h-6 w-6 cursor-pointer" onClick={onClose} />
-      </header>
-      <div className="space-y-1">
-        <Label className="text-xs text-slate-300">Key</Label>
-        <Input value={key} onChange={(e) => setKey(e.target.value)} />
-      </div>
-      <div className="space-y-1">
-        <Label className="text-xs text-slate-300">Description</Label>
-        <Input
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-        />
-      </div>
-      {type === "workflow" && (
-        <>
+    <ScrollArea>
+      <ScrollAreaViewport className="max-h-[500px]">
+        <div className="space-y-4 p-1">
+          <header className="flex items-center justify-between">
+            <span>{header(type)}</span>
+            <Cross2Icon className="h-6 w-6 cursor-pointer" onClick={onClose} />
+          </header>
           <div className="space-y-1">
-            <Label className="text-xs">Value Type</Label>
-            <Select
-              value={parameterType}
-              onValueChange={(value) => {
-                setParameterType(value as WorkflowParameterValueType);
-                setDefaultValueState((state) => {
-                  return {
-                    ...state,
-                    defaultValue: getDefaultValueForParameterType(
-                      value as WorkflowParameterValueType,
-                    ),
-                  };
-                });
-              }}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select a type" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {workflowParameterTypeOptions.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+            <Label className="text-xs text-slate-300">Key</Label>
+            <Input value={key} onChange={(e) => setKey(e.target.value)} />
           </div>
-          <div className="space-y-4">
-            <div className="flex items-center gap-2">
-              <Checkbox
-                checked={defaultValueState.hasDefaultValue}
-                onCheckedChange={(checked) => {
-                  if (!checked) {
-                    setDefaultValueState({
-                      hasDefaultValue: false,
-                      defaultValue: null,
+          <div className="space-y-1">
+            <Label className="text-xs text-slate-300">Description</Label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          {type === "workflow" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs">Value Type</Label>
+                <Select
+                  value={parameterType}
+                  onValueChange={(value) => {
+                    setParameterType(value as WorkflowParameterValueType);
+                    setDefaultValueState((state) => {
+                      return {
+                        ...state,
+                        defaultValue: getDefaultValueForParameterType(
+                          value as WorkflowParameterValueType,
+                        ),
+                      };
                     });
-                    return;
-                  }
-                  setDefaultValueState({
-                    hasDefaultValue: true,
-                    defaultValue:
-                      getDefaultValueForParameterType(parameterType),
-                  });
-                }}
+                  }}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select a type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {workflowParameterTypeOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    checked={defaultValueState.hasDefaultValue}
+                    onCheckedChange={(checked) => {
+                      if (!checked) {
+                        setDefaultValueState({
+                          hasDefaultValue: false,
+                          defaultValue: null,
+                        });
+                        return;
+                      }
+                      setDefaultValueState({
+                        hasDefaultValue: true,
+                        defaultValue:
+                          getDefaultValueForParameterType(parameterType),
+                      });
+                    }}
+                  />
+                  <Label className="text-xs text-slate-300">
+                    Use Default Value
+                  </Label>
+                </div>
+                {defaultValueState.hasDefaultValue && (
+                  <WorkflowParameterInput
+                    onChange={(value) => {
+                      if (
+                        parameterType === "file_url" &&
+                        typeof value === "object" &&
+                        value &&
+                        "s3uri" in value
+                      ) {
+                        setDefaultValueState((state) => {
+                          return {
+                            ...state,
+                            defaultValue: value.s3uri,
+                          };
+                        });
+                        return;
+                      }
+                      setDefaultValueState((state) => {
+                        return {
+                          ...state,
+                          defaultValue: value,
+                        };
+                      });
+                    }}
+                    type={parameterType}
+                    value={defaultValueState.defaultValue}
+                  />
+                )}
+              </div>
+            </>
+          )}
+          {type === "credential" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">
+                  URL Parameter Key
+                </Label>
+                <Input
+                  value={urlParameterKey}
+                  onChange={(e) => setUrlParameterKey(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Collection ID</Label>
+                <Input
+                  value={collectionId}
+                  onChange={(e) => setCollectionId(e.target.value)}
+                />
+              </div>
+            </>
+          )}
+          {type === "context" && (
+            <div className="space-y-1">
+              <Label className="text-xs text-slate-300">Source Parameter</Label>
+              <SourceParameterKeySelector
+                value={sourceParameterKey}
+                onChange={setSourceParameterKey}
               />
-              <Label className="text-xs text-slate-300">
-                Use Default Value
-              </Label>
             </div>
-            {defaultValueState.hasDefaultValue && (
-              <WorkflowParameterInput
-                onChange={(value) => {
+          )}
+          {type === "secret" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Identity Key</Label>
+                <Input
+                  value={identityKey}
+                  onChange={(e) => setIdentityKey(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">
+                  Identity Fields
+                </Label>
+                <Input
+                  value={identityFields}
+                  onChange={(e) => setIdentityFields(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Collection ID</Label>
+                <Input
+                  value={collectionId}
+                  onChange={(e) => setCollectionId(e.target.value)}
+                />
+              </div>
+            </>
+          )}
+          <div className="flex justify-end">
+            <Button
+              onClick={() => {
+                if (type === "workflow") {
                   if (
-                    parameterType === "file_url" &&
-                    typeof value === "object" &&
-                    value &&
-                    "s3uri" in value
+                    parameterType === "json" &&
+                    typeof defaultValueState.defaultValue === "string"
                   ) {
-                    setDefaultValueState((state) => {
-                      return {
-                        ...state,
-                        defaultValue: value.s3uri,
-                      };
+                    try {
+                      JSON.parse(defaultValueState.defaultValue);
+                    } catch (e) {
+                      toast({
+                        variant: "destructive",
+                        title: "Failed to add parameter",
+                        description: "Invalid JSON for default value",
+                      });
+                      return;
+                    }
+                  }
+                  const defaultValue =
+                    parameterType === "json" &&
+                    typeof defaultValueState.defaultValue === "string"
+                      ? JSON.parse(defaultValueState.defaultValue)
+                      : defaultValueState.defaultValue;
+                  onSave({
+                    key,
+                    parameterType: "workflow",
+                    dataType: parameterType,
+                    description,
+                    defaultValue: defaultValueState.hasDefaultValue
+                      ? defaultValue
+                      : null,
+                  });
+                }
+                if (type === "credential") {
+                  if (!collectionId) {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to add parameter",
+                      description: "Collection ID is required",
                     });
                     return;
                   }
-                  setDefaultValueState((state) => {
-                    return {
-                      ...state,
-                      defaultValue: value,
-                    };
+                  onSave({
+                    key,
+                    parameterType: "credential",
+                    collectionId,
+                    urlParameterKey,
+                    description,
                   });
-                }}
-                type={parameterType}
-                value={defaultValueState.defaultValue}
-              />
-            )}
-          </div>
-        </>
-      )}
-      {type === "credential" && (
-        <>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">URL Parameter Key</Label>
-            <Input
-              value={urlParameterKey}
-              onChange={(e) => setUrlParameterKey(e.target.value)}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">Collection ID</Label>
-            <Input
-              value={collectionId}
-              onChange={(e) => setCollectionId(e.target.value)}
-            />
-          </div>
-        </>
-      )}
-      {type === "context" && (
-        <div className="space-y-1">
-          <Label className="text-xs text-slate-300">Source Parameter</Label>
-          <SourceParameterKeySelector
-            value={sourceParameterKey}
-            onChange={setSourceParameterKey}
-          />
-        </div>
-      )}
-      {type === "secret" && (
-        <>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">Identity Key</Label>
-            <Input
-              value={identityKey}
-              onChange={(e) => setIdentityKey(e.target.value)}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">Identity Fields</Label>
-            <Input
-              value={identityFields}
-              onChange={(e) => setIdentityFields(e.target.value)}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">Collection ID</Label>
-            <Input
-              value={collectionId}
-              onChange={(e) => setCollectionId(e.target.value)}
-            />
-          </div>
-        </>
-      )}
-      <div className="flex justify-end">
-        <Button
-          onClick={() => {
-            if (type === "workflow") {
-              if (
-                parameterType === "json" &&
-                typeof defaultValueState.defaultValue === "string"
-              ) {
-                try {
-                  JSON.parse(defaultValueState.defaultValue);
-                } catch (e) {
-                  toast({
-                    variant: "destructive",
-                    title: "Failed to add parameter",
-                    description: "Invalid JSON for default value",
+                }
+                if (type === "secret") {
+                  if (!collectionId) {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to add parameter",
+                      description: "Collection ID is required",
+                    });
+                    return;
+                  }
+                  onSave({
+                    key,
+                    parameterType: "secret",
+                    collectionId,
+                    identityFields: identityFields
+                      .split(",")
+                      .filter((s) => s.length > 0)
+                      .map((field) => field.trim()),
+                    identityKey,
+                    description,
+                  });
+                }
+                if (type === "context") {
+                  if (!sourceParameterKey) {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to add parameter",
+                      description: "Source parameter key is required",
+                    });
+                    return;
+                  }
+                  onSave({
+                    key,
+                    parameterType: "context",
+                    sourceParameterKey: sourceParameterKey,
+                    description,
                   });
-                  return;
                 }
-              }
-              const defaultValue =
-                parameterType === "json" &&
-                typeof defaultValueState.defaultValue === "string"
-                  ? JSON.parse(defaultValueState.defaultValue)
-                  : defaultValueState.defaultValue;
-              onSave({
-                key,
-                parameterType: "workflow",
-                dataType: parameterType,
-                description,
-                defaultValue: defaultValueState.hasDefaultValue
-                  ? defaultValue
-                  : null,
-              });
-            }
-            if (type === "credential") {
-              if (!collectionId) {
-                toast({
-                  variant: "destructive",
-                  title: "Failed to add parameter",
-                  description: "Collection ID is required",
-                });
-                return;
-              }
-              onSave({
-                key,
-                parameterType: "credential",
-                collectionId,
-                urlParameterKey,
-                description,
-              });
-            }
-            if (type === "secret") {
-              if (!collectionId) {
-                toast({
-                  variant: "destructive",
-                  title: "Failed to add parameter",
-                  description: "Collection ID is required",
-                });
-                return;
-              }
-              onSave({
-                key,
-                parameterType: "secret",
-                collectionId,
-                identityFields: identityFields
-                  .split(",")
-                  .filter((s) => s.length > 0)
-                  .map((field) => field.trim()),
-                identityKey,
-                description,
-              });
-            }
-            if (type === "context") {
-              if (!sourceParameterKey) {
-                toast({
-                  variant: "destructive",
-                  title: "Failed to add parameter",
-                  description: "Source parameter key is required",
-                });
-                return;
-              }
-              onSave({
-                key,
-                parameterType: "context",
-                sourceParameterKey: sourceParameterKey,
-                description,
-              });
-            }
-          }}
-        >
-          Save
-        </Button>
-      </div>
-    </div>
+              }}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </ScrollAreaViewport>
+    </ScrollArea>
   );
 }
 
diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx
index 3cf05c6429..a7926371c6 100644
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParameterEditPanel.tsx
@@ -18,6 +18,7 @@ import { getDefaultValueForParameterType } from "../workflowEditorUtils";
 import { WorkflowParameterInput } from "../../WorkflowParameterInput";
 import { toast } from "@/components/ui/use-toast";
 import { SourceParameterKeySelector } from "../../components/SourceParameterKeySelector";
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 
 type Props = {
   type: "workflow" | "credential" | "context" | "secret";
@@ -110,254 +111,262 @@ function WorkflowParameterEditPanel({
   );
 
   return (
-    <div className="space-y-4">
-      <header className="flex items-center justify-between">
-        <span>{header(type)}</span>
-        <Cross2Icon className="h-6 w-6 cursor-pointer" onClick={onClose} />
-      </header>
-      <div className="space-y-1">
-        <Label className="text-xs text-slate-300">Key</Label>
-        <Input value={key} onChange={(e) => setKey(e.target.value)} />
-      </div>
-      <div className="space-y-1">
-        <Label className="text-xs text-slate-300">Description</Label>
-        <Input
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-        />
-      </div>
-      {type === "workflow" && (
-        <>
+    <ScrollArea>
+      <ScrollAreaViewport className="max-h-[500px]">
+        <div className="space-y-4 p-1">
+          <header className="flex items-center justify-between">
+            <span>{header(type)}</span>
+            <Cross2Icon className="h-6 w-6 cursor-pointer" onClick={onClose} />
+          </header>
           <div className="space-y-1">
-            <Label className="text-xs">Value Type</Label>
-            <Select
-              value={parameterType}
-              onValueChange={(value) => {
-                setParameterType(value as WorkflowParameterValueType);
-                setDefaultValueState((state) => {
-                  return {
-                    ...state,
-                    defaultValue: getDefaultValueForParameterType(
-                      value as WorkflowParameterValueType,
-                    ),
-                  };
-                });
-              }}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select a type" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {workflowParameterTypeOptions.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+            <Label className="text-xs text-slate-300">Key</Label>
+            <Input value={key} onChange={(e) => setKey(e.target.value)} />
           </div>
-          <div className="space-y-4">
-            <div className="flex items-center gap-2">
-              <Checkbox
-                checked={defaultValueState.hasDefaultValue}
-                onCheckedChange={(checked) => {
-                  if (!checked) {
-                    setDefaultValueState({
-                      hasDefaultValue: false,
-                      defaultValue: null,
+          <div className="space-y-1">
+            <Label className="text-xs text-slate-300">Description</Label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          {type === "workflow" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs">Value Type</Label>
+                <Select
+                  value={parameterType}
+                  onValueChange={(value) => {
+                    setParameterType(value as WorkflowParameterValueType);
+                    setDefaultValueState((state) => {
+                      return {
+                        ...state,
+                        defaultValue: getDefaultValueForParameterType(
+                          value as WorkflowParameterValueType,
+                        ),
+                      };
                     });
-                    return;
-                  }
-                  setDefaultValueState({
-                    hasDefaultValue: true,
-                    defaultValue:
-                      getDefaultValueForParameterType(parameterType),
-                  });
-                }}
+                  }}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select a type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {workflowParameterTypeOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    checked={defaultValueState.hasDefaultValue}
+                    onCheckedChange={(checked) => {
+                      if (!checked) {
+                        setDefaultValueState({
+                          hasDefaultValue: false,
+                          defaultValue: null,
+                        });
+                        return;
+                      }
+                      setDefaultValueState({
+                        hasDefaultValue: true,
+                        defaultValue:
+                          getDefaultValueForParameterType(parameterType),
+                      });
+                    }}
+                  />
+                  <Label className="text-xs text-slate-300">
+                    Use Default Value
+                  </Label>
+                </div>
+                {defaultValueState.hasDefaultValue && (
+                  <WorkflowParameterInput
+                    onChange={(value) => {
+                      if (
+                        parameterType === "file_url" &&
+                        typeof value === "object" &&
+                        value &&
+                        "s3uri" in value
+                      ) {
+                        setDefaultValueState((state) => {
+                          return {
+                            ...state,
+                            defaultValue: value,
+                          };
+                        });
+                        return;
+                      }
+                      setDefaultValueState((state) => {
+                        return {
+                          ...state,
+                          defaultValue: value,
+                        };
+                      });
+                    }}
+                    type={parameterType}
+                    value={defaultValueState.defaultValue}
+                  />
+                )}
+              </div>
+            </>
+          )}
+          {type === "credential" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">
+                  URL Parameter Key
+                </Label>
+                <Input
+                  value={urlParameterKey}
+                  onChange={(e) => setUrlParameterKey(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Collection ID</Label>
+                <Input
+                  value={collectionId}
+                  onChange={(e) => setCollectionId(e.target.value)}
+                />
+              </div>
+            </>
+          )}
+          {type === "context" && (
+            <div className="space-y-1">
+              <Label className="text-xs text-slate-300">Source Parameter</Label>
+              <SourceParameterKeySelector
+                value={sourceParameterKey}
+                onChange={setSourceParameterKey}
               />
-              <Label className="text-xs text-slate-300">
-                Use Default Value
-              </Label>
             </div>
-            {defaultValueState.hasDefaultValue && (
-              <WorkflowParameterInput
-                onChange={(value) => {
+          )}
+          {type === "secret" && (
+            <>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Identity Key</Label>
+                <Input
+                  value={identityKey}
+                  onChange={(e) => setIdentityKey(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">
+                  Identity Fields
+                </Label>
+                <Input
+                  value={identityFields}
+                  onChange={(e) => setIdentityFields(e.target.value)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs text-slate-300">Collection ID</Label>
+                <Input
+                  value={collectionId}
+                  onChange={(e) => setCollectionId(e.target.value)}
+                />
+              </div>
+            </>
+          )}
+          <div className="flex justify-end">
+            <Button
+              onClick={() => {
+                if (type === "workflow") {
                   if (
-                    parameterType === "file_url" &&
-                    typeof value === "object" &&
-                    value &&
-                    "s3uri" in value
+                    parameterType === "json" &&
+                    typeof defaultValueState.defaultValue === "string"
                   ) {
-                    setDefaultValueState((state) => {
-                      return {
-                        ...state,
-                        defaultValue: value,
-                      };
+                    try {
+                      JSON.parse(defaultValueState.defaultValue);
+                    } catch (e) {
+                      toast({
+                        variant: "destructive",
+                        title: "Failed to save parameter",
+                        description: "Invalid JSON for default value",
+                      });
+                      return;
+                    }
+                  }
+                  const defaultValue =
+                    parameterType === "json" &&
+                    typeof defaultValueState.defaultValue === "string"
+                      ? JSON.parse(defaultValueState.defaultValue)
+                      : defaultValueState.defaultValue;
+                  onSave({
+                    key,
+                    parameterType: "workflow",
+                    dataType: parameterType,
+                    description,
+                    defaultValue: defaultValueState.hasDefaultValue
+                      ? defaultValue
+                      : null,
+                  });
+                }
+                if (type === "credential") {
+                  if (!collectionId) {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to save parameter",
+                      description: "Collection ID is required",
                     });
                     return;
                   }
-                  setDefaultValueState((state) => {
-                    return {
-                      ...state,
-                      defaultValue: value,
-                    };
+                  onSave({
+                    key,
+                    parameterType: "credential",
+                    urlParameterKey,
+                    collectionId,
+                    description,
                   });
-                }}
-                type={parameterType}
-                value={defaultValueState.defaultValue}
-              />
-            )}
-          </div>
-        </>
-      )}
-      {type === "credential" && (
-        <>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">URL Parameter Key</Label>
-            <Input
-              value={urlParameterKey}
-              onChange={(e) => setUrlParameterKey(e.target.value)}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">Collection ID</Label>
-            <Input
-              value={collectionId}
-              onChange={(e) => setCollectionId(e.target.value)}
-            />
-          </div>
-        </>
-      )}
-      {type === "context" && (
-        <div className="space-y-1">
-          <Label className="text-xs text-slate-300">Source Parameter</Label>
-          <SourceParameterKeySelector
-            value={sourceParameterKey}
-            onChange={setSourceParameterKey}
-          />
-        </div>
-      )}
-      {type === "secret" && (
-        <>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">Identity Key</Label>
-            <Input
-              value={identityKey}
-              onChange={(e) => setIdentityKey(e.target.value)}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">Identity Fields</Label>
-            <Input
-              value={identityFields}
-              onChange={(e) => setIdentityFields(e.target.value)}
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs text-slate-300">Collection ID</Label>
-            <Input
-              value={collectionId}
-              onChange={(e) => setCollectionId(e.target.value)}
-            />
-          </div>
-        </>
-      )}
-      <div className="flex justify-end">
-        <Button
-          onClick={() => {
-            if (type === "workflow") {
-              if (
-                parameterType === "json" &&
-                typeof defaultValueState.defaultValue === "string"
-              ) {
-                try {
-                  JSON.parse(defaultValueState.defaultValue);
-                } catch (e) {
-                  toast({
-                    variant: "destructive",
-                    title: "Failed to save parameter",
-                    description: "Invalid JSON for default value",
+                }
+                if (type === "secret") {
+                  if (!collectionId) {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to add parameter",
+                      description: "Collection ID is required",
+                    });
+                    return;
+                  }
+                  onSave({
+                    key,
+                    parameterType: "secret",
+                    collectionId,
+                    identityFields: identityFields
+                      .split(",")
+                      .filter((s) => s.length > 0)
+                      .map((field) => field.trim()),
+                    identityKey,
+                    description,
+                  });
+                }
+                if (type === "context") {
+                  if (!sourceParameterKey) {
+                    toast({
+                      variant: "destructive",
+                      title: "Failed to save parameter",
+                      description: "Source parameter key is required",
+                    });
+                    return;
+                  }
+                  onSave({
+                    key,
+                    parameterType: "context",
+                    sourceParameterKey,
+                    description,
                   });
-                  return;
                 }
-              }
-              const defaultValue =
-                parameterType === "json" &&
-                typeof defaultValueState.defaultValue === "string"
-                  ? JSON.parse(defaultValueState.defaultValue)
-                  : defaultValueState.defaultValue;
-              onSave({
-                key,
-                parameterType: "workflow",
-                dataType: parameterType,
-                description,
-                defaultValue: defaultValueState.hasDefaultValue
-                  ? defaultValue
-                  : null,
-              });
-            }
-            if (type === "credential") {
-              if (!collectionId) {
-                toast({
-                  variant: "destructive",
-                  title: "Failed to save parameter",
-                  description: "Collection ID is required",
-                });
-                return;
-              }
-              onSave({
-                key,
-                parameterType: "credential",
-                urlParameterKey,
-                collectionId,
-                description,
-              });
-            }
-            if (type === "secret") {
-              if (!collectionId) {
-                toast({
-                  variant: "destructive",
-                  title: "Failed to add parameter",
-                  description: "Collection ID is required",
-                });
-                return;
-              }
-              onSave({
-                key,
-                parameterType: "secret",
-                collectionId,
-                identityFields: identityFields
-                  .split(",")
-                  .filter((s) => s.length > 0)
-                  .map((field) => field.trim()),
-                identityKey,
-                description,
-              });
-            }
-            if (type === "context") {
-              if (!sourceParameterKey) {
-                toast({
-                  variant: "destructive",
-                  title: "Failed to save parameter",
-                  description: "Source parameter key is required",
-                });
-                return;
-              }
-              onSave({
-                key,
-                parameterType: "context",
-                sourceParameterKey,
-                description,
-              });
-            }
-          }}
-        >
-          Save
-        </Button>
-      </div>
-    </div>
+              }}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </ScrollAreaViewport>
+    </ScrollArea>
   );
 }