windmill-components 1.394.8 → 1.405.5

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'}

package/package/components/ObjectResourceInput.svelte

@@ -14,7 +14,7 @@ function isString(value) {
 }
 export let path = '';
 function resourceToValue() {
-    if (path) {
+    if (path && path != '') {
         value = `$res:${path}`;
     }
     else {
@@ -43,8 +43,11 @@ $: value && valueToPath();
 				path = e.detail
 				resourceToValue()
 			}}
+			on:clear
 			bind:value={path}
-			initialValue={defaultValue}
+			initialValue={typeof defaultValue == 'string' && defaultValue.startsWith('$res:')
+				? defaultValue.substr('$res:'.length)
+				: defaultValue}
 			resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
 			{showSchemaExplorer}
 		/>

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
         path?: string | undefined;
     };
     events: {
+        clear: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/ObjectStoreConfigSettings.svelte

@@ -49,7 +49,7 @@ async function testConnection() {
 	/>
 </div>
 {#if bucket_config}
-	<div class="flex gap-2">
+	<div class="flex gap-2 py-1">
 		<Button
 			spacingSize="sm"
 			size="xs"
@@ -100,81 +100,83 @@ async function testConnection() {
 		<Tab size="sm" value="S3">S3</Tab>
 		<Tab size="sm" value="Azure">Azure Blob</Tab>
 	</Tabs>
-	{#if bucket_config.type === 'S3'}
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm">Bucket</span>
-			<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
-		</label>
+	<div class="flex flex-col gap-2 mt-2 p-2 border rounded-md">
+		{#if bucket_config.type === 'S3'}
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Bucket</span>
+				<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
+			</label>
 
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm">Region</span>
-			<span class="text-tertiary text-2xs"
-				>If left empty, will be derived automatically from $AWS_REGION</span
-			>
-			<input type="text" bind:value={bucket_config.region} />
-		</label>
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm">Access key ID</span>
-			<span class="text-tertiary text-2xs"
-				>If left empty, will be derived automatically from $AWS_ACCESS_KEY_ID, pod or ec2 profile</span
-			>
-			<input type="text" bind:value={bucket_config.access_key} />
-		</label>
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm">Secret key</span>
-			<span class="text-tertiary text-2xs"
-				>If left empty, will be derived automatically from $AWS_SECRET_KEY, pod or ec2 profile</span
-			>
-			<input type="password" autocomplete="new-password" bind:value={bucket_config.secret_key} />
-		</label>
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm">Endpoint</span>
-			<span class="text-tertiary text-2xs"
-				>Only needed for non AWS S3 providers like R2 or MinIo</span
-			>
-			<input type="text" bind:value={bucket_config.endpoint} />
-		</label>
-		<div class="block pb-2">
-			<span class="text-tertiary text-2xs">Disable if using https only policy</span>
-			<div>
-				<Toggle bind:checked={bucket_config.allow_http} options={{ right: 'Allow http' }} />
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Region</span>
+				<span class="text-tertiary text-2xs"
+					>If left empty, will be derived automatically from $AWS_REGION</span
+				>
+				<input type="text" bind:value={bucket_config.region} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Access key ID</span>
+				<span class="text-tertiary text-2xs"
+					>If left empty, will be derived automatically from $AWS_ACCESS_KEY_ID, pod or ec2 profile</span
+				>
+				<input type="text" bind:value={bucket_config.access_key} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Secret key</span>
+				<span class="text-tertiary text-2xs"
+					>If left empty, will be derived automatically from $AWS_SECRET_KEY, pod or ec2 profile</span
+				>
+				<input type="password" autocomplete="new-password" bind:value={bucket_config.secret_key} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Endpoint</span>
+				<span class="text-tertiary text-2xs"
+					>Only needed for non AWS S3 providers like R2 or MinIo</span
+				>
+				<input type="text" bind:value={bucket_config.endpoint} />
+			</label>
+			<div class="block pb-2">
+				<span class="text-tertiary text-2xs">Disable if using https only policy</span>
+				<div>
+					<Toggle bind:checked={bucket_config.allow_http} options={{ right: 'Allow http' }} />
+				</div>
 			</div>
-		</div>
-	{:else if bucket_config.type === 'Azure'}
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm">Account name</span>
-			<input type="text" placeholder="account-name" bind:value={bucket_config.accountName} />
-		</label>
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm">Container name</span>
-			<input type="text" placeholder="container-name" bind:value={bucket_config.containerName} />
-		</label>
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm">Access key</span>
-			<input type="password" autocomplete="new-password" bind:value={bucket_config.accessKey} />
-		</label>
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm"
-				>Tenant ID <span class="text-2xs text-tertiary">(optional)</span></span
-			>
-			<input type="text" bind:value={bucket_config.tenantId} />
-		</label>
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm"
-				>Client ID <span class="text-2xs text-tertiary">(optional)</span></span
-			>
-			<input type="text" bind:value={bucket_config.clientId} />
-		</label>
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm"
-				>Endpoint <span class="text-2xs text-tertiary">(optional)</span></span
-			>
-			<span class="text-tertiary text-2xs"
-				>Only needed for non Azure Blob providers like Azurite</span
-			>
-			<input type="text" bind:value={bucket_config.endpoint} />
-		</label>
-	{:else}
-		<div>Unknown bucket type {bucket_config['type']}</div>
-	{/if}
+		{:else if bucket_config.type === 'Azure'}
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Account name</span>
+				<input type="text" placeholder="account-name" bind:value={bucket_config.accountName} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Container name</span>
+				<input type="text" placeholder="container-name" bind:value={bucket_config.containerName} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Access key</span>
+				<input type="password" autocomplete="new-password" bind:value={bucket_config.accessKey} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm"
+					>Tenant ID <span class="text-2xs text-tertiary">(optional)</span></span
+				>
+				<input type="text" bind:value={bucket_config.tenantId} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm"
+					>Client ID <span class="text-2xs text-tertiary">(optional)</span></span
+				>
+				<input type="text" bind:value={bucket_config.clientId} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm"
+					>Endpoint <span class="text-2xs text-tertiary">(optional)</span></span
+				>
+				<span class="text-tertiary text-2xs"
+					>Only needed for non Azure Blob providers like Azurite</span
+				>
+				<input type="text" bind:value={bucket_config.endpoint} />
+			</label>
+		{:else}
+			<div>Unknown bucket type {bucket_config['type']}</div>
+		{/if}
+	</div>
 {/if}

package/package/components/ParqetCsvTableRenderer.svelte

@@ -7,19 +7,36 @@ import { HelpersService } from '../gen';
 import { base } from '../base';
 import { enterpriseLicense, workspaceStore } from '../stores';
 import { Download } from 'lucide-svelte';
+import { Loader2 } from 'lucide-svelte';
 // import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 let selectedRowIndex = -1;
 export let s3resource;
 export let storage;
 export let workspaceId;
 export let disable_download = false;
+let lastSearch = undefined;
+let nbRows = undefined;
 let csvSeparatorChar = ',';
 let datasource = {
     rowCount: 0,
     getRows: async function (params) {
         try {
             const searchCol = params.filterModel ? Object.keys(params.filterModel)?.[0] : undefined;
+            const searchTerm = searchCol ? params.filterModel?.[searchCol]?.filter : undefined;
             const csv = s3resource.endsWith('.csv');
+            const newSearch = searchCol ? searchCol + searchTerm : undefined;
+            if (!nbRows || lastSearch != newSearch) {
+                nbRows = undefined;
+                const res = await HelpersService.loadTableRowCount({
+                    workspace: workspaceId ?? $workspaceStore,
+                    path: s3resource,
+                    searchCol: searchCol,
+                    storage,
+                    searchTerm
+                });
+                nbRows = res.count;
+                lastSearch = newSearch;
+            }
             const requestBody = {
                 workspace: workspaceId ?? $workspaceStore,
                 path: s3resource,
@@ -27,8 +44,8 @@ let datasource = {
                 limit: params.endRow - params.startRow,
                 sortCol: params.sortModel?.[0]?.colId,
                 sortDesc: params.sortModel?.[0]?.sort == 'desc',
-                searchCol: searchCol,
-                searchTerm: searchCol ? params.filterModel?.[searchCol]?.filter : undefined,
+                searchCol,
+                searchTerm,
                 storage: storage,
                 csvSeparator: csv ? csvSeparatorChar : undefined
             };
@@ -45,7 +62,7 @@ let datasource = {
                     });
                 }
             }
-            params.successCallback(res.rows);
+            params.successCallback(res.rows, nbRows);
         }
         catch (e) {
             console.error(e);
@@ -164,6 +181,11 @@ let darkMode = false;
 		>
 	{/if}
 
+	{#if nbRows != undefined}
+		<div class="text-secondary ml-0.5 text-2xs">{nbRows} rows</div>
+	{:else}
+		<Loader2 class="animate-spin ml-0.5" size={12} />
+	{/if}
 	<div
 		class="ag-theme-alpine shadow-sm h-full"
 		class:ag-theme-alpine-dark={darkMode}

package/package/components/Password.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        password: string;
+        password: string | undefined;
         placeholder?: string | undefined;
         disabled?: boolean | undefined;
         required?: boolean | undefined;

package/package/components/Path.svelte

@@ -3,7 +3,7 @@ const lastMetaUsed = writable(undefined);
 </script>
 
 <script>import { pathToMeta } from '../common';
-import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, VariableService } from '../gen';
+import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, HttpTriggerService, VariableService } from '../gen';
 import { superadmin, userStore, workspaceStore } from '../stores';
 import { createEventDispatcher, getContext } from 'svelte';
 import { writable } from 'svelte/store';
@@ -27,6 +27,7 @@ export let checkInitialPathExistence = false;
 export let autofocus = true;
 export let dirty = false;
 export let kind;
+export let hideUser = false;
 let inputP = undefined;
 const dispatch = createEventDispatcher();
 let folders = [];
@@ -65,22 +66,33 @@ export async function reset() {
     if (path == '' || path == 'u//') {
         if ($lastMetaUsed == undefined || $lastMetaUsed.owner != $userStore?.username) {
             meta = {
-                ownerKind: 'user',
+                ownerKind: hideUser ? 'folder' : 'user',
                 name: fullNamePlaceholder ?? random_adj() + '_' + namePlaceholder,
                 owner: ''
             };
-            if ($userStore?.username?.includes('@')) {
-                meta.owner = $userStore.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '');
-            }
-            else {
-                meta.owner = $userStore.username;
+            if (!hideUser) {
+                if ($userStore?.username?.includes('@')) {
+                    meta.owner = $userStore.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '');
+                }
+                else {
+                    meta.owner = $userStore.username;
+                }
             }
         }
         else {
-            meta = {
-                ...$lastMetaUsed,
-                name: fullNamePlaceholder ?? random_adj() + '_' + namePlaceholder
-            };
+            if ($lastMetaUsed.ownerKind == 'user' && hideUser) {
+                meta = {
+                    ownerKind: 'folder',
+                    owner: '',
+                    name: fullNamePlaceholder ?? random_adj() + '_' + namePlaceholder
+                };
+            }
+            else {
+                meta = {
+                    ...$lastMetaUsed,
+                    name: fullNamePlaceholder ?? random_adj() + '_' + namePlaceholder
+                };
+            }
         }
         let newMeta = { ...meta };
         while (await pathExists(metaToPath(newMeta), kind)) {
@@ -94,7 +106,7 @@ export async function reset() {
         path = metaToPath(meta);
     }
     else {
-        meta = pathToMeta(path);
+        meta = pathToMeta(path, hideUser);
     }
 }
 async function loadFolders() {
@@ -167,6 +179,12 @@ async function pathExists(path, kind) {
     else if (kind == 'app') {
         return await AppService.existsApp({ workspace: $workspaceStore, path: path });
     }
+    else if (kind == 'http_trigger') {
+        return await HttpTriggerService.existsHttpTrigger({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
     else {
         return false;
     }
@@ -200,7 +218,7 @@ $: {
 }
 function initPath() {
     if (path != undefined && path != '') {
-        meta = pathToMeta(path);
+        meta = pathToMeta(path, hideUser);
         onMetaChange();
         return;
     }
@@ -208,7 +226,7 @@ function initPath() {
         reset();
     }
     else {
-        meta = pathToMeta(initialPath);
+        meta = pathToMeta(initialPath, hideUser);
         onMetaChange();
         path = initialPath;
     }
@@ -267,47 +285,49 @@ const openSearchWithPrefilledText = getContext('openSearchWithPrefilledText');
 		{#if meta != undefined}
 			<div class="flex gap-x-4 shrink">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
-				<div class="block">
-					<span class="text-secondary text-sm whitespace-nowrap">&nbsp;</span>
+				{#if !hideUser}
+					<div class="block">
+						<span class="text-secondary text-sm whitespace-nowrap">&nbsp;</span>
 
-					<ToggleButtonGroup
-						class="mt-0.5"
-						bind:selected={meta.ownerKind}
-						on:selected={(e) => {
-							setDirty()
-							const kind = e.detail
-							if (meta) {
-								if (kind === 'folder') {
-									meta.owner = folders?.[0]?.name ?? ''
-								} else if (kind === 'group') {
-									meta.owner = 'all'
-								} else {
-									meta.owner = $userStore?.username?.split('@')[0] ?? ''
+						<ToggleButtonGroup
+							class="mt-0.5"
+							bind:selected={meta.ownerKind}
+							on:selected={(e) => {
+								setDirty()
+								const kind = e.detail
+								if (meta) {
+									if (kind === 'folder') {
+										meta.owner = folders?.[0]?.name ?? ''
+									} else if (kind === 'group') {
+										meta.owner = 'all'
+									} else {
+										meta.owner = $userStore?.username?.split('@')[0] ?? ''
+									}
 								}
-							}
-						}}
-					>
-						<ToggleButton
-							icon={User}
-							{disabled}
-							light
-							size="xs"
-							value="user"
-							position="left"
-							label="User"
-						/>
-						<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
-						<ToggleButton
-							icon={Folder}
-							{disabled}
-							light
-							size="xs"
-							value="folder"
-							position="right"
-							label="Folder"
-						/>
-					</ToggleButtonGroup>
-				</div>
+							}}
+						>
+							<ToggleButton
+								icon={User}
+								{disabled}
+								light
+								size="xs"
+								value="user"
+								position="left"
+								label="User"
+							/>
+							<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
+							<ToggleButton
+								icon={Folder}
+								{disabled}
+								light
+								size="xs"
+								value="folder"
+								position="right"
+								label="Folder"
+							/>
+						</ToggleButtonGroup>
+					</div>
+				{/if}
 				{#if meta.ownerKind === 'user'}
 					<label class="block shrink min-w-0">
 						<span class="text-secondary text-sm">User</span>
@@ -417,7 +437,7 @@ const openSearchWithPrefilledText = getContext('openSearchWithPrefilledText');
 		<div class="text-red-600 dark:text-red-400 text-2xs">{error}</div>
 	</div>
 
-	{#if kind != 'app' && kind != 'schedule' && initialPath != '' && initialPath != undefined && initialPath != path}
+	{#if kind != 'app' && kind != 'schedule' && kind != 'http_trigger' && initialPath != '' && initialPath != undefined && initialPath != path}
 		<Alert type="warning" class="mt-4" title="Moving may break other items relying on it">
 			You are renaming an item that may be depended upon by other items. This may break apps, flows
 			or resources. Find if it used elsewhere using the content search. Note that linked variables

package/package/components/Path.svelte.d.ts

@@ -10,7 +10,8 @@ declare const __propDef: {
         checkInitialPathExistence?: boolean | undefined;
         autofocus?: boolean | undefined;
         dirty?: boolean | undefined;
-        kind: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "raw_app";
+        kind: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "raw_app" | "http_trigger";
+        hideUser?: boolean | undefined;
         focus?: (() => void) | undefined;
         setName?: ((x: string) => void) | undefined;
         reset?: (() => Promise<void>) | undefined;

package/package/components/Popover.svelte

@@ -60,7 +60,7 @@ function close() {
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
-	<Portal>
+	<Portal name="popover">
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			use:popperContent={popperOptions}

package/package/components/Portal.svelte

@@ -1,13 +1,8 @@
 <script context="module">
 	import { tick } from 'svelte'
 
-	/**
-	 * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
-	 *
-	 * @param {HTMLElement} el
-	 * @param {HTMLElement|string} target DOM Element or CSS Selector
-	 */
-	export function portal(el, target = 'body') {
+	export function portal(el, options) {
+		let { target, name } = options
 		let targetEl
 		async function update(newTarget) {
 			target = newTarget
@@ -32,6 +27,9 @@
 			if (!el.classList.contains('windmill-app')) {
 				el.classList.add('windmill-app')
 			}
+			if (name && !el.classList.contains(name)) {
+				el.classList.add(name)
+			}
 			targetEl.appendChild(el)
 			el.hidden = false
 		}
@@ -56,8 +54,9 @@
 	 * @type { HTMLElement|string}
 	 */
 	export let target = 'body'
+	export let name = undefined
 </script>
 
-<div use:portal={target} hidden>
+<div use:portal={{ target, name }} hidden>
 	<slot />
 </div>

package/package/components/Portal.svelte.d.ts

@@ -1,10 +1,4 @@
-/**
- * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
- *
- * @param {HTMLElement} el
- * @param {HTMLElement|string} target DOM Element or CSS Selector
- */
-export function portal(el: HTMLElement, target?: HTMLElement | string): {
+export function portal(el: any, options: any): {
     update: (newTarget: any) => Promise<void>;
     destroy: () => void;
 };
@@ -12,6 +6,7 @@ export function portal(el: HTMLElement, target?: HTMLElement | string): {
 /** @typedef {typeof __propDef.events}  PortalEvents */
 /** @typedef {typeof __propDef.slots}  PortalSlots */
 export default class Portal extends SvelteComponent<{
+    name?: any;
     target?: string | HTMLElement | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -25,6 +20,7 @@ export type PortalSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        name?: any;
         target?: string | HTMLElement | undefined;
     };
     events: {