mirror of
https://github.com/Nikhil-Doye/workflow-builder.git
synced 2026-07-22 02:01:56 +02:00
Add test input configuration feature to ExecutionPanel
- Introduced TestInputConfigurator component for configuring test inputs in workflows. - Enhanced ExecutionPanel to include a button for opening the test input configuration modal. - Integrated test input management logic using the new TestInputManager service to handle input mappings and validation. - Updated workflow execution logic to apply test inputs based on user configuration, improving flexibility and usability in testing scenarios.
This commit is contained in:
Nikhil-Doye
@@ -1,7 +1,12 @@
|
||||
import React from "react";
|
||||
import { TestInputConfigurator } from "./TestInputConfigurator";
|
||||
import { useWorkflowStore } from "../store/workflowStore";
|
||||
import { ExecutionConfiguration } from "./ExecutionConfiguration";
|
||||
import { ExecutionPlanPreview } from "./ExecutionPlanPreview";
|
||||
import {
|
||||
testInputManager,
|
||||
TestInputConfig,
|
||||
} from "../services/testInputManager";
|
||||
import {
|
||||
Zap,
|
||||
Play,
|
||||
@@ -19,6 +24,9 @@ import {
|
||||
BarChart3,
|
||||
Layers,
|
||||
GitBranch,
|
||||
Zap as TestIcon,
|
||||
Trash2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
|
||||
export const ExecutionPanel: React.FC = () => {
|
||||
@@ -41,6 +49,9 @@ export const ExecutionPanel: React.FC = () => {
|
||||
const [showStats, setShowStats] = React.useState(false);
|
||||
const [showConfig, setShowConfig] = React.useState(false);
|
||||
const [showPlanPreview, setShowPlanPreview] = React.useState(false);
|
||||
const [showTestInputConfig, setShowTestInputConfig] = React.useState(false);
|
||||
const [testInputConfig, setTestInputConfig] =
|
||||
React.useState<TestInputConfig | null>(null);
|
||||
|
||||
const handleExecute = async () => {
|
||||
if (isExecuting) {
|
||||
@@ -51,6 +62,8 @@ export const ExecutionPanel: React.FC = () => {
|
||||
if (!currentWorkflow) return;
|
||||
|
||||
try {
|
||||
// For now, execute without test input
|
||||
// In a future enhancement, you could pass the testInputConfig here
|
||||
await executeWorkflow();
|
||||
} catch (error) {
|
||||
console.error("Execution failed:", error);
|
||||
@@ -278,6 +291,13 @@ export const ExecutionPanel: React.FC = () => {
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowTestInputConfig(true)}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
title="Configure test inputs"
|
||||
>
|
||||
<TestIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => togglePanel("executionPanel")}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
@@ -336,6 +356,16 @@ export const ExecutionPanel: React.FC = () => {
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Test Input Configuration Button */}
|
||||
<button
|
||||
onClick={() => setShowTestInputConfig(true)}
|
||||
className="px-4 py-3 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-all duration-200 flex items-center space-x-2"
|
||||
title="Configure test inputs"
|
||||
>
|
||||
<TestIcon className="w-4 h-4" />
|
||||
<span className="font-medium hidden sm:inline">Test Input</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={createTestWorkflow}
|
||||
className="px-4 py-3 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-all duration-200"
|
||||
@@ -547,6 +577,17 @@ export const ExecutionPanel: React.FC = () => {
|
||||
isOpen={showPlanPreview}
|
||||
onClose={() => setShowPlanPreview(false)}
|
||||
/>
|
||||
|
||||
{/* Test Input Configuration Modal */}
|
||||
<TestInputConfigurator
|
||||
isOpen={showTestInputConfig}
|
||||
onClose={() => setShowTestInputConfig(false)}
|
||||
nodes={currentWorkflow?.nodes || []}
|
||||
onApply={(config) => {
|
||||
setTestInputConfig(config);
|
||||
setShowTestInputConfig(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,344 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
X,
|
||||
Plus,
|
||||
Trash2,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
testInputManager,
|
||||
TestInputConfig,
|
||||
DataInputNode,
|
||||
} from "../services/testInputManager";
|
||||
|
||||
interface TestInputConfiguratorProps {
|
||||
nodes: any[];
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onApply: (config: TestInputConfig) => void;
|
||||
initialValue?: string;
|
||||
}
|
||||
|
||||
export const TestInputConfigurator: React.FC<TestInputConfiguratorProps> = ({
|
||||
nodes,
|
||||
isOpen,
|
||||
onClose,
|
||||
onApply,
|
||||
initialValue,
|
||||
}) => {
|
||||
const [mode, setMode] = useState<"single" | "multiple" | "auto">("auto");
|
||||
const [mappings, setMappings] = useState<
|
||||
Array<{ nodeId: string; value: string }>
|
||||
>([]);
|
||||
const [fallbackValue, setFallbackValue] = useState<string>(
|
||||
initialValue || ""
|
||||
);
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
|
||||
const dataInputNodes = testInputManager.findDataInputNodes(nodes);
|
||||
const status = testInputManager.getStatus(
|
||||
{ mode, mappings, fallbackValue },
|
||||
nodes
|
||||
);
|
||||
|
||||
// Initialize configuration based on data input nodes
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
if (dataInputNodes.length === 0) {
|
||||
setMode("auto");
|
||||
} else if (dataInputNodes.length === 1) {
|
||||
setMode("single");
|
||||
setMappings([
|
||||
{ nodeId: dataInputNodes[0].id, value: initialValue || "" },
|
||||
]);
|
||||
} else {
|
||||
setMode("auto");
|
||||
setMappings([]);
|
||||
}
|
||||
}, [isOpen, dataInputNodes, initialValue]);
|
||||
|
||||
const handleApply = () => {
|
||||
const config: TestInputConfig = { mode, mappings, fallbackValue };
|
||||
|
||||
const validation = testInputManager.validateTestInputConfig(config, nodes);
|
||||
if (!validation.isValid) {
|
||||
alert(`Validation errors:\n${validation.errors.join("\n")}`);
|
||||
return;
|
||||
}
|
||||
|
||||
onApply(config);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const addMapping = () => {
|
||||
if (dataInputNodes.length > 0) {
|
||||
const unmappedNode = dataInputNodes.find(
|
||||
(n) => !mappings.some((m) => m.nodeId === n.id)
|
||||
);
|
||||
if (unmappedNode) {
|
||||
setMappings([...mappings, { nodeId: unmappedNode.id, value: "" }]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const removeMapping = (nodeId: string) => {
|
||||
setMappings(mappings.filter((m) => m.nodeId !== nodeId));
|
||||
};
|
||||
|
||||
const updateMapping = (nodeId: string, value: string) => {
|
||||
setMappings(
|
||||
mappings.map((m) => (m.nodeId === nodeId ? { ...m, value } : m))
|
||||
);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-96 flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900">
|
||||
Configure Test Inputs
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
{dataInputNodes.length} data input node
|
||||
{dataInputNodes.length !== 1 ? "s" : ""} found
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-4">
|
||||
{dataInputNodes.length === 0 ? (
|
||||
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start space-x-3">
|
||||
<AlertCircle className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-yellow-900">
|
||||
No Input Nodes
|
||||
</p>
|
||||
<p className="text-sm text-yellow-700 mt-1">
|
||||
Add a Data Input node to your workflow to configure test
|
||||
inputs
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Mode Selection */}
|
||||
<div className="space-y-3">
|
||||
<label className="block text-sm font-semibold text-gray-900">
|
||||
Input Mode
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{["single", "multiple", "auto"].map((m) => (
|
||||
<button
|
||||
key={m}
|
||||
onClick={() => {
|
||||
setMode(m as "single" | "multiple" | "auto");
|
||||
if (m === "single" && dataInputNodes.length > 0) {
|
||||
setMappings([
|
||||
{
|
||||
nodeId: dataInputNodes[0].id,
|
||||
value: initialValue || "",
|
||||
},
|
||||
]);
|
||||
} else if (m === "auto") {
|
||||
setMappings([]);
|
||||
}
|
||||
}}
|
||||
className={`px-4 py-2 rounded-lg font-medium text-sm transition-colors ${
|
||||
mode === m
|
||||
? "bg-blue-600 text-white"
|
||||
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
{m === "single"
|
||||
? "Single"
|
||||
: m === "multiple"
|
||||
? "Multiple"
|
||||
: "Auto"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 mt-2">
|
||||
{mode === "single" && "Configure one primary input node"}
|
||||
{mode === "multiple" &&
|
||||
"Map test data to each input node individually"}
|
||||
{mode === "auto" &&
|
||||
"Same test data applied to all input nodes"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Input Configuration */}
|
||||
{mode === "auto" && (
|
||||
<div className="space-y-2 p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<label className="block text-sm font-semibold text-gray-900">
|
||||
Test Data (Applied to All Inputs)
|
||||
</label>
|
||||
<textarea
|
||||
value={fallbackValue}
|
||||
onChange={(e) => setFallbackValue(e.target.value)}
|
||||
placeholder="Enter test data here..."
|
||||
className="w-full p-3 border border-gray-300 rounded-lg font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
rows={3}
|
||||
/>
|
||||
<p className="text-xs text-gray-600">
|
||||
This data will be sent to all {dataInputNodes.length} input
|
||||
node{dataInputNodes.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "single" && (
|
||||
<div className="space-y-2 p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<label className="block text-sm font-semibold text-gray-900">
|
||||
Select Input Node & Data
|
||||
</label>
|
||||
{mappings.length > 0 && (
|
||||
<>
|
||||
<select
|
||||
value={mappings[0].nodeId}
|
||||
onChange={(e) => {
|
||||
const newMapping = {
|
||||
...mappings[0],
|
||||
nodeId: e.target.value,
|
||||
};
|
||||
setMappings([newMapping]);
|
||||
}}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
{dataInputNodes.map((node) => (
|
||||
<option key={node.id} value={node.id}>
|
||||
{node.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<textarea
|
||||
value={mappings[0].value}
|
||||
onChange={(e) =>
|
||||
updateMapping(mappings[0].nodeId, e.target.value)
|
||||
}
|
||||
placeholder="Enter test data..."
|
||||
className="w-full p-3 border border-gray-300 rounded-lg font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
rows={3}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "multiple" && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="block text-sm font-semibold text-gray-900">
|
||||
Configure Each Input
|
||||
</label>
|
||||
{mappings.length < dataInputNodes.length && (
|
||||
<button
|
||||
onClick={addMapping}
|
||||
className="flex items-center space-x-1 px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Add Mapping</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{mappings.length === 0 ? (
|
||||
<button
|
||||
onClick={addMapping}
|
||||
className="w-full p-4 border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-gray-400 transition-colors"
|
||||
>
|
||||
Click to add first mapping
|
||||
</button>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{mappings.map((mapping) => {
|
||||
const node = dataInputNodes.find(
|
||||
(n) => n.id === mapping.nodeId
|
||||
);
|
||||
return (
|
||||
<div
|
||||
key={mapping.nodeId}
|
||||
className="p-3 border border-gray-300 rounded-lg space-y-2 bg-white"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium text-sm text-gray-900">
|
||||
{node?.label || mapping.nodeId}
|
||||
</span>
|
||||
{mappings.length > 1 && (
|
||||
<button
|
||||
onClick={() => removeMapping(mapping.nodeId)}
|
||||
className="p-1 text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<textarea
|
||||
value={mapping.value}
|
||||
onChange={(e) =>
|
||||
updateMapping(mapping.nodeId, e.target.value)
|
||||
}
|
||||
placeholder="Enter test data for this input..."
|
||||
className="w-full p-2 border border-gray-300 rounded font-mono text-xs focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-6 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
{status.icon === "✅" && (
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
)}
|
||||
{status.icon === "⚠️" && (
|
||||
<AlertCircle className="w-5 h-5 text-yellow-600" />
|
||||
)}
|
||||
{status.icon === "ℹ️" && (
|
||||
<AlertCircle className="w-5 h-5 text-blue-600" />
|
||||
)}
|
||||
<span className="text-sm text-gray-700">{status.message}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleApply}
|
||||
disabled={dataInputNodes.length === 0}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,303 @@
|
||||
/**
|
||||
* Test Input Manager
|
||||
* Manages test data distribution across multiple data input nodes in a workflow
|
||||
*/
|
||||
|
||||
export interface DataInputNode {
|
||||
id: string;
|
||||
label: string;
|
||||
type: "dataInput";
|
||||
}
|
||||
|
||||
export interface TestInputMapping {
|
||||
nodeId: string;
|
||||
value: string | any;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export interface TestInputConfig {
|
||||
mode: "single" | "multiple" | "auto";
|
||||
mappings: TestInputMapping[];
|
||||
fallbackValue?: string;
|
||||
}
|
||||
|
||||
export class TestInputManager {
|
||||
/**
|
||||
* Find all data input nodes in the workflow
|
||||
*/
|
||||
findDataInputNodes(nodes: any[]): DataInputNode[] {
|
||||
return nodes
|
||||
.filter(
|
||||
(node) => node.data?.type === "dataInput" || node.type === "dataInput"
|
||||
)
|
||||
.map((node) => ({
|
||||
id: node.id,
|
||||
label: node.data?.label || `Input (${node.id.slice(0, 8)})`,
|
||||
type: "dataInput" as const,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate test input configuration
|
||||
*/
|
||||
validateTestInputConfig(
|
||||
config: TestInputConfig,
|
||||
nodes: any[]
|
||||
): { isValid: boolean; errors: string[] } {
|
||||
const errors: string[] = [];
|
||||
const dataInputNodes = this.findDataInputNodes(nodes);
|
||||
|
||||
if (dataInputNodes.length === 0) {
|
||||
errors.push("No data input nodes found in workflow");
|
||||
return { isValid: false, errors };
|
||||
}
|
||||
|
||||
if (config.mode === "multiple") {
|
||||
if (config.mappings.length === 0) {
|
||||
errors.push("Multiple mode selected but no mappings provided");
|
||||
}
|
||||
|
||||
config.mappings.forEach((mapping) => {
|
||||
if (!dataInputNodes.some((n) => n.id === mapping.nodeId)) {
|
||||
errors.push(`Node ${mapping.nodeId} is not a data input node`);
|
||||
}
|
||||
|
||||
if (!mapping.value) {
|
||||
errors.push(`No value provided for node ${mapping.nodeId}`);
|
||||
}
|
||||
});
|
||||
} else if (config.mode === "single") {
|
||||
if (config.mappings.length !== 1) {
|
||||
errors.push("Single mode requires exactly one mapping");
|
||||
}
|
||||
|
||||
if (config.mappings.length > 0 && !config.mappings[0].value) {
|
||||
errors.push("No value provided for single input");
|
||||
}
|
||||
}
|
||||
|
||||
return { isValid: errors.length === 0, errors };
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply test inputs to workflow nodes
|
||||
*/
|
||||
applyTestInputs(nodes: any[], testInputConfig: TestInputConfig): any[] {
|
||||
const dataInputNodes = this.findDataInputNodes(nodes);
|
||||
|
||||
if (dataInputNodes.length === 0) {
|
||||
console.warn("No data input nodes found in workflow");
|
||||
return nodes;
|
||||
}
|
||||
|
||||
const updatedNodes = nodes.map((node) => {
|
||||
// Find matching mapping for this node
|
||||
const mapping = testInputConfig.mappings.find(
|
||||
(m) => m.nodeId === node.id
|
||||
);
|
||||
|
||||
if (!mapping && testInputConfig.mode === "auto") {
|
||||
// In auto mode, use fallback value for all inputs
|
||||
if (testInputConfig.fallbackValue && node.data?.type === "dataInput") {
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
config: {
|
||||
...node.data?.config,
|
||||
defaultValue: testInputConfig.fallbackValue,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
} else if (mapping && node.id === mapping.nodeId) {
|
||||
// Apply mapped value
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
config: {
|
||||
...node.data?.config,
|
||||
defaultValue: mapping.value,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return node;
|
||||
});
|
||||
|
||||
return updatedNodes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate test input config from legacy format (single string)
|
||||
*/
|
||||
fromLegacyFormat(
|
||||
testInput: string | undefined,
|
||||
nodes: any[]
|
||||
): TestInputConfig {
|
||||
const dataInputNodes = this.findDataInputNodes(nodes);
|
||||
|
||||
if (!testInput) {
|
||||
return { mode: "auto", mappings: [], fallbackValue: undefined };
|
||||
}
|
||||
|
||||
if (dataInputNodes.length === 0) {
|
||||
return { mode: "auto", mappings: [], fallbackValue: testInput };
|
||||
}
|
||||
|
||||
if (dataInputNodes.length === 1) {
|
||||
return {
|
||||
mode: "single",
|
||||
mappings: [
|
||||
{
|
||||
nodeId: dataInputNodes[0].id,
|
||||
value: testInput,
|
||||
label: dataInputNodes[0].label,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// Multiple input nodes: use auto mode with fallback
|
||||
return {
|
||||
mode: "auto",
|
||||
mappings: [],
|
||||
fallbackValue: testInput,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get summary of test input configuration
|
||||
*/
|
||||
getSummary(config: TestInputConfig, nodes: any[]): string {
|
||||
const dataInputNodes = this.findDataInputNodes(nodes);
|
||||
|
||||
if (dataInputNodes.length === 0) {
|
||||
return "⚠️ No data input nodes in workflow";
|
||||
}
|
||||
|
||||
if (config.mode === "single") {
|
||||
const mapping = config.mappings[0];
|
||||
const node = dataInputNodes.find((n) => n.id === mapping.nodeId);
|
||||
return `📥 Single input: "${mapping.value}" → ${
|
||||
node?.label || mapping.nodeId
|
||||
}`;
|
||||
}
|
||||
|
||||
if (config.mode === "multiple") {
|
||||
const mappedCount = config.mappings.length;
|
||||
return `📥 Multiple inputs: ${mappedCount} node(s) configured`;
|
||||
}
|
||||
|
||||
// Auto mode
|
||||
if (config.fallbackValue) {
|
||||
return `📥 Auto mode: "${config.fallbackValue}" → all inputs (${dataInputNodes.length} nodes)`;
|
||||
}
|
||||
|
||||
return "📥 Auto mode: No value set";
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate that all data input nodes are provided inputs
|
||||
*/
|
||||
allInputsProvided(config: TestInputConfig, nodes: any[]): boolean {
|
||||
const dataInputNodes = this.findDataInputNodes(nodes);
|
||||
|
||||
if (config.mode === "auto") {
|
||||
return !!config.fallbackValue;
|
||||
}
|
||||
|
||||
if (config.mode === "single") {
|
||||
return config.mappings.length === 1 && !!config.mappings[0].value;
|
||||
}
|
||||
|
||||
// Multiple mode: all configured nodes must have values
|
||||
return (
|
||||
config.mappings.length === dataInputNodes.length &&
|
||||
config.mappings.every((m) => !!m.value)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get test input status for UI display
|
||||
*/
|
||||
getStatus(
|
||||
config: TestInputConfig,
|
||||
nodes: any[]
|
||||
): {
|
||||
status: "unconfigured" | "partial" | "complete";
|
||||
message: string;
|
||||
icon: string;
|
||||
} {
|
||||
const dataInputNodes = this.findDataInputNodes(nodes);
|
||||
|
||||
if (dataInputNodes.length === 0) {
|
||||
return {
|
||||
status: "unconfigured",
|
||||
message: "No input nodes",
|
||||
icon: "ℹ️",
|
||||
};
|
||||
}
|
||||
|
||||
if (config.mode === "auto") {
|
||||
if (!config.fallbackValue) {
|
||||
return {
|
||||
status: "unconfigured",
|
||||
message: `${dataInputNodes.length} inputs, no data`,
|
||||
icon: "⚠️",
|
||||
};
|
||||
}
|
||||
return {
|
||||
status: "complete",
|
||||
message: `${dataInputNodes.length} inputs configured`,
|
||||
icon: "✅",
|
||||
};
|
||||
}
|
||||
|
||||
if (config.mode === "single") {
|
||||
if (config.mappings.length === 0 || !config.mappings[0].value) {
|
||||
return {
|
||||
status: "unconfigured",
|
||||
message: "No test data",
|
||||
icon: "⚠️",
|
||||
};
|
||||
}
|
||||
return {
|
||||
status: "complete",
|
||||
message: "Test data ready",
|
||||
icon: "✅",
|
||||
};
|
||||
}
|
||||
|
||||
// Multiple mode
|
||||
const providedCount = config.mappings.filter((m) => m.value).length;
|
||||
const totalCount = dataInputNodes.length;
|
||||
|
||||
if (providedCount === 0) {
|
||||
return {
|
||||
status: "unconfigured",
|
||||
message: `No inputs configured (${totalCount} available)`,
|
||||
icon: "⚠️",
|
||||
};
|
||||
}
|
||||
|
||||
if (providedCount < totalCount) {
|
||||
return {
|
||||
status: "partial",
|
||||
message: `${providedCount}/${totalCount} inputs configured`,
|
||||
icon: "⚠️",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status: "complete",
|
||||
message: `All ${totalCount} inputs configured`,
|
||||
icon: "✅",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Singleton instance
|
||||
export const testInputManager = new TestInputManager();
|
||||
+17
-21
@@ -14,6 +14,11 @@ import { agentManager } from "../services/agents/AgentManager";
|
||||
import { executionEngine, ExecutionPlan } from "../services/executionEngine";
|
||||
import { LabelDependencyManager } from "../utils/labelDependencyManager";
|
||||
|
||||
import {
|
||||
testInputManager,
|
||||
TestInputConfig,
|
||||
} from "../services/testInputManager";
|
||||
|
||||
// localStorage key for workflows
|
||||
const WORKFLOWS_STORAGE_KEY = "agent-workflow-builder-workflows";
|
||||
|
||||
@@ -638,29 +643,20 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
|
||||
retryPolicy: options?.retryPolicy || executionConfig.retryPolicy,
|
||||
};
|
||||
|
||||
// If test input is provided, update the data input node
|
||||
// Apply test inputs using the new test input manager
|
||||
if (testInput) {
|
||||
const dataInputNode = currentWorkflow.nodes.find(
|
||||
(node) => node.data.type === "dataInput"
|
||||
// Convert legacy string format to new config format
|
||||
const testInputConfig = testInputManager.fromLegacyFormat(
|
||||
testInput,
|
||||
currentWorkflow.nodes
|
||||
);
|
||||
if (dataInputNode) {
|
||||
// Update the node's config with test input
|
||||
const updatedNodes = currentWorkflow.nodes.map((node) =>
|
||||
node.id === dataInputNode.id
|
||||
? {
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
config: {
|
||||
...node.data.config,
|
||||
defaultValue: testInput,
|
||||
},
|
||||
},
|
||||
}
|
||||
: node
|
||||
);
|
||||
set({ currentWorkflow: { ...currentWorkflow, nodes: updatedNodes } });
|
||||
}
|
||||
|
||||
// Apply the test input configuration to workflow nodes
|
||||
const updatedNodes = testInputManager.applyTestInputs(
|
||||
currentWorkflow.nodes,
|
||||
testInputConfig
|
||||
);
|
||||
set({ currentWorkflow: { ...currentWorkflow, nodes: updatedNodes } });
|
||||
}
|
||||
|
||||
// Execute using the advanced execution engine
|
||||
|
||||
Reference in New Issue
Block a user