windmill-components 1.309.7 → 1.352.0

package/package/components/StringTypeNarrowing.svelte

@@ -1,8 +1,13 @@
-<script>import RadioButton from './RadioButton.svelte';
+<script>import { computeKind } from '../utils';
+import Label from './Label.svelte';
 import ResourceTypePicker from './ResourceTypePicker.svelte';
 import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
 import { Button } from './common';
 import Alert from './common/alert/Alert.svelte';
+import ClearableInput from './common/clearableInput/ClearableInput.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import RegexGen from './copilot/RegexGen.svelte';
 export let pattern;
 export let enum_;
@@ -14,7 +19,12 @@ export let disableCreate = false;
 export let disableVariablePicker = false;
 export let password = false;
 export let noExtra = false;
-let kind = computeKind();
+export let dateFormat;
+export let enumLabels = {};
+export let overrideAllowKindChange = true;
+export let originalType = undefined;
+let kind = computeKind(enum_, contentEncoding, pattern, format);
+const allowKindChange = overrideAllowKindChange || originalType === 'string';
 let patternStr = pattern ?? '';
 let resource;
 const FORMATS = [
@@ -26,7 +36,8 @@ const FORMATS = [
     'yaml',
     'sql',
     // 'time',
-    'date-time'
+    'date-time',
+    'date'
     // 'duration',
     // 'ipv6',
     // 'jsonpointer',
@@ -41,6 +52,9 @@ $: {
     }
 }
 function add() {
+    if (enumLabels === undefined) {
+        enumLabels = {};
+    }
     let choice = `choice ${enum_?.length ? enum_?.length + 1 : 1}`;
     enum_ = enum_ ? enum_.concat(choice) : [choice];
 }
@@ -49,191 +63,239 @@ function remove(item) {
     if (enum_.length == 0) {
         enum_ = undefined;
     }
-}
-function computeKind() {
-    if (enum_ != undefined) {
-        return 'enum';
-    }
-    if (contentEncoding == 'base64') {
-        return 'base64';
-    }
-    if (pattern != undefined) {
-        return 'pattern';
+    if (enumLabels !== undefined) {
+        delete enumLabels[item];
     }
-    if (format != undefined && format != '') {
-        if (format.startsWith('resource')) {
-            return 'resource';
-        }
-        return 'format';
+}
+const presetOptions = [
+    { label: 'ISO Format', format: 'yyyy-MM-dd' },
+    { label: 'US Format', format: 'MM/dd/yyyy' },
+    { label: 'EU Format', format: 'dd/MM/yyyy' }
+];
+function onEnumKeyChange(oldKey, newKey) {
+    if (oldKey !== newKey) {
+        enumLabels[newKey] = enumLabels[oldKey];
+        delete enumLabels[oldKey];
     }
-    return 'none';
 }
 </script>
 
-<RadioButton
-	label="Kind"
-	options={[
-		['None', 'none'],
-		['File (base64)', 'base64'],
-		['Enum', 'enum'],
-		['Format', 'format'],
-		['Pattern', 'pattern']
-	]}
-	bind:value={kind}
-	on:change={(e) => {
-		if (e.detail != 'enum') {
-			enum_ = undefined
-		}
-		if (e.detail == 'none') {
-			pattern = undefined
-			format = undefined
-			contentEncoding = undefined
-			customErrorMessage = undefined
-			minRows = undefined
-			disableCreate = undefined
-			disableVariablePicker = undefined
-		}
-	}}
-/>
-<div class="my-2" />
-
-{#if kind == 'pattern'}
-	<label for="input" class="mb-2 text-secondary text-xs">
-		Pattern (Regex)
-		<div class="flex flex-row items-center gap-0.5">
+<div class="flex flex-col gap-2">
+	{#if allowKindChange}
+		<ToggleButtonGroup
+			bind:selected={kind}
+			on:selected={(e) => {
+				if (e.detail != 'enum') {
+					enum_ = undefined
+				}
+				if (e.detail == 'none') {
+					pattern = undefined
+					format = undefined
+					contentEncoding = undefined
+					customErrorMessage = undefined
+					minRows = undefined
+					disableCreate = undefined
+					disableVariablePicker = undefined
+				}
+			}}
+		>
+			{#each [['None', 'none'], ['File', 'base64', 'Encoded as Base 64'], ['Enum', 'enum'], ['Format', 'format'], ['Pattern', 'pattern']] as x}
+				<ToggleButton value={x[1]} label={x[0]} tooltip={x[2]} showTooltipIcon={Boolean(x[2])} />
+			{/each}
+		</ToggleButtonGroup>
+	{/if}
+	{#if kind == 'pattern'}
+		<Label label="Pattern (Regex)">
+			<svelte:fragment slot="header">
+				<Tooltip light>
+					Setting a pattern will allow you to specify a regular expression that the input should
+					adhere to. You can use the regex generator to help you create a pattern.
+				</Tooltip>
+			</svelte:fragment>
+			<div class="flex flex-row gap-1">
+				<ClearableInput
+					id="input"
+					type="text"
+					placeholder="^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
+					bind:value={patternStr}
+				/>
+				<RegexGen
+					on:gen={(e) => {
+						const { res, prompt } = e.detail
+						patternStr = res
+						customErrorMessage = 'does not match: ' + prompt
+					}}
+				/>
+			</div>
+		</Label>
+		<Label label="Custom error message" class="w-full">
+			<svelte:fragment slot="header">
+				<Tooltip light>
+					Setting a custom error message will allow you to specify a message that will be shown when
+					the input does not match the pattern.
+				</Tooltip>
+			</svelte:fragment>
+			<svelte:fragment slot="action">
+				<Toggle
+					size="xs"
+					options={{ right: 'Enable' }}
+					checked={customErrorMessage != undefined && customErrorMessage != ''}
+					on:change={(e) => {
+						if (e.detail) {
+							customErrorMessage = 'Custom error message'
+						} else {
+							customErrorMessage = undefined
+						}
+					}}
+				/>
+			</svelte:fragment>
 			<input
-				id="input"
 				type="text"
-				placeholder="^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
-				bind:value={patternStr}
-			/>
-			<RegexGen
-				on:gen={(e) => {
-					const { res, prompt } = e.detail
-					patternStr = res
-					customErrorMessage = 'does not match: ' + prompt
-				}}
+				bind:value={customErrorMessage}
+				disabled={customErrorMessage == undefined || customErrorMessage == ''}
 			/>
-			<Button
-				variant="border"
-				color="blue"
-				size="sm"
-				btnClasses="mx-2 mb-1"
-				on:click={() => {
-					patternStr = ''
-				}}
-			>
-				clear
-			</Button>
-		</div>
-		<div class="mt-2 flex gap-2">
+		</Label>
+	{:else if kind == 'enum'}
+		<Label label="Enums">
+			<svelte:fragment slot="header">
+				<Tooltip light>
+					Setting enums will allow you to specify a list of values that the input can take. If you
+					want to allow custom values, you can disable the option below.
+				</Tooltip>
+			</svelte:fragment>
+			<div class="flex flex-col gap-1">
+				{#each enum_ || [] as e}
+					<div class="flex flex-row w-full gap-2 pt-2">
+						<input
+							id="input"
+							type="text"
+							bind:value={e}
+							on:input={(event) => onEnumKeyChange(event?.currentTarget.value, e)}
+						/>
+						{#if enumLabels !== undefined}
+							<input
+								id="input"
+								type="text"
+								bind:value={enumLabels[e]}
+								placeholder="Optional title..."
+								on:input={(event) => {
+									if (event?.currentTarget.value === '') {
+										delete enumLabels[e]
+									}
+								}}
+							/>
+						{/if}
+
+						{#if allowKindChange}
+							<Button size="sm" on:click={() => remove(e)}>-</Button>
+						{/if}
+					</div>
+				{/each}
+			</div>
+			{#if allowKindChange}
+				<div class="flex flex-row my-1">
+					<Button color="light" size="sm" on:click={add}>+</Button>
+				</div>
+			{/if}
+		</Label>
+		{#if !noExtra}
 			<Toggle
 				size="xs"
-				options={{ right: 'Custom error message' }}
-				checked={customErrorMessage != undefined && customErrorMessage != ''}
+				options={{ right: 'Disallow creating custom values' }}
+				checked={disableCreate != undefined && disableCreate}
 				on:change={(e) => {
 					if (e.detail) {
-						customErrorMessage = 'Custom error message'
+						disableCreate = true
 					} else {
-						customErrorMessage = undefined
+						disableCreate = undefined
 					}
 				}}
-				>Custom error message
-			</Toggle>
-			<input type="text" bind:value={customErrorMessage} />
-		</div>
-	</label>
-{:else if kind == 'enum'}
-	<label for="input" class="mb-2 text-secondary text-xs">
-		Enums
-		<div class="flex flex-col gap-1">
-			{#each enum_ || [] as e}
-				<div class="flex flex-row max-w-md">
-					<input id="input" type="text" bind:value={e} />
-					<Button size="sm" btnClasses="ml-6" on:click={() => remove(e)}>-</Button>
-				</div>
-			{/each}
-		</div>
-		<div class="flex flex-row my-1">
-			<Button color="light" size="sm" on:click={add}>+</Button>
-			<Button
-				color="light"
-				variant="border"
-				size="sm"
-				btnClasses="ml-2"
-				on:click={() => (enum_ = undefined)}
-			>
-				Clear
-			</Button>
-		</div>
-	</label>
-	{#if !noExtra}
+			/>
+		{/if}
+	{:else if kind == 'resource'}
+		<div class="mt-1" />
+		<ResourceTypePicker bind:value={resource} />
+	{:else if kind == 'format'}
+		<Label label="Format">
+			<svelte:fragment slot="header">
+				<Tooltip light>
+					Setting the format will allow you to specify a format that the input should adhere to.
+				</Tooltip>
+			</svelte:fragment>
+			<select bind:value={format}>
+				<option value={undefined} />
+				{#each FORMATS as f}
+					<option value={f}>{f}</option>
+				{/each}
+			</select>
+		</Label>
+		{#if format == 'date'}
+			<div class="mt-1" />
+
+			<div class="grid grid-cols-3 gap-2"
+				>x
+				<Label label="Date format passed to script" class="col-span-2">
+					<svelte:fragment slot="header">
+						<Tooltip light>
+							Setting the date output format will allow you to specify how the date will be passed
+							to the script.
+						</Tooltip>
+					</svelte:fragment>
+					<ClearableInput type="text" bind:value={dateFormat} placeholder="yyyy-MM-dd" />
+				</Label>
+				<Label label="Presets">
+					<select
+						bind:value={dateFormat}
+						disabled={dateFormat ? !presetOptions.map((f) => f.format).includes(dateFormat) : false}
+					>
+						{#each presetOptions as f}
+							<option value={f.format}>{f.label}</option>
+						{/each}
+					</select>
+				</Label>
+			</div>
+		{/if}
+	{:else if kind == 'none'}
+		{#if !noExtra}
+			<Label label="Min textarea rows">
+				<input type="number" bind:value={minRows} />
+			</Label>
+		{/if}
+	{:else if kind === 'base64'}
+		<Alert
+			type="warning"
+			title="S3 Object recommended"
+			size="xs"
+			tooltip="Check out the documentation for more information:"
+			documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage#large-data-files-s3-r2-minio-azure-blob"
+		>
+			For large files, we recommend using the S3 Object type instead of the base64 string type.
+		</Alert>
+	{/if}
+	{#if (kind == 'none' || kind == 'pattern' || kind == 'format') && !noExtra}
 		<Toggle
-			size="sm"
-			options={{ right: 'Disallow creating custom values' }}
-			checked={disableCreate != undefined && disableCreate}
+			size="xs"
+			options={{ right: 'Disable variable picker' }}
+			checked={disableVariablePicker != undefined && disableVariablePicker}
 			on:change={(e) => {
 				if (e.detail) {
-					disableCreate = true
+					disableVariablePicker = true
 				} else {
-					disableCreate = undefined
+					disableVariablePicker = undefined
 				}
 			}}
+			disabled={['email', 'yaml', 'sql', 'date-time', 'date'].includes(format ?? '')}
 		/>
 	{/if}
-{:else if kind == 'resource'}
-	<div class="mt-1" />
-	<ResourceTypePicker bind:value={resource} />
-{:else if kind == 'format'}
-	<select class="mt-1" bind:value={format}>
-		<option value={undefined} />
-		{#each FORMATS as f}
-			<option value={f}>{f}</option>
-		{/each}
-	</select>
-{:else if kind == 'none'}
-	{#if !noExtra}
-		<label
-			>min textarea rows:
-			<input type="number" bind:value={minRows} />
-		</label>
-	{/if}
-{:else if kind === 'base64'}
-	<Alert
-		type="warning"
-		title="S3 Object recommended"
-		collapsible
-		size="xs"
-		documentationLink="Pattern (Regex) https://www.windmill.dev/docs/core_concepts/persistent_storage#large-data-files-s3-r2-minio-azure-blob"
-	>
-		For large files, we recommend using the S3 Object type instead of the base64 string type.
-	</Alert>
-{/if}
-{#if (kind == 'none' || kind == 'pattern' || kind == 'format') && !noExtra}
-	<div class="mt-1" />
-	<Toggle
-		size="xs"
-		options={{ right: 'Disable variable picker' }}
-		checked={disableVariablePicker != undefined && disableVariablePicker}
-		on:change={(e) => {
-			if (e.detail) {
-				disableVariablePicker = true
-			} else {
-				disableVariablePicker = undefined
-			}
-		}}
-	/>
-{/if}
 
-{#if kind == 'none' || kind == 'pattern'}
-	<div class="mt-1" />
-	<Toggle
-		size="xs"
-		options={{ right: 'Is Password' }}
-		checked={password}
-		on:change={(e) => {
-			password = e.detail
-		}}
-	/>
-	<div class="mb-4" />
-{/if}
+	{#if kind == 'none' || kind == 'pattern'}
+		<Toggle
+			size="xs"
+			options={{ right: 'Is Password' }}
+			checked={password}
+			on:change={(e) => {
+				password = e.detail
+			}}
+		/>
+	{/if}
+</div>

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
+import type { EnumType } from '../common';
 declare const __propDef: {
     props: {
         pattern: string | undefined;
-        enum_: string[] | undefined;
+        enum_: EnumType;
         format: string | undefined;
         contentEncoding: 'base64' | 'binary' | undefined;
         customErrorMessage: string | undefined;
@@ -11,6 +12,10 @@ declare const __propDef: {
         disableVariablePicker?: boolean | undefined;
         password?: boolean | undefined;
         noExtra?: boolean | undefined;
+        dateFormat: string | undefined;
+        enumLabels?: Record<string, string> | undefined;
+        overrideAllowKindChange?: boolean | undefined;
+        originalType?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/TemplateEditor.svelte

@@ -394,6 +394,7 @@ async function loadMonaco() {
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
         editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () { });
+        editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () { });
     });
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {

package/package/components/TestJobLoader.svelte

@@ -74,7 +74,10 @@ export async function getLogs() {
             running: `running` in job && job.running,
             logOffset: job.logs?.length ?? 0
         });
-        job.logs = (job.logs ?? '').concat(getUpdate.new_logs ?? '');
+        if ((job.logs ?? '').length == 0) {
+            job.logs = getUpdate.new_logs ?? '';
+            logOffset = getUpdate.log_offset ?? 0;
+        }
     }
 }
 export async function runPreview(path, code, lang, args, tag, lock) {
@@ -131,18 +134,24 @@ async function loadTestJob(id) {
     if (currentId === id) {
         try {
             if (job && `running` in job) {
+                const offset = logOffset == 0 ? (job.logs?.length ? job.logs?.length + 1 : 0) : logOffset;
                 let previewJobUpdates = await JobService.getJobUpdates({
                     workspace: workspace,
                     id,
                     running: job.running,
-                    logOffset: logOffset == 0 ? (job.logs?.length ? job.logs?.length + 1 : 0) : logOffset
+                    logOffset: offset
                 });
+                if (previewJobUpdates.new_logs) {
+                    if (offset == 0) {
+                        job.logs = previewJobUpdates.new_logs ?? '';
+                    }
+                    else {
+                        job.logs = (job?.logs ?? '').concat(previewJobUpdates.new_logs);
+                    }
+                }
                 if (previewJobUpdates.log_offset) {
                     logOffset = previewJobUpdates.log_offset ?? 0;
                 }
-                if (previewJobUpdates.new_logs) {
-                    job.logs = (job?.logs ?? '').concat(previewJobUpdates.new_logs);
-                }
                 if (previewJobUpdates.flow_status) {
                     job.flow_status = previewJobUpdates.flow_status;
                 }

package/package/components/TestJobLoader.svelte.d.ts

@@ -51,7 +51,7 @@ export default class TestJobLoader extends SvelteComponent<TestJobLoaderProps, T
     get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get getLogs(): () => Promise<void>;
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
     get cancelJob(): () => Promise<void>;
     get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;

package/package/components/Toggle.svelte

@@ -9,6 +9,7 @@ export let textClass = '';
 export let textStyle = '';
 export let color = 'blue';
 export let id = (Math.random() + 1).toString(36).substring(10);
+export let lightMode = false;
 export let size = 'sm';
 const dispatch = createEventDispatcher();
 const bothOptions = Boolean(options.left) && Boolean(options.right);
@@ -32,7 +33,7 @@ const bothOptions = Boolean(options.left) && Boolean(options.right);
 		>
 			{options?.left}
 			{#if options?.leftTooltip}
-				<Tooltip>{options?.leftTooltip}</Tooltip>
+				<Tooltip light={lightMode}>{options?.leftTooltip}</Tooltip>
 			{/if}
 		</span>
 	{/if}
@@ -55,7 +56,9 @@ const bothOptions = Boolean(options.left) && Boolean(options.right);
 		<div
 			class={classNames(
 				"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all ",
-				color == 'red' ? 'peer-checked:bg-red-600' : 'peer-checked:bg-blue-600',
+				color == 'red'
+					? 'peer-checked:bg-red-600'
+					: 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500',
 				size === 'sm'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
 					: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
@@ -74,7 +77,7 @@ const bothOptions = Boolean(options.left) && Boolean(options.right);
 		>
 			{options?.right}
 			{#if options?.rightTooltip}
-				<Tooltip>{options?.rightTooltip}</Tooltip>
+				<Tooltip light={lightMode}>{options?.rightTooltip}</Tooltip>
 			{/if}
 		</span>
 	{/if}

package/package/components/Toggle.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         textStyle?: string | undefined;
         color?: "blue" | "red" | undefined;
         id?: string | undefined;
+        lightMode?: boolean | undefined;
         size?: "xs" | "sm" | undefined;
     };
     events: {

package/package/components/Tooltip.svelte

@@ -8,12 +8,18 @@ export let placement = undefined;
 export let documentationLink = undefined;
 export let small = false;
 export let markdownTooltip = undefined;
+export let customSize = '100%';
 const plugins = [gfmPlugin()];
 </script>
 
-<Popover notClickable {placement} class={wrapperClass}>
+<Popover
+	notClickable
+	{placement}
+	class={wrapperClass}
+	style="transform: scale({parseFloat(customSize) / 100});"
+>
 	<div
-		class="inline-flex w-3 mx-0.5 {light
+		class="inline-flex w-3 mx-0.5 h-3 {light
 			? 'text-tertiary-inverse'
 			: 'text-tertiary'} {$$props.class} relative"
 	>

package/package/components/Tooltip.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         documentationLink?: string | undefined;
         small?: boolean | undefined;
         markdownTooltip?: string | undefined;
+        customSize?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/UserSettings.svelte

@@ -71,8 +71,9 @@ async function createToken() {
     listTokens();
     displayCreateToken = false;
 }
+let tokenPage = 1;
 async function listTokens() {
-    tokens = await UserService.listTokens({ excludeEphemeral: true });
+    tokens = await UserService.listTokens({ excludeEphemeral: true, page: tokenPage, perPage: 100 });
 }
 async function deleteToken(tokenPrefix) {
     await UserService.deleteToken({ tokenPrefix });
@@ -324,6 +325,28 @@ loadSettings();
 							{/if}
 						</tbody>
 					</TableCustom>
+					<div class="flex flex-row-reverse gap-2 w-full">
+						{#if tokens?.length == 100}
+							<button
+								class=" p-1 underline text-sm whitespace-nowrap text-center"
+								on:click={() => {
+									tokenPage += 1
+									listTokens()
+								}}
+								>Next
+							</button>
+						{/if}
+						{#if tokenPage > 1}
+							<button
+								class="p-1 underline text-sm whitespace-nowrap text-center"
+								on:click={() => {
+									tokenPage -= 1
+									listTokens()
+								}}
+								>Previous
+							</button>
+						{/if}
+					</div>
 				</div>
 			</div>
 		</div>