mirror of
https://github.com/Skyvern-AI/skyvern.git
synced 2025-09-02 02:30:07 +00:00
Add parameter in workflow blocks (#1366)
This commit is contained in:
Shuchang Zheng
GitHub
parent
583075899f
commit
677d85283e
10 changed files with 430 additions and 190 deletions
22
skyvern-frontend/src/components/WorkflowBlockInput.tsx
Normal file
22
skyvern-frontend/src/components/WorkflowBlockInput.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { PlusIcon } from "@radix-ui/react-icons";
|
||||
import { cn } from "@/util/utils";
|
||||
import { Input } from "./ui/input";
|
||||
|
||||
type Props = React.ComponentProps<typeof Input> & {
|
||||
onIconClick: () => void;
|
||||
};
|
||||
|
||||
function WorkflowBlockInput(props: Props) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<Input {...props} 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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { WorkflowBlockInput };
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { PlusIcon } from "@radix-ui/react-icons";
|
||||
import { cn } from "@/util/utils";
|
||||
import { AutoResizingTextarea } from "./AutoResizingTextarea/AutoResizingTextarea";
|
||||
|
||||
type Props = React.ComponentProps<typeof AutoResizingTextarea> & {
|
||||
onIconClick: () => void;
|
||||
};
|
||||
|
||||
function WorkflowBlockInputTextarea(props: Props) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<AutoResizingTextarea
|
||||
{...props}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { WorkflowBlockInputTextarea };
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
|
|
@ -22,6 +21,8 @@ import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
|
|||
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";
|
||||
|
||||
const urlTooltip =
|
||||
"The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.";
|
||||
|
|
@ -31,6 +32,9 @@ 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({
|
||||
|
|
@ -102,7 +106,10 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
|
|||
<Label className="text-xs text-slate-300">URL</Label>
|
||||
<HelpTooltip content={urlTooltip} />
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("url");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
|
|
@ -121,7 +128,10 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
|
|||
</Label>
|
||||
<HelpTooltip content={navigationGoalTooltip} />
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("navigationGoal");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
|
|
@ -309,11 +319,11 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
|
|||
content={helpTooltips["action"]["totpVerificationUrl"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpVerificationUrl");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("totpVerificationUrl", event.target.value);
|
||||
}}
|
||||
value={inputs.totpVerificationUrl ?? ""}
|
||||
|
|
@ -330,7 +340,10 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
|
|||
content={helpTooltips["action"]["totpIdentifier"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpIdentifier");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
|
|
@ -347,6 +360,25 @@ 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
|
|
@ -23,8 +22,13 @@ 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";
|
||||
|
||||
function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
|
||||
const [parametersPanelField, setParametersPanelField] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
const { updateNodeData } = useReactFlow();
|
||||
const { editable } = data;
|
||||
const [label, setLabel] = useNodeLabelChangeHandler({
|
||||
|
|
@ -96,7 +100,10 @@ function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
|
|||
content={helpTooltips["extraction"]["dataExtractionGoal"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("dataExtractionGoal");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
|
|
@ -256,6 +263,25 @@ 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import { HelpTooltip } from "@/components/HelpTooltip";
|
||||
import {
|
||||
Accordion,
|
||||
|
|
@ -22,6 +21,8 @@ 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.";
|
||||
|
|
@ -31,6 +32,9 @@ 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({
|
||||
|
|
@ -104,11 +108,11 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
<Label className="text-xs text-slate-300">URL</Label>
|
||||
<HelpTooltip content={urlTooltip} />
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("url");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("url", event.target.value);
|
||||
}}
|
||||
value={inputs.url}
|
||||
|
|
@ -121,11 +125,11 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
<Label className="text-xs text-slate-300">Download Goal</Label>
|
||||
<HelpTooltip content={navigationGoalTooltip} />
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("navigationGoal");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("navigationGoal", event.target.value);
|
||||
}}
|
||||
value={inputs.navigationGoal}
|
||||
|
|
@ -161,9 +165,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
min="0"
|
||||
value={inputs.maxRetries ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
const value =
|
||||
event.target.value === ""
|
||||
? null
|
||||
|
|
@ -188,9 +189,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
min="0"
|
||||
value={inputs.maxStepsOverride ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
const value =
|
||||
event.target.value === ""
|
||||
? null
|
||||
|
|
@ -213,9 +211,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
checked={inputs.errorCodeMapping !== "null"}
|
||||
disabled={!editable}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange(
|
||||
"errorCodeMapping",
|
||||
checked
|
||||
|
|
@ -231,9 +226,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
language="json"
|
||||
value={inputs.errorCodeMapping}
|
||||
onChange={(value) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("errorCodeMapping", value);
|
||||
}}
|
||||
className="nowheel nopan"
|
||||
|
|
@ -256,9 +248,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
<Switch
|
||||
checked={inputs.continueOnFailure}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("continueOnFailure", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -277,9 +266,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
<Switch
|
||||
checked={inputs.cacheActions}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("cacheActions", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -301,9 +287,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
className="nopan w-52 text-xs"
|
||||
value={inputs.downloadSuffix ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("downloadSuffix", event.target.value);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -318,11 +301,11 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
content={helpTooltips["download"]["totpVerificationUrl"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpVerificationUrl");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("totpVerificationUrl", event.target.value);
|
||||
}}
|
||||
value={inputs.totpVerificationUrl ?? ""}
|
||||
|
|
@ -341,11 +324,11 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
|
|||
content={helpTooltips["download"]["totpIdentifier"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpIdentifier");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("totpIdentifier", event.target.value);
|
||||
}}
|
||||
value={inputs.totpIdentifier ?? ""}
|
||||
|
|
@ -358,6 +341,25 @@ 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
|
|
@ -23,8 +22,13 @@ 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";
|
||||
|
||||
function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
||||
const [parametersPanelField, setParametersPanelField] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
const { updateNodeData } = useReactFlow();
|
||||
const { editable } = data;
|
||||
const [label, setLabel] = useNodeLabelChangeHandler({
|
||||
|
|
@ -53,7 +57,7 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="relative">
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
|
|
@ -95,11 +99,11 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
<Label className="text-xs text-slate-300">URL</Label>
|
||||
<HelpTooltip content={helpTooltips["login"]["url"]} />
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("url");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("url", event.target.value);
|
||||
}}
|
||||
value={inputs.url}
|
||||
|
|
@ -112,11 +116,11 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
<Label className="text-xs text-slate-300">Login Goal</Label>
|
||||
<HelpTooltip content={helpTooltips["login"]["navigationGoal"]} />
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("navigationGoal");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("navigationGoal", event.target.value);
|
||||
}}
|
||||
value={inputs.navigationGoal}
|
||||
|
|
@ -175,9 +179,6 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
min="0"
|
||||
value={inputs.maxRetries ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
const value =
|
||||
event.target.value === ""
|
||||
? null
|
||||
|
|
@ -202,9 +203,6 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
min="0"
|
||||
value={inputs.maxStepsOverride ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
const value =
|
||||
event.target.value === ""
|
||||
? null
|
||||
|
|
@ -227,9 +225,6 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
checked={inputs.errorCodeMapping !== "null"}
|
||||
disabled={!editable}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange(
|
||||
"errorCodeMapping",
|
||||
checked
|
||||
|
|
@ -245,9 +240,6 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
language="json"
|
||||
value={inputs.errorCodeMapping}
|
||||
onChange={(value) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("errorCodeMapping", value);
|
||||
}}
|
||||
className="nowheel nopan"
|
||||
|
|
@ -270,9 +262,6 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
<Switch
|
||||
checked={inputs.continueOnFailure}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("continueOnFailure", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -291,9 +280,6 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
<Switch
|
||||
checked={inputs.cacheActions}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("cacheActions", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -309,11 +295,11 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
content={helpTooltips["login"]["totpVerificationUrl"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpVerificationUrl");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("totpVerificationUrl", event.target.value);
|
||||
}}
|
||||
value={inputs.totpVerificationUrl ?? ""}
|
||||
|
|
@ -330,11 +316,11 @@ function LoginNode({ id, data }: NodeProps<LoginNode>) {
|
|||
content={helpTooltips["login"]["totpIdentifier"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpIdentifier");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("totpIdentifier", event.target.value);
|
||||
}}
|
||||
value={inputs.totpIdentifier ?? ""}
|
||||
|
|
@ -347,6 +333,25 @@ 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
|
|
@ -22,9 +21,16 @@ 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,
|
||||
|
|
@ -54,7 +60,7 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="relative">
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
|
|
@ -96,11 +102,9 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
<Label className="text-xs text-slate-300">URL</Label>
|
||||
<HelpTooltip content={helpTooltips["navigation"]["url"]} />
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => setParametersPanelField("url")}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("url", event.target.value);
|
||||
}}
|
||||
value={inputs.url}
|
||||
|
|
@ -115,11 +119,9 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
content={helpTooltips["navigation"]["navigationGoal"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => setParametersPanelField("navigationGoal")}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("navigationGoal", event.target.value);
|
||||
}}
|
||||
value={inputs.navigationGoal}
|
||||
|
|
@ -152,9 +154,6 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
min="0"
|
||||
value={inputs.maxRetries ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
const value =
|
||||
event.target.value === ""
|
||||
? null
|
||||
|
|
@ -179,9 +178,6 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
min="0"
|
||||
value={inputs.maxStepsOverride ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
const value =
|
||||
event.target.value === ""
|
||||
? null
|
||||
|
|
@ -204,9 +200,6 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
checked={inputs.errorCodeMapping !== "null"}
|
||||
disabled={!editable}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange(
|
||||
"errorCodeMapping",
|
||||
checked
|
||||
|
|
@ -222,9 +215,6 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
language="json"
|
||||
value={inputs.errorCodeMapping}
|
||||
onChange={(value) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("errorCodeMapping", value);
|
||||
}}
|
||||
className="nowheel nopan"
|
||||
|
|
@ -247,9 +237,6 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
<Switch
|
||||
checked={inputs.continueOnFailure}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("continueOnFailure", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -268,9 +255,6 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
<Switch
|
||||
checked={inputs.cacheActions}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("cacheActions", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -290,9 +274,6 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
<Switch
|
||||
checked={inputs.allowDownloads}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("allowDownloads", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -307,15 +288,15 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
content={helpTooltips["navigation"]["fileSuffix"]}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
<WorkflowBlockInput
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("downloadSuffix");
|
||||
}}
|
||||
type="text"
|
||||
placeholder={placeholders["navigation"]["downloadSuffix"]}
|
||||
className="nopan w-52 text-xs"
|
||||
value={inputs.downloadSuffix ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("downloadSuffix", event.target.value);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -332,11 +313,11 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpVerificationUrl");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("totpVerificationUrl", event.target.value);
|
||||
}}
|
||||
value={inputs.totpVerificationUrl ?? ""}
|
||||
|
|
@ -355,11 +336,11 @@ function NavigationNode({ id, data }: NodeProps<NavigationNode>) {
|
|||
content={helpTooltips["navigation"]["totpIdentifier"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpIdentifier");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("totpIdentifier", event.target.value);
|
||||
}}
|
||||
value={inputs.totpIdentifier ?? ""}
|
||||
|
|
@ -372,6 +353,25 @@ 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import { HelpTooltip } from "@/components/HelpTooltip";
|
||||
import {
|
||||
Accordion,
|
||||
|
|
@ -9,6 +8,7 @@ import {
|
|||
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";
|
||||
|
|
@ -24,22 +24,28 @@ import {
|
|||
} from "@xyflow/react";
|
||||
import { useState } from "react";
|
||||
import { AppNode } from "..";
|
||||
import { helpTooltips, placeholders } from "../../helpContent";
|
||||
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 { Separator } from "@/components/ui/separator";
|
||||
import { dataSchemaExampleValue, errorMappingExampleValue } from "../types";
|
||||
import { helpTooltips, placeholders } from "../../helpContent";
|
||||
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();
|
||||
const nodes = useNodes<AppNode>();
|
||||
const edges = useEdges();
|
||||
const outputParameterKeys = getAvailableOutputParameterKeys(nodes, edges, id);
|
||||
|
||||
const [label, setLabel] = useNodeLabelChangeHandler({
|
||||
id,
|
||||
initialValue: data.label,
|
||||
|
|
@ -70,7 +76,7 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="relative">
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
|
|
@ -116,12 +122,12 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
<Label className="text-xs text-slate-300">URL</Label>
|
||||
<HelpTooltip content={helpTooltips["task"]["url"]} />
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("url", event.target.value);
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("url");
|
||||
}}
|
||||
onChange={(value) => {
|
||||
handleChange("url", value);
|
||||
}}
|
||||
value={inputs.url}
|
||||
placeholder={placeholders["task"]["url"]}
|
||||
|
|
@ -135,12 +141,12 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
content={helpTooltips["task"]["navigationGoal"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("navigationGoal", event.target.value);
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("navigationGoal");
|
||||
}}
|
||||
onChange={(value) => {
|
||||
handleChange("navigationGoal", value);
|
||||
}}
|
||||
value={inputs.navigationGoal}
|
||||
placeholder={placeholders["task"]["navigationGoal"]}
|
||||
|
|
@ -172,11 +178,11 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
content={helpTooltips["task"]["dataExtractionGoal"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("dataExtractionGoal");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("dataExtractionGoal", event.target.value);
|
||||
}}
|
||||
value={inputs.dataExtractionGoal}
|
||||
|
|
@ -197,9 +203,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
<Checkbox
|
||||
checked={inputs.dataSchema !== "null"}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange(
|
||||
"dataSchema",
|
||||
checked
|
||||
|
|
@ -215,9 +218,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
language="json"
|
||||
value={inputs.dataSchema}
|
||||
onChange={(value) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("dataSchema", value);
|
||||
}}
|
||||
className="nowheel nopan"
|
||||
|
|
@ -247,9 +247,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
min="0"
|
||||
value={inputs.maxRetries ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
const value =
|
||||
event.target.value === ""
|
||||
? null
|
||||
|
|
@ -274,9 +271,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
min="0"
|
||||
value={inputs.maxStepsOverride ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
const value =
|
||||
event.target.value === ""
|
||||
? null
|
||||
|
|
@ -299,9 +293,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
checked={inputs.errorCodeMapping !== "null"}
|
||||
disabled={!editable}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange(
|
||||
"errorCodeMapping",
|
||||
checked
|
||||
|
|
@ -317,9 +308,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
language="json"
|
||||
value={inputs.errorCodeMapping}
|
||||
onChange={(value) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("errorCodeMapping", value);
|
||||
}}
|
||||
className="nowheel nopan"
|
||||
|
|
@ -342,9 +330,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
<Switch
|
||||
checked={inputs.continueOnFailure}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("continueOnFailure", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -363,9 +348,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
<Switch
|
||||
checked={inputs.cacheActions}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("cacheActions", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -385,9 +367,6 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
<Switch
|
||||
checked={inputs.allowDownloads}
|
||||
onCheckedChange={(checked) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("allowDownloads", checked);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -400,15 +379,15 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
</Label>
|
||||
<HelpTooltip content={helpTooltips["task"]["fileSuffix"]} />
|
||||
</div>
|
||||
<Input
|
||||
<WorkflowBlockInput
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("downloadSuffix");
|
||||
}}
|
||||
type="text"
|
||||
placeholder={placeholders["task"]["downloadSuffix"]}
|
||||
className="nopan w-52 text-xs"
|
||||
value={inputs.downloadSuffix ?? ""}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("downloadSuffix", event.target.value);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -423,11 +402,11 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
content={helpTooltips["task"]["totpVerificationUrl"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpVerificationUrl");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("totpVerificationUrl", event.target.value);
|
||||
}}
|
||||
value={inputs.totpVerificationUrl ?? ""}
|
||||
|
|
@ -444,11 +423,11 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
|
|||
content={helpTooltips["task"]["totpIdentifier"]}
|
||||
/>
|
||||
</div>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("totpIdentifier");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
}
|
||||
handleChange("totpIdentifier", event.target.value);
|
||||
}}
|
||||
value={inputs.totpIdentifier ?? ""}
|
||||
|
|
@ -461,6 +440,25 @@ 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle";
|
|||
import { NodeActionMenu } from "../NodeActionMenu";
|
||||
import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
|
||||
import { HelpTooltip } from "@/components/HelpTooltip";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { errorMappingExampleValue } from "../types";
|
||||
|
|
@ -21,8 +20,13 @@ 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({
|
||||
|
|
@ -83,7 +87,10 @@ function ValidationNode({ id, data }: NodeProps<ValidationNode>) {
|
|||
</header>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs text-slate-300">Complete if...</Label>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("completeCriterion");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
|
|
@ -96,7 +103,10 @@ function ValidationNode({ id, data }: NodeProps<ValidationNode>) {
|
|||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs text-slate-300">Terminate if...</Label>
|
||||
<AutoResizingTextarea
|
||||
<WorkflowBlockInputTextarea
|
||||
onIconClick={() => {
|
||||
setParametersPanelField("terminateCriterion");
|
||||
}}
|
||||
onChange={(event) => {
|
||||
if (!editable) {
|
||||
return;
|
||||
|
|
@ -185,6 +195,25 @@ 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
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 { SwitchBar } from "@/components/SwitchBar";
|
||||
import { useState } from "react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { ScrollAreaViewport } from "@radix-ui/react-scroll-area";
|
||||
|
||||
type Props = {
|
||||
nodeId: string;
|
||||
onClose: () => void;
|
||||
onAdd: (parameterKey: string) => void;
|
||||
};
|
||||
|
||||
function WorkflowBlockParameterSelect({ nodeId, onClose, onAdd }: Props) {
|
||||
const [content, setContent] = useState("parameters");
|
||||
const [workflowParameters] = useWorkflowParametersState();
|
||||
const nodes = useNodes<AppNode>();
|
||||
const edges = useEdges();
|
||||
const outputParameterKeys = getAvailableOutputParameterKeys(
|
||||
nodes,
|
||||
edges,
|
||||
nodeId,
|
||||
);
|
||||
const workflowParameterKeys = workflowParameters.map(
|
||||
(parameter) => parameter.key,
|
||||
);
|
||||
|
||||
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">
|
||||
<header className="flex justify-between">
|
||||
<h1>Add Parameter</h1>
|
||||
<Cross2Icon className="size-6 cursor-pointer" onClick={onClose} />
|
||||
</header>
|
||||
<SwitchBar
|
||||
onChange={(value) => setContent(value)}
|
||||
value={content}
|
||||
options={[
|
||||
{
|
||||
label: "Parameters",
|
||||
value: "parameters",
|
||||
},
|
||||
{
|
||||
label: "Block Outputs",
|
||||
value: "outputs",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ScrollArea>
|
||||
<ScrollAreaViewport className="max-h-96">
|
||||
{content === "parameters" && (
|
||||
<div className="space-y-2">
|
||||
{workflowParameterKeys.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>
|
||||
);
|
||||
})}
|
||||
{workflowParameterKeys.length === 0 && (
|
||||
<div className="text-xs">No workflow parameters</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{content === "outputs" && (
|
||||
<div className="space-y-2">
|
||||
{outputParameterKeys.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>
|
||||
);
|
||||
})}
|
||||
{outputParameterKeys.length === 0 && (
|
||||
<div className="text-xs">No output parameters</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ScrollAreaViewport>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { WorkflowBlockParameterSelect };
|
||||
Loading…
Add table
Reference in a new issue