Change how parameters look in task node (#851)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx

@@ -1,6 +1,4 @@
-import { Checkbox } from "@/components/ui/checkbox";
-import { useWorkflowParametersState } from "../../useWorkflowParametersState";
-import { Label } from "@/components/ui/label";
+import { MultiSelect } from "@/components/ui/multi-select";
 import {
   Tooltip,
   TooltipContent,
@@ -8,6 +6,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
+import { useWorkflowParametersState } from "../../useWorkflowParametersState";
 
 type Props = {
   availableOutputParameters: Array<string>;
@@ -25,15 +24,12 @@ function TaskNodeParametersPanel({
     .map((parameter) => parameter.key)
     .concat(availableOutputParameters);
 
-  function toggleParameter(key: string) {
-    if (parameters.includes(key)) {
-      onParametersChange(
-        parameters.filter((parameterKey) => parameterKey !== key),
-      );
-    } else {
-      onParametersChange([...parameters, key]);
-    }
-  }
+  const options = keys.map((key) => {
+    return {
+      label: key,
+      value: key,
+    };
+  });
 
   return (
     <div className="space-y-4">
@@ -50,33 +46,13 @@ function TaskNodeParametersPanel({
           </Tooltip>
         </TooltipProvider>
       </header>
-      <div className="flex flex-wrap gap-2">
-        {keys.map((key) => {
-          return (
-            <div
-              key={key}
-              className="flex cursor-pointer items-center gap-2 rounded-sm bg-slate-elevation1 px-3 py-2"
-              id={key}
-            >
-              <Checkbox
-                checked={parameters.includes(key)}
-                onCheckedChange={() => {
-                  toggleParameter(key);
-                }}
-              />
-              <Label
-                htmlFor={key}
-                className="cursor-pointer text-xs"
-                onClick={() => {
-                  toggleParameter(key);
-                }}
-              >
-                {key}
-              </Label>
-            </div>
-          );
-        })}
-      </div>
+      <MultiSelect
+        defaultValue={parameters}
+        value={parameters}
+        onValueChange={onParametersChange}
+        options={options}
+        maxCount={50}
+      />
     </div>
   );
 }

skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx

@@ -42,7 +42,6 @@ function EditableNodeTitle({
             <HorizontallyResizingInput
               disabled={!editable}
               size={1}
-              autoFocus
               className={cn("nopan w-min border-0 p-0", inputClassName)}
               onBlur={(event) => {
                 if (!editable) {

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -658,6 +658,17 @@ function getOutputParameterKey(label: string) {
   return label + "_output";
 }
 
+function isOutputParameterKey(value: string) {
+  return value.endsWith("_output");
+}
+
+function getBlockNameOfOutputParameterKey(value: string) {
+  if (isOutputParameterKey(value)) {
+    return value.substring(0, value.length - 7);
+  }
+  return value;
+}
+
 function getUpdatedNodesAfterLabelUpdateForParameterKeys(
   id: string,
   newLabel: string,
@@ -765,4 +776,6 @@ export {
   getUpdatedNodesAfterLabelUpdateForParameterKeys,
   getAdditionalParametersForEmailBlock,
   getLabelForExistingNode,
+  isOutputParameterKey,
+  getBlockNameOfOutputParameterKey,
 };