From e1fd2bb54a8a1230fc8dddea696f2737c6b72899 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 1 Oct 2022 23:32:04 +0200
Subject: [PATCH] fix(frontend): variable editor now acceps including 3000
 chars + show length

---
 frontend/src/lib/components/VariableEditor.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/VariableEditor.svelte b/frontend/src/lib/components/VariableEditor.svelte
index 46526d322a..ab9698daac 100644
--- a/frontend/src/lib/components/VariableEditor.svelte
+++ b/frontend/src/lib/components/VariableEditor.svelte
@@ -60,7 +60,7 @@
 
 	const MAX_VARIABLE_LENGTH = 3000
 
-	$: valid = variable.value.length < MAX_VARIABLE_LENGTH
+	$: valid = variable.value.length <= MAX_VARIABLE_LENGTH
 
 	async function createVariable(): Promise<void> {
 		await VariableService.createVariable({
@@ -116,7 +116,8 @@
 	<div slot="content">
 		<div class="text-gray-700 text-2xs mb-6">
 			Variables have a globally unique name represented by their path. When passed to scripts, <pre
-				class="inline text-red-700 bg-gray-50 rounded round-sm">/</pre>
+				class="inline text-red-700 bg-gray-50 rounded round-sm">/</pre
+			>
 			are converted to
 			<pre class="inline text-red-700 bg-gray-50 rounded round-sm">_</pre>
 		</div>
@@ -154,12 +155,12 @@
 					<Password
 						bind:password={variable.value}
 						placeholder={'******** (only fill to update value)'}
-						label={'variable (max 3000 characters)'}
+						label={`Secret value (${variable.value.length}/3000 characters)`}
 					/>
 				</div>
 			{:else}
 				<div>
-					<span>Variable (max 3000 characters)</span>
+					<span>Variable value ({variable.value.length}/3000 characters)</span>
 					<AutosizedTextarea bind:value={variable.value} minRows={5} />
 				</div>
 			{/if}