windmill-components 1.394.7 → 1.405.0

package/package/components/LightweightArgInput.svelte

@@ -30,6 +30,9 @@ export let contentEncoding = undefined;
 export let type = undefined;
 export let oneOf = undefined;
 export let required = false;
+//todo
+// export let nullable = false
+export let disabled = false;
 export let pattern = undefined;
 export let valid = required ? false : true;
 export let enum_ = undefined;
@@ -229,7 +232,7 @@ function addItemByItemsType() {
 			<div class="flex space-x-1">
 				{#if inputCat == 'number'}
 					{#if extra['min'] != undefined && extra['max'] != undefined}
-						<Range bind:value min={extra['min']} max={extra['max']} {defaultValue} />
+						<Range bind:value min={extra['min']} max={extra['max']} {defaultValue} {disabled} />
 					{:else if extra?.currency}
 						<CurrencyInput
 							inputClasses={{
@@ -241,6 +244,7 @@ function addItemByItemsType() {
 							bind:value
 							currency={extra?.currency}
 							locale={extra?.currencyLocale ?? 'en-US'}
+							{disabled}
 						/>
 					{:else}
 						<input
@@ -255,6 +259,7 @@ function addItemByItemsType() {
 							bind:value
 							min={extra['min']}
 							max={extra['max']}
+							{disabled}
 						/>
 					{/if}
 				{:else if inputCat == 'boolean'}
@@ -266,6 +271,7 @@ function addItemByItemsType() {
 							? ''
 							: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}
 						bind:checked={value}
+						{disabled}
 					/>
 					{#if type == 'boolean' && value == undefined}
 						<span>&nbsp; Not set</span>
@@ -279,6 +285,7 @@ function addItemByItemsType() {
 									bind:selected={value}
 									options={itemsType?.multiselect ?? []}
 									selectedOptionsDraggable={true}
+									{disabled}
 								/>
 							</div>
 						{:else if Array.isArray(itemsType?.enum) && Array.isArray(value)}
@@ -288,6 +295,7 @@ function addItemByItemsType() {
 									bind:selected={value}
 									options={itemsType?.enum ?? []}
 									selectedOptionsDraggable={true}
+									{disabled}
 								/>
 							</div>
 						{:else if Array.isArray(enum_) && Array.isArray(value)}
@@ -297,6 +305,7 @@ function addItemByItemsType() {
 									bind:selected={value}
 									options={enum_ ?? []}
 									selectedOptionsDraggable={true}
+									{disabled}
 								/>
 							</div>
 						{:else}
@@ -305,13 +314,14 @@ function addItemByItemsType() {
 									{#each value ?? [] as v, i}
 										<div class="flex flex-row max-w-md mt-1 w-full">
 											{#if itemsType?.type == 'number'}
-												<input type="number" bind:value={v} />
+												<input type="number" bind:value={v} {disabled} />
 											{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
 												<input
 													type="file"
 													class="my-6"
 													on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
 													multiple={false}
+													{disabled}
 												/>
 											{:else if Array.isArray(itemsType?.enum)}
 												<select
@@ -320,6 +330,7 @@ function addItemByItemsType() {
 													}}
 													class="px-6"
 													bind:value={v}
+													{disabled}
 												>
 													{#each itemsType?.enum ?? [] as e}
 														<option>{e}</option>
@@ -329,16 +340,18 @@ function addItemByItemsType() {
 												<LightweightResourcePicker
 													bind:value={v}
 													resourceType={itemsType?.resourceType}
+													{disabled}
 												/>
 											{:else if itemsType?.type === 'object' && itemsType?.properties}
 												<div class="p-8 border rounded-md w-full">
 													<LightweightSchemaForm
 														schema={getSchemaFromProperties(itemsType?.properties)}
 														bind:args={v}
+														{disabled}
 													/>
 												</div>
 											{:else}
-												<input type="text" bind:value={v} />
+												<input type="text" bind:value={v} {disabled} />
 											{/if}
 											<button
 												transition:fade|local={{ duration: 100 }}
@@ -350,6 +363,7 @@ function addItemByItemsType() {
 														value = undefined
 													}
 												}}
+												{disabled}
 											>
 												<X size={14} />
 											</button>
@@ -369,6 +383,7 @@ function addItemByItemsType() {
 										addItemByItemsType()
 									}}
 									startIcon={{ icon: Plus }}
+									{disabled}
 								>
 									Add
 								</Button>
@@ -388,7 +403,8 @@ function addItemByItemsType() {
 							randomFileKey={true}
 							on:addition={(evt) => {
 								value = {
-									s3: evt.detail?.path ?? ''
+									s3: evt.detail?.path ?? '',
+									filename: evt.detail?.filename ?? ''
 								}
 							}}
 							on:deletion={(evt) => {
@@ -400,13 +416,13 @@ function addItemByItemsType() {
 						/>
 					</div>
 				{:else if inputCat == 'resource-object'}
-					<LightweightObjectResourceInput {format} bind:value />
+					<LightweightObjectResourceInput {format} bind:value {disabled} />
 				{:else if inputCat == 'object' && oneOf && oneOf.length >= 2}
 					<div class="flex flex-col gap-2 w-full">
 						{#if oneOf && oneOf.length >= 2}
-							<ToggleButtonGroup bind:selected={oneOfSelected}>
+							<ToggleButtonGroup bind:selected={oneOfSelected} {disabled}>
 								{#each oneOf as obj}
-									<ToggleButton value={obj.title} label={obj.title} />
+									<ToggleButton value={obj.title} label={obj.title} {disabled} />
 								{/each}
 							</ToggleButtonGroup>
 
@@ -425,6 +441,7 @@ function addItemByItemsType() {
 												type: 'object'
 											}}
 											bind:args={value}
+											{disabled}
 										/>
 									</div>
 								{/if}
@@ -442,6 +459,7 @@ function addItemByItemsType() {
 									type: 'object'
 								}}
 								bind:args={value}
+								{disabled}
 							/>
 						</div>
 					{:else}
@@ -457,6 +475,7 @@ function addItemByItemsType() {
 								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}"
 							placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
 							bind:value={rawValue}
+							{disabled}
 						/>
 					{/if}
 				{:else if inputCat == 'enum'}
@@ -466,6 +485,7 @@ function addItemByItemsType() {
 						}}
 						class="px-6"
 						bind:value
+						{disabled}
 					>
 						{#each enum_ ?? [] as e}
 							<option value={e}>{extra?.['enumLabels']?.[e] ?? e}</option>
@@ -474,9 +494,9 @@ function addItemByItemsType() {
 				{:else if inputCat == 'date'}
 					{#key defaultChange}
 						{#if format === 'date'}
-							<DateInput bind:value dateFormat={extra['dateFormat']} />
+							<DateInput bind:value dateFormat={extra['dateFormat']} {disabled} />
 						{:else}
-							<DateTimeInput useDropdown bind:value />
+							<DateTimeInput useDropdown bind:value {disabled} />
 						{/if}
 					{/key}
 				{:else if inputCat == 'base64'}
@@ -485,6 +505,7 @@ function addItemByItemsType() {
 							type="file"
 							on:change={(x) => fileChanged(x, (val) => (value = val))}
 							multiple={false}
+							{disabled}
 						/>
 						{#if value?.length}
 							<div class="text-2xs text-tertiary mt-1"
@@ -501,6 +522,7 @@ function addItemByItemsType() {
 							resourceType={format.split('-').length > 1
 								? format.substring('resource-'.length)
 								: undefined}
+							{disabled}
 						/>
 					</div>
 				{:else if inputCat == 'email'}
@@ -512,6 +534,7 @@ function addItemByItemsType() {
 							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
 						placeholder={placeholder ?? defaultValue ?? ''}
 						bind:value
+						{disabled}
 					/>
 				{:else if inputCat == 'currency'}
 					<input
@@ -521,12 +544,13 @@ function addItemByItemsType() {
 							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
 						placeholder={placeholder ?? defaultValue ?? ''}
 						bind:value
+						{disabled}
 					/>
 				{:else if inputCat == 'string'}
 					<div class="flex flex-col w-full">
 						<div class="flex flex-row w-full items-center justify-between">
 							{#if extra?.['password'] == true}
-								<Password bind:password={value} />
+								<Password bind:password={value} {disabled} />
 							{:else}
 								<textarea
 									rows={extra?.['minRows'] || 1}
@@ -543,6 +567,7 @@ function addItemByItemsType() {
 									on:pointerdown|stopPropagation={(e) => {
 										dispatch('inputClicked', e)
 									}}
+									{disabled}
 								/>
 							{/if}
 						</div>

package/package/components/LightweightArgInput.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         type?: string | undefined;
         oneOf?: SchemaProperty[] | undefined;
         required?: boolean | undefined;
+        disabled?: boolean | undefined;
         pattern?: undefined | string;
         valid?: boolean | undefined;
         enum_?: EnumType;

package/package/components/LightweightObjectResourceInput.svelte

@@ -2,6 +2,7 @@
 export let format;
 export let value;
 export let disablePortal = false;
+export let disabled = false;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
@@ -27,6 +28,7 @@ $: value && valueToPath();
 
 <div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
 	<LightweightResourcePicker
+		{disabled}
 		{disablePortal}
 		on:change={(e) => {
 			path = e.detail

package/package/components/LightweightObjectResourceInput.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         format: string;
         value: any;
         disablePortal?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/LightweightSchemaForm.svelte

@@ -10,6 +10,7 @@ export let largeGap = false;
 export let isValid = true;
 export let defaultValues = {};
 export let dynamicEnums = {};
+export let disabled = false;
 let inputCheck = {};
 let errors = {};
 $: isValid = allTrue(inputCheck) ?? false;
@@ -86,6 +87,7 @@ function reorder() {
 				on:inputClicked
 				{displayType}
 				{css}
+				disabled={disabled || schema.properties[argName].disabled}
 			/>
 		{/if}
 	{/each}

package/package/components/LightweightSchemaForm.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         isValid?: boolean | undefined;
         defaultValues?: Record<string, any> | undefined;
         dynamicEnums?: Record<string, any> | undefined;
+        disabled?: boolean | undefined;
         invalidate?: ((key: string, error: string) => void) | undefined;
         validate?: ((key: string) => void) | undefined;
         validateAll?: (() => void) | undefined;

package/package/components/Login.svelte

@@ -19,6 +19,7 @@ export let email = undefined;
 export let password = undefined;
 export let error = undefined;
 export let popup = false;
+export let firstTime = false;
 const providers = [
     {
         type: 'github',
@@ -66,6 +67,10 @@ async function login() {
         sendUserToast('Invalid credentials', true);
         return;
     }
+    if (firstTime) {
+        goto('/user/first-time');
+        return;
+    }
     // Once logged in, we can fetch the workspaces
     $usersWorkspaceStore = await WorkspaceService.listUserWorkspaces();
     // trigger a reload of the user
@@ -77,11 +82,6 @@ async function login() {
     redirectUser();
 }
 async function redirectUser() {
-    const firstTimeCookie = document.cookie.match('(^|;)\\s*first_time\\s*=\\s*([^;]+)')?.pop() || '0';
-    if (Number(firstTimeCookie) > 0 && email === 'admin@windmill.dev') {
-        goto('/user/first-time');
-        return;
-    }
     if (rd?.startsWith('http')) {
         window.location.href = rd;
         return;
@@ -247,6 +247,11 @@ $: error && sendUserToast(error, true);
 
 	{#if showPassword}
 		<div>
+			{#if firstTime}
+				<div class="text-lg text-center w-full pb-6"
+					>First time login: admin@windmill.dev / changeme</div
+				>
+			{/if}
 			<div class="space-y-6">
 				{#if isCloudHosted()}
 					<p class="text-xs text-tertiary italic pb-6">

package/package/components/Login.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         password?: string | undefined;
         error?: string | undefined;
         popup?: boolean | undefined;
+        firstTime?: boolean | undefined;
     };
     events: {
         login: CustomEvent<any>;

package/package/components/ModulePreview.svelte

@@ -9,6 +9,7 @@ import DisplayResult from './DisplayResult.svelte';
 import LogViewer from './LogViewer.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
 import ModulePreviewForm from './ModulePreviewForm.svelte';
+import JobProgressBar from './jobs/JobProgressBar.svelte';
 import { evalValue } from './flows/utils';
 import ScriptFix from './copilot/ScriptFix.svelte';
 export let mod;
@@ -20,9 +21,11 @@ export let diffEditor;
 export let noEditor = false;
 const { flowStore, flowStateStore, testStepStore, pathStore } = getContext('FlowEditorContext');
 // Test
+let scriptProgress = undefined;
 let testJobLoader;
 let testIsLoading = false;
 let testJob = undefined;
+let jobProgressReset;
 let stepArgs = Object.fromEntries(Object.keys(schema.properties ?? {}).map((k) => [
     k,
     evalValue(k, mod, $testStepStore, pickableProperties, false)
@@ -32,10 +35,13 @@ export function runTestWithStepArgs() {
     runTest(stepArgs);
 }
 export async function runTest(args) {
+    // Not defined if JobProgressBar not loaded
+    if (jobProgressReset)
+        jobProgressReset();
     const val = mod.value;
     // let jobId: string | undefined = undefined
     if (val.type == 'rawscript') {
-        await testJobLoader?.runPreview(val.path ?? ($pathStore ?? '') + '/' + mod.id, val.content, val.language, args, $flowStore?.tag ?? val.tag);
+        await testJobLoader?.runPreview(val.path ?? ($pathStore ?? '') + '/' + mod.id, val.content, val.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, $flowStore?.tag ?? val.tag);
     }
     else if (val.type == 'script') {
         const script = val.hash
@@ -44,7 +50,12 @@ export async function runTest(args) {
         await testJobLoader?.runPreview(val.path, script.content, script.language, args, $flowStore?.tag ?? script.tag);
     }
     else if (val.type == 'flow') {
-        await testJobLoader?.abstractRun(() => JobService.runFlowByPath({ workspace: $workspaceStore, path: val.path, requestBody: args }));
+        await testJobLoader?.abstractRun(() => JobService.runFlowByPath({
+            workspace: $workspaceStore,
+            path: val.path,
+            requestBody: args,
+            skipPreprocessor: true
+        }));
     }
     else {
         throw Error('Not supported module type');
@@ -61,9 +72,12 @@ function jobDone() {
 let forceJson = false;
 </script>
 
+
+
 <TestJobLoader
 	toastError={noEditor}
 	on:done={() => jobDone()}
+	bind:scriptProgress
 	bind:this={testJobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
@@ -113,6 +127,9 @@ let forceJson = false;
 				/>
 			</Pane>
 			<Pane size={50} minSize={10} class="text-sm text-tertiary">
+			{#if scriptProgress}
+				<JobProgressBar job={testJob} bind:scriptProgress bind:reset={jobProgressReset} compact={true} />
+			{/if}
 				{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}
 					<div class="break-words relative h-full p-2">
 						<DisplayResult
@@ -137,7 +154,9 @@ let forceJson = false;
 				{:else}
 					<div class="p-2">
 						{#if testIsLoading}
+							{#if !scriptProgress}
 							<Loader2 class="animate-spin" />
+							{/if}
 						{:else}
 							Test to see the result here
 						{/if}

package/package/components/ModuleStatus.svelte

@@ -4,6 +4,7 @@ import { displayDate } from '../utils';
 import { Hourglass } from 'lucide-svelte';
 export let type;
 export let scheduled_for;
+export let skipped = false;
 </script>
 
 {#if type == 'WaitingForEvents'}
@@ -25,6 +26,8 @@ export let scheduled_for;
 			Job is waiting for an executor
 		{/if}
 	</span>
+{:else if skipped}
+	<Badge color="blue">Skipped</Badge>
 {:else if type == 'Success'}
 	<Badge color="green">Success</Badge>
 {:else if type == 'Failure'}

package/package/components/ModuleStatus.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         type: FlowStatusModule['type'];
         scheduled_for: Date | undefined;
+        skipped?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/OAuthSetting.svelte

@@ -1,11 +1,11 @@
-<script>import CollapseLink from './CollapseLink.svelte';
+<script>import { X } from 'lucide-svelte';
+import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 export let name;
 export let value;
 export let login = true;
 $: enabled = value != undefined;
-let allowed_domains = value?.['allowed_domains'] ?? '';
 let tenant = '';
 $: name == 'microsoft' && changeTenantId(tenant);
 function changeTenantId(tenant) {
@@ -61,19 +61,44 @@ function changeTenantId(tenant) {
 				</label>
 			{:else if login}
 				<label class="block pb-2">
-					<span class="text-primary font-semibold text-sm">Allowed domain</span>
-					<input
-						type="text"
-						placeholder="windmill.dev"
-						bind:value={allowed_domains}
-						on:keyup={() => {
-							if (allowed_domains == '') {
-								value['allowed_domains'] = undefined
-							} else {
-								value['allowed_domains'] = [allowed_domains]
-							}
-						}}
-					/>
+					<span class="text-primary font-semibold text-sm">Allowed domains</span>
+					<div class="flex flex-col gap-1">
+						{#each value?.['allowed_domains'] ?? [] as domain}
+							<div class="flex gap-2">
+								<input
+									class="max-w-96 w-full"
+									type="text"
+									bind:value={domain}
+									on:keyup={(e) => {
+										if (domain == '') {
+											value['allowed_domains'] = value['allowed_domains']?.filter(
+												(d) => d != domain
+											)
+										}
+									}}
+								/>
+								<button
+									class="text-primary text-xs rounded hover:bg-surface-hover"
+									on:click={() => {
+										value['allowed_domains'] = value['allowed_domains']?.filter((d) => d != domain)
+										if (value['allowed_domains'].length == 0) {
+											value['allowed_domains'] = undefined
+										}
+									}}
+								>
+									<X size={14} />
+								</button>
+							</div>
+						{/each}
+						<div class="flex gap-2">
+							<button
+								class="text-primary text-sm border rounded p-1"
+								on:click={() => {
+									value['allowed_domains'] = [...(value['allowed_domains'] ?? []), 'mydomain.com']
+								}}>+ Add domain</button
+							>
+						</div>
+					</div>
 				</label>
 			{/if}
 			{#if name == 'google'}