windmill-components 1.37.0 → 1.46.1

package/components/ScriptBuilder.svelte

@@ -5,22 +5,27 @@ import { inferArgs } from '../infer';
 import { initialCode, isInitialCode } from '../script_helpers';
 import { workspaceStore } from '../stores';
 import { encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
-import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
-import SvelteMarkdown from 'svelte-markdown';
 import Path from './Path.svelte';
 import RadioButton from './RadioButton.svelte';
 import Required from './Required.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
 import CenteredPage from './CenteredPage.svelte';
-import Tooltip from './Tooltip.svelte';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import { Button } from './common';
+import { faChevronDown, faChevronUp, faPen } from '@fortawesome/free-solid-svg-icons';
+import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte';
+import Toggle from './Toggle.svelte';
 export let script;
 export let initialPath = '';
 export let template = 'script';
+export let initialArgs = {};
+let viewScriptKind = script.kind !== Script.kind.SCRIPT;
+let viewTemplate = script.kind !== Script.kind.SCRIPT && script.language == Script.language.DENO;
 let pathError = '';
+let summaryC = undefined;
+let pathC = undefined;
 $: setQueryWithoutLoad($page.url, 'state', encodeState(script));
 $: step = Number($page.url.searchParams.get('step')) || 1;
 if (script.content == '') {
@@ -68,38 +73,69 @@ async function changeStep(step) {
 <div class="flex flex-col h-screen">
 	<!-- Nav between steps-->
 	<div class="flex flex-col w-full px-4 py-2 border-b shadow-sm">
-		<div class="justify-between flex flex-row drop-shadow-sm w-full">
-			<div class="flex flex-row w-full">
-				<Breadcrumb>
-					<BreadcrumbItem>
-						<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
-							Metadata
-						</button>
-					</BreadcrumbItem>
-					<BreadcrumbItem>
-						<button
-							on:click={() => changeStep(2)}
-							class={step === 2 ? 'font-bold' : null}
-							disabled={pathError != ''}
-						>
-							Code
-						</button>
-					</BreadcrumbItem>
-					<BreadcrumbItem>
-						<button
-							on:click={() => changeStep(3)}
-							class={step === 3 ? 'font-bold' : null}
-							disabled={pathError != ''}
-						>
-							UI customisation
-						</button>
-					</BreadcrumbItem>
+		<div class="justify-between flex flex-row w-full items-center overflow-x-auto scrollbar-hidden">
+			<div class="flex flex-row">
+				<Breadcrumb
+					items={['Metadata', 'Code', 'UI Customisation']}
+					selectedIndex={step}
+					on:select={(e) => changeStep(e.detail.index + 1)}
+					disabled={pathError != ''}
+				>
+					<svelte:fragment slot="separator">/</svelte:fragment>
 				</Breadcrumb>
 			</div>
-			<div class="flex flex-row-reverse ml-2">
-				{#if step != 3}
+
+			<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
+				<Button
+					btnClasses="hidden lg:inline-flex"
+					startIcon={{ icon: faPen }}
+					variant="contained"
+					color="light"
+					size="xs"
+					on:click={async () => {
+						await changeStep(1)
+						setTimeout(() => pathC?.focus(), 100)
+					}}
+				>
+					{script.path}
+				</Button>
+
+				<Button
+					startIcon={{ icon: faPen }}
+					variant="contained"
+					color="light"
+					size="xs"
+					on:click={async () => {
+						await changeStep(1)
+						setTimeout(() => summaryC?.focus(), 100)
+					}}
+				>
+					<div class="max-w-[10em] !truncate">
+						{script.summary == '' || !script.summary ? 'No summary' : script.summary}
+					</div>
+				</Button>
+			</div>
+
+			<div class="flex flex-row gap-x-2">
+				<Button
+					size="sm"
+					variant={step == 1 ? 'border' : 'contained'}
+					disabled={step === 1 && pathError !== ''}
+					btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
+					on:click={editScript}>Save (commit)</Button
+				>
+				<Button
+					variant="border"
+					size="sm"
+					btnClasses={step == 1 ? 'invisible' : ''}
+					on:click={() => changeStep(step - 1)}
+				>
+					Back
+				</Button>
+				{#if step < 3}
 					<Button
 						size="sm"
+						btnClasses={step == 3 ? 'invisible' : ''}
 						disabled={step === 1 && pathError !== ''}
 						on:click={() => changeStep(step + 1)}
 					>
@@ -108,28 +144,6 @@ async function changeStep(step) {
 				{:else}
 					<Button size="sm" on:click={editScript}>Save</Button>
 				{/if}
-				{#if step > 1}
-					<Button
-						variant="border"
-						size="sm"
-						btnClasses="mr-2"
-						on:click={() => changeStep(step - 1)}
-					>
-						Back
-					</Button>
-				{/if}
-				{#if step == 2}
-					<Button
-						variant="border"
-						size="sm"
-						btnClasses="mr-2"
-						on:click={async () => {
-							editScript()
-						}}
-					>
-						Save (commit)
-					</Button>
-				{/if}
 			</div>
 		</div>
 	</div>
@@ -138,54 +152,79 @@ async function changeStep(step) {
 	{#if step === 1}
 		<CenteredPage>
 			<div class="space-y-6">
+				<h2 class="border-b pb-1 mt-4">Path & Summary</h2>
 				<Path
+					bind:this={pathC}
 					bind:error={pathError}
 					bind:path={script.path}
 					{initialPath}
 					on:enter={() => changeStep(2)}
 					namePlaceholder="my_script"
 					kind="script"
-				>
-					<div slot="ownerToolkit">
-						Script permissions depend on their path. Select the group
-						<span class="font-mono"> all </span>
-						to share your script, and <span class="font-mono">user</span> to keep it private.
-						<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
-					</div>
-				</Path>
-				<h3 class="text-gray-700 border-b">Language</h3>
+				/>
+				<label class="block ">
+					<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
+					<input
+						type="text"
+						bind:this={summaryC}
+						bind:value={script.summary}
+						placeholder="A very short summary of the script displayed when the script is listed"
+						rows="1"
+					/>
+				</label>
+				<h2 class="border-b pb-1 mt-4">Language</h2>
 				<div class="max-w-md">
 					<RadioButton
 						label="Language"
 						options={[
 							['Typescript (Deno)', 'deno'],
 							['Python 3.10', 'python3'],
-							['Go', 'go']
+							['Go', 'go'],
+							['Bash', 'bash']
 						]}
 						on:change={(e) => initContent(e.detail, script.kind, template)}
 						bind:value={script.language}
 					/>
 				</div>
-				<h4 class="text-gray-700  border-b">
-					Script Kind <Tooltip
-						>In most cases, you will want the General Script. <br />
-						Trigger are meant to be used as the first module of flows to trigger them based on watching
-						new events externally. <br />
-						Failure scripts are used to handle unrecoverable errors of flows and for handling errors
-						at the workspace level. <br />
-						Command scripts are used when the workspace is associated with a slack workspace to be triggered
-						on command.</Tooltip
+				<h2 class="border-b pb-1 mt-4"> Metadata </h2>
+				<div>
+					<Button
+						color="light"
+						size="sm"
+						endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
+						on:click={() => (viewScriptKind = !viewScriptKind)}
 					>
-				</h4>
-
-				{#if script.language == 'deno'}
+						Specialize the script as a specific module kind for flows
+					</Button>
+				</div>
+				{#if viewScriptKind}
 					<div class="max-w-lg">
 						<RadioButton
 							label="Script Type"
 							options={[
-								['General Script', Script.kind.SCRIPT],
-								['Trigger Script', Script.kind.TRIGGER]
-								// ['Failure Handler', Script.kind.FAILURE],
+								['Common Script', Script.kind.SCRIPT],
+								[
+									{
+										title: 'Trigger Script',
+										desc: `First module of flows to trigger them based on watching changes external periodically using an internal state`
+									},
+									Script.kind.TRIGGER
+								],
+								[
+									{
+										title: 'Error Handler',
+										desc: `Handle errors for flows after all retries attempts have been exhausted`
+									},
+									Script.kind.FAILURE
+								],
+								[
+									{
+										title: 'Approval Script',
+										desc: `Send notification externally to ask for approval to continue a flow`
+									},
+									Script.kind.APPROVAL
+								]
+
 								// ['Command Handler', Script.kind.COMMAND]
 							]}
 							on:change={(e) => {
@@ -197,97 +236,37 @@ async function changeStep(step) {
 							bind:value={script.kind}
 						/>
 					</div>
-				{:else}
-					<div class="max-w-lg">
-						<RadioButton
-							label="Script Type"
-							options={[['General Script', Script.kind.SCRIPT]]}
-							on:change={(e) => {
-								if (isInitialCode(script.content)) {
-									template = 'script'
-									initContent(script.language, e.detail, template)
-								}
-							}}
-							bind:value={script.kind}
-						/>
-					</div>
 				{/if}
-
 				{#if script.language == 'deno' && script.kind == Script.kind.SCRIPT}
-					<h4 class="text-gray-700  border-b">
-						Script Template <Tooltip
-							>A template is a pre-filled script corresponding to a more specialized use-case</Tooltip
+					<div
+						><Button
+							color="light"
+							size="sm"
+							endIcon={{ icon: viewTemplate ? faChevronUp : faChevronDown }}
+							on:click={() => (viewTemplate = !viewTemplate)}
 						>
-					</h4>
-
-					<div class="max-w-md">
-						<RadioButton
-							label="Template"
-							options={[
-								['Standard', 'script'],
-								['PostgreSQL Prepared Statement', 'pgsql']
-							]}
-							on:change={(e) => initContent(script.language, script.kind, e.detail)}
-							bind:value={template}
-						/>
+							Use a predefined template specific to this language and script kind
+						</Button>
 					</div>
+					{#if viewTemplate}
+						<div class="max-w-lg">
+							<RadioButton
+								label="Template"
+								options={[
+									['Standard', 'script'],
+									['PostgreSQL Prepared Statement', 'pgsql']
+								]}
+								on:change={(e) => initContent(script.language, script.kind, e.detail)}
+								bind:value={template}
+							/>
+						</div>
+					{/if}
 				{/if}
-
-				<label class="block ">
-					<span class="text-gray-700">Summary <Required required={false} /></span>
-					<textarea
-						bind:value={script.summary}
-						class="
-					mt-1
-					block
-					w-full
-					rounded-md
-					border-gray-300
-					shadow-sm
-					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
-					"
-						placeholder="A very short summary of the script displayed when the script is listed"
-						rows="1"
+				<div class="ml-3">
+					<Toggle
+						bind:checked={script.is_template}
+						options={{ right: 'Save as a workspace template' }}
 					/>
-				</label>
-				<label class="block" for="inp">
-					<span class="text-gray-700"
-						>Description<Required required={false} detail="accept markdown formatting" />
-						<textarea
-							id="inp"
-							bind:value={script.description}
-							class="
-					mt-1
-					block
-					w-full
-					rounded-md
-					border-gray-300
-					shadow-sm
-					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
-					"
-							placeholder="A description to help users understand what this script does and how to use it."
-							rows="3"
-						/>
-					</span>
-				</label>
-
-				<label class="block">
-					<span class="text-gray-700 mr-2"
-						>Save as workspace template <Tooltip
-							>Enable your teammates to use this script as a template to write new scripts.</Tooltip
-						>
-					</span>
-					<input type="checkbox" bind:checked={script.is_template} />
-				</label>
-
-				<div>
-					<h3 class="text-gray-700 ">Description rendered</h3>
-					<div
-						class="prose mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto"
-						style="max-height: 200px;"
-					>
-						<SvelteMarkdown source={script.description ?? ''} />
-					</div>
 				</div>
 			</div>
 		</CenteredPage>
@@ -297,6 +276,7 @@ async function changeStep(step) {
 			path={script.path}
 			bind:code={script.content}
 			lang={script.language}
+			{initialArgs}
 		/>
 	{:else if step === 3}
 		<CenteredPage>

package/components/ScriptBuilder.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         script: Script;
         initialPath?: string | undefined;
         template?: "script" | "pgsql" | undefined;
+        initialArgs?: Record<string, any> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ScriptEditor.svelte

@@ -4,31 +4,37 @@ import { emptySchema, scriptLangToEditorLang } from '../utils';
 import { faPlay, faRotateRight } from '@fortawesome/free-solid-svg-icons';
 import Editor from './Editor.svelte';
 import { inferArgs } from '../infer';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SchemaForm from './SchemaForm.svelte';
-import LogPanel from './script_editor/LogPanel.svelte';
-import { HSplitPane, VSplitPane } from 'svelte-split-pane';
+import LogPanel from './scriptEditor/LogPanel.svelte';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import EditorBar from './EditorBar.svelte';
-import Button from './common/button/Button.svelte';
+import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
 import { onMount } from 'svelte';
+import { Button, Kbd } from './common';
+import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte';
+import Tooltip from './Tooltip.svelte';
+import WindmillIcon from './icons/WindmillIcon.svelte';
 // Exported
 export let schema = emptySchema();
 export let code;
 export let path;
 export let lang;
+export let initialArgs = {};
 let websocketAlive = { pyright: false, black: false, deno: false, go: false };
+let width = 1200;
 // Internal state
 let editor;
 let testJobLoader;
 // Test args input
-let args = {};
+let args = initialArgs;
 let isValid = true;
 // Test
 let testIsLoading = false;
 let testJob;
 let pastPreviews = [];
 let lastSave;
+let validCode = true;
 $: lastSave = localStorage.getItem(path ?? 'last_save');
 function onKeyDown(event) {
     if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
@@ -54,7 +60,14 @@ async function inferSchema() {
             isDefault.push(k);
         }
     });
-    await inferArgs(lang, code, schema);
+    try {
+        await inferArgs(lang, code, schema);
+        validCode = true;
+    }
+    catch (e) {
+        console.error("Couldn't infer args", e);
+        validCode = false;
+    }
     schema = schema;
     isDefault
         .filter((key) => schema.properties[key] != undefined)
@@ -79,117 +92,107 @@ onMount(() => {
 
 <svelte:window on:keydown={onKeyDown} />
 
-<div class="border-b shadow-sm p-1 pr-4">
-	<div class="flex justify-between">
-		<EditorBar {editor} {lang} {websocketAlive} />
+<div class="border-b-2 shadow-sm p-1 pr-4" bind:clientWidth={width}>
+	<div class="flex justify-between space-x-2">
+		<EditorBar
+			{validCode}
+			iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
+			{editor}
+			{lang}
+			{websocketAlive}
+		/>
 
-		<div class="flex divide-x">
-			<div>
-				<Button
-					target="_blank"
-					href="https://github.com/windmill-labs/windmill-gh-action-deploy"
-					color="light"
-					size="xs"
-					btnClasses="mr-1"
-					startIcon={{
-						icon: faGithub
-					}}
-				>
-					Sync from Github
-				</Button>
-			</div>
-		</div>
+		<Button
+			target="_blank"
+			href="https://github.com/windmill-labs/windmill-gh-action-deploy"
+			color="light"
+			size="sm"
+			btnClasses="mr-1 hidden md:block"
+			startIcon={{
+				icon: faGithub
+			}}
+		>
+			Sync from Github
+		</Button>
 	</div>
 </div>
-<div class="flex-1 overflow-auto">
-	<HSplitPane leftPaneSize="60%" rightPaneSize="40%" minLeftPaneSize="50px" minRightPaneSize="50px">
-		<left slot="left">
-			<div class="h-full">
-				<div
-					class="p-2 h-full"
-					on:mouseleave={() => {
-						inferSchema()
-					}}
+<SplitPanesWrapper>
+	<Pane size={60} minSize={10}>
+		<div
+			class="p-2 h-full"
+			on:mouseleave={() => {
+				inferSchema()
+			}}
+		>
+			<Editor
+				bind:code
+				bind:websocketAlive
+				bind:this={editor}
+				cmdEnterAction={async () => {
+					await inferSchema()
+					runTest()
+				}}
+				formatAction={async () => {
+					await inferSchema()
+					localStorage.setItem(path ?? 'last_save', code)
+					lastSave = code
+				}}
+				class="flex flex-1 h-full"
+				lang={scriptLangToEditorLang(lang)}
+				automaticLayout={true}
+			/>
+		</div>
+	</Pane>
+	<Pane size={40} minSize={10}>
+		<Splitpanes horizontal>
+			<Pane size={33}>
+				<div class="w-full  bg-gray-100 px-2 text-sm"
+					>Preview <Tooltip>
+						To recompute the input schema press <Kbd>Ctrl/Cmd</Kbd> + <Kbd>S</Kbd> or move the focus
+						outside of the text editor
+					</Tooltip></div
 				>
-					<Editor
-						bind:code
-						bind:websocketAlive
-						bind:this={editor}
-						cmdEnterAction={() => {
-							runTest()
-						}}
-						formatAction={async () => {
-							await inferSchema()
-							localStorage.setItem(path ?? 'last_save', code)
-							lastSave = code
-						}}
-						class="flex flex-1 h-full"
-						lang={scriptLangToEditorLang(lang)}
-						automaticLayout={true}
-					/>
+				<div class="px-2">
+					<div class="break-words relative font-sans">
+						<SchemaForm {schema} bind:args bind:isValid />
+					</div>
 				</div>
-			</div>
-		</left>
-		<right slot="right">
-			<div class="h-full">
-				<VSplitPane topPanelSize="30%" downPanelSize="70%">
-					<top slot="top">
-						<div class="h-full overflow-auto">
-							<div class="p-4">
-								<div class="break-all relative font-sans">
-									<div class="items-baseline text-xs text-gray-700 italic hidden md:block">
-										<p>
-											Move the focus outside of the text editor to recompute the input schema from
-											main signature or press Ctrl/Cmd+S
-										</p>
-									</div>
-									<SchemaForm {schema} bind:args bind:isValid />
-								</div>
-							</div>
-						</div>
-					</top>
-					<down slot="down">
-						<div class="h-full overflow-hidden">
-							<div class="px-2 py-1">
-								{#if testIsLoading}
-									<Button
-										on:click={testJobLoader?.cancelJob}
-										btnClasses="w-full"
-										color="red"
-										size="xs"
-										startIcon={{
-											icon: faRotateRight,
-											classes: 'animate-spin'
-										}}
-									>
-										'Cancel'
-									</Button>
-								{:else}
-									<Button
-										on:click={runTest}
-										btnClasses="w-full"
-										size="xs"
-										startIcon={{
-											icon: faPlay,
-											classes: 'animate-none'
-										}}
-									>
-										{testIsLoading ? 'Running' : 'Test (Ctrl+Enter)'}
-									</Button>
-								{/if}
-							</div>
-							<LogPanel
-								{path}
-								{lang}
-								previewJob={testJob}
-								{pastPreviews}
-								previewIsLoading={testIsLoading}
-								bind:lastSave
+			</Pane>
+			<Pane size={67}>
+				<div class="px-2 py-1 w-full">
+					{#if testIsLoading}
+						<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
+							<WindmillIcon
+								white={true}
+								class="animate-[spin_5s_linear_infinite] mr-2 text-white"
+								height="20px"
+								width="20px"
 							/>
-						</div>
-					</down>
-				</VSplitPane>
-			</div>
-		</right>
-	</HSplitPane>
-</div>
+							Cancel
+						</Button>
+					{:else}
+						<Button
+							on:click={runTest}
+							btnClasses="w-full"
+							size="xs"
+							startIcon={{
+								icon: faPlay,
+								classes: 'animate-none'
+							}}
+						>
+							{testIsLoading ? 'Running' : 'Test (Ctrl+Enter)'}
+						</Button>
+					{/if}
+				</div>
+				<LogPanel
+					{path}
+					{lang}
+					previewJob={testJob}
+					{pastPreviews}
+					previewIsLoading={testIsLoading}
+					bind:lastSave
+				/>
+			</Pane>
+		</Splitpanes>
+	</Pane>
+</SplitPanesWrapper>

package/components/ScriptEditor.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         code: string;
         path: string | undefined;
         lang: Preview.language;
+        initialArgs?: Record<string, any> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;