windmill-components 1.70.0 → 1.77.0

package/components/SchemaForm.svelte

@@ -2,28 +2,21 @@
 import { workspaceStore } from '../stores';
 import { allTrue } from '../utils';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { slide } from 'svelte/transition';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
-import InputTransformForm from './InputTransformForm.svelte';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
-export let inputTransform = false;
 export let schema;
 export let args = {};
 export let disabledArgs = [];
 export let disabled = false;
 export let editableSchema = false;
 export let isValid = true;
-export let extraLib = 'missing extraLib';
 export let autofocus = false;
-export let previousModuleId = undefined;
 export let shouldHideNoInputs = false;
 export let compact = false;
 export let password = undefined;
 export let noVariablePicker = false;
-export let filter = undefined;
-export let noDynamicToggle = false;
 export let flexWrap = false;
 export let noDelete = false;
 let clazz = '';
@@ -34,12 +27,13 @@ $: if (args == undefined || typeof args !== 'object') {
     args = {};
 }
 function removeExtraKey() {
+    const nargs = {};
     Object.keys(args ?? {}).forEach((key) => {
-        if (!keys.includes(key)) {
-            delete args[key];
-            delete inputCheck[key];
+        if (keys.includes(key)) {
+            nargs[key] = args[key];
         }
     });
+    args = nargs;
 }
 let pickForField;
 let itemPicker = undefined;
@@ -59,48 +53,60 @@ $: {
 <div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 gap-y-2' : ''}">
 	{#if keys.length > 0}
 		{#each keys as argName, i (argName)}
-			{#if !filter || filter.includes(argName)}
-				<div transition:slide|local>
-					{#if inputTransform}
-						<InputTransformForm
-							{previousModuleId}
-							bind:arg={args[argName]}
-							bind:schema
-							bind:argName
-							bind:inputCheck={inputCheck[argName]}
-							bind:extraLib
-							{variableEditor}
-							{itemPicker}
-							bind:pickForField
-							{noDynamicToggle}
-						/>
-					{:else if typeof args == 'object'}
-						<ArgInput
-							autofocus={i == 0 && autofocus}
-							label={argName}
-							bind:description={schema.properties[argName].description}
-							bind:value={args[argName]}
-							type={schema.properties[argName].type}
-							required={schema.required.includes(argName)}
-							bind:pattern={schema.properties[argName].pattern}
-							bind:valid={inputCheck[argName]}
-							defaultValue={schema.properties[argName].default}
-							bind:enum_={schema.properties[argName].enum}
-							bind:format={schema.properties[argName].format}
-							contentEncoding={schema.properties[argName].contentEncoding}
-							properties={schema.properties[argName].properties}
-							bind:itemsType={schema.properties[argName].items}
-							disabled={disabledArgs.includes(argName) || disabled}
-							{editableSchema}
-							{compact}
-							password={argName == password}
-							{variableEditor}
-							{itemPicker}
-							bind:pickForField
-							bind:extra={schema.properties[argName]}
-						/>
-					{:else}
-						Expected argument to be an object, got {JSON.stringify(args)} instead
+			{#if Object.keys(schema.properties ?? {}).includes(argName)}
+				<div>
+					{#if typeof args == 'object' && schema?.properties[argName]}
+						{#if editableSchema}
+							<ArgInput
+								autofocus={i == 0 && autofocus}
+								label={argName}
+								bind:description={schema.properties[argName].description}
+								bind:value={args[argName]}
+								type={schema.properties[argName].type}
+								required={schema.required.includes(argName)}
+								bind:pattern={schema.properties[argName].pattern}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								bind:enum_={schema.properties[argName].enum}
+								bind:format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								bind:itemsType={schema.properties[argName].items}
+								disabled={disabledArgs.includes(argName) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								bind:extra={schema.properties[argName]}
+							/>
+						{:else}
+							<ArgInput
+								autofocus={i == 0 && autofocus}
+								label={argName}
+								description={schema.properties[argName].description}
+								bind:value={args[argName]}
+								type={schema.properties[argName].type}
+								required={schema.required.includes(argName)}
+								pattern={schema.properties[argName].pattern}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								enum_={schema.properties[argName].enum}
+								format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								itemsType={schema.properties[argName].items}
+								disabled={disabledArgs.includes(argName) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								extra={schema.properties[argName]}
+							/>
+						{/if}
 					{/if}
 				</div>
 			{/if}
@@ -115,11 +121,7 @@ $: {
 		bind:this={itemPicker}
 		pickCallback={(path, _) => {
 			if (pickForField) {
-				if (inputTransform) {
-					args[pickForField].value = '$var:' + path
-				} else {
-					args[pickForField] = '$var:' + path
-				}
+				args[pickForField] = '$var:' + path
 			}
 		}}
 		itemName="Variable"

package/components/SchemaForm.svelte.d.ts

@@ -2,22 +2,17 @@ import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 declare const __propDef: {
     props: {
-        inputTransform?: boolean | undefined;
         schema: Schema;
         args?: Record<string, any> | undefined;
         disabledArgs?: string[] | undefined;
         disabled?: boolean | undefined;
         editableSchema?: boolean | undefined;
         isValid?: boolean | undefined;
-        extraLib?: string | undefined;
         autofocus?: boolean | undefined;
-        previousModuleId?: string | undefined;
         shouldHideNoInputs?: boolean | undefined;
         compact?: boolean | undefined;
         password?: string | undefined;
         noVariablePicker?: boolean | undefined;
-        filter?: string[] | undefined;
-        noDynamicToggle?: boolean | undefined;
         flexWrap?: boolean | undefined;
         noDelete?: boolean | undefined;
         class?: string | undefined;

package/components/ScriptBuilder.svelte

@@ -2,20 +2,20 @@
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { inferArgs } from '../infer';
-import { initialCode, isInitialCode } from '../script_helpers';
+import { initialCode } from '../script_helpers';
 import { userStore, workspaceStore } from '../stores';
 import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
 import Path from './Path.svelte';
-import RadioButton from './RadioButton.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
 import CenteredPage from './CenteredPage.svelte';
-import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { Button, Kbd } from './common';
-import { faChevronDown, faChevronUp, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { Button, ButtonPopup, ButtonPopupItem, Kbd } from './common';
+import { faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte';
 import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
+import Tooltip from './Tooltip.svelte';
+import SettingSection from './SettingSection.svelte';
 export let script;
 export let initialPath = '';
 export let template = 'script';
@@ -27,11 +27,32 @@ const langs = [
     ['Go', Script.language.GO],
     ['Bash', Script.language.BASH]
 ];
-let viewScriptKind = script.kind !== Script.kind.SCRIPT;
+const scriptKindOptions = [
+    {
+        value: Script.kind.SCRIPT,
+        title: 'Action'
+    },
+    {
+        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.'
+    },
+    {
+        value: Script.kind.APPROVAL,
+        title: 'Approval',
+        desc: 'Send notifications externally to ask for approval to continue a flow.'
+    },
+    {
+        value: Script.kind.FAILURE,
+        title: 'Error Handler',
+        desc: 'Handle errors in flows after all retry attempts have been exhausted.'
+    }
+];
 let pathError = '';
 let summaryC = undefined;
 let pathC = undefined;
-$: setQueryWithoutLoad($page.url, 'state', encodeState(script));
+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);
@@ -39,7 +60,8 @@ if (script.content == '') {
 function initContent(language, kind, template) {
     script.content = initialCode(language, kind, template);
 }
-async function editScript() {
+async function editScript(leave) {
+    loadingSave = true;
     try {
         $dirtyStore = false;
         localStorage.removeItem(script.path);
@@ -64,13 +86,19 @@ async function editScript() {
                 kind: script.kind
             }
         });
-        sendUserToast(`New script created at hash ${newHash}`);
-        history.replaceState(history.state, '', `/scripts/edit/${newHash}?step=2`);
-        goto(`/scripts/get/${newHash}?workspace_id=${$workspaceStore}`);
+        if (leave) {
+            history.replaceState(history.state, '', `/scripts/edit/${newHash}?step=2`);
+            goto(`/scripts/get/${newHash}?workspace_id=${$workspaceStore}`);
+        }
+        else {
+            await goto(`/scripts/edit/${newHash}?step=2`);
+            script.hash = newHash;
+        }
     }
     catch (error) {
-        sendUserToast(`Impossible to save the script: ${error.body}`, true);
+        sendUserToast(`Impossible to save the script: ${error.body || error.message}`, true);
     }
+    loadingSave = false;
 }
 async function changeStep(step) {
     if (step > 1) {
@@ -92,10 +120,7 @@ function onKeyDown(event) {
 }
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-
 {#if !$userStore?.operator}
-	<UnsavedConfirmationModal />
 	<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">
@@ -161,14 +186,24 @@ function onKeyDown(event) {
 					>
 						Next {#if step == 1}<Kbd>Enter</Kbd>{/if}
 					</Button>
-					<Button
+					<ButtonPopup
+						loading={loadingSave}
 						size="sm"
 						variant={step == 1 ? 'border' : 'contained'}
 						disabled={step === 1 && pathError !== ''}
-						btnClasses={step == 1 && initialPath == '' ? 'invisible' : ''}
 						startIcon={{ icon: faSave }}
-						on:click={editScript}>Save</Button
+						on:click={() => editScript(false)}
 					>
+						<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>
 				</div>
 			</div>
 		</div>
@@ -176,132 +211,111 @@ function onKeyDown(event) {
 		<!-- metadata -->
 		{#if step === 1}
 			<CenteredPage>
-				<h2 class="border-b pb-1 mt-8 mb-2">Path</h2>
-				<Path
-					bind:this={pathC}
-					bind:error={pathError}
-					bind:path={script.path}
-					{initialPath}
-					on:enter={() => changeStep(2)}
-					namePlaceholder="script"
-					kind="script"
-				/>
-				<h2 class="border-b pb-1 mt-12 mb-4">Summary</h2>
-				<input
-					type="text"
-					bind:this={summaryC}
-					bind:value={script.summary}
-					placeholder="Short summary to be displayed when listed"
-				/>
-
-				<h2 class="border-b pb-1 mt-12 mb-6">Language</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'}
+				<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}
 						<Button
 							size="sm"
 							variant="border"
-							color={isPicked ? 'blue' : 'dark'}
-							btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							color={template == 'pgsql' ? 'blue' : 'dark'}
+							btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							disabled={lockedLanguage}
 							on:click={() => {
-								script.language = lang
-								template = 'script'
-								initContent(lang, script.kind, template)
+								script.language = Script.language.DENO
+								template = 'pgsql'
+								initContent(script.language, script.kind, template)
 							}}
-							disabled={lockedLanguage}
 						>
-							<LanguageIcon {lang} /><span class="ml-2 py-4">{label}</span>
+							<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</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={() => {
-							script.language = Script.language.DENO
-							template = 'pgsql'
-							initContent(script.language, script.kind, template)
-						}}
-					>
-						<LanguageIcon lang="pgsql" /><span class="ml-2 py-4">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-4">MySQL</span>
-					</Button> -->
-				</div>
-				<div class="mt-16 mb-4">
-					<Button
-						color="light"
-						size="sm"
-						endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
-						on:click={() => (viewScriptKind = !viewScriptKind)}
-					>
-						Tag this script as having a specific purpose inside flows
-					</Button>
-				</div>
-				{#if viewScriptKind}
-					<div class="max-w-lg">
-						<RadioButton
-							label="Script Type"
-							options={[
-								['Action', Script.kind.SCRIPT],
-								[
-									{
-										title: 'Trigger',
-										desc: `First module of flows to trigger them based on watching changes external periodically using an internal state`
-									},
-									Script.kind.TRIGGER
-								],
-								[
-									{
-										title: 'Approval',
-										desc: `Send notification externally to ask for approval to continue a flow`
-									},
-									Script.kind.APPROVAL
-								],
-								[
-									{
-										title: 'Error Handler',
-										desc: `Handle errors for flows after all retries attempts have been exhausted`
-									},
-									Script.kind.FAILURE
-								]
-
-								// ['Command Handler', Script.kind.COMMAND]
-							]}
-							on:change={(e) => {
-								if (isInitialCode(script.content)) {
-									template = 'script'
-									initContent(script.language, e.detail, template)
-								}
+						<!-- <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)
 							}}
-							bind:value={script.kind}
-						/>
+						>
+							<LanguageIcon lang="mysql" /><span class="ml-2 py-2">MySQL</span>
+						</Button> -->
 					</div>
-				{/if}
-				<!-- <div class="ml-3">
-					<Toggle
-						bind:checked={script.is_template}
-						options={{ right: 'Save as a workspace template' }}
-					/>
-				</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
+				>
+					<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
@@ -321,3 +335,5 @@ function onKeyDown(event) {
 {:else}
 	Script Builder not available to operators
 {/if}
+
+<svelte:window on:keydown={onKeyDown} />

package/components/ScriptPicker.svelte

@@ -7,6 +7,7 @@ import RadioButton from './RadioButton.svelte';
 import { Button, Drawer, DrawerContent } from './common';
 import HighlightCode from './HighlightCode.svelte';
 import FlowPathViewer from './flows/content/FlowPathViewer.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 export let initialPath = undefined;
 export let scriptPath = undefined;
 export let allowFlow = false;
@@ -78,6 +79,8 @@ $: itemKind && $workspaceStore && loadItems();
 			bind:justValue={scriptPath}
 			{items}
 			placeholder="Pick a {itemKind}"
+			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+			containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 		/>
 	{/if}
 

package/components/SettingSection.svelte

@@ -0,0 +1,44 @@
+<script>import { ChevronDown } from 'lucide-svelte';
+import { slide } from 'svelte/transition';
+import Tooltip from './Tooltip.svelte';
+export let title;
+export let tooltip = '';
+export let element = 'h2';
+export let accordion = false;
+let showContent = !accordion;
+</script>
+
+<div class="border-b [&:has(button:hover)]:border-gray-400 duration-200 pb-1 mt-8 mb-2">
+	{#if accordion}
+		<button
+			class="flex w-full justify-start items-center"
+			on:click={() => (showContent = !showContent)}
+		>
+			<span class="rounded-full hover:bg-gray-100 focus:bg-gray-100 p-1 mr-1">
+				<ChevronDown size={22} class="rotate-0 duration-300 {showContent ? '!-rotate-180' : ''}" />
+			</span>
+			<svelte:element this={element}>
+				{title}
+				{#if tooltip}
+					<Tooltip scale={0.9} class="mb-0.5">
+						{tooltip}
+					</Tooltip>
+				{/if}
+			</svelte:element>
+		</button>
+	{:else}
+		<svelte:element this={element}>
+			{title}
+			{#if tooltip}
+				<Tooltip scale={0.9} class="mb-0.5">
+					{tooltip}
+				</Tooltip>
+			{/if}
+		</svelte:element>
+	{/if}
+</div>
+{#if showContent}
+	<div transition:slide={{ duration: 300 }}>
+		<slot />
+	</div>
+{/if}

package/components/SettingSection.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        tooltip?: string | undefined;
+        element?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        accordion?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SettingSectionProps = typeof __propDef.props;
+export type SettingSectionEvents = typeof __propDef.events;
+export type SettingSectionSlots = typeof __propDef.slots;
+export default class SettingSection extends SvelteComponentTyped<SettingSectionProps, SettingSectionEvents, SettingSectionSlots> {
+}
+export {};

package/components/SimpleEditor.svelte

@@ -92,6 +92,9 @@ function format() {
         }
     }
 }
+export function focus() {
+    editor?.focus();
+}
 let width = 0;
 async function loadMonaco() {
     model = meditor.createModel(code, lang, mUri.parse(uri));
@@ -175,7 +178,7 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={divEl} class="{$$props.class} editor" bind:clientWidth={width} />
+<div bind:this={divEl} class="{$$props.class ?? ''} editor" bind:clientWidth={width} />
 
 <style>
 	.editor {

package/components/SimpleEditor.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
+        focus?: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -32,5 +33,6 @@ export default class SimpleEditor extends SvelteComponentTyped<SimpleEditorProps
     get getCode(): () => string;
     get insertAtCursor(): (code: string) => void;
     get setCode(): (ncode: string) => void;
+    get focus(): () => void;
 }
 export {};