From de2b4a9032df416c2c7e0e689ae8f2cabbdab6a3 Mon Sep 17 00:00:00 2001
From: Henri Courdent <122811744+hcourdent@users.noreply.github.com>
Date: Tue, 18 Jul 2023 11:12:44 +0200
Subject: [PATCH] Tooltips and UI clarification (#1894)

* Tooltips and UI clarification

* Fix build

---------

Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com>
---
 .../src/lib/components/ScheduleEditor.svelte  |  8 ++--
 .../src/lib/components/ScriptBuilder.svelte   |  2 +-
 .../src/lib/components/SharedBadge.svelte     |  2 +-
 .../(root)/(logged)/variables/+page.svelte    |  2 +-
 .../(logged)/workspace_settings/+page.svelte  | 42 ++++++++++---------
 5 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/frontend/src/lib/components/ScheduleEditor.svelte b/frontend/src/lib/components/ScheduleEditor.svelte
index 781d95744d..54f5544ee5 100644
--- a/frontend/src/lib/components/ScheduleEditor.svelte
+++ b/frontend/src/lib/components/ScheduleEditor.svelte
@@ -277,12 +277,12 @@
 				canRefresh
 			/>
 			<div class="flex gap-20 items-start mt-3">
-				<div class="text-gray-600 italic text-sm"
+				<div class="text-gray-600 text-sm"
 					>The following args will be passed to the error handler:
 					<ul class="mt-1 ml-2">
-						<li><b>path</b>: The path of the script or flow that errored</li>
-						<li><b>schedule_path</b>: The path of the schedule</li>
-						<li><b>error</b>: The error details</li>
+						<li><b>path</b>: The path of the script or flow that errored.</li>
+						<li><b>schedule_path</b>: The path of the schedule.</li>
+						<li><b>error</b>: The error details.</li>
 					</ul>
 				</div>
 				<Button
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index ef553ec866..0b5439c9db 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -625,7 +625,7 @@
 					</div>
 				{/if}
 				<h2 class="border-b pb-1 mt-10 mb-4"
-					>Arguments &nbsp;<Tooltip
+					>Arguments &nbsp;<Tooltip documentationLink="https://www.windmill.dev/docs/core_concepts/json_schema_and_parsing"
 						>The arguments are synced with the main signature but you may refine the parts that
 						cannot be inferred from the type directly.</Tooltip
 					></h2
diff --git a/frontend/src/lib/components/SharedBadge.svelte b/frontend/src/lib/components/SharedBadge.svelte
index 83b1851f02..9206fc8d2f 100644
--- a/frontend/src/lib/components/SharedBadge.svelte
+++ b/frontend/src/lib/components/SharedBadge.svelte
@@ -56,7 +56,7 @@
 	<Badge capitalize color="blue" baseClass="border border-blue-200 flex gap-1 items-center">
 		<Popover notClickable>
 			<Users size={12} />
-			<span slot="text">{kind == 'read' ? 'Shared & read-only' : 'Read & Write'} {reason}</span>
+			<span slot="text">{kind == 'read' ? 'Read & Run only' : 'Read & Write'} {reason}</span>
 		</Popover>
 	</Badge>
 {/if}
diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
index e2088a105f..d389fcfd41 100644
--- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
@@ -140,7 +140,7 @@
 		<Tab size="md" value="contextual">
 			<div class="flex gap-2 items-center my-1">
 				<DollarSign size={18} />
-				Contextual <Tooltip>
+				Contextual <Tooltip documentationLink="https://www.windmill.dev/docs/core_concepts/variables_and_secrets#contextual-variables">
 					Contextual variables are passed as environment variables when running a script and depends
 					on the execution context.</Tooltip
 				>
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index 06424bdcfb..06e711155e 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -705,7 +705,7 @@
 			<div class="mt-2"
 				><Alert type="info" title="Send commands from slack"
 					>Connect your windmill workspace to your slack workspace to trigger a script or a flow
-					with a '/windmill' command</Alert
+					with a '/windmill' command.</Alert
 				></div
 			>
 			<p class="text-xs text-gray-700 my-1 mt-2">
@@ -826,7 +826,7 @@
 			<div class="mt-2"
 				><Alert type="info" title="Send events to an external service"
 					>Connect your windmill workspace to an external service to sync or get notified about any
-					changes</Alert
+					changes.</Alert
 				></div
 			>
 
@@ -853,17 +853,17 @@
 				on:select={editErrorHandler}
 				canRefresh
 			/>
-			<div class="flex gap-20 items-start mt-3">
+			<div class="flex flex-col gap-20 items-start mt-3">
 				<div class="w-2/3">
-					<div class="text-gray-600 italic text-sm"
-						>The following args will be passed to the error handler:
+					<div class="text-gray-600 text-sm">
+						The following args will be passed to the error handler:
 						<ul class="mt-1 ml-2">
-							<li><b>path</b>: The path of the script or flow that errored</li>
-							<li><b>email</b>: The email of the user who ran the script or flow that errored</li>
-							<li><b>error</b>: The error details</li>
-							<li><b>job_id</b>: The job id</li>
-							<li><b>is_flow</b>: Whether the error comes from a flow</li>
-							<li><b>workspace_id</b>: The workspace id of the failed script or flow</li>
+							<li><b>path</b>: The path of the script or flow that errored.</li>
+							<li><b>email</b>: The email of the user who ran the script or flow that errored.</li>
+							<li><b>error</b>: The error details.</li>
+							<li><b>job_id</b>: The job id.</li>
+							<li><b>is_flow</b>: Whether the error comes from a flow.</li>
+							<li><b>workspace_id</b>: The workspace id of the failed script or flow.</li>
 						</ul>
 						<br />
 						The error handler will be executed by the automatically created group g/error_handler. If
@@ -871,22 +871,24 @@
 					</div>
 				</div>
 				<div class="w-1/3 flex items-start">
-					<Button
-						wrapperClasses="mt-6"
-						href="/scripts/add?hub=hub%2F1088%2Fwindmill%2FGlobal_%2F_workspace_error_handler_template"
-						target="_blank">Use template</Button
-					></div
-				>
+					<div class="mt-2">
+						<!-- Adjusted margin class -->
+						<Button
+							href="/scripts/add?hub=hub%2F1088%2Fwindmill%2FGlobal_%2F_workspace_error_handler_template"
+							target="_blank">Use template</Button
+						>
+					</div>
+				</div>
 			</div>
 		{:else if tab == 'openai'}
 			<PageHeader title="OpenAI Credentials" primary={false} />
 			<div class="mt-2"
 				><Alert type="info" title="Experimental feature"
 					>Enter your OpenAI api key to unlock Windmill's AI features!</Alert
-				></div
-			>
+				>
+			</div>
 			<div class="flex gap-2 mt-5">
-				<input type="text" placeholder="Secret API key" bind:value={openAIKey} />
+				<input type="text" placeholder="Secret GPT-4 API key" bind:value={openAIKey} />
 				<Button size="md" on:click={editOpenAIKey}>Save</Button>
 			</div>
 		{/if}