windmill-components 1.85.0 → 1.86.0

package/components/ScriptBuilder.svelte

@@ -8,20 +8,27 @@ import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '..
 import Path from './Path.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
-import CenteredPage from './CenteredPage.svelte';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { Button, ButtonPopup, ButtonPopupItem, Kbd } from './common';
-import { faPen, faSave } from '@fortawesome/free-solid-svg-icons';
-import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte';
+import { Badge, Button, Drawer } from './common';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
 import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
 import Tooltip from './Tooltip.svelte';
-import SettingSection from './SettingSection.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import { Pen } from 'lucide-svelte';
+import autosize from 'svelte-autosize';
 export let script;
 export let initialPath = '';
 export let template = 'script';
 export let initialArgs = {};
 export let lockedLanguage = false;
 export let topHash = undefined;
+let metadataOpen = initialPath == '' && $page.url.searchParams.get('state') == undefined;
+let advancedOpen = false;
+let editor = undefined;
+let scriptEditor = undefined;
+export function setCode(code) {
+    editor?.setCode(code);
+}
 const langs = [
     ['Typescript', Script.language.DENO],
     ['Python', Script.language.PYTHON3],
@@ -50,16 +57,14 @@ const scriptKindOptions = [
     }
 ];
 let pathError = '';
-let summaryC = undefined;
-let pathC = undefined;
 let loadingSave = false;
 $: setQueryWithoutLoad($page.url, [{ key: 'state', value: encodeState(script) }]);
-$: step = Number($page.url.searchParams.get('step')) || 1;
 if (script.content == '') {
     initContent(script.language, script.kind, template);
 }
 function initContent(language, kind, template) {
     script.content = initialCode(language, kind, template);
+    scriptEditor?.inferSchema(script.content, language);
 }
 async function editScript(leave) {
     loadingSave = true;
@@ -88,11 +93,11 @@ async function editScript(leave) {
             }
         });
         if (leave) {
-            history.replaceState(history.state, '', `/scripts/edit/${newHash}?step=2`);
+            history.replaceState(history.state, '', `/scripts/edit/${newHash}`);
             goto(`/scripts/get/${newHash}?workspace_id=${$workspaceStore}`);
         }
         else {
-            await goto(`/scripts/edit/${newHash}?step=2`);
+            await goto(`/scripts/edit/${newHash}`);
             script.hash = newHash;
             topHash = undefined;
         }
@@ -102,240 +107,230 @@ async function editScript(leave) {
     }
     loadingSave = false;
 }
-async function changeStep(step) {
-    if (step > 1) {
-        script.schema = script.schema ?? emptySchema();
-        try {
-            await inferArgs(script.language, script.content, script.schema);
-        }
-        catch (error) {
-            console.info('The main signature was not parsable. This script is considered to be without main function');
-        }
-    }
-    goto(`?step=${step}`);
-}
-$: kind = script.kind;
-function onKeyDown(event) {
-    if (event.key == 'Enter' && step == 1) {
-        changeStep(2);
+const dropdownItems = [
+    {
+        label: 'Save and leave',
+        onClick: () => editScript(true)
     }
+];
+if (initialPath != '') {
+    dropdownItems.push({
+        label: 'Fork',
+        onClick: () => {
+            window.open(`/scripts/add?template=${initialPath}`);
+        }
+    });
 }
 </script>
 
 {#if !$userStore?.operator}
-	<div class="flex flex-col h-screen">
-		<!-- Nav between steps-->
-		<div class="flex flex-col w-full px-2 py-1  border-b shadow-sm">
-			<div
-				class="justify-between flex flex-row w-full items-center overflow-x-auto scrollbar-hidden px-2"
-			>
-				<div class="flex flex-row py-1">
-					<Breadcrumb
-						items={['Metadata', 'Code', 'Advanced']}
-						selectedIndex={step}
-						on:select={(e) => changeStep(e.detail.index + 1)}
-						disabled={pathError != ''}
-					>
-						<svelte:fragment slot="separator">/</svelte:fragment>
-					</Breadcrumb>
-				</div>
+	<Drawer placement="right" bind:open={metadataOpen} size="800px">
+		<DrawerContent title="Metadata" on:close={() => (metadataOpen = false)}>
+			<h2 class="border-b pb-1 mb-4">Path</h2>
+			<Path
+				bind:error={pathError}
+				bind:path={script.path}
+				{initialPath}
+				namePlaceholder="script"
+				kind="script"
+			/>
+			<h2 class="border-b pb-1 mt-10 mb-4">Summary</h2>
+
+			<input
+				type="text"
+				bind:value={script.summary}
+				placeholder="Short summary to be displayed when listed"
+			/>
+			<h2 class="border-b pb-1 mt-10 mb-4">Language</h2>
 
-				<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
+			{#if lockedLanguage}
+				<div class="text-sm text-gray-600 italic mb-2">
+					As a forked script, the language '{script.language}' cannot be modified.
+				</div>
+			{/if}
+			<div class="flex flex-row gap-2 flex-wrap">
+				{#each langs as [label, lang]}
+					{@const isPicked = script.language == lang && template == 'script'}
 					<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)
+						size="sm"
+						variant="border"
+						color={isPicked ? 'blue' : 'dark'}
+						btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						on:click={() => {
+							template = 'script'
+							initContent(lang, script.kind, template)
+							script.language = lang
 						}}
+						disabled={lockedLanguage}
 					>
-						{script.path}
+						<LanguageIcon {lang} />
+						<span class="ml-2 py-2">{label}</span>
 					</Button>
+				{/each}
+				<Button
+					size="sm"
+					variant="border"
+					color={template == 'pgsql' ? 'blue' : 'dark'}
+					btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+					disabled={lockedLanguage}
+					on:click={() => {
+						template = 'pgsql'
+						initContent(Script.language.DENO, script.kind, template)
+						script.language = Script.language.DENO
+					}}
+				>
+					<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
+				</Button>
+				<!-- <Button
+					size="sm"
+					variant="border"
+					color={template == 'mysql' ? 'blue' : 'dark'}
+					btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+					on:click={() => {
+						script.language = Script.language.DENO
+						template = 'mysql'
+						initContent(script.language, script.kind, template)
+					}}
+				>
+					<LanguageIcon lang="mysql" /><span class="ml-2 py-2">MySQL</span>
+				</Button> -->
+			</div>
 
-					<Button
-						startIcon={{ icon: faPen }}
-						variant="contained"
-						color="light"
-						size="xs"
+			<h2 class="border-b pb-1 mt-10 mb-4">Description</h2>
+			<textarea
+				use:autosize
+				bind:value={script.description}
+				placeholder="Edit description"
+				class="text-sm"
+			/>
+		</DrawerContent>
+	</Drawer>
+
+	<div class="flex flex-col h-screen">
+		<div class="flex flex-col w-full px-2 py-1 border-b shadow-sm">
+			<div class="justify-between flex gap-8 w-full items-center px-2">
+				<div class="min-w-64 w-full max-w-md">
+					<input
+						type="text"
+						placeholder="Script summary"
+						class="text-sm w-full font-semibold"
+						bind:value={script.summary}
+					/>
+				</div>
+				<div class="gap-4 flex">
+					<div class="flex justify-start w-full">
+						<div>
+							<button
+								on:click={async () => {
+									metadataOpen = true
+								}}
+							>
+								<Badge
+									color="gray"
+									class="center-center !bg-gray-300 !text-gray-600 !h-[28px]  !w-[70px] rounded-r-none"
+								>
+									<Pen size={12} class="mr-2" /> Path
+								</Badge>
+							</button>
+						</div>
+						<input
+							type="text"
+							readonly
+							value={script.path}
+							size={script.path?.length || 50}
+							class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
+							on:focus={({ currentTarget }) => {
+								currentTarget.select()
+							}}
+						/>
+					</div>
+				</div>
+				<div class="center-center">
+					<button
 						on:click={async () => {
-							await changeStep(1)
-							setTimeout(() => summaryC?.focus(), 100)
+							metadataOpen = true
 						}}
 					>
-						<div class="max-w-[10em] !truncate">
-							{script.summary == '' || !script.summary ? 'No summary' : script.summary}
-						</div>
-					</Button>
+						<LanguageIcon lang={script.language} />
+					</button>
 				</div>
-				<div class="flex flex-row gap-x-2">
+				<div class="flex flex-row gap-x-4">
 					<Button
+						color="dark"
 						variant="border"
-						size="sm"
-						btnClasses={step == 1 ? 'hidden sm:invisible' : ''}
-						on:click={() => changeStep(step - 1)}
+						size="xs"
+						on:click={() => {
+							advancedOpen = true
+						}}
 					>
-						Back
+						Customise
 					</Button>
 					<Button
-						size="sm"
-						variant={step == 1 ? 'contained' : 'border'}
-						btnClasses={step == 3 ? 'invisible' : 'inline-flex gap-2'}
-						disabled={step === 1 && pathError !== ''}
-						on:click={() => changeStep(step + 1)}
-					>
-						Next {#if step == 1}<Kbd>Enter</Kbd>{/if}
-					</Button>
-					<ButtonPopup
+						color="dark"
 						loading={loadingSave}
 						size="sm"
-						variant={step == 1 ? 'border' : 'contained'}
-						disabled={step === 1 && pathError !== ''}
 						startIcon={{ icon: faSave }}
 						on:click={() => editScript(false)}
+						{dropdownItems}
 					>
-						<svelte:fragment slot="main">Save</svelte:fragment>
-						<ButtonPopupItem on:click={() => editScript(true)}>Save and exit</ButtonPopupItem>
-						{#if initialPath != ''}
-							<ButtonPopupItem
-								on:click={() => {
-									window.open(`/scripts/add?template=${initialPath}`)
-								}}>Fork</ButtonPopupItem
-							>
-						{/if}
-					</ButtonPopup>
+						Save
+					</Button>
 				</div>
 			</div>
 		</div>
 
-		<!-- metadata -->
-		{#if step === 1}
-			<CenteredPage>
-				<SettingSection title="Path" element="h2">
-					<Path
-						bind:this={pathC}
-						bind:error={pathError}
-						bind:path={script.path}
-						{initialPath}
-						on:enter={() => changeStep(2)}
-						namePlaceholder="script"
-						kind="script"
-					/>
-				</SettingSection>
-				<SettingSection title="Summary" element="h2">
-					<input
-						type="text"
-						bind:this={summaryC}
-						bind:value={script.summary}
-						placeholder="Short summary to be displayed when listed"
-					/>
-				</SettingSection>
-				<SettingSection title="Language" element="h2">
-					{#if lockedLanguage}
-						<div class="text-sm text-gray-600 italic mb-2">
-							As a forked script, the language '{script.language}' cannot be modified.
-						</div>
-					{/if}
-					<div class="flex flex-row gap-2 flex-wrap">
-						{#each langs as [label, lang]}
-							{@const isPicked = script.language == lang && template == 'script'}
-							<Button
-								size="sm"
-								variant="border"
-								color={isPicked ? 'blue' : 'dark'}
-								btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-								on:click={() => {
-									script.language = lang
-									template = 'script'
-									initContent(lang, script.kind, template)
-								}}
-								disabled={lockedLanguage}
-							>
-								<LanguageIcon {lang} />
-								<span class="ml-2 py-2">{label}</span>
-							</Button>
-						{/each}
+		<Drawer bind:open={advancedOpen} size="800px">
+			<DrawerContent title="Customise" on:close={() => (advancedOpen = false)}>
+				<h2 class="border-b pb-1 mb-4"
+					>Script Kind &nbsp;<Tooltip
+						>Tag this script's purpose within flows such that it is available as the corresponding
+						action.</Tooltip
+					></h2
+				>
+				<div class="flex flex-wrap gap-2">
+					{#each scriptKindOptions as { value, title, desc }}
+						{@const isPicked = script.kind === value}
 						<Button
 							size="sm"
 							variant="border"
-							color={template == 'pgsql' ? 'blue' : 'dark'}
-							btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-							disabled={lockedLanguage}
+							color={isPicked ? 'blue' : 'dark'}
+							btnClasses="font-medium {isPicked ? '!bg-blue-50/75' : ''}"
 							on:click={() => {
-								script.language = Script.language.DENO
-								template = 'pgsql'
-								initContent(script.language, script.kind, template)
+								template = 'script'
+								script.kind = value
+								initContent(script.language, value, template)
+								setCode(script.content)
 							}}
 						>
-							<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
+							{title}
+							{#if desc}
+								<Tooltip class="mb-0.5 ml-1">
+									{desc}
+								</Tooltip>
+							{/if}
 						</Button>
-						<!-- <Button
-							size="sm"
-							variant="border"
-							color={template == 'mysql' ? 'blue' : 'dark'}
-							btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-							on:click={() => {
-								script.language = Script.language.DENO
-								template = 'mysql'
-								initContent(script.language, script.kind, template)
-							}}
-						>
-							<LanguageIcon lang="mysql" /><span class="ml-2 py-2">MySQL</span>
-						</Button> -->
-					</div>
-				</SettingSection>
-				<SettingSection
-					title="Script kind"
-					element="h3"
-					tooltip="Tag this script as having a specific purpose inside flows. If it won't be used in flows,
-				you don't have to worry about this."
-					accordion
+					{/each}
+				</div>
+				<h2 class="border-b pb-1 mt-10 mb-4"
+					>Arguments &nbsp;<Tooltip
+						>The arguments are synced with the main signature but you may refine the parts that
+						cannot be inferred from the type directly.</Tooltip
+					></h2
 				>
-					<div class="flex flex-wrap gap-2">
-						{#each scriptKindOptions as { value, title, desc }}
-							{@const isPicked = script.kind === value}
-							<Button
-								size="sm"
-								variant="border"
-								color={isPicked ? 'blue' : 'dark'}
-								btnClasses="font-medium {isPicked ? '!bg-blue-50/75' : ''}"
-								on:click={() => {
-									template = 'script'
-									script.kind = value
-									initContent(script.language, value, template)
-								}}
-								disabled={lockedLanguage}
-							>
-								{title}
-								{#if desc}
-									<Tooltip class="mb-0.5 ml-1">
-										{desc}
-									</Tooltip>
-								{/if}
-							</Button>
-						{/each}
-					</div>
-				</SettingSection>
-			</CenteredPage>
-		{:else if step === 2}
-			<ScriptEditor
-				bind:schema={script.schema}
-				path={script.path}
-				bind:code={script.content}
-				lang={script.language}
-				{initialArgs}
-				{kind}
-			/>
-		{:else if step === 3}
-			<CenteredPage>
-				<ScriptSchema bind:description={script.description} bind:schema={script.schema} />
-			</CenteredPage>
-		{/if}
+				<ScriptSchema bind:schema={script.schema} />
+			</DrawerContent>
+		</Drawer>
+		<ScriptEditor
+			bind:editor
+			bind:this={scriptEditor}
+			bind:schema={script.schema}
+			path={script.path}
+			bind:code={script.content}
+			lang={script.language}
+			{initialArgs}
+			kind={script.kind}
+		/>
 	</div>
 {:else}
 	Script Builder not available to operators
 {/if}
-
-<svelte:window on:keydown={onKeyDown} />

package/components/ScriptBuilder.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         initialArgs?: Record<string, any> | undefined;
         lockedLanguage?: boolean | undefined;
         topHash?: string | undefined;
+        setCode?: ((code: string) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,5 +19,6 @@ export type ScriptBuilderProps = typeof __propDef.props;
 export type ScriptBuilderEvents = typeof __propDef.events;
 export type ScriptBuilderSlots = typeof __propDef.slots;
 export default class ScriptBuilder extends SvelteComponentTyped<ScriptBuilderProps, ScriptBuilderEvents, ScriptBuilderSlots> {
+    get setCode(): (code: string) => void;
 }
 export {};

package/components/ScriptEditor.svelte

@@ -23,10 +23,9 @@ export let kind = undefined;
 export let initialArgs = {};
 export let fixedOverflowWidgets = true;
 export let noSyncFromGithub = false;
+export let editor = undefined;
 let websocketAlive = { pyright: false, black: false, deno: false, go: false };
 let width = 1200;
-// Internal state
-let editor;
 let testJobLoader;
 // Test args input
 let args = initialArgs;
@@ -55,7 +54,7 @@ async function loadPastTests() {
         scriptPathExact: path
     });
 }
-async function inferSchema(code) {
+export async function inferSchema(code, nlang) {
     schema = schema ?? emptySchema();
     let isDefault = [];
     Object.entries(args).forEach(([k, v]) => {
@@ -64,7 +63,7 @@ async function inferSchema(code) {
         }
     });
     try {
-        await inferArgs(lang, code, schema);
+        await inferArgs(nlang ?? lang, code, schema);
         validCode = true;
     }
     catch (e) {
@@ -84,6 +83,9 @@ onMount(() => {
     inferSchema(code);
     loadPastTests();
 });
+function asKind(str) {
+    return str;
+}
 </script>
 
 <TestJobLoader
@@ -103,7 +105,7 @@ onMount(() => {
 			{editor}
 			{lang}
 			{websocketAlive}
-			{kind}
+			kind={asKind(kind)}
 		/>
 		{#if !noSyncFromGithub}
 			<div class="py-1">
@@ -126,37 +128,35 @@ onMount(() => {
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane size={60} minSize={10} class="!overflow-visible">
-			<div
-				class="pl-2 h-full !overflow-visible"
-				on:mouseleave={() => {
-					inferSchema(code)
-				}}
-			>
-				<Editor
-					bind:code
-					bind:websocketAlive
-					bind:this={editor}
-					on:change={(e) => {
-						inferSchema(e.detail)
-					}}
-					cmdEnterAction={async () => {
-						await inferSchema(code)
-						runTest()
-					}}
-					formatAction={async () => {
-						await inferSchema(code)
-						try {
-							localStorage.setItem(path ?? 'last_save', code)
-						} catch (e) {
-							console.error('Could not save last_save to local storage', e)
-						}
-						lastSave = code
-					}}
-					class="flex flex-1 h-full !overflow-visible"
-					lang={scriptLangToEditorLang(lang)}
-					automaticLayout={true}
-					{fixedOverflowWidgets}
-				/>
+			<div class="pl-2 h-full !overflow-visible">
+				{#key lang}
+					<Editor
+						{path}
+						bind:code
+						bind:websocketAlive
+						bind:this={editor}
+						on:change={(e) => {
+							inferSchema(e.detail)
+						}}
+						cmdEnterAction={async () => {
+							await inferSchema(code)
+							runTest()
+						}}
+						formatAction={async () => {
+							await inferSchema(code)
+							try {
+								localStorage.setItem(path ?? 'last_save', code)
+							} catch (e) {
+								console.error('Could not save last_save to local storage', e)
+							}
+							lastSave = code
+						}}
+						class="flex flex-1 h-full !overflow-visible"
+						lang={scriptLangToEditorLang(lang)}
+						automaticLayout={true}
+						{fixedOverflowWidgets}
+					/>
+				{/key}
 			</div>
 		</Pane>
 		<Pane size={40} minSize={10}>
@@ -166,9 +166,10 @@ onMount(() => {
 						<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"
+								class="mr-2 text-white"
 								height="20px"
 								width="20px"
+								spin="fast"
 							/>
 							Cancel
 						</Button>

package/components/ScriptEditor.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
+import Editor from './Editor.svelte';
 import type { Preview } from '../gen/models/Preview';
 declare const __propDef: {
     props: {
@@ -7,10 +8,12 @@ declare const __propDef: {
         code: string;
         path: string | undefined;
         lang: Preview.language;
-        kind?: 'script' | 'trigger' | 'approval' | undefined;
+        kind?: string | undefined;
         initialArgs?: Record<string, any> | undefined;
         fixedOverflowWidgets?: boolean | undefined;
         noSyncFromGithub?: boolean | undefined;
+        editor?: Editor | undefined;
+        inferSchema?: ((code: string, nlang?: 'go' | 'bash' | 'python3' | 'deno') => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -21,5 +24,6 @@ export type ScriptEditorProps = typeof __propDef.props;
 export type ScriptEditorEvents = typeof __propDef.events;
 export type ScriptEditorSlots = typeof __propDef.slots;
 export default class ScriptEditor extends SvelteComponentTyped<ScriptEditorProps, ScriptEditorEvents, ScriptEditorSlots> {
+    get inferSchema(): (code: string, nlang?: "deno" | "python3" | "go" | "bash" | undefined) => Promise<void>;
 }
 export {};