windmill-components 1.35.42 → 1.36.0

package/components/ScriptPicker.svelte

@@ -1,5 +1,4 @@
-<script>import { ScriptService, FlowService } from '../gen';
-import Icon from 'svelte-awesome';
+<script>import { ScriptService, FlowService, Script } from '../gen';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
 import { createEventDispatcher } from 'svelte';
@@ -10,11 +9,12 @@ import typescript from 'svelte-highlight/languages/typescript';
 import python from 'svelte-highlight/languages/python';
 import { getScriptByPath } from '../utils';
 import RadioButton from './RadioButton.svelte';
+import { Button } from './common';
 export let scriptPath = undefined;
 export let allowFlow = false;
 export let allowHub = false;
 export let itemKind = allowHub ? 'hub' : 'script';
-export let isTrigger = undefined;
+export let kind = Script.kind.SCRIPT;
 let items = [];
 let itemPicker;
 let modalViewer;
@@ -29,7 +29,7 @@ async function loadItems() {
         items = await FlowService.listFlows({ workspace: $workspaceStore });
     }
     else if (itemKind == 'script') {
-        items = await ScriptService.listScripts({ workspace: $workspaceStore, isTrigger });
+        items = await ScriptService.listScripts({ workspace: $workspaceStore, kind });
     }
     else {
         items = $hubScripts ?? [];
@@ -56,27 +56,37 @@ $: {
 	}}
 />
 
-<div class="flex flex-row items-center space-x-5">
-	<div class="w-80">
+<div class="flex flex-row flex-wrap items-center gap-4">
+	<div class="w-80 -mb-2">
 		{#if options.length > 1}
 			<RadioButton bind:value={itemKind} {options} />
 		{/if}
 	</div>
 
-	<input type="text" value={scriptPath ?? 'No path chosen yet'} disabled />
-	<button class="default-button text-gray-100" on:click={() => itemPicker.openModal()}
-		>Pick a {itemKind} path<Icon class="mx-4" data={faSearch} /></button
-	>
-	{#if scriptPath != undefined && scriptPath != ''}
-		<button
-			class="text-xs text-blue-500"
+	<div class="flex items-center grow gap-4">
+		<input type="text" value={scriptPath ?? 'No path chosen yet'} disabled />
+		<Button
+			size="sm"
+			endIcon={{ icon: faSearch }}
+			btnClasses="mx-auto whitespace-nowrap"
+			on:click={() => itemPicker.openModal()}
+		>
+			Pick a {itemKind} path
+		</Button>
+	</div>
+	{#if scriptPath !== undefined && scriptPath !== ''}
+		<Button
+			color="light"
+			size="xs"
 			on:click={async () => {
 				const { language, content } = await getScriptByPath(scriptPath ?? '')
 				code = content
 				lang = language
 				modalViewer.openModal()
-			}}>show code</button
+			}}
 		>
+			Show code
+		</Button>
 	{/if}
 </div>
 

package/components/ScriptPicker.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import { Script } from '../gen';
 declare const __propDef: {
     props: {
         scriptPath?: string | undefined;
         allowFlow?: boolean | undefined;
         allowHub?: boolean | undefined;
         itemKind?: "flow" | "script" | "hub" | undefined;
-        isTrigger?: boolean | undefined;
+        kind?: Script.kind | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/ScriptSchema.svelte

@@ -9,7 +9,6 @@ import SvelteMarkdown from 'svelte-markdown';
 export let schema;
 export let summary;
 export let description;
-export let synchronizedHeader = true;
 export function setSchema(newSchema) {
     schema = newSchema;
 }
@@ -47,16 +46,14 @@ export function setSchema(newSchema) {
 						</div>
 					</div>
 				</div>
-				{#if synchronizedHeader}
-					<div class="bg-blue-100 border-l-4 border-blue-600 text-blue-700 p-4 m-4" role="alert">
-						<p class="font-bold">Synchronized with main signature</p>
-						<p>
-							Argument names, being required or not, and default values are derived from the main
-							signature of step 2 and cannot be edited directly. Change the main signature to edit
-							them.
-						</p>
-					</div>
-				{/if}
+				<div class="bg-blue-100 border-l-4 border-blue-600 text-blue-700 p-4 m-4" role="alert">
+					<p class="font-bold">Synchronized with main signature</p>
+					<p>
+						Argument names, being required or not, and default values are derived from the main
+						signature of step 2 and cannot be edited directly. Change the main signature to edit
+						them.
+					</p>
+				</div>
 				<SchemaForm {schema} editableSchema={true} />
 			</TabContent>
 			<TabContent value="jsonschema">

package/components/ScriptSchema.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         schema: Schema;
         summary: string;
         description: string | undefined;
-        synchronizedHeader?: boolean | undefined;
         setSchema?: ((newSchema: Schema) => void) | undefined;
     };
     events: {

package/components/ShareModal.svelte

@@ -6,6 +6,7 @@ import { GroupService, UserService } from '../gen';
 import { createEventDispatcher } from 'svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
 import { workspaceStore } from '../stores';
+import { Button } from './common';
 const dispatch = createEventDispatcher();
 export let kind;
 export let path = '';
@@ -101,10 +102,9 @@ async function addAcl(owner, write) {
 				<span class="text-sm text-gray-700">Editor</span>
 				<input class="block mt-4" type="checkbox" bind:checked={write} />
 			</label>
-			<button
-				class="text-xs default-button max-h-6 place-self-end ml-2"
-				on:click={() => addAcl(newOwner, write)}>Add permission</button
-			>
+			<Button size="sm" btnClasses="ml-2" on:click={() => addAcl(newOwner, write)}>
+				Add permission
+			</Button>
 		</div>
 		<TableCustom>
 			<tr slot="header-row">
@@ -118,8 +118,8 @@ async function addAcl(owner, write) {
 						<td>{owner}</td>
 						<td>{write}</td>
 						<td
-							><button class="default-button-secondary" on:click={() => deleteAcl(owner)}
-								>Delete</button
+							><Button variant="border" color="blue" size="sm" on:click={() => deleteAcl(owner)}
+								>Delete</Button
 							></td
 						>
 					</tr>

package/components/SharedBadge.svelte

@@ -1,7 +1,6 @@
 <script>import { userStore } from '../stores';
 import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
-import Badge from './Badge.svelte';
+import Badge from './common/badge/Badge.svelte';
 export let extraPerms = {};
 export let canWrite;
 let kind = undefined;
@@ -47,15 +46,8 @@ $: {
 }
 </script>
 
-{#if kind == 'read' || kind == 'write'}
-	<span class="mr-1 align-center">
-		{#if kind == 'read'}
-			<Badge tooltip={reason}>
-				<Icon data={faPeopleGroup} scale={0.7} />
-				read</Badge
-			>
-		{:else if kind == 'write'}
-			<Badge tooltip={reason}><Icon data={faPeopleGroup} scale={0.7} /></Badge>
-		{/if}
-	</span>
+{#if kind === 'read' || kind === 'write'}
+	<Badge icon={{ data: faPeopleGroup }} capitalize color="blue">
+		{kind}
+	</Badge>
 {/if}

package/components/SimpleEditor.svelte

@@ -15,6 +15,7 @@ monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
 <script>import { browser, dev } from '$app/env';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
@@ -42,6 +43,9 @@ if (browser) {
                 if (label === 'json') {
                     return new jsonWorker();
                 }
+                else if (label === 'typescript' || label === 'javascript') {
+                    return new tsWorker();
+                }
                 else {
                     return new editorWorker();
                 }
@@ -69,6 +73,7 @@ function format() {
         editor.getAction('editor.action.formatDocument').run();
         if (formatAction) {
             formatAction();
+            code = getCode();
         }
     }
 }
@@ -76,16 +81,6 @@ async function loadMonaco() {
     const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
     model.updateOptions(updateOptions);
     editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
-    if (shouldBindKey) {
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
-            format();
-        });
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
-            if (cmdEnterAction) {
-                cmdEnterAction();
-            }
-        });
-    }
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
@@ -95,9 +90,18 @@ async function loadMonaco() {
         dispatch('change');
     });
     editor.onDidFocusEditorText(() => {
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+            code = getCode();
+            shouldBindKey && format && format();
+        });
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+            code = getCode();
+            shouldBindKey && cmdEnterAction && cmdEnterAction();
+        });
         dispatch('focus');
     });
     editor.onDidBlurEditorText(() => {
+        code = getCode();
         dispatch('blur');
     });
     if (lang == 'javascript' && extraLib != '' && extraLibPath != '') {

package/components/StringTypeNarrowing.svelte

@@ -1,5 +1,6 @@
 <script>import RadioButton from './RadioButton.svelte';
 import ResourceTypePicker from './ResourceTypePicker.svelte';
+import { Button } from './common';
 export let pattern;
 export let enum_;
 export let format;
@@ -23,6 +24,15 @@ $: format =
     kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined;
 $: pattern = patternStr == '' ? undefined : patternStr;
 $: contentEncoding = kind == 'base64' ? 'base64' : undefined;
+function add() {
+    enum_ = enum_ ? enum_.concat('') : [''];
+}
+function remove(item) {
+    enum_ = (enum_ || []).filter((el) => el !== item);
+    if (enum_.length == 0) {
+        enum_ = undefined;
+    }
+}
 </script>
 
 <RadioButton
@@ -49,47 +59,31 @@ $: contentEncoding = kind == 'base64' ? 'base64' : undefined;
 				placeholder="^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
 				bind:value={patternStr}
 			/>
-			<button
-				class="default-button-secondary mx-2 mb-1"
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				btnClasses="mx-2 mb-1"
 				on:click={() => {
 					patternStr = ''
-				}}>clear</button
+				}}>clear</Button
 			>
 		</div>
 	</label>
 {:else if kind == 'enum'}
-	<label for="input" class="mb-2 text-gray-700 text-xs"
-		>Enums
-		{#each enum_ ?? [] as e}
+	<label for="input" class="mb-2 text-gray-700 text-xs">
+		Enums
+		{#each enum_ || [] as e}
 			<div class="flex flex-row max-w-md">
 				<input id="input" type="text" bind:value={e} />
-				<button
-					class="default-button mx-6"
-					on:click={() => {
-						enum_ = (enum_ ?? []).filter((el) => el != e)
-						if (enum_.length == 0) {
-							enum_ = undefined
-						}
-					}}>-</button
-				>
+				<Button size="sm" btnClasses="ml-6" on:click={() => remove(e)}>-</Button>
 			</div>
 		{/each}
 		<div class="flex flex-row my-1">
-			<button
-				class="default-button"
-				on:click={() => {
-					if (enum_ == undefined) {
-						enum_ = []
-					}
-					enum_ = enum_.concat('')
-				}}>+</button
-			>
-			<button
-				class="default-button-secondary ml-2"
-				on:click={() => {
-					enum_ = undefined
-				}}>clear</button
-			>
+			<Button size="sm" on:click={add}>+</Button>
+			<Button variant="border" size="sm" btnClasses="ml-2" on:click={() => (enum_ = undefined)}>
+				Clear
+			</Button>
 		</div>
 	</label>
 {:else if kind == 'resource'}

package/components/TestJobLoader.svelte

@@ -0,0 +1,106 @@
+<script>import { Job, JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { onDestroy } from 'svelte';
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+export let isLoading = false;
+export let job = undefined;
+let intervalId;
+let syncIteration = 0;
+let ITERATIONS_BEFORE_SLOW_REFRESH = 100;
+export async function runPreview(path, code, lang, args) {
+    try {
+        if (intervalId) {
+            clearInterval(intervalId);
+        }
+        if (isLoading && job) {
+            JobService.cancelQueuedJob({
+                workspace: $workspaceStore,
+                id: job.id,
+                requestBody: {}
+            });
+        }
+        isLoading = true;
+        const testId = await JobService.runScriptPreview({
+            workspace: $workspaceStore,
+            requestBody: {
+                path,
+                content: code,
+                args,
+                language: lang
+            }
+        });
+        await watchJob(testId);
+    }
+    catch (err) {
+        isLoading = false;
+        throw err;
+    }
+}
+export async function cancelJob() {
+    await JobService.cancelQueuedJob({
+        workspace: $workspaceStore ?? '',
+        id: job?.id ?? '',
+        requestBody: {}
+    });
+    console.log('cancelled');
+}
+export async function watchJob(testId) {
+    console.log('watch jobs');
+    job = undefined;
+    syncIteration = 0;
+    const isCompleted = await loadTestJob(testId);
+    if (!isCompleted) {
+        isLoading = true;
+        intervalId = setInterval(() => {
+            syncer(testId);
+        }, 500);
+    }
+}
+async function loadTestJob(id) {
+    let isCompleted = false;
+    try {
+        if (job && `running` in job) {
+            let previewJobUpdates = await JobService.getJobUpdates({
+                workspace: $workspaceStore,
+                id,
+                running: job.running,
+                logOffset: job.logs?.length ?? 0
+            });
+            if (previewJobUpdates.new_logs) {
+                job.logs = (job.logs ?? '').concat(previewJobUpdates.new_logs);
+            }
+            if ((previewJobUpdates.running ?? false) || (previewJobUpdates.completed ?? false)) {
+                job = await JobService.getJob({ workspace: $workspaceStore, id });
+            }
+        }
+        else {
+            job = await JobService.getJob({ workspace: $workspaceStore, id });
+        }
+        if (job?.type === 'CompletedJob') {
+            //only CompletedJob has success property
+            isCompleted = true;
+            clearInterval(intervalId);
+            if (isLoading) {
+                dispatch('done', job);
+                isLoading = false;
+            }
+        }
+    }
+    catch (err) {
+        console.error(err);
+    }
+    return isCompleted;
+}
+function syncer(id) {
+    if (syncIteration == ITERATIONS_BEFORE_SLOW_REFRESH) {
+        intervalId && clearInterval(intervalId);
+        intervalId = setInterval(() => syncer(id), 2000);
+    }
+    syncIteration++;
+    loadTestJob(id);
+}
+onDestroy(() => {
+    intervalId && clearInterval(intervalId);
+});
+</script>

package/components/TestJobLoader.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import { Job } from '../gen';
+declare const __propDef: {
+    props: {
+        isLoading?: boolean | undefined;
+        job?: Job | undefined;
+        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3', args: Record<string, any>) => Promise<void>) | undefined;
+        cancelJob?: (() => Promise<void>) | undefined;
+        watchJob?: ((testId: string) => Promise<void>) | undefined;
+    };
+    events: {
+        done: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TestJobLoaderProps = typeof __propDef.props;
+export declare type TestJobLoaderEvents = typeof __propDef.events;
+export declare type TestJobLoaderSlots = typeof __propDef.slots;
+export default class TestJobLoader extends SvelteComponentTyped<TestJobLoaderProps, TestJobLoaderEvents, TestJobLoaderSlots> {
+    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go", args: Record<string, any>) => Promise<void>;
+    get cancelJob(): () => Promise<void>;
+    get watchJob(): (testId: string) => Promise<void>;
+}
+export {};

package/components/Tooltip.svelte

@@ -49,7 +49,6 @@ function close() {
 		class="w-96 text-left"
 	>
 		<slot />
-		<div id="arrow" data-popper-arrow />
 	</div>
 {/if}
 
@@ -59,8 +58,10 @@ function close() {
     white-space: normal;
     border-radius: 0.75rem;
     --tw-bg-opacity: 1;
-    background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
     padding: 1rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
     font-weight: 400;
     --tw-text-opacity: 1;
     color: rgb(209 213 219 / var(--tw-text-opacity))

package/components/VariableEditor.svelte

@@ -8,6 +8,7 @@ import { createEventDispatcher } from 'svelte';
 import { workspaceStore } from '../stores';
 import Required from './Required.svelte';
 import Tooltip from './Tooltip.svelte';
+import { Button } from './common';
 const dispatch = createEventDispatcher();
 let path = '';
 let variable = {
@@ -47,7 +48,7 @@ export async function editVariable(path) {
     modal.openModal();
 }
 const MAX_VARIABLE_LENGTH = 3000;
-$: valid = variable.value.length < MAX_VARIABLE_LENGTH;
+$: valid = variable.value.length <= MAX_VARIABLE_LENGTH;
 async function createVariable() {
     await VariableService.createVariable({
         workspace: $workspaceStore,
@@ -101,7 +102,8 @@ async function updateVariable() {
 	<div slot="content">
 		<div class="text-gray-700 text-2xs mb-6">
 			Variables have a globally unique name represented by their path. When passed to scripts, <pre
-				class="inline text-red-700 bg-gray-50 rounded round-sm">/</pre>
+				class="inline text-red-700 bg-gray-50 rounded round-sm">/</pre
+			>
 			are converted to
 			<pre class="inline text-red-700 bg-gray-50 rounded round-sm">_</pre>
 		</div>
@@ -139,12 +141,12 @@ async function updateVariable() {
 					<Password
 						bind:password={variable.value}
 						placeholder={'******** (only fill to update value)'}
-						label={'variable (max 3000 characters)'}
+						label={`Secret value (${variable.value.length}/3000 characters)`}
 					/>
 				</div>
 			{:else}
 				<div>
-					<span>Variable (max 3000 characters)</span>
+					<span>Variable value ({variable.value.length}/3000 characters)</span>
 					<AutosizedTextarea bind:value={variable.value} minRows={5} />
 				</div>
 			{/if}
@@ -155,24 +157,13 @@ async function updateVariable() {
 			</div>
 		</div>
 	</div>
-
-	<button
-		slot="submission"
-		class={valid ? 'default-button' : 'default-button-disabled'}
-		type="button"
-		on:click={() => {
-			if (edit) {
-				updateVariable()
-			} else {
-				createVariable()
-			}
-		}}
-		disabled={!valid || pathError != ''}
-	>
-		{#if edit}
-			Save
-		{:else}
-			Add a variable
-		{/if}
-	</button>
+	<div slot="submission">
+		<Button
+			size="sm"
+			on:click={() => (edit ? updateVariable() : createVariable())}
+			disabled={!valid || pathError != ''}
+		>
+			{edit ? 'Save' : 'Add a variable'}
+		</Button>
+	</div>
 </Modal>

package/components/common/actionRow/ActionRow.svelte

@@ -0,0 +1,31 @@
+<script>export let applyPageWidth = false;
+export let stickToTop = false;
+$: wide = applyPageWidth ? 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8 ' : '';
+let scrollY;
+</script>
+
+<svelte:window bind:scrollY />
+
+<div
+	class={'bg-white py-3 ' +
+		(stickToTop ? 'sticky top-0 ' + (scrollY >= 30 ? 'border-b ' : '') : '') +
+		$$props.class}
+>
+	<div class={'w-full flex flex-wrap justify-between items-center gap-4 ' + wide}>
+		<div class="flex flex-wrap items-center gap-2">
+			{#if $$slots.left}
+				<slot name="left" />
+			{/if}
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			{#if $$slots.middle}
+				<slot name="middle" />
+			{/if}
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			{#if $$slots.right}
+				<slot name="right" />
+			{/if}
+		</div>
+	</div>
+</div>

package/components/common/actionRow/ActionRow.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        applyPageWidth?: boolean | undefined;
+        stickToTop?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        left: {};
+        middle: {};
+        right: {};
+    };
+};
+export declare type ActionRowProps = typeof __propDef.props;
+export declare type ActionRowEvents = typeof __propDef.events;
+export declare type ActionRowSlots = typeof __propDef.slots;
+export default class ActionRow extends SvelteComponentTyped<ActionRowProps, ActionRowEvents, ActionRowSlots> {
+}
+export {};