vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Use popover in add parameter experience (#1377)

Browse Source
This commit is contained in:
Shuchang Zheng
2024-12-12 08:30:04 -08:00
committed by GitHub
parent a574bda9d3
commit 3b8b9639f2
10 changed files with 163 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
skyvern-frontend/src/components/WorkflowBlockInput.tsx
View File

@@ -1,19 +1,42 @@
import { PlusIcon } from "@radix-ui/react-icons";
import { cn } from "@/util/utils";
import { Input } from "./ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { WorkflowBlockParameterSelect } from "@/routes/workflows/editor/nodes/WorkflowBlockParameterSelect";
type Props = React.ComponentProps<typeof Input> & {
onIconClick: () => void;
type Props = Omit<React.ComponentProps<typeof Input>, "onChange"> & {
onChange: (value: string) => void;
nodeId: string;
};
function WorkflowBlockInput(props: Props) {
const { nodeId, onChange, ...inputProps } = props;
return (
<div className="relative">
<Input {...props} className={cn("pr-9", props.className)} />
<Input
{...inputProps}
className={cn("pr-9", props.className)}
onChange={(event) => {
onChange(event.target.value);
}}
/>
<div className="absolute right-0 top-0 flex size-9 cursor-pointer items-center justify-center">
<div className="rounded p-1 hover:bg-muted" onClick={props.onIconClick}>
<PlusIcon className="size-4" />
</div>
<Popover>
<PopoverTrigger asChild>
<div className="rounded p-1 hover:bg-muted">
<PlusIcon className="size-4" />
</div>
</PopoverTrigger>
<PopoverContent>
<WorkflowBlockParameterSelect
nodeId={nodeId}
onAdd={(parameterKey) => {
onChange(`${props.value ?? ""}{{${parameterKey}}}`);
}}
/>
</PopoverContent>
</Popover>
</div>
</div>
);

35
skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx
View File

@@ -1,22 +1,45 @@
import { PlusIcon } from "@radix-ui/react-icons";
import { cn } from "@/util/utils";
import { AutoResizingTextarea } from "./AutoResizingTextarea/AutoResizingTextarea";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { WorkflowBlockParameterSelect } from "@/routes/workflows/editor/nodes/WorkflowBlockParameterSelect";
type Props = React.ComponentProps<typeof AutoResizingTextarea> & {
onIconClick: () => void;
type Props = Omit<
React.ComponentProps<typeof AutoResizingTextarea>,
"onChange"
> & {
onChange: (value: string) => void;
nodeId: string;
};
function WorkflowBlockInputTextarea(props: Props) {
const { nodeId, onChange, ...textAreaProps } = props;
return (
<div className="relative">
<AutoResizingTextarea
{...props}
{...textAreaProps}
onChange={(event) => {
onChange(event.target.value);
}}
className={cn("pr-9", props.className)}
/>
<div className="absolute right-0 top-0 flex size-9 cursor-pointer items-center justify-center">
<div className="rounded p-1 hover:bg-muted" onClick={props.onIconClick}>
<PlusIcon className="size-4" />
</div>
<Popover>
<PopoverTrigger asChild>
<div className="rounded p-1 hover:bg-muted">
<PlusIcon className="size-4" />
</div>
</PopoverTrigger>
<PopoverContent>
<WorkflowBlockParameterSelect
nodeId={nodeId}
onAdd={(parameterKey) => {
onChange(`${props.value ?? ""}{{${parameterKey}}}`);
}}
/>
</PopoverContent>
</Popover>
</div>
</div>
);

75
skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx
View File

@@ -22,7 +22,7 @@ import { Switch } from "@/components/ui/switch";
import { ClickIcon } from "@/components/icons/ClickIcon";
import { placeholders, helpTooltips } from "../../helpContent";
import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
const urlTooltip =
"The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.";
@@ -32,9 +32,6 @@ const navigationGoalTooltip =
const navigationGoalPlaceholder = 'Input {{ name }} into "Name" field.';
function ActionNode({ id, data }: NodeProps<ActionNode>) {
const [parametersPanelField, setParametersPanelField] = useState<
string | null
>(null);
const { updateNodeData } = useReactFlow();
const { editable } = data;
const [label, setLabel] = useNodeLabelChangeHandler({
@@ -107,14 +104,9 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
<HelpTooltip content={urlTooltip} />
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("url");
}}
onChange={(event) => {
if (!editable) {
return;
}
handleChange("url", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("url", value);
}}
value={inputs.url}
placeholder={placeholders["action"]["url"]}
@@ -129,14 +121,9 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
<HelpTooltip content={navigationGoalTooltip} />
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("navigationGoal");
}}
onChange={(event) => {
if (!editable) {
return;
}
handleChange("navigationGoal", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("navigationGoal", value);
}}
value={inputs.navigationGoal}
placeholder={navigationGoalPlaceholder}
@@ -302,16 +289,14 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
content={helpTooltips["action"]["fileSuffix"]}
/>
</div>
<Input
<WorkflowBlockInput
nodeId={id}
type="text"
placeholder={placeholders["action"]["downloadSuffix"]}
className="nopan w-52 text-xs"
value={inputs.downloadSuffix ?? ""}
onChange={(event) => {
if (!editable) {
return;
}
handleChange("downloadSuffix", event.target.value);
onChange={(value) => {
handleChange("downloadSuffix", value);
}}
/>
</div>
@@ -326,11 +311,9 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpVerificationUrl");
}}
onChange={(event) => {
handleChange("totpVerificationUrl", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpVerificationUrl", value);
}}
value={inputs.totpVerificationUrl ?? ""}
placeholder={placeholders["action"]["totpVerificationUrl"]}
@@ -347,14 +330,9 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpIdentifier");
}}
onChange={(event) => {
if (!editable) {
return;
}
handleChange("totpIdentifier", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpIdentifier", value);
}}
value={inputs.totpIdentifier ?? ""}
placeholder={placeholders["action"]["totpIdentifier"]}
@@ -366,25 +344,6 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
</AccordionItem>
</Accordion>
</div>
{typeof parametersPanelField === "string" && (
<WorkflowBlockParameterSelect
nodeId={id}
onClose={() => setParametersPanelField(null)}
onAdd={(parameterKey) => {
if (parametersPanelField === null || !editable) {
return;
}
if (parametersPanelField in inputs) {
const currentValue =
inputs[parametersPanelField as keyof typeof inputs];
handleChange(
parametersPanelField,
`${currentValue ?? ""}{{ ${parameterKey} }}`,
);
}
}}
/>
)}
</div>
);
}

45
skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx
View File

@@ -1,34 +1,30 @@
import { HelpTooltip } from "@/components/HelpTooltip";
import { ExtractIcon } from "@/components/icons/ExtractIcon";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler";
import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
import { useState } from "react";
import { EditableNodeTitle } from "../components/EditableNodeTitle";
import { NodeActionMenu } from "../NodeActionMenu";
import { HelpTooltip } from "@/components/HelpTooltip";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { dataSchemaExampleValue } from "../types";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { Switch } from "@/components/ui/switch";
import type { ExtractionNode } from "./types";
import { ExtractIcon } from "@/components/icons/ExtractIcon";
import { helpTooltips, placeholders } from "../../helpContent";
import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
import { helpTooltips, placeholders } from "../../helpContent";
function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
const [parametersPanelField, setParametersPanelField] = useState<
string | null
>(null);
const { updateNodeData } = useReactFlow();
const { editable } = data;
const [label, setLabel] = useNodeLabelChangeHandler({
@@ -101,14 +97,12 @@ function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("dataExtractionGoal");
}}
onChange={(event) => {
nodeId={id}
onChange={(value) => {
if (!editable) {
return;
}
handleChange("dataExtractionGoal", event.target.value);
handleChange("dataExtractionGoal", value);
}}
value={inputs.dataExtractionGoal}
placeholder={placeholders["extraction"]["dataExtractionGoal"]}
@@ -263,25 +257,6 @@ function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
</AccordionItem>
</Accordion>
</div>
{typeof parametersPanelField === "string" && (
<WorkflowBlockParameterSelect
nodeId={id}
onClose={() => setParametersPanelField(null)}
onAdd={(parameterKey) => {
if (parametersPanelField === null || !editable) {
return;
}
if (parametersPanelField in inputs) {
const currentValue =
inputs[parametersPanelField as keyof typeof inputs];
handleChange(
parametersPanelField,
`${currentValue ?? ""}{{ ${parameterKey} }}`,
);
}
}}
/>
)}
</div>
);
}

59
skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx
View File

@@ -10,19 +10,18 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler";
import { DownloadIcon } from "@radix-ui/react-icons";
import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
import { useState } from "react";
import { helpTooltips, placeholders } from "../../helpContent";
import { EditableNodeTitle } from "../components/EditableNodeTitle";
import { NodeActionMenu } from "../NodeActionMenu";
import { errorMappingExampleValue } from "../types";
import type { FileDownloadNode } from "./types";
import { helpTooltips, placeholders } from "../../helpContent";
import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
const urlTooltip =
"The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.";
@@ -32,9 +31,6 @@ const navigationGoalTooltip =
const navigationGoalPlaceholder = "Tell Skyvern which file to download.";
function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
const [parametersPanelField, setParametersPanelField] = useState<
string | null
>(null);
const { updateNodeData } = useReactFlow();
const { editable } = data;
const [label, setLabel] = useNodeLabelChangeHandler({
@@ -109,11 +105,9 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
<HelpTooltip content={urlTooltip} />
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("url");
}}
onChange={(event) => {
handleChange("url", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("url", value);
}}
value={inputs.url}
placeholder={urlPlaceholder}
@@ -126,11 +120,9 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
<HelpTooltip content={navigationGoalTooltip} />
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("navigationGoal");
}}
onChange={(event) => {
handleChange("navigationGoal", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("navigationGoal", value);
}}
value={inputs.navigationGoal}
placeholder={navigationGoalPlaceholder}
@@ -302,11 +294,9 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpVerificationUrl");
}}
onChange={(event) => {
handleChange("totpVerificationUrl", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpVerificationUrl", value);
}}
value={inputs.totpVerificationUrl ?? ""}
placeholder={
@@ -325,11 +315,9 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpIdentifier");
}}
onChange={(event) => {
handleChange("totpIdentifier", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpIdentifier", value);
}}
value={inputs.totpIdentifier ?? ""}
placeholder={placeholders["download"]["totpIdentifier"]}
@@ -341,25 +329,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
</AccordionItem>
</Accordion>
</div>
{typeof parametersPanelField === "string" && (
<WorkflowBlockParameterSelect
nodeId={id}
onClose={() => setParametersPanelField(null)}
onAdd={(parameterKey) => {
if (parametersPanelField === null || !editable) {
return;
}
if (parametersPanelField in inputs) {
const currentValue =
inputs[parametersPanelField as keyof typeof inputs];
handleChange(
parametersPanelField,
`${currentValue ?? ""}{{ ${parameterKey} }}`,
);
}
}}
/>
)}
</div>
);
}

73
skyvern-frontend/src/routes/workflows/editor/nodes/LoginNode/LoginNode.tsx
View File

@@ -1,34 +1,30 @@
import { HelpTooltip } from "@/components/HelpTooltip";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler";
import { LockOpen1Icon } from "@radix-ui/react-icons";
import { Handle, NodeProps, Position, useReactFlow } from "@xyflow/react";
import { useState } from "react";
import { helpTooltips, placeholders } from "../../helpContent";
import { EditableNodeTitle } from "../components/EditableNodeTitle";
import { NodeActionMenu } from "../NodeActionMenu";
import { HelpTooltip } from "@/components/HelpTooltip";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { errorMappingExampleValue } from "../types";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { Switch } from "@/components/ui/switch";
import type { LoginNode } from "./types";
import { LockOpen1Icon } from "@radix-ui/react-icons";
import { CredentialParameterSelector } from "./CredentialParameterSelector";
import { helpTooltips, placeholders } from "../../helpContent";
import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
import type { LoginNode } from "./types";
function LoginNode({ id, data }: NodeProps<LoginNode>) {
const [parametersPanelField, setParametersPanelField] = useState<
string | null
>(null);
const { updateNodeData } = useReactFlow();
const { editable } = data;
const [label, setLabel] = useNodeLabelChangeHandler({
@@ -100,11 +96,9 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
<HelpTooltip content={helpTooltips["login"]["url"]} />
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("url");
}}
onChange={(event) => {
handleChange("url", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("url", value);
}}
value={inputs.url}
placeholder={placeholders["login"]["url"]}
@@ -117,11 +111,9 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
<HelpTooltip content={helpTooltips["login"]["navigationGoal"]} />
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("navigationGoal");
}}
onChange={(event) => {
handleChange("navigationGoal", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("navigationGoal", value);
}}
value={inputs.navigationGoal}
placeholder={placeholders["login"]["navigationGoal"]}
@@ -296,11 +288,9 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpVerificationUrl");
}}
onChange={(event) => {
handleChange("totpVerificationUrl", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpVerificationUrl", value);
}}
value={inputs.totpVerificationUrl ?? ""}
placeholder={placeholders["login"]["totpVerificationUrl"]}
@@ -317,11 +307,9 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpIdentifier");
}}
onChange={(event) => {
handleChange("totpIdentifier", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpIdentifier", value);
}}
value={inputs.totpIdentifier ?? ""}
placeholder={placeholders["login"]["totpIdentifier"]}
@@ -333,25 +321,6 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
</AccordionItem>
</Accordion>
</div>
{typeof parametersPanelField === "string" && (
<WorkflowBlockParameterSelect
nodeId={id}
onClose={() => setParametersPanelField(null)}
onAdd={(parameterKey) => {
if (parametersPanelField === null || !editable) {
return;
}
if (parametersPanelField in inputs) {
const currentValue =
inputs[parametersPanelField as keyof typeof inputs];
handleChange(
parametersPanelField,
`${currentValue ?? ""}{{ ${parameterKey} }}`,
);
}
}}
/>
)}
</div>
);
}

60
skyvern-frontend/src/routes/workflows/editor/nodes/NavigationNode/NavigationNode.tsx
View File

@@ -21,16 +21,11 @@ import { Switch } from "@/components/ui/switch";
import type { NavigationNode } from "./types";
import { RobotIcon } from "@/components/icons/RobotIcon";
import { helpTooltips, placeholders } from "../../helpContent";
import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
const { updateNodeData } = useReactFlow();
const [parametersPanelField, setParametersPanelField] = useState<
string | null
>(null);
const { editable } = data;
const [label, setLabel] = useNodeLabelChangeHandler({
id,
@@ -103,9 +98,9 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
<HelpTooltip content={helpTooltips["navigation"]["url"]} />
</div>
<WorkflowBlockInputTextarea
onIconClick={() => setParametersPanelField("url")}
onChange={(event) => {
handleChange("url", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("url", value);
}}
value={inputs.url}
placeholder={placeholders["navigation"]["url"]}
@@ -120,9 +115,9 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => setParametersPanelField("navigationGoal")}
onChange={(event) => {
handleChange("navigationGoal", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("navigationGoal", value);
}}
value={inputs.navigationGoal}
placeholder={placeholders["navigation"]["navigationGoal"]}
@@ -295,15 +290,13 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
/>
</div>
<WorkflowBlockInput
onIconClick={() => {
setParametersPanelField("downloadSuffix");
}}
nodeId={id}
type="text"
placeholder={placeholders["navigation"]["downloadSuffix"]}
className="nopan w-52 text-xs"
value={inputs.downloadSuffix ?? ""}
onChange={(event) => {
handleChange("downloadSuffix", event.target.value);
onChange={(value) => {
handleChange("downloadSuffix", value);
}}
/>
</div>
@@ -320,11 +313,9 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpVerificationUrl");
}}
onChange={(event) => {
handleChange("totpVerificationUrl", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpVerificationUrl", value);
}}
value={inputs.totpVerificationUrl ?? ""}
placeholder={
@@ -343,11 +334,9 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpIdentifier");
}}
onChange={(event) => {
handleChange("totpIdentifier", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpIdentifier", value);
}}
value={inputs.totpIdentifier ?? ""}
placeholder={placeholders["navigation"]["totpIdentifier"]}
@@ -359,25 +348,6 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
</AccordionItem>
</Accordion>
</div>
{typeof parametersPanelField === "string" && (
<WorkflowBlockParameterSelect
nodeId={id}
onClose={() => setParametersPanelField(null)}
onAdd={(parameterKey) => {
if (parametersPanelField === null || !editable) {
return;
}
if (parametersPanelField in inputs) {
const currentValue =
inputs[parametersPanelField as keyof typeof inputs];
handleChange(
parametersPanelField,
`${currentValue ?? ""}{{ ${parameterKey} }}`,
);
}
}}
/>
)}
</div>
);
}

71
skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
View File

@@ -29,16 +29,12 @@ import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
import { EditableNodeTitle } from "../components/EditableNodeTitle";
import { NodeActionMenu } from "../NodeActionMenu";
import { dataSchemaExampleValue, errorMappingExampleValue } from "../types";
import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
import { ParametersMultiSelect } from "./ParametersMultiSelect";
import type { TaskNode } from "./types";
import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
function TaskNode({ id, data }: NodeProps<TaskNode>) {
const [parametersPanelField, setParametersPanelField] = useState<
string | null
>(null);
const { updateNodeData } = useReactFlow();
const { editable } = data;
const deleteNodeCallback = useDeleteNodeCallback();
@@ -123,11 +119,9 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
<HelpTooltip content={helpTooltips["task"]["url"]} />
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("url");
}}
onChange={(event) => {
handleChange("url", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("url", value);
}}
value={inputs.url}
placeholder={placeholders["task"]["url"]}
@@ -142,11 +136,9 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("navigationGoal");
}}
onChange={(event) => {
handleChange("navigationGoal", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("navigationGoal", value);
}}
value={inputs.navigationGoal}
placeholder={placeholders["task"]["navigationGoal"]}
@@ -179,11 +171,9 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("dataExtractionGoal");
}}
onChange={(event) => {
handleChange("dataExtractionGoal", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("dataExtractionGoal", value);
}}
value={inputs.dataExtractionGoal}
placeholder={placeholders["task"]["dataExtractionGoal"]}
@@ -380,15 +370,13 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
<HelpTooltip content={helpTooltips["task"]["fileSuffix"]} />
</div>
<WorkflowBlockInput
onIconClick={() => {
setParametersPanelField("downloadSuffix");
}}
nodeId={id}
type="text"
placeholder={placeholders["task"]["downloadSuffix"]}
className="nopan w-52 text-xs"
value={inputs.downloadSuffix ?? ""}
onChange={(event) => {
handleChange("downloadSuffix", event.target.value);
onChange={(value) => {
handleChange("downloadSuffix", value);
}}
/>
</div>
@@ -403,11 +391,9 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpVerificationUrl");
}}
onChange={(event) => {
handleChange("totpVerificationUrl", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpVerificationUrl", value);
}}
value={inputs.totpVerificationUrl ?? ""}
placeholder={placeholders["task"]["totpVerificationUrl"]}
@@ -424,11 +410,9 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
/>
</div>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("totpIdentifier");
}}
onChange={(event) => {
handleChange("totpIdentifier", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("totpIdentifier", value);
}}
value={inputs.totpIdentifier ?? ""}
placeholder={placeholders["task"]["totpIdentifier"]}
@@ -440,25 +424,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
</AccordionItem>
</Accordion>
</div>
{typeof parametersPanelField === "string" && (
<WorkflowBlockParameterSelect
nodeId={id}
onClose={() => setParametersPanelField(null)}
onAdd={(parameterKey) => {
if (parametersPanelField === null || !editable) {
return;
}
if (parametersPanelField in inputs) {
const currentValue =
inputs[parametersPanelField as keyof typeof inputs];
handleChange(
parametersPanelField,
`${currentValue ?? ""}{{ ${parameterKey} }}`,
);
}
}}
/>
)}
</div>
);
}

45
skyvern-frontend/src/routes/workflows/editor/nodes/ValidationNode/ValidationNode.tsx
View File

@@ -20,13 +20,9 @@ import {
} from "@/components/ui/accordion";
import { Separator } from "@/components/ui/separator";
import { helpTooltips } from "../../helpContent";
import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
function ValidationNode({ id, data }: NodeProps<ValidationNode>) {
const [parametersPanelField, setParametersPanelField] = useState<
string | null
>(null);
const { updateNodeData } = useReactFlow();
const { editable } = data;
const [label, setLabel] = useNodeLabelChangeHandler({
@@ -88,14 +84,9 @@ function ValidationNode({ id, data }: NodeProps<ValidationNode>) {
<div className="space-y-2">
<Label className="text-xs text-slate-300">Complete if...</Label>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("completeCriterion");
}}
onChange={(event) => {
if (!editable) {
return;
}
handleChange("completeCriterion", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("completeCriterion", value);
}}
value={inputs.completeCriterion}
className="nopan text-xs"
@@ -104,14 +95,9 @@ function ValidationNode({ id, data }: NodeProps<ValidationNode>) {
<div className="space-y-2">
<Label className="text-xs text-slate-300">Terminate if...</Label>
<WorkflowBlockInputTextarea
onIconClick={() => {
setParametersPanelField("terminateCriterion");
}}
onChange={(event) => {
if (!editable) {
return;
}
handleChange("terminateCriterion", event.target.value);
nodeId={id}
onChange={(value) => {
handleChange("terminateCriterion", value);
}}
value={inputs.terminateCriterion}
className="nopan text-xs"
@@ -195,25 +181,6 @@ function ValidationNode({ id, data }: NodeProps<ValidationNode>) {
</AccordionItem>
</Accordion>
</div>
{typeof parametersPanelField === "string" && (
<WorkflowBlockParameterSelect
nodeId={id}
onClose={() => setParametersPanelField(null)}
onAdd={(parameterKey) => {
if (parametersPanelField === null || !editable) {
return;
}
if (parametersPanelField in inputs) {
const currentValue =
inputs[parametersPanelField as keyof typeof inputs];
handleChange(
parametersPanelField,
`${currentValue ?? ""}{{ ${parameterKey} }}`,
);
}
}}
/>
)}
</div>
);
}

10
skyvern-frontend/src/routes/workflows/editor/nodes/WorkflowBlockParameterSelect.tsx
View File

@@ -2,7 +2,7 @@ import { useEdges, useNodes } from "@xyflow/react";
import { useWorkflowParametersState } from "../useWorkflowParametersState";
import { AppNode } from ".";
import { getAvailableOutputParameterKeys } from "../workflowEditorUtils";
import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
import { PlusIcon } from "@radix-ui/react-icons";
import { SwitchBar } from "@/components/SwitchBar";
import { useState } from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
@@ -10,11 +10,10 @@ import { ScrollAreaViewport } from "@radix-ui/react-scroll-area";
type Props = {
nodeId: string;
onClose: () => void;
onAdd: (parameterKey: string) => void;
};
function WorkflowBlockParameterSelect({ nodeId, onClose, onAdd }: Props) {
function WorkflowBlockParameterSelect({ nodeId, onAdd }: Props) {
const [content, setContent] = useState("parameters");
const [workflowParameters] = useWorkflowParametersState();
const nodes = useNodes<AppNode>();
@@ -29,10 +28,9 @@ function WorkflowBlockParameterSelect({ nodeId, onClose, onAdd }: Props) {
);
return (
<div className="nopan nowheel absolute right-[-296px] top-0 mt-0 w-[280px] cursor-auto space-y-3 rounded-md border border-slate-700 bg-slate-950 p-4">
<div className="cursor-auto space-y-3">
<header className="flex justify-between">
<h1>Add Parameter</h1>
<Cross2Icon className="size-6 cursor-pointer" onClick={onClose} />
</header>
<SwitchBar
onChange={(value) => setContent(value)}
@@ -79,7 +77,7 @@ function WorkflowBlockParameterSelect({ nodeId, onClose, onAdd }: Props) {
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);
onAdd?.(parameterKey);
}}
>
{parameterKey}