First wave of tooltips linking to docs (#1493)

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>

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"

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

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>

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
 						>

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) => ({

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}

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) => ({

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} {#if tooltip != '' || documentationLink}
+				<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+			{/if}
 			</span>
 			<div
 				class={classNames(

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">

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>

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.

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

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

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
 				>

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">

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>

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()}>

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}