windmill-components 1.35.43 → 1.36.1

package/components/SchemaEditor.svelte

@@ -1,8 +1,7 @@
 <script>import { emptySchema, sendUserToast } from '../utils';
 import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'flowbite-svelte';
+import { Button } from './common';
 import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
 import SchemaEditorProperty from './SchemaEditorProperty.svelte';
 import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
@@ -130,13 +129,15 @@ function switchTab() {
 <div class="flex flex-col">
 	<div class="flex justify-between gap-x-2">
 		<Button
+			variant="contained"
+			color="blue"
+			size="md"
+			startIcon={{ icon: faPlus }}
 			on:click={() => {
 				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
 				schemaModal.openModal()
 			}}
-			class="blue-button"
 		>
-			<Icon data={faPlus} class="mr-1" />
 			Add argument
 		</Button>
 
@@ -187,16 +188,21 @@ function switchTab() {
 									<td class="justify-end flex">
 										<Button
 											color="red"
-											outline
-											class="mr-2"
-											size="xs"
+											variant="border"
+											btnClasses="mr-2"
+											size="sm"
+											startIcon={{ icon: faTrash }}
 											on:click={() => handleDeleteArgument(name)}
 										>
-											<Icon data={faTrash} class="mr-2" scale={0.8} />
 											Delete
 										</Button>
-										<Button color="alternative" size="xs" on:click={() => startEditArgument(name)}>
-											<Icon data={faPen} class="mr-2" scale={0.8} />
+										<Button
+											color="light"
+											variant="border"
+											size="sm"
+											startIcon={{ icon: faPen }}
+											on:click={() => startEditArgument(name)}
+										>
 											Edit
 										</Button>
 									</td>

package/components/SchemaForm.svelte

@@ -8,6 +8,8 @@ export let editableSchema = false;
 export let isValid = true;
 export let extraLib = 'missing extraLib';
 export let importPath = undefined;
+let clazz = '';
+export { clazz as class };
 let inputCheck = {};
 $: isValid = allTrue(inputCheck) ?? false;
 $: if (args == undefined) {
@@ -24,7 +26,7 @@ function removeExtraKey() {
 $: schema?.properties && removeExtraKey();
 </script>
 
-<div class="w-full">
+<div class="w-full {clazz}">
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
 		{#each Object.keys(schema?.properties ?? {}) as argName}
 			{#if inputTransform}

package/components/SchemaForm.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         isValid?: boolean | undefined;
         extraLib?: string | undefined;
         importPath?: string | undefined;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/SchemaModal.svelte

@@ -26,6 +26,7 @@ import ArgInput from './ArgInput.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Required from './Required.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
+import { Button } from './common';
 export let property = DEFAULT_PROPERTY;
 export let error = '';
 export let editing = false;
@@ -80,7 +81,7 @@ else {
 						: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
 				/>
 			</label>
-			<div class="mb-2 text-purple-500 text-2xs">{error}</div>
+			<div class="mb-2 text-red-600 text-2xs">{error}</div>
 
 			<label class="mb-2 font-semibold text-gray-700">
 				Description
@@ -95,22 +96,32 @@ else {
 			<h3 class="font-semibold text-gray-700">Type<Required required={true} /></h3>
 			<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
 				{#each ARG_TYPES as argType}
-					<button
-						class={argType == property.selectedType ? 'item-button-selected' : 'item-button'}
+					{@const isSelected = argType == property.selectedType}
+					<Button
+						variant="border"
+						color={isSelected ? 'blue' : 'dark'}
+						btnClasses={isSelected ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 						on:click={() => {
 							property.selectedType = argType
 							property.format = undefined
 							property.contentEncoding = undefined
 							property.enum_ = undefined
 							property.pattern = undefined
-						}}>{argType}</button
+						}}
 					>
+						{argType}
+					</Button>
 				{/each}
-				<button
-					class={!property.selectedType ? 'item-button-selected' : 'item-button'}
+				<Button
+					variant="border"
+					color={!property.selectedType ? 'blue' : 'dark'}
+					btnClasses={!property.selectedType ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 					on:click={() => {
 						property.selectedType = undefined
-					}}>any</button
+					}}
+				>
+					Any
+				</Button>
 				>
 			</div>
 			<Switch

package/components/ScriptBuilder.svelte

@@ -14,6 +14,9 @@ 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';
 export let script;
 export let initialPath = '';
 export let template = 'script';
@@ -28,6 +31,7 @@ function initContent(language, kind, template) {
 }
 async function editScript() {
     try {
+        $dirtyStore = false;
         if (!script.schema) {
             await inferArgs(script.language, script.content, script.schema);
         }
@@ -60,6 +64,7 @@ async function changeStep(step) {
 }
 </script>
 
+<UnsavedConfirmationModal />
 <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">
@@ -93,37 +98,37 @@ async function changeStep(step) {
 			</div>
 			<div class="flex flex-row-reverse ml-2">
 				{#if step != 3}
-					<button
-						disabled={step == 1 && pathError != ''}
-						class="default-button px-6 max-h-8"
-						on:click={() => {
-							changeStep(step + 1)
-						}}
+					<Button
+						size="sm"
+						disabled={step === 1 && pathError !== ''}
+						on:click={() => changeStep(step + 1)}
 					>
 						Next
-					</button>
+					</Button>
 				{:else}
-					<button class="default-button px-6 self-end" on:click={editScript}>Save</button>
+					<Button size="sm" on:click={editScript}>Save</Button>
 				{/if}
 				{#if step > 1}
-					<button
-						class="default-button-secondary px-6 max-h-8 mr-2"
-						on:click={async () => {
-							changeStep(step - 1)
-						}}
+					<Button
+						variant="border"
+						size="sm"
+						btnClasses="mr-2"
+						on:click={() => changeStep(step - 1)}
 					>
 						Back
-					</button>
+					</Button>
 				{/if}
 				{#if step == 2}
-					<button
-						class="default-button-secondary px-6 max-h-8 mr-2"
+					<Button
+						variant="border"
+						size="sm"
+						btnClasses="mr-2"
 						on:click={async () => {
 							editScript()
 						}}
 					>
 						Save (commit)
-					</button>
+					</Button>
 				{/if}
 			</div>
 		</div>

package/components/ScriptEditor.svelte

@@ -13,6 +13,7 @@ import EditorBar from './EditorBar.svelte';
 import Button from './common/button/Button.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
 import { onMount } from 'svelte';
+import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 // Exported
 export let schema = emptySchema();
 export let code;
@@ -133,7 +134,7 @@ onMount(() => {
 		</left>
 		<right slot="right">
 			<div class="h-full">
-				<VSplitPane topPanelSize="50%" downPanelSize="50%">
+				<VSplitPane topPanelSize="30%" downPanelSize="70%">
 					<top slot="top">
 						<div class="h-full overflow-auto">
 							<div class="p-4">

package/components/ScriptPicker.svelte

@@ -1,5 +1,4 @@
 <script>import { ScriptService, FlowService, Script } from '../gen';
-import Icon from 'svelte-awesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
 import { createEventDispatcher } from 'svelte';
@@ -10,6 +9,7 @@ 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;
@@ -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/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/SimpleEditor.svelte

@@ -73,6 +73,7 @@ function format() {
         editor.getAction('editor.action.formatDocument').run();
         if (formatAction) {
             formatAction();
+            code = getCode();
         }
     }
 }
@@ -80,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);
@@ -99,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

@@ -48,13 +48,17 @@ export async function cancelJob() {
 export async function watchJob(testId) {
     console.log('watch jobs');
     job = undefined;
-    await loadTestJob(testId);
     syncIteration = 0;
-    intervalId = setInterval(() => {
-        syncer(testId);
-    }, 500);
+    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({
@@ -73,16 +77,20 @@ async function loadTestJob(id) {
         else {
             job = await JobService.getJob({ workspace: $workspaceStore, id });
         }
-        if (job?.type === 'CompletedJob' && isLoading) {
+        if (job?.type === 'CompletedJob') {
             //only CompletedJob has success property
-            dispatch('done', job);
+            isCompleted = true;
             clearInterval(intervalId);
-            isLoading = false;
+            if (isLoading) {
+                dispatch('done', job);
+                isLoading = false;
+            }
         }
     }
     catch (err) {
         console.error(err);
     }
+    return isCompleted;
 }
 function syncer(id) {
     if (syncIteration == ITERATIONS_BEFORE_SLOW_REFRESH) {

package/components/Tooltip.svelte

@@ -58,7 +58,7 @@ 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;

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

@@ -1,12 +1,17 @@
 <script>export let applyPageWidth = false;
-let classes = 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8';
+export let stickToTop = false;
+$: wide = applyPageWidth ? 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8 ' : '';
+let scrollY;
 </script>
 
-<div class={'bg-white py-3 ' + $$props.class}>
-	<div
-		class={'w-full flex flex-wrap justify-between items-center gap-4 ' +
-			(applyPageWidth ? classes : '')}
-	>
+<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" />