windmill-components 1.623.2 → 1.642.0

package/package/components/InstanceSettings.svelte.d.ts

@@ -1,8 +1,12 @@
 interface Props {
     tab?: string;
     hideTabs?: boolean;
-    hideSave?: boolean;
     closeDrawer?: (() => void) | undefined;
+    authSubTab?: 'sso' | 'oauth' | 'scim';
+    onNavigateToTab?: (category: string) => void;
+    quickSetup?: boolean;
+    yamlMode?: boolean;
+    hasUnsavedChanges?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -22,7 +26,18 @@ declare const InstanceSettings: $$__sveltets_2_IsomorphicComponent<Props, {
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
+    getVersion: () => string;
+    getLicenseKey: () => string;
     saveSettings: () => Promise<void>;
-}, "tab">;
+    isDirty: (category: string) => boolean;
+    discardCategory: (category: string) => void;
+    discardAll: () => void;
+    saveCategorySettings: (category: string) => Promise<void>;
+    syncBeforeDiff: () => boolean;
+    buildFullDiff: () => {
+        original: string;
+        modified: string;
+    };
+}, "tab" | "hasUnsavedChanges" | "authSubTab" | "yamlMode">;
 type InstanceSettings = InstanceType<typeof InstanceSettings>;
 export default InstanceSettings;

package/package/components/IntegerInput.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import TextInput from './text_input/TextInput.svelte';
+import { untrack } from 'svelte';
+let { value, oninput, placeholder, id, disabled, error = '', class: className = '', size } = $props();
+let displayValue = $state('');
+$effect(() => {
+    const incoming = value;
+    const current = String(untrack(() => displayValue));
+    const currentNum = current === '' ? undefined : Number(current);
+    if (incoming !== currentNum) {
+        displayValue = incoming != null ? String(incoming) : '';
+    }
+});
+function handleKeydown(e) {
+    if (e.ctrlKey || e.metaKey)
+        return;
+    if (!/[0-9]/.test(e.key) &&
+        ![
+            'Backspace',
+            'Delete',
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Tab',
+            'Enter'
+        ].includes(e.key)) {
+        e.preventDefault();
+    }
+}
+function handleInput(e) {
+    if (e.target instanceof HTMLInputElement) {
+        const raw = e.target.value.replace(/[^0-9]/g, '');
+        e.target.value = raw;
+        displayValue = raw;
+        if (raw === '') {
+            oninput?.(undefined);
+            return;
+        }
+        oninput?.(Number(raw));
+    }
+}
+</script>
+
+<TextInput
+	{size}
+	class={className}
+	{error}
+	value={displayValue}
+	inputProps={{
+		type: 'number',
+		inputmode: 'numeric',
+		placeholder,
+		id,
+		disabled,
+		onkeydown: handleKeydown,
+		oninput: handleInput
+	}}
+/>

package/package/components/IntegerInput.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonType } from './common/button/model';
+interface Props {
+    value?: number;
+    oninput?: (value: number | undefined) => void;
+    placeholder?: string;
+    id?: string;
+    disabled?: boolean;
+    error?: string;
+    class?: string;
+    size?: ButtonType.UnifiedSize;
+}
+declare const IntegerInput: import("svelte").Component<Props, {}, "">;
+type IntegerInput = ReturnType<typeof IntegerInput>;
+export default IntegerInput;

package/package/components/InviteGlobalUser.svelte

@@ -2,9 +2,11 @@
 import { createEventDispatcher } from 'svelte';
 import { UserService } from '../gen';
 import { Button } from './common';
+import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
 import { generateRandomString } from '../utils';
 import { globalEmailInvite } from '../stores';
+export let close = undefined;
 const dispatch = createEventDispatcher();
 let is_super_admin = false;
 let password = generateRandomString(10);
@@ -24,37 +26,35 @@ async function addUser() {
     $globalEmailInvite = '';
     password = generateRandomString(10);
     dispatch('new');
+    close?.();
 }
 </script>
 
-<h3 class="text-sm font-semibold text-emphasis">Add new user to instance</h3>
-<div class="flex flex-row flex-wrap gap-2 mb-2 items-end">
-	<label class="block shrink min-w-0">
+<div class="p-4 flex flex-col gap-3 w-80">
+	<h3 class="text-sm font-semibold text-emphasis">Add new user to instance</h3>
+	<label class="block">
 		<span class="text-xs font-semibold text-emphasis">Email</span>
-		<input type="email" placeholder="email" bind:value={$globalEmailInvite} />
+		<TextInput
+			inputProps={{ type: 'email', placeholder: 'email' }}
+			bind:value={$globalEmailInvite}
+		/>
 	</label>
-	<label class="block shrink min-w-0">
+	<label class="block">
 		<span class="text-xs font-semibold text-emphasis">Password</span>
-		<input bind:value={password} />
+		<TextInput bind:value={password} />
 	</label>
-	<div>
+	<label class="block">
 		<span class="text-xs font-semibold text-emphasis">Name (optional)</span>
-		<input type="text" placeholder="name (optional)" bind:value={name} />
-	</div>
-	<Toggle class="mx-2 mb-1" bind:checked={is_super_admin} options={{ right: 'Superadmin' }} />
-	<div class="flex flex-row-reverse grow">
-		<div class="flex">
-			<Button
-				variant="accent"
-				size="sm"
-				on:click={addUser}
-				disabled={$globalEmailInvite == '' || password == undefined}
-			>
-				Add user to instance
-			</Button>
-		</div>
-	</div>
-</div>
-<div class="flex gap-2 items-end">
-	<div class="text-2xs text-secondary grow text-right"> Email will be sent if SMTP configured </div>
+		<TextInput inputProps={{ type: 'text', placeholder: 'name (optional)' }} bind:value={name} />
+	</label>
+	<Toggle bind:checked={is_super_admin} options={{ right: 'Superadmin' }} />
+	<Button
+		variant="accent"
+		size="sm"
+		on:click={addUser}
+		disabled={$globalEmailInvite == '' || password == undefined}
+	>
+		Add user to instance
+	</Button>
+	<div class="text-2xs text-secondary text-right">Email will be sent if SMTP configured</div>
 </div>

package/package/components/InviteGlobalUser.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,7 +11,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InviteGlobalUser: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const InviteGlobalUser: $$__sveltets_2_IsomorphicComponent<{
+    close?: (() => void) | undefined;
+}, {
     new: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

package/package/components/JobArgs.svelte

@@ -53,21 +53,25 @@ ${Object.entries(args)
 	>.
 {:else}
 	<div class="relative">
-		<DataTable size="sm">
+		<DataTable size="sm" containerClass="bg-surface-tertiary">
 			<Head>
 				<tr class="w-full">
-					<Cell head first>{argLabel ?? 'Arg'}</Cell>
+					<Cell head first>{argLabel ?? 'Input'}</Cell>
 					<Cell head last>Value</Cell>
 				</tr>
 				{#snippet headerAction()}
-					<button
-						onclick={() => {
-							jsonStr = JSON.stringify(args, null, 4)
-							jsonViewer?.openDrawer()
-						}}
-					>
-						<Expand size={18} />
-					</button>
+					<div class="center-center -m-1">
+						<Button
+							unifiedSize="md"
+							variant="subtle"
+							onClick={() => {
+								jsonStr = JSON.stringify(args, null, 4)
+								jsonViewer?.openDrawer()
+							}}
+							iconOnly
+							startIcon={{ icon: Expand }}
+						></Button>
+					</div>
 				{/snippet}
 			</Head>
 

package/package/components/JobLoader.svelte

@@ -126,13 +126,14 @@ export async function runFlowByPath(path, args, callbacks) {
         skipPreprocessor: true
     }), callbacks);
 }
-export async function runFlowPreview(args, flow, callbacks) {
+export async function runFlowPreview(args, flow, callbacks, path) {
     return abstractRun(() => JobService.runFlowPreview({
         workspace: $workspaceStore,
         requestBody: {
             args,
             value: flow.value,
-            tag: flow.tag
+            tag: flow.tag,
+            path
         }
     }), callbacks);
 }
@@ -162,7 +163,7 @@ export async function runDynamicInputScript(entrypoint_function, runnable_ref, a
         requestBody: { entrypoint_function, args, runnable_ref }
     }), callbacks);
 }
-export async function runPreview(path, code, lang, args, tag, lock, hash, callbacks) {
+export async function runPreview(path, code, lang, args, tag, lock, hash, callbacks, flowPath) {
     return abstractRun(() => JobService.runScriptPreview({
         workspace: $workspaceStore,
         requestBody: {
@@ -172,7 +173,8 @@ export async function runPreview(path, code, lang, args, tag, lock, hash, callba
             language: lang,
             tag,
             lock,
-            script_hash: hash
+            script_hash: hash,
+            flow_path: flowPath
         }
     }), callbacks);
 }

package/package/components/JobLoader.svelte.d.ts

@@ -56,10 +56,10 @@ declare const JobLoader: import("svelte").Component<Props, {
     runFlowByPath: (path: string, args: Record<string, any>, callbacks?: Callbacks) => Promise<string>;
     runFlowPreview: (args: Record<string, any>, flow: OpenFlow & {
         tag?: string;
-    }, callbacks?: Callbacks) => Promise<string>;
+    }, callbacks?: Callbacks, path?: string) => Promise<string>;
     getLogs: () => Promise<void>;
     runDynamicInputScript: (entrypoint_function: string, runnable_ref: DynamicInput.HelperScript, args: Record<string, any>, callbacks?: Callbacks) => Promise<string>;
-    runPreview: (path: string | undefined, code: string, lang: SupportedLanguage | undefined, args: Record<string, any>, tag: string | undefined, lock?: string, hash?: string, callbacks?: Callbacks) => Promise<string>;
+    runPreview: (path: string | undefined, code: string, lang: SupportedLanguage | undefined, args: Record<string, any>, tag: string | undefined, lock?: string, hash?: string, callbacks?: Callbacks, flowPath?: string) => Promise<string>;
     cancelJob: () => Promise<void>;
     clearCurrentJob: () => Promise<void>;
     watchJob: (testId: string, callbacks?: Callbacks) => Promise<void>;

package/package/components/JobStatus.svelte

@@ -1,37 +1,40 @@
-<script lang="ts">import { displayDate } from '../utils';
+<script lang="ts">import { displayDate, msToReadableTime } from '../utils';
 import Badge from './common/badge/Badge.svelte';
 import { forLater } from '../forLater';
-import DurationMs from './DurationMs.svelte';
-import { Calendar, CheckCircle2, Circle, Clock, Hourglass, Play, XCircle } from 'lucide-svelte';
+import { Circle } from 'lucide-svelte';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import QueuePosition from './QueuePosition.svelte';
+import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
 const SMALL_ICON_SIZE = 12;
-let { job } = $props();
+let { job, large = false } = $props();
 </script>
 
 {#if job && 'success' in job && job.success}
-	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
-		<Badge large color="green" icon={{ icon: CheckCircle2, position: 'left' }}>
-			Success {job.is_skipped ? '(Skipped)' : ''}
-		</Badge>
-		<DurationMs
-			duration_ms={job.duration_ms}
-			self_wait_time_ms={job?.self_wait_time_ms}
-			aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
-		/>
-	</div>
+	<Badge {large} color="green">
+		Successfully ran in {msToReadableTime(job.duration_ms)}
+		{job.is_skipped ? '(Skipped)' : ''}
+		{#if job.self_wait_time_ms || job.aggregate_wait_time_ms}
+			<WaitTimeWarning
+				self_wait_time_ms={job.self_wait_time_ms}
+				aggregate_wait_time_ms={job.aggregate_wait_time_ms}
+				variant="alert"
+			/>
+		{/if}
+	</Badge>
 {:else if job && 'success' in job}
-	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
-		<Badge large color="red" icon={{ icon: XCircle, position: 'left' }}>Failed</Badge>
-		<DurationMs
-			duration_ms={job.duration_ms}
-			self_wait_time_ms={job?.self_wait_time_ms}
-			aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
-		/>
-	</div>
+	<Badge {large} color="red">
+		Failed after {msToReadableTime(job.duration_ms)}
+		{#if job.self_wait_time_ms || job.aggregate_wait_time_ms}
+			<WaitTimeWarning
+				self_wait_time_ms={job.self_wait_time_ms}
+				aggregate_wait_time_ms={job.aggregate_wait_time_ms}
+				variant="alert"
+			/>
+		{/if}
+	</Badge>
 {:else if job && 'running' in job && job.running && job.suspend}
 	<div>
-		<Badge large color="violet" icon={{ icon: Hourglass, position: 'left' }}>
+		<Badge {large} color="violet">
 			Suspended
 			{#if job.flow_status}
 				({(job.flow_status?.step ?? 0) + 1} of {job.raw_flow?.modules?.length ?? '?'})
@@ -40,7 +43,7 @@ let { job } = $props();
 	</div>
 {:else if job && 'running' in job && job.running}
 	<div>
-		<Badge large color="yellow" icon={{ icon: Play, position: 'left' }}>
+		<Badge {large} color="yellow">
 			Running
 			{#if job.flow_status}
 				({(job.flow_status?.step ?? 0) + 1} of {job.raw_flow?.modules?.length ?? '?'})
@@ -49,13 +52,13 @@ let { job } = $props();
 	</div>
 {:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
 	<div>
-		<Badge color="blue" icon={{ icon: Calendar, position: 'left' }}>
+		<Badge color="blue" {large}>
 			Scheduled for {displayDate(job.scheduled_for)}
 		</Badge>
 	</div>
 {:else if job && 'running' in job}
 	<div class="flex flex-row gap-1 items-center">
-		<Badge color="orange" icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
+		<Badge color="orange" {large}>Queued</Badge>
 		<NoWorkerWithTagWarning tag={job.tag} />
 		<QueuePosition jobId={job.id} workspaceId={job.workspace_id} minimal />
 	</div>

package/package/components/JobStatus.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { CompletedJob, QueuedJob } from '../gen';
 interface Props {
     job: QueuedJob | CompletedJob | undefined;
+    large?: boolean;
 }
 declare const JobStatus: import("svelte").Component<Props, {}, "">;
 type JobStatus = ReturnType<typeof JobStatus>;

package/package/components/KanidmSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 export let value;
 const AUTH_URL_SUFFIX = '/ui/oauth2';
 $: enabled = value != undefined;
@@ -48,7 +49,7 @@ function changeValues({ baseUrl, id }) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Kanidm Url</span>
 				<span class="text-secondary font-normal text-xs">{'KANIDM_URL/ui/oauth2'}</span>
@@ -75,6 +76,6 @@ function changeValues({ baseUrl, id }) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/KeycloakSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 export let value;
 $: enabled = value != undefined;
 let org = '';
@@ -40,7 +41,7 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Realm Url </span>
 				<span class="text-secondary font-normal text-xs"
@@ -69,6 +70,6 @@ function changeOrg(org) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/Login.svelte

@@ -166,6 +166,12 @@ async function loadLogins() {
     }
 }
 loadLogins();
+$effect(() => {
+    if (firstTime && !email && !password) {
+        email = 'admin@windmill.dev';
+        password = 'changeme';
+    }
+});
 async function checkSmtpConfigured() {
     try {
         smtpConfigured = await UserService.isSmtpConfigured();
@@ -321,9 +327,9 @@ $effect(() => {
 	{#if showPassword}
 		<div>
 			{#if firstTime}
-				<div class="text-lg text-center w-full pb-6 text-emphasis"
-					>First time login: admin@windmill.dev / changeme</div
-				>
+				<p class="text-xs text-center w-full pb-4 text-secondary">
+					Welcome! Default credentials admin@windmill.dev / changeme have been prefilled.
+				</p>
 			{/if}
 			<div class="space-y-6">
 				{#if isCloudHosted()}

package/package/components/ModuleStatus.svelte

@@ -8,17 +8,17 @@ export let skipped = false;
 </script>
 
 {#if type == 'WaitingForEvents'}
-	<span class="italic text-violet-700 dark:text-violet-400">
-		<Hourglass class="inline" />
+	<span class="italic text-xs text-violet-700 dark:text-violet-400">
+		<Hourglass class="inline" size={14} />
 		Waiting to be resumed by resume events such as approvals
 	</span>
 {:else if type == 'WaitingForPriorSteps'}
-	<span class="italic text-primary">
-		<Hourglass class="inline" />
+	<span class="italic text-xs text-primary">
+		<Hourglass class="inline" size={14} />
 		Waiting for prior steps to complete
 	</span>
 {:else if type == 'WaitingForExecutor'}
-	<span class="italic text-primary">
+	<span class="italic text-xs text-primary">
 		<Hourglass class="inline" />
 		{#if scheduled_for && forLater(scheduled_for.toString())}
 			Job is scheduled to be executed at {displayDate(scheduled_for, true)}

package/package/components/ModuleTest.svelte

@@ -37,13 +37,13 @@ export async function runTest(args) {
         }
     };
     if (val.type == 'rawscript') {
-        await jobLoader?.runPreview(val.path ?? ($pathStore ?? '') + '/' + mod.id, val.content, val.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? val.tag, undefined, undefined, callbacks);
+        await jobLoader?.runPreview(val.path ?? ($pathStore ?? '') + '/' + mod.id, val.content, val.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? val.tag, undefined, undefined, callbacks, $pathStore);
     }
     else if (val.type == 'script') {
         const script = val.hash
             ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
             : await getScriptByPath(val.path);
-        await jobLoader?.runPreview(val.path, script.content, script.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? (val.tag_override ? val.tag_override : script.tag), script.lock, val.hash ?? script.hash, callbacks);
+        await jobLoader?.runPreview(val.path, script.content, script.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? (val.tag_override ? val.tag_override : script.tag), script.lock, val.hash ?? script.hash, callbacks, $pathStore);
     }
     else if (val.type == 'flow') {
         await jobLoader?.runFlowByPath(val.path, args, callbacks);
@@ -72,7 +72,7 @@ export async function runTest(args) {
             },
             summary: '',
             schema
-        }, callbacks);
+        }, callbacks, $pathStore);
     }
     else {
         throw Error('Not supported module type');