From f0540edfc5d0768e497ef8b7a67dc350acca31f0 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 7 Aug 2022 10:16:47 +0200
Subject: [PATCH] better help

---
 .../lib/components/InputTransformForm.svelte  |  2 +-
 .../flows/DynamicInputHelpBox.svelte          | 26 ++++++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 1a9b41722c..c7746ae7f5 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -211,7 +211,7 @@
 					/>
 				</div>
 			</OverlayPropertyPicker>
-			<DynamicInputHelpBox />
+			<DynamicInputHelpBox {i} />
 		{/if}
 	{:else}
 		<p>Not recognized arg type {arg.type}</p>
diff --git a/frontend/src/lib/components/flows/DynamicInputHelpBox.svelte b/frontend/src/lib/components/flows/DynamicInputHelpBox.svelte
index a462c6cfa4..6091ce740a 100644
--- a/frontend/src/lib/components/flows/DynamicInputHelpBox.svelte
+++ b/frontend/src/lib/components/flows/DynamicInputHelpBox.svelte
@@ -3,6 +3,8 @@
 	import Icon from 'svelte-awesome'
 	import { slide } from 'svelte/transition'
 
+	export let i: number = 1
+
 	$: opened = false
 </script>
 
@@ -27,29 +29,29 @@
 	>
 		<p class="font-bold">Dynamic arg help</p>
 		<p>
-			When a field is "dynamic", its value is computed dynamically as the evaluation of its
-			corresponding typescript snippet.
+			When a field is using the "Raw Javascript Editor", its value is computed dynamically as the
+			evaluation of its corresponding javascript snippet.
 		</p>
-		That snippet can be single line:
+		That snippet can be a single line:
 		<pre><code>last_result.myarg</code></pre>
-		or multiline:
+		or a multiline:
 		<pre><code
 				>let x = 5;
 x + 2</code
 			></pre>
 		<p>
-			If it is multiline, the last statement before the final expression<b
+			If it is multiline, the statement before the final expression <b
 				>MUST END WITH ; and a newline</b
 			>
 		</p>
 		The snippet can also be a string template:
-		<pre><code
-				>`Hello $&#123;params.name&#125;, all your base $&#123;previous_result.base_name&#125;
-belong to us`</code
-			></pre>
+		<code
+			>`Hello $&#123;params.name&#125;, all your base $&#123;previous_result.base_name&#125; belong
+			to us`</code
+		>
 		However, the last line must always be the final expression.
 		<p>
-			The snippet can use any typescript primitives, and the following flow specific objects and
+			The snippet can use any javascript primitives, and the following flow specific objects and
 			functions:
 		</p>
 		<ul class="ml-4">
@@ -70,5 +72,9 @@ belong to us`</code
 				<b>resource(path)</b>: the function returning the resource at a given path as an object
 			</li>
 		</ul>
+		<p>To re-enable editor assistance, import the helper functions types using:</p>
+		<code
+			>{`import { previous_result, flow_input, step, variable, resource, params } from 'windmill@${i}'`}</code
+		>
 	</div>
 {/if}