feat(frontend): add an indicator when a for loop has no iterator expr…

…ession (#3961)
windmill-labs · Jun 24, 2024 · ee7db8c · ee7db8c
1 parent 183361d
commit ee7db8c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
@@ -62,7 +62,7 @@
 		{#if module.cache_ttl != undefined}
 			<Popover
 				placement="bottom"
-				class="center-center rounded p-2 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
+				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
 				on:click={() => dispatch('toggleCache')}
 			>
 				<Database size={14} />
@@ -92,8 +92,7 @@
 		{#if module.sleep}
 			<Popover
 				placement="bottom"
-				class="center-center rounded p-2bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200
-				dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
+				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
 				on:click={() => dispatch('toggleSleep')}
 			>
 				<Bed size={14} />
@@ -103,7 +102,7 @@
 		{#if module.mock?.enabled}
 			<Popover
 				placement="bottom"
-				class="center-center rounded p-2 bg-blue-100  text-blue-800 border border-blue-300 hover:bg-blue-200"
+				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
 				on:click={() => dispatch('toggleMock')}
 			>
 				<Voicemail size={14} />

diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -35,6 +35,7 @@
 	export let bgColor: string = ''
 	export let concurrency: boolean = false
 	export let retries: number | undefined = undefined
+	export let warningMessage: string | undefined = undefined
 
 	const { flowInputsStore } = getContext<{ flowInputsStore: Writable<FlowInput | undefined> }>(
 		'FlowGraphContext'
@@ -174,10 +175,12 @@ hover:border-blue-700 {selected ? '' : '!hidden'}"
 			<Move class="mx-[3px]" size={14} strokeWidth={2} />
 		</button>
 
-		{#if id && !Object.values($flowInputsStore?.[id]?.requiredInputsFilled || {}).every(Boolean)}
+		{#if (id && !Object.values($flowInputsStore?.[id]?.requiredInputsFilled || {}).every(Boolean)) || Boolean(warningMessage)}
 			<div class="absolute -top-[10px] -left-[10px]">
 				<Popover>
-					<svelte:fragment slot="text">At least one required input is not set.</svelte:fragment>
+					<svelte:fragment slot="text"
+						>{warningMessage ?? 'At least one required input is not set.'}
+					</svelte:fragment>
 					<div
 						class="flex items-center justify-center h-full w-full rounded-md p-0.5 border border-yellow-600 text-yellow-600 bg-yellow-100 duration-150 hover:bg-yellow-300"
 					>

diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -138,6 +138,11 @@
 					on:click={() => dispatch('select', mod.id)}
 					{...itemProps}
 					{bgColor}
+					warningMessage={mod?.value?.type === 'forloopflow' &&
+					mod?.value?.iterator?.type === 'javascript' &&
+					mod?.value?.iterator?.expr === ''
+						? 'Iterator expression is empty'
+						: ''}
 				>
 					<div slot="icon">
 						<Repeat size={16} />