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

@@ -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,
               },

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) => {

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) => {

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>