diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx index 9249c923..85128a03 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx @@ -5,18 +5,13 @@ import { AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; -import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; import { Switch } from "@/components/ui/switch"; import { CodeEditor } from "@/routes/workflows/components/CodeEditor"; -import { ListBulletIcon, MixerVerticalIcon } from "@radix-ui/react-icons"; +import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback"; +import { ListBulletIcon } from "@radix-ui/react-icons"; import { Edge, Handle, @@ -27,14 +22,13 @@ import { useReactFlow, } from "@xyflow/react"; import { useState } from "react"; +import { AppNode } from ".."; +import { getOutputParameterKey } from "../../workflowEditorUtils"; import { EditableNodeTitle } from "../components/EditableNodeTitle"; import { NodeActionMenu } from "../NodeActionMenu"; import { TaskNodeDisplayModeSwitch } from "./TaskNodeDisplayModeSwitch"; import { TaskNodeParametersPanel } from "./TaskNodeParametersPanel"; import type { TaskNode, TaskNodeDisplayMode } from "./types"; -import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback"; -import { AppNode } from ".."; -import { getOutputParameterKey } from "../../workflowEditorUtils"; function getPreviousNodeIds( nodes: Array, @@ -131,6 +125,15 @@ function TaskNode({ id, data }: NodeProps) { className="nopan" /> +
+ { + updateNodeData(id, { parameterKeys }); + }} + /> +
); @@ -172,6 +175,15 @@ function TaskNode({ id, data }: NodeProps) { className="nopan" /> +
+ { + updateNodeData(id, { parameterKeys }); + }} + /> +
@@ -419,28 +431,10 @@ function TaskNode({ id, data }: NodeProps) { }} /> -
- - - - - - - { - updateNodeData(id, { parameterKeys }); - }} - /> - - -
+ {displayMode === "basic" && basicContent} {displayMode === "advanced" && advancedContent} diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx index fe63711e..3e526c90 100644 --- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx @@ -1,5 +1,13 @@ import { Checkbox } from "@/components/ui/checkbox"; import { useWorkflowParametersState } from "../../useWorkflowParametersState"; +import { Label } from "@/components/ui/label"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { QuestionMarkCircledIcon } from "@radix-ui/react-icons"; type Props = { availableOutputParameters: Array; @@ -16,34 +24,55 @@ function TaskNodeParametersPanel({ const keys = workflowParameters .map((parameter) => parameter.key) .concat(availableOutputParameters); + + function toggleParameter(key: string) { + if (parameters.includes(key)) { + onParametersChange( + parameters.filter((parameterKey) => parameterKey !== key), + ); + } else { + onParametersChange([...parameters, key]); + } + } + return (
-
-

Parameters

- - Check off the parameters you want to use in this task. - +
+

Parameters

+ + + + + + + Select the parameters that will be passed to the task. + + +
-
+
{keys.map((key) => { return (
{ - if (checked) { - onParametersChange([...parameters, key]); - } else { - onParametersChange( - parameters.filter((parameterKey) => parameterKey !== key), - ); - } + onCheckedChange={() => { + toggleParameter(key); }} /> - {key} +
); })}