windmill-components 1.339.2 → 1.352.0

package/package/components/StringTypeNarrowing.svelte

@@ -1,12 +1,13 @@
 <script>import { computeKind } from '../utils';
 import Label from './Label.svelte';
-import RadioButton from './RadioButton.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_;
@@ -19,7 +20,11 @@ export let disableVariablePicker = false;
 export let password = false;
 export let noExtra = false;
 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 = [
@@ -47,6 +52,9 @@ $: {
     }
 }
 function add() {
+    if (enumLabels === undefined) {
+        enumLabels = {};
+    }
     let choice = `choice ${enum_?.length ? enum_?.length + 1 : 1}`;
     enum_ = enum_ ? enum_.concat(choice) : [choice];
 }
@@ -55,204 +63,239 @@ function remove(item) {
     if (enum_.length == 0) {
         enum_ = undefined;
     }
+    if (enumLabels !== undefined) {
+        delete enumLabels[item];
+    }
 }
 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];
+    }
+}
 </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 gap-1">
+<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}
-				class="text-sm"
-			/>
-			<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"
-				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>
-
-	{#if format == 'date'}
-		<div class="mt-1" />
 
-		<div class="grid grid-cols-3 gap-2">
-			<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
-			>min textarea rows:
-			<input type="number" bind:value={minRows} />
-		</label>
+	{#if kind == 'none' || kind == 'pattern'}
+		<Toggle
+			size="xs"
+			options={{ right: 'Is Password' }}
+			checked={password}
+			on:change={(e) => {
+				password = e.detail
+			}}
+		/>
 	{/if}
-{:else if kind === 'base64'}
-	<Alert
-		type="warning"
-		title="S3 Object recommended"
-		collapsible
-		size="xs"
-		documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage/large_data_files"
-	>
-		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}
+</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;
@@ -12,6 +13,9 @@ declare const __propDef: {
         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/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 dark:peer-checked:bg-blue-500',
+				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/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>

package/package/components/WorkspaceGroup.svelte

@@ -1,4 +1,4 @@
-<script>import { Plus, X } from 'lucide-svelte';
+<script>import { Copy, Plus, RefreshCcwIcon, Settings, Trash, X } from 'lucide-svelte';
 import { Alert, Button, Drawer } from './common';
 import Multiselect from 'svelte-multiselect';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
@@ -714,7 +714,7 @@ let createdTags = [];
 								dirtyCode = true
 								const code = e.detail
 								if (code != '') {
-									nconfig.init_bash = code
+									nconfig.init_bash = code?.replace(/\r\n/g, '\n')
 								} else {
 									nconfig.init_bash = undefined
 								}
@@ -765,8 +765,7 @@ let createdTags = [];
 	</DrawerContent>
 </Drawer>
 
-<div class="flex gap-2 items-center"
-	><h4 class="py-4 truncate w-40 text-primary">{name}</h4>
+<div class="flex gap-2 items-center justify-end flex-row my-2">
 	{#if $superadmin}
 		<Button
 			color="light"
@@ -776,9 +775,10 @@ let createdTags = [];
 				loadNConfig()
 				drawer.openDrawer()
 			}}
+			startIcon={{ icon: config == undefined ? Plus : Settings }}
 		>
 			<div class="flex flex-row gap-1 items-center">
-				{config == undefined ? 'create' : 'edit'} config
+				{config == undefined ? 'Create' : 'Edit'} config
 			</div>
 		</Button>
 
@@ -794,8 +794,9 @@ let createdTags = [];
 				)
 				sendUserToast('Worker config copied to clipboard as YAML')
 			}}
+			startIcon={{ icon: Copy }}
 		>
-			copy config
+			Copy config
 		</Button>
 
 		{#if config}
@@ -809,9 +810,10 @@ let createdTags = [];
 						openDelete = true
 					}
 				}}
+				startIcon={{ icon: Trash }}
 				btnClasses="text-red-400"
 			>
-				delete config
+				Delete config
 			</Button>
 		{/if}
 
@@ -824,8 +826,9 @@ let createdTags = [];
 				openClean = true
 			}}
 			btnClasses="text-red-400"
+			startIcon={{ icon: RefreshCcwIcon }}
 		>
-			clean cache
+			Clean cache
 		</Button>
 	{:else if config}
 		<Button
@@ -839,9 +842,4 @@ let createdTags = [];
 			<div class="flex flex-row gap-1 items-center"> config </div>
 		</Button>
 	{/if}
-	{#if activeWorkers > 1}
-		<span class="ml-4 text-xs"
-			>{activeWorkers} Workers <Tooltip>Number of workers active in the last 10s</Tooltip></span
-		>
-	{/if}
 </div>

package/package/components/apps/components/buttons/AppButton.svelte

@@ -26,6 +26,7 @@ export let errorHandledByComponent = false;
 export let extraKey = undefined;
 export let isMenuItem = false;
 export let noInitialize = false;
+export let replaceCallback = false;
 export let controls = undefined;
 const { worldStore, app, componentControl, selectedComponent } = getContext('AppViewerContext');
 const rowContext = getContext('RowWrapperContext');
@@ -149,6 +150,7 @@ let css = initCss($app.css?.buttoncomponent, customCss);
 		}
 	}}
 	refreshOnStart={resolvedConfig.triggerOnAppLoad}
+	{replaceCallback}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment} class="wm-button-wrapper">
 		{#if errorsMessage}

package/package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
         extraKey?: string | undefined;
         isMenuItem?: boolean | undefined;
         noInitialize?: boolean | undefined;
+        replaceCallback?: boolean | undefined;
         controls?: {
             left: () => boolean;
             right: () => boolean | string;