From 7277056ef0ac43a2e2ae66447f4cbaacb79f37d9 Mon Sep 17 00:00:00 2001
From: Henri Courdent <122811744+hcourdent@users.noreply.github.com>
Date: Fri, 28 Apr 2023 19:52:30 +0200
Subject: [PATCH] First wave of tooltips linking to docs (#1493)

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
---
 frontend/src/lib/components/EditorBar.svelte  |  7 ++
 frontend/src/lib/components/ItemPicker.svelte |  4 +-
 frontend/src/lib/components/PageHeader.svelte |  4 +-
 frontend/src/lib/components/Path.svelte       |  3 +-
 frontend/src/lib/components/SchemaForm.svelte |  2 +
 .../src/lib/components/ScriptBuilder.svelte   | 16 +++--
 .../components/apps/editor/AppEditor.svelte   |  2 +-
 .../lib/components/common/alert/Alert.svelte  |  7 +-
 .../common/drawer/DrawerContent.svelte        |  9 ++-
 .../flows/content/FlowInputs.svelte           | 13 ++--
 .../flows/content/FlowSettings.svelte         | 68 +++++++++++--------
 .../(root)/(logged)/folders/+page.svelte      |  1 +
 .../(root)/(logged)/groups/+page.svelte       |  1 +
 .../(root)/(logged)/resources/+page.svelte    |  3 +-
 .../(logged)/runs/[...path]/+page.svelte      |  1 +
 .../(root)/(logged)/schedules/+page.svelte    |  2 +-
 .../(root)/(logged)/variables/+page.svelte    |  1 +
 .../(root)/(logged)/workers/+page.svelte      |  1 +
 frontend/windmillhub                          |  1 +
 19 files changed, 98 insertions(+), 48 deletions(-)
 create mode 160000 frontend/windmillhub

diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 4c4cd2db91..bfb74c47d6 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -129,6 +129,9 @@
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
+	tooltip="Contextual Variables are variables whose values are contextual to the Script
+	execution. They are are automatically set by Windmill."
+	documentationLink="https://docs.windmill.dev/docs/core_concepts/variables_and_secrets#contextual-variables"
 	itemName="Contextual Variable"
 	extraField="name"
 	loadItems={loadContextualVariables}
@@ -162,6 +165,8 @@
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
+	tooltip="Variables are dynamic values that have a key associated to them and can be retrieved during the execution of a Script or Flow."
+	documentationLink="https://docs.windmill.dev/docs/core_concepts/variables_and_secrets"
 	itemName="Variable"
 	extraField="path"
 	loadItems={loadVariables}
@@ -210,6 +215,8 @@
 		}
 		sendUserToast(`${path} inserted at cursor`)
 	}}
+	tooltip="Resources represent connections to third party systems. Resources are a good way to define a connection to a frequently used third party system such as a database."
+	documentationLink="https://docs.windmill.dev/docs/core_concepts/resources_and_types"
 	itemName="Resource"
 	buttons={{ 'Edit/View': (x) => resourceEditor.initEdit(x) }}
 	extraField="description"
diff --git a/frontend/src/lib/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte
index e9080c8930..3a7e5f8f3e 100644
--- a/frontend/src/lib/components/ItemPicker.svelte
+++ b/frontend/src/lib/components/ItemPicker.svelte
@@ -16,6 +16,8 @@
 	export let noItemMessage = 'There are no items in the list'
 	/** Displayed if the search returns no items. */
 	export let buttons: Record<string, (x: string) => void> = {}
+	export let tooltip: string = ''
+	export let documentationLink: string | undefined = undefined
 
 	let loading = false
 	let items: Item[] | undefined = []
@@ -48,7 +50,7 @@
 />
 
 <Drawer bind:this={drawer} size="600px">
-	<DrawerContent overflow_y={false} title="Search {itemName}s" on:close={drawer.closeDrawer}>
+	<DrawerContent {tooltip} {documentationLink} overflow_y={false} title="Search {itemName}s" on:close={drawer.closeDrawer}>
 		<div class="w-full h-full flex flex-col">
 			<div class="w-12/12 pb-4">
 				<input
diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte
index c8f454e149..79c673278a 100644
--- a/frontend/src/lib/components/PageHeader.svelte
+++ b/frontend/src/lib/components/PageHeader.svelte
@@ -11,14 +11,14 @@
 	{#if primary}
 		<span class="flex items-center space-x-2 mb-2">
 			<h1>{title}</h1>
-			{#if tooltip || documentationLink}
+			{#if tooltip != '' || documentationLink}
 				<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
 			{/if}
 		</span>
 	{:else}
 		<span class="flex items-center space-x-2">
 			<h2>{title}</h2>
-			{#if tooltip}
+			{#if tooltip != '' || documentationLink}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}
 		</span>
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 77d01f3291..708e72f9ee 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -312,7 +312,8 @@
 					<label class="block grow w-48">
 						<span class="text-gray-700 text-sm"
 							>Folder <Tooltip
-								>Read and write permissions are given to groups and users at the folder level and
+							documentationLink="https://docs.windmill.dev/docs/core_concepts/groups_and_folders"
+							>Read and write permissions are given to groups and users at the folder level and
 								shared by all items inside the folder.</Tooltip
 							></span
 						>
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index d056221725..ba53faa716 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -136,6 +136,8 @@
 			}
 		}}
 		itemName="Variable"
+		tooltip="Variables are dynamic values that have a key associated to them and can be retrieved during the execution of a Script or Flow."
+		documentationLink="https://docs.windmill.dev/docs/core_concepts/variables_and_secrets"
 		extraField="path"
 		loadItems={async () =>
 			(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index f85989dfae..a4710154ed 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -63,7 +63,7 @@
 	if (SCRIPT_SHOW_BASH) {
 		langs.push(['Bash', Script.language.BASH])
 	}
-	const scriptKindOptions: { value: Script.kind; title: string; desc?: string }[] = [
+	const scriptKindOptions: { value: Script.kind; title: string; desc?: string; documentationLink?: string; }[] = [
 		{
 			value: Script.kind.SCRIPT,
 			title: 'Action'
@@ -71,17 +71,21 @@
 		{
 			value: Script.kind.TRIGGER,
 			title: 'Trigger',
-			desc: 'First module of flows to trigger them based on external changes. These kind of scripts are usually running on a schedule to periodically look for changes.'
+			desc: 'First module of flows to trigger them based on external changes. These kind of scripts are usually running on a schedule to periodically look for changes.',
+			documentationLink:"https://docs.windmill.dev/docs/flows/flow_trigger"
+
 		},
 		{
 			value: Script.kind.APPROVAL,
 			title: 'Approval',
-			desc: 'Send notifications externally to ask for approval to continue a flow.'
+			desc: 'Send notifications externally to ask for approval to continue a flow.',
+			documentationLink:"https://docs.windmill.dev/docs/flows/flow_approval"
 		},
 		{
 			value: Script.kind.FAILURE,
 			title: 'Error Handler',
-			desc: 'Handle errors in flows after all retry attempts have been exhausted.'
+			desc: 'Handle errors in flows after all retry attempts have been exhausted.',
+			documentationLink:"https://docs.windmill.dev/docs/flows/flow_error_handler"
 		}
 	]
 
@@ -390,7 +394,7 @@
 						</Tooltip>
 					</h2>
 					<div class="flex flex-wrap gap-2">
-						{#each scriptKindOptions as { value, title, desc }}
+						{#each scriptKindOptions as { value, title, desc, documentationLink }}
 							{@const isPicked = script.kind === value}
 							<Button
 								size="sm"
@@ -406,7 +410,7 @@
 							>
 								{title}
 								{#if desc}
-									<Tooltip class="mb-0.5 ml-1">
+									<Tooltip {documentationLink} class="mb-0.5 ml-1">
 										{desc}
 									</Tooltip>
 								{/if}
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index c0de7c84b5..50aae7f017 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -333,7 +333,7 @@
 	pickCallback={(path, _) => {
 		$pickVariableCallback?.(path)
 	}}
-	itemName="Variable"
+	itemName="Variablo"
 	extraField="path"
 	loadItems={async () =>
 		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
diff --git a/frontend/src/lib/components/common/alert/Alert.svelte b/frontend/src/lib/components/common/alert/Alert.svelte
index 8e855ad0cd..bbf87648fd 100644
--- a/frontend/src/lib/components/common/alert/Alert.svelte
+++ b/frontend/src/lib/components/common/alert/Alert.svelte
@@ -8,10 +8,13 @@
 	} from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import type { AlertType } from './model'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	export let type: AlertType = 'info'
 	export let title: string
 	export let notRounded = false
+	export let tooltip: string = ''
+	export let documentationLink: string | undefined = undefined
 
 	export let size: 'xs' | 'sm' = 'sm'
 
@@ -71,7 +74,9 @@
 					classes[type].titleClass
 				)}
 			>
-				{title}
+				{title}&nbsp;{#if tooltip != '' || documentationLink}
+				<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+			{/if}
 			</span>
 			<div
 				class={classNames(
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index 9b4baeee39..e22737edd7 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { classNames } from '$lib/utils'
 	import CloseButton from '../CloseButton.svelte'
 
@@ -6,6 +7,9 @@
 	export let overflow_y = true
 	export let noPadding = false
 	export let forceOverflowVisible = false
+	export let tooltip: string = ''
+	export let documentationLink: string | undefined = undefined
+
 </script>
 
 <div class="flex flex-col divide-y h-screen max-h-screen">
@@ -13,7 +17,10 @@
 		<div class="flex items-center gap-2">
 			<CloseButton on:close />
 
-			<span class="font-semibold truncate text-gray-800">{title ?? ''}</span>
+			<span class="font-semibold truncate text-gray-800">{title ?? ''} 
+				{#if tooltip != '' || documentationLink}
+					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+				{/if}</span>
 		</div>
 		{#if $$slots.actions}
 			<div class="flex gap-2 items-center justify-end">
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index 81a5370228..644ced9856 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -48,19 +48,18 @@
 								size="sm"
 								startIcon={{ icon: faBolt }}
 							>
-								Trigger &nbsp;<Tooltip>
+								Trigger &nbsp;<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/flow_trigger">
 									Used as a first step most commonly with a state and a schedule to watch for
-									changes on an external system, compute the diff since last time, set the new
+									changes on an external system, compute the diff since last time and set the new
 									state. The diffs are then treated one by one with a for-loop.
 								</Tooltip>
 							</ToggleButton>
 						{/if}
 						<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
-							Approval &nbsp;<Tooltip>
+							Approval &nbsp;<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/flow_approval">
 								An approval step will suspend the execution of a flow until it has been approved
 								through the resume endpoints or the approval page by and solely by the recipients of
-								those secret urls. Use `wmill.getResumeUrls()` in Typescript or
-								`wmill.get_resume_urls()` in Python from the wmill client to generate those URLs.
+								those secret urls.
 							</Tooltip>
 						</ToggleButton>
 					</ToggleButtonGroup>
@@ -76,7 +75,9 @@
 		{/if}
 		<h3 class="pb-2 pt-4">
 			Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
-			<Tooltip>
+			<Tooltip
+			documentationLink="https://docs.windmill.dev/docs/flows/flow_error_handler"
+			>
 				Embed a script directly inside a flow instead of saving the script into your workspace for
 				reuse. You can always save an inline script to your workspace later.
 			</Tooltip>
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index a76d981aa2..3612050914 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -64,43 +64,57 @@
 									/>
 								</span>
 							</label>
-							<Slider text="How to trigger from external events?">
+							<Slider text="How to trigger flows?">
 								<div class="text-sm text-gray-600 border p-4">
-									There are 2 ways to trigger a flow based on external events:
+									On-demand:
 									<ul class="pt-4">
-										<li
-											>1. Send a webhook after each event: <a
-												on:click={(e) => {
-													e.preventDefault()
-													copyToClipboard(url)
-												}}
-												href={$page.url.protocol + '//' + url}
-												class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
-											>
-												{url}
-												<span class="text-gray-700 ml-2">
-													<Icon data={faClipboard} />
-												</span>
-											</a>
+										<li>
+											1. <a href="https://docs.windmill.dev/docs/core_concepts/auto_generated_uis" target="_blank">Auto-generated UIs</a>
+										</li>													
+										<li>
+											3. <a href="/apps/add?nodraft=true" target="_blank"> App Editor</a> for customized-UIs
 										</li>
+										<li>
+											3. <a href="/schedules" target="_blank">Scheduling</a>
+										</li>
+										<li>
+											4. <a href="https://docs.windmill.dev/docs/advanced/cli" target="_blank">Windmill CLI</a>
+										</li>
+										<br>
 										<li class="mt-2">
 											<div class="flex flex-col gap-2">
 												<p>
-													2. Use a trigger script and schedule this flow to run as frequently as
-													needed and compare a state persisted in Windmill to the state of the
-													external system. If a difference is detected, then the rest of the flow is
-													triggered. Oftentimes, the second step of a flow is a for-loop that will
-													iterate over every elements. When using a trigger, a default schedule will
-													be created.
+													From external events:
 												</p>
-												<div>
-													<img
+											</div>
+										</li>
+										<li class="mt-2">
+											5. Send a <a href="https://docs.windmill.dev/docs/core_concepts/webhooks" target="_blank">webhook</a> after each event: <a
+											on:click={(e) => {
+												e.preventDefault()
+												copyToClipboard(url)
+											}}
+											href={$page.url.protocol + '//' + url}
+											class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+										>
+											{url}
+											<span class="text-gray-700 ml-2">
+												<Icon data={faClipboard} />
+											</span>
+										</a></li>
+										<br>
+										<li>
+											6. Use a <a href="https://docs.windmill.dev/docs/flows/flow_trigger" target="_blank">trigger script</a> and schedule this flow to run as frequently as
+											needed and compare a state persisted in Windmill to the state of the
+											external system. If a difference is detected, then the rest of the flow is
+											triggered. Oftentimes, the second step of a flow is a for-loop that will
+											iterate over every elements. When using a trigger, a default schedule will
+											be created.
+											<img
 														class="shadow-lg border rounded"
 														alt="static button"
 														src="/trigger_button.png"
 													/>
-												</div>
-											</div>
 										</li></ul
 									>
 								</div>
@@ -108,7 +122,7 @@
 						</div>
 					</TabContent>
 					<TabContent value="settings-schedule" class="p-4">
-						<Alert type="info" title="Primary Schedule">
+						<Alert type="info" title="Primary Schedule" documentationLink="https://docs.windmill.dev/docs/core_concepts/scheduling">
 							Flows can be triggered by any schedules, their webhooks or their UI but they only have
 							only one primary schedules with which they share the same path. The primary schedule
 							can be set here.
diff --git a/frontend/src/routes/(root)/(logged)/folders/+page.svelte b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
index 122fa8bd98..a6dcfd0035 100644
--- a/frontend/src/routes/(root)/(logged)/folders/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
@@ -72,6 +72,7 @@
 	<PageHeader
 		title="Folders"
 		tooltip="Folders allow to group items such as scripts/flows/resources/schedule together and to grant homogenous RBAC permissions to groups and individual users towards them."
+		documentationLink="https://docs.windmill.dev/docs/core_concepts/groups_and_folders"
 	>
 		<div class="flex flex-row">
 			<input
diff --git a/frontend/src/routes/(root)/(logged)/groups/+page.svelte b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
index 56b011fb42..99e4711103 100644
--- a/frontend/src/routes/(root)/(logged)/groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
@@ -62,6 +62,7 @@
 	<PageHeader
 		title="Groups"
 		tooltip="Group users together to grant roles and homegenous permissions. Same users can be in many groups at the same time."
+		documentationLink="https://docs.windmill.dev/docs/core_concepts/groups_and_folders"
 	>
 		<div class="flex flex-row">
 			<input
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index b1055d1b2a..6536de71a4 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -337,6 +337,7 @@
 	<PageHeader
 		title="Resources"
 		tooltip="Save and permission rich objects (JSON) including credentials obtained through OAuth."
+		documentationLink="https://docs.windmill.dev/docs/core_concepts/resources_and_types"
 	>
 		<div class="flex flex-row justify-end gap-4">
 			<Button variant="border" size="md" startIcon={{ icon: faPlus }} on:click={startNewType}
@@ -356,7 +357,7 @@
 		</Tab>
 		<Tab size="md" value="types">
 			<div class="flex gap-2 items-center my-1">
-				Resource Types <Tooltip
+				Resource Types <Tooltip documentationLink="https://docs.windmill.dev/docs/core_concepts/resources_and_types"
 					>Every resources have Resource Types attached to them which contains its schema and make
 					it easy in scripts and flows to accept only resources of a specific resource type</Tooltip
 				>
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index c5210f56f6..9a97867bc6 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -198,6 +198,7 @@
 		title="Runs {path ? `of ${path}` : ''}"
 		tooltip="All past and schedule executions of scripts and flows, including previews.
 	You only see your own runs or runs of groups you belong to unless you are an admin."
+		documentationLink="https://docs.windmill.dev/docs/core_concepts/monitor_past_and_future_runs"
 	/>
 
 	<div class="max-w-7x mt-2">
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index 6a5c213afd..16b0ab6c59 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -89,7 +89,7 @@
 
 <ScheduleEditor on:update={loadSchedules} bind:this={scheduleEditor} />
 <CenteredPage>
-	<PageHeader title="Schedules" tooltip="Trigger Scripts and Flows according to a cron schedule">
+	<PageHeader title="Schedules" tooltip="Trigger Scripts and Flows according to a cron schedule" documentationLink="https://docs.windmill.dev/docs/core_concepts/scheduling">
 		<Button size="md" startIcon={{ icon: faPlus }} on:click={() => scheduleEditor.openNew(false)}>
 			New&nbsp;schedule
 		</Button>
diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
index 84e3fc57ec..face455e16 100644
--- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
@@ -106,6 +106,7 @@
 	<PageHeader
 		title="Variables"
 		tooltip="Save and permission strings to be reused in Scripts and Flows."
+		documentationLink="https://docs.windmill.dev/docs/core_concepts/variables_and_secrets"
 	>
 		<div class="flex flex-row justify-end">
 			<Button size="md" startIcon={{ icon: faPlus }} on:click={() => variableEditor.initNew()}>
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index 9df11fa586..2d9863dd3d 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -51,6 +51,7 @@
 		title="Workers"
 		tooltip="The workers are the dutiful servants that execute your scripts.
 		 This page enables you to know their IP in case you need whitelisting and also display liveness information"
+		documentationLink="https://docs.windmill.dev/docs/core_concepts/worker_groups"
 	/>
 
 	{#if workers != undefined}
diff --git a/frontend/windmillhub b/frontend/windmillhub
new file mode 160000
index 0000000000..2bb7697485
--- /dev/null
+++ b/frontend/windmillhub
@@ -0,0 +1 @@
+Subproject commit 2bb76974854739b9e00a4ae1dcf4721fbdc809be