From ea5ff593dd1a96c76efd6f1c0c61a6210784c1ca Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Wed, 5 Mar 2025 09:19:21 -0500
Subject: [PATCH] Change parameter addition overlay to include a new tab for
 credentials (#1886)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
---
 skyvern-frontend/src/components/SwitchBar.tsx |  2 +-
 .../src/components/WorkflowBlockInput.tsx     |  2 +-
 .../components/WorkflowBlockInputTextarea.tsx |  2 +-
 .../nodes/WorkflowBlockParameterSelect.tsx    | 43 +++++++++++++++++--
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/skyvern-frontend/src/components/SwitchBar.tsx b/skyvern-frontend/src/components/SwitchBar.tsx
index 2a0e3fda..c24d83a6 100644
--- a/skyvern-frontend/src/components/SwitchBar.tsx
+++ b/skyvern-frontend/src/components/SwitchBar.tsx
@@ -20,7 +20,7 @@ function SwitchBar({ options, value, onChange }: Props) {
           <div
             key={option.value}
             className={cn(
-              "cursor-pointer rounded-sm px-3 py-2 text-xs hover:bg-slate-700",
+              "cursor-pointer whitespace-nowrap rounded-sm px-3 py-2 text-xs hover:bg-slate-700",
               {
                 "bg-slate-700": selected,
               },
diff --git a/skyvern-frontend/src/components/WorkflowBlockInput.tsx b/skyvern-frontend/src/components/WorkflowBlockInput.tsx
index 655b4711..45a67c4e 100644
--- a/skyvern-frontend/src/components/WorkflowBlockInput.tsx
+++ b/skyvern-frontend/src/components/WorkflowBlockInput.tsx
@@ -28,7 +28,7 @@ function WorkflowBlockInput(props: Props) {
               <PlusIcon className="size-4" />
             </div>
           </PopoverTrigger>
-          <PopoverContent>
+          <PopoverContent className="w-[22rem]">
             <WorkflowBlockParameterSelect
               nodeId={nodeId}
               onAdd={(parameterKey) => {
diff --git a/skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx b/skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx
index 73d764a3..67c51bda 100644
--- a/skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx
+++ b/skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx
@@ -31,7 +31,7 @@ function WorkflowBlockInputTextarea(props: Props) {
               <PlusIcon className="size-4" />
             </div>
           </PopoverTrigger>
-          <PopoverContent>
+          <PopoverContent className="w-[22rem]">
             <WorkflowBlockParameterSelect
               nodeId={nodeId}
               onAdd={(parameterKey) => {
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/WorkflowBlockParameterSelect.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/WorkflowBlockParameterSelect.tsx
index 9aabe56f..81365a0f 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/WorkflowBlockParameterSelect.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/WorkflowBlockParameterSelect.tsx
@@ -23,7 +23,17 @@ function WorkflowBlockParameterSelect({ nodeId, onAdd }: Props) {
     edges,
     nodeId,
   );
-  const workflowParameterKeys = workflowParameters.map(
+  const credentialParameters = workflowParameters.filter(
+    (parameter) => parameter.parameterType === "credential",
+  );
+  const credentialParameterKeys = credentialParameters.map(
+    (parameter) => parameter.key,
+  );
+
+  const nonCredentialParameters = workflowParameters.filter(
+    (parameter) => parameter.parameterType !== "credential",
+  );
+  const nonCredentialParameterKeys = nonCredentialParameters.map(
     (parameter) => parameter.key,
   );
 
@@ -40,6 +50,10 @@ function WorkflowBlockParameterSelect({ nodeId, onAdd }: Props) {
             label: "Parameters",
             value: "parameters",
           },
+          {
+            label: "Credentials",
+            value: "credentials",
+          },
           {
             label: "Block Outputs",
             value: "outputs",
@@ -48,9 +62,9 @@ function WorkflowBlockParameterSelect({ nodeId, onAdd }: Props) {
       />
       <ScrollArea>
         <ScrollAreaViewport className="max-h-96">
-          {content === "parameters" && (
+          {content === "credentials" && (
             <div className="space-y-2">
-              {workflowParameterKeys.map((parameterKey) => {
+              {credentialParameterKeys.map((parameterKey) => {
                 return (
                   <div
                     key={parameterKey}
@@ -64,7 +78,28 @@ function WorkflowBlockParameterSelect({ nodeId, onAdd }: Props) {
                   </div>
                 );
               })}
-              {workflowParameterKeys.length === 0 && (
+              {credentialParameterKeys.length === 0 && (
+                <div className="text-xs">No credentials</div>
+              )}
+            </div>
+          )}
+          {content === "parameters" && (
+            <div className="space-y-2">
+              {nonCredentialParameterKeys.map((parameterKey) => {
+                return (
+                  <div
+                    key={parameterKey}
+                    className="flex cursor-pointer justify-between rounded-md bg-slate-elevation1 px-3 py-2 text-xs hover:bg-slate-elevation2"
+                    onClick={() => {
+                      onAdd(parameterKey);
+                    }}
+                  >
+                    {parameterKey}
+                    <PlusIcon />
+                  </div>
+                );
+              })}
+              {nonCredentialParameterKeys.length === 0 && (
                 <div className="text-xs">No workflow parameters</div>
               )}
             </div>