From 97839a3583ef398c11e2f51058aaceed8e7382fb Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 17 Sep 2024 05:12:23 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20add=20support=20for=20step=20i?=
 =?UTF-8?q?d=20change=20for=20forloops=20and=20branch=E2=80=A6=20(#4395)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): add support for step id change for forloops and branchone + add initial value for DebounchedInput

* fix(frontend): fix initial value of DebouncedInput
---
 .../apps/components/helpers/DebouncedInput.svelte        | 9 +++++++++
 .../lib/components/flows/map/FlowModuleSchemaMap.svelte  | 8 ++++++++
 2 files changed, 17 insertions(+)

diff --git a/frontend/src/lib/components/apps/components/helpers/DebouncedInput.svelte b/frontend/src/lib/components/apps/components/helpers/DebouncedInput.svelte
index 89c7c36447599..c7ed674efba15 100644
--- a/frontend/src/lib/components/apps/components/helpers/DebouncedInput.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/DebouncedInput.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
 	export let placeholder: string = 'Search...'
@@ -11,6 +12,7 @@
 	export { parentClass as class }
 
 	let timer: NodeJS.Timeout
+	let inputElement: HTMLInputElement | null = null
 
 	function debounce(event: KeyboardEvent): void {
 		clearTimeout(timer)
@@ -20,9 +22,16 @@
 			value = target.value
 		}, debounceDelay)
 	}
+
+	onMount(() => {
+		if (inputElement && value !== undefined) {
+			inputElement.value = value
+		}
+	})
 </script>
 
 <input
+	bind:this={inputElement}
 	{placeholder}
 	on:pointerdown|stopPropagation
 	on:keyup={debounce}
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index 618d6c763a34b..22020da5c9caa 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -348,6 +348,14 @@
 										}
 									})
 								)
+							} else if (mod?.value?.type === 'forloopflow') {
+								if (mod.value.iterator.type === 'javascript') {
+									mod.value.iterator.expr = replaceId(mod.value.iterator.expr, id, newId)
+								}
+							} else if (mod?.value?.type === 'branchone') {
+								mod.value.branches.forEach((branch) => {
+									branch.expr = replaceId(branch.expr, id, newId)
+								})
 							}
 						})
 					}