sync parameter key renames and deletions to all block types (#4459)

This commit is contained in:
Celal Zamanoglu
2026-01-15 17:08:54 +03:00
committed by GitHub
parent 911deb86db
commit 755a753174
2 changed files with 52 additions and 18 deletions

View File

@@ -11,6 +11,14 @@ type Props = {
values: Set<string>; values: Set<string>;
}; };
function areSetsEqual<T>(a: Set<T>, b: Set<T>): boolean {
if (a.size !== b.size) return false;
for (const item of a) {
if (!b.has(item)) return false;
}
return true;
}
function WorkflowBlockInputSet(props: Props) { function WorkflowBlockInputSet(props: Props) {
const { nodeId, onChange, values } = props; const { nodeId, onChange, values } = props;
const [parameterKeys, setParameterKeys] = useState<Set<string>>(values); const [parameterKeys, setParameterKeys] = useState<Set<string>>(values);
@@ -20,6 +28,13 @@ function WorkflowBlockInputSet(props: Props) {
workflowParameters.map((parameter) => parameter.key), workflowParameters.map((parameter) => parameter.key),
); );
// Sync local state when values prop changes (e.g., parameter renamed externally)
useEffect(() => {
if (!areSetsEqual(parameterKeys, values)) {
setParameterKeys(values);
}
}, [values, parameterKeys]);
useEffect(() => { useEffect(() => {
onChange(new Set(parameterKeys)); onChange(new Set(parameterKeys));
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps

View File

@@ -196,20 +196,29 @@ function WorkflowParametersPanel({ onMouseDownCapture }: Props) {
setHasChanges(true); setHasChanges(true);
setNodes((nodes) => { setNodes((nodes) => {
return nodes.map((node) => { return nodes.map((node) => {
// All node types that have parameterKeys
if ( if (
node.type === "task" || node.type === "task" ||
node.type === "textPrompt" node.type === "textPrompt" ||
node.type === "login" ||
node.type === "navigation" ||
node.type === "extraction" ||
node.type === "fileDownload" ||
node.type === "action" ||
node.type === "http_request" ||
node.type === "validation" ||
node.type === "codeBlock"
) { ) {
const parameterKeys = node.data
.parameterKeys as Array<string> | null;
return { return {
...node, ...node,
data: { data: {
...node.data, ...node.data,
parameterKeys: ( parameterKeys:
node.data parameterKeys?.filter(
.parameterKeys as Array<string> (key) => key !== parameter.key,
).filter( ) ?? null,
(key) => key !== parameter.key,
),
}, },
}; };
} }
@@ -293,24 +302,34 @@ function WorkflowParametersPanel({ onMouseDownCapture }: Props) {
); );
setNodes((nodes) => { setNodes((nodes) => {
return nodes.map((node) => { return nodes.map((node) => {
// All node types that have parameterKeys
if ( if (
node.type === "task" || node.type === "task" ||
node.type === "textPrompt" node.type === "textPrompt" ||
node.type === "login" ||
node.type === "navigation" ||
node.type === "extraction" ||
node.type === "fileDownload" ||
node.type === "action" ||
node.type === "http_request" ||
node.type === "validation" ||
node.type === "codeBlock"
) { ) {
const parameterKeys = node.data
.parameterKeys as Array<string> | null;
return { return {
...node, ...node,
data: { data: {
...node.data, ...node.data,
parameterKeys: ( parameterKeys:
node.data.parameterKeys as Array<string> parameterKeys?.map((key) => {
).map((key) => { if (
if ( key === operationPanelState.parameter?.key
key === operationPanelState.parameter?.key ) {
) { return editedParameter.key;
return editedParameter.key; }
} return key;
return key; }) ?? null,
}),
}, },
}; };
} }