Helps in frontend (#2901)

* Helps in frontend

* fix doclink

* Fix build

* Removing tooltips Save

* fix: remove bad app type forcing (#2906)

* fix: remove bad type forcing

* fix: safety

---------

Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com>
Co-authored-by: HugoCasa <hugo@casademont.ch>

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -1247,13 +1247,13 @@
 			size="xs"
 			dropdownItems={appPath != ''
 				? () => [
-						{
-							label: 'Fork',
-							onClick: () => {
-								window.open(`/apps/add?template=${appPath}`)
-							}
+					{
+						label: 'Fork',
+						onClick: () => {
+							window.open(`/apps/add?template=${appPath}`)
 						}
-				  ]
+					}
+				]
 				: undefined}
 		>
 			Deploy

frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -30,7 +30,7 @@
 		<SplitPanesWrapper>
 			<Splitpanes horizontal>
 				<Pane size={flowModule ? 60 : 100}>
-					<Alert notRounded type="info" title="All branches will be run" class="m-2">
+					<Alert notRounded type="info" title="All branches will be run" tooltip="Branch all" documentationLink="https://www.windmill.dev/docs/flows/flow_branches#branch-all" class="m-2">
 						The result of this step is the list of the result of each branch.
 					</Alert>
 
@@ -38,6 +38,7 @@
 						<h3 class="mb-4"
 							>{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
 						>
+						<p>Add branches and steps directly on the graph.</p>
 						<div class="flex flex-col gap-y-4 py-2 w-full">
 							{#each value.branches as branch, i}
 								<div class="flex flex-row gap-x-4 w-full items-center">

frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -31,13 +31,14 @@
 		<SplitPanesWrapper>
 			<Splitpanes horizontal>
 				<Pane size={flowModule ? 60 : 100}>
-					<Alert type="info" title="Only one branch will be run" class="m-2">
+					<Alert type="info" title="Only first branch whose condition is true will be run" tooltip="Branch one" documentationLink="https://www.windmill.dev/docs/flows/flow_branches#branch-one" class="m-2">
 						The result of this step is the result of the branch.
 					</Alert>
 					<div class="p-2">
 						<h3 class="my-4">
 							{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}
 						</h3>
+						<p>Add branches and steps directly on the graph.</p>
 						<div class="py-2">
 							<div class="flex flex-row gap-2 text-sm p-2">
 								<Badge large={true} color="blue">Default branch</Badge>

frontend/src/lib/components/flows/content/FlowInputs.svelte

@@ -66,19 +66,52 @@
 		{/if}
 		{#if kind == 'trigger'}
 			<div class="mt-2" />
-			<Alert title="Trigger script automatic schedule" role="info">
+			<Alert title="Trigger scripts" role="info">
+				Trigger scripts are special actions that are meant to run periodically given a schedule.
 				A schedule will be automatically attached to this flow to run every 15 minutes. Adjust
-				frequency in 'Settings -> Schedule'</Alert
-			>
+				frequency in 'Settings' -> 'Schedule'.<br/><br/>
+
+				To see all ways to trigger a flow, check <a
+					href="https://www.windmill.dev/docs/getting_started/trigger_flows"
+					target="_blank"
+					class="text-blue-500"
+					>Triggering Flows</a>.
+			</Alert>
+		{/if}
+
+		{#if kind == 'script'}
+			<div class="mt-2" />
+			<Alert title="Action Scripts" role="info">
+				An action script is simply a script that is neither a trigger nor an approval script. Those are the majority of the scripts.
+			</Alert>
+		{/if}
+
+		{#if kind == 'approval'}
+			<div class="mt-2" />
+			<Alert title="Approval Step" role="info">
+				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 the secret urls. See dtails in 'Advanced' -> 'Suspend' settings of the step.<br/><br/>
+				For further details, visit <a
+					href="https://www.windmill.dev/docs/flows/flow_approval"
+					target="_blank"
+					class="text-blue-500"
+					>Approval Steps Documentation</a>.
+			</Alert>
 		{/if}
 		<h3 class="pb-2 pt-4">
 			Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
-			<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_error_handler">
-				Embed a script directly inside a flow instead of saving the script into your workspace for
+			<Tooltip documentationLink={
+				kind === 'script'
+					? 'https://www.windmill.dev/docs/flows/editor_components#flow-actions'
+					: kind === 'trigger'
+					? 'https://www.windmill.dev/docs/flows/flow_trigger'
+					: kind === 'approval'
+					? 'https://www.windmill.dev/docs/flows/flow_approval'
+					: 'https://www.windmill.dev/docs/getting_started/flows_quickstart#flow-editor'
+			}>
+				Embed <span>{kind == 'script' ? 'action' : kind}</span> 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>
 		</h3>
-
 		{#if noEditor}
 			<div
 				class="py-0.5 text-2xs {summary == undefined || summary == ''

frontend/src/lib/components/flows/content/FlowLoop.svelte

@@ -9,7 +9,7 @@
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
 	// import FlowRetries from './FlowRetries.svelte'
-	import { Button, Drawer, Tab, TabContent, Tabs } from '$lib/components/common'
+	import { Button, Drawer, Tab, TabContent, Tabs, Alert } from '$lib/components/common'
 	import type { FlowModule } from '$lib/gen/models/FlowModule'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { getStepPropPicker } from '../previousResults'
@@ -68,13 +68,16 @@
 		<div slot="header" class="grow">
 			<input bind:value={mod.summary} placeholder={'Summary'} />
 		</div>
+		<Alert type="info" title="For loops" tooltip="For loops" documentationLink="https://www.windmill.dev/docs/flows/flow_loops" class="m-2">
+			Add steps inside the loop and specify an iterator expression that defines the sequence over which your subsequent steps will iterate.
+		</Alert>
 		<Splitpanes horizontal class="!max-h-[calc(100%-48px)]">
 			<Pane size={60} minSize={20} class="p-4">
 				{#if mod.value.type === 'forloopflow'}
 					<div class="flex flex-row gap-8 mt-2 mb-6">
 						<div>
 							<div class="mb-2 text-sm font-bold"
-								>Skip failures <Tooltip
+								>Skip failures <Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops"
 									>If disabled, the flow will fail as soon as one of the iteration fail. Otherwise,
 									the error will be collected as the result of the iteration. Regardless of this
 									setting, if an error handler is defined, it will process the error.</Tooltip
@@ -97,7 +100,7 @@
 							/>
 						</div>
 						<div>
-							<div class="mb-2 text-sm font-bold">Parallelism</div>
+							<div class="mb-2 text-sm font-bold">Parallelism <Tooltip>Assign a maximum number of branches run in parallel to control huge for-loops.</Tooltip> </div>
 							<input
 								type="number"
 								disabled={!mod.value.parallel}
@@ -107,9 +110,8 @@
 					</div>
 					<div class="my-2 text-sm font-bold">
 						Iterator expression
-						<Tooltip>
-							List to iterate over. For more information see the
-							<a href="https://www.windmill.dev/docs/flows/flow_loops">docs.</a>
+						<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
+							List to iterate over.
 						</Tooltip>
 					</div>
 					{#if mod.value.iterator.type == 'javascript'}

frontend/src/lib/components/flows/map/MapItem.svelte

@@ -3,14 +3,13 @@
 	import LanguageIcon from '$lib/components/common/languageIcons/LanguageIcon.svelte'
 	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
 	import type { FlowModule } from '$lib/gen'
-	import { Building, ClipboardCopy, GitBranchPlus, Repeat, Square } from 'lucide-svelte'
+	import { Building, ClipboardCopy, GitBranchPlus, Repeat, Square, ArrowDown, GitBranch } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
 	import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte'
 	import InsertModuleButton from './InsertModuleButton.svelte'
 	import { prettyLanguage } from '$lib/common'
 	import { msToSec } from '$lib/utils'
-	import { ArrowDown, GitBranch } from 'lucide-svelte'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 
 	export let mod: FlowModule

frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte

@@ -2,6 +2,7 @@
 	import { page } from '$app/stores'
 	import { JobService, Job, ScriptService, Script } from '$lib/gen'
 	import { canWrite, displayDate, emptyString, truncateHash } from '$lib/utils'
+	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 
 	import {
 		Activity,
@@ -17,7 +18,8 @@
 		Scroll,
 		TimerOff,
 		Trash,
-		XCircle
+		XCircle,
+		Code2
 	} from 'lucide-svelte'
 
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
@@ -402,9 +404,16 @@
 						>
 					{/if}
 				{/if}
-				<Button href={viewHref} color="blue" size="md" startIcon={{ icon: Scroll }}>
+				<Button 
+					href={viewHref} 
+					color="blue" 
+					size="md" 
+					startIcon={{ 
+						icon: job?.job_kind === 'script' ? Code2 : job?.job_kind === 'flow' ? BarsStaggered : Scroll 
+					}}
+					>
 					View {job?.job_kind}
-				</Button>
+					</Button>
 			{/if}
 		</svelte:fragment>
 	</ActionRow>