windmill-components 1.408.2 → 1.430.2

package/package/components/LightweightArgInput.svelte

@@ -46,6 +46,9 @@ export let customErrorMessage = undefined;
 export let render = true;
 export let title = undefined;
 export let placeholder = undefined;
+export let appPath = undefined;
+export let computeS3ForceViewerPolicies = undefined;
+export let workspace = undefined;
 let oneOfSelected = undefined;
 async function updateOneOfSelected(oneOf) {
     if (oneOf &&
@@ -133,21 +136,27 @@ function validateInput(pattern, v, required) {
         valid && (valid = false);
     }
     else {
-        if (pattern && !testRegex(pattern, v)) {
-            if (!emptyString(customErrorMessage)) {
-                error = customErrorMessage ?? '';
-            }
-            else if (format == 'email') {
-                error = 'invalid email address';
+        if (!required && (v == undefined || v == null || v === '')) {
+            error = '';
+            !valid && (valid = true);
+        }
+        else {
+            if (pattern && !testRegex(pattern, v)) {
+                if (!emptyString(customErrorMessage)) {
+                    error = customErrorMessage ?? '';
+                }
+                else if (format == 'email') {
+                    error = 'invalid email address';
+                }
+                else {
+                    error = `should match ${pattern}`;
+                }
+                valid && (valid = false);
             }
             else {
-                error = `should match ${pattern}`;
+                error = '';
+                !valid && (valid = true);
             }
-            valid && (valid = false);
-        }
-        else {
-            error = '';
-            !valid && (valid = true);
         }
     }
 }
@@ -286,6 +295,7 @@ function addItemByItemsType() {
 									options={itemsType?.multiselect ?? []}
 									selectedOptionsDraggable={true}
 									{disabled}
+									--sms-open-z-index={20}
 								/>
 							</div>
 						{:else if Array.isArray(itemsType?.enum) && Array.isArray(value)}
@@ -296,6 +306,7 @@ function addItemByItemsType() {
 									options={itemsType?.enum ?? []}
 									selectedOptionsDraggable={true}
 									{disabled}
+									--sms-open-z-index={20}
 								/>
 							</div>
 						{:else if Array.isArray(enum_) && Array.isArray(value)}
@@ -306,6 +317,7 @@ function addItemByItemsType() {
 									options={enum_ ?? []}
 									selectedOptionsDraggable={true}
 									{disabled}
+									--sms-open-z-index={20}
 								/>
 							</div>
 						{:else}
@@ -399,6 +411,9 @@ function addItemByItemsType() {
 						.toLowerCase() == 's3object'}
 					<div class="flex flex-col w-full gap-1">
 						<FileUpload
+							{appPath}
+							computeForceViewerPolicies={computeS3ForceViewerPolicies}
+							{workspace}
 							allowMultiple={false}
 							randomFileKey={true}
 							on:addition={(evt) => {

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

@@ -38,6 +38,14 @@ declare const __propDef: {
         render?: boolean | undefined;
         title?: string | undefined;
         placeholder?: string | undefined;
+        appPath?: string | undefined;
+        computeS3ForceViewerPolicies?: (() => {
+            allowed_resources: string[];
+            allow_user_resources: boolean;
+            allow_workspace_resource: boolean;
+            file_key_regex: string;
+        } | undefined) | undefined;
+        workspace?: string | undefined;
         error?: string | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;

package/package/components/LightweightResourcePicker.svelte

@@ -5,7 +5,7 @@ import Select from './apps/svelte-select/lib/index';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Button, Drawer, DrawerContent } from './common';
-import { Plus, Loader2 } from 'lucide-svelte';
+import { Plus, Loader2, Link2Off } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
 const dispatch = createEventDispatcher();
 export let initialValue = undefined;
@@ -22,21 +22,32 @@ let valueSelect = initialValue || value
         value: value ?? initialValue,
         label: value ?? initialValue
     }
-    : '';
+    : undefined;
 let collection = [valueSelect];
+let loading = true;
 async function loadResources(resourceType) {
-    const nc = (await ResourceService.listResource({
-        workspace: $workspaceStore,
-        resourceType
-    })).map((x) => ({
-        value: x.path,
-        label: x.path
-    }));
-    // TODO check if this is needed
-    if (!nc.find((x) => x.value == value) && (initialValue || value)) {
-        nc.push({ value: value ?? initialValue, label: value ?? initialValue });
+    loading = true;
+    try {
+        const nc = (await ResourceService.listResource({
+            workspace: appViewerContext?.workspace ?? $workspaceStore,
+            resourceType
+        })).map((x) => ({
+            value: x.path,
+            label: x.path
+        }));
+        // TODO check if this is needed
+        if (!nc.find((x) => x.value == value) && (initialValue || value)) {
+            nc.push({ value: value ?? initialValue, label: value ?? initialValue });
+        }
+        collection = nc;
+        if (expressOAuthSetup && nc.length > 0) {
+            value = nc[0].value;
+            valueSelect = nc[0];
+        }
+    }
+    finally {
+        loading = false;
     }
-    collection = nc;
 }
 $: $workspaceStore && loadResources(resourceType);
 $: dispatch('change', value);
@@ -53,13 +64,21 @@ export function askNewResource() {
 {#if expressOAuthSetup}
 	{#if open}
 		{#key refreshCount}
-			{#await import('./AppConnectLightweightResourcePicker.svelte')}
-				<Loader2 class="animate-spin" />
-			{:then Module}
+			{#await import('./AppConnectLightweightResourcePicker.svelte') then Module}
 				<Module.default
 					workspace={appViewerContext?.workspace ?? $workspaceStore}
 					{resourceType}
 					express={true}
+					on:error={(e) => {
+						sendUserToast(e.detail, true)
+						open = false
+					}}
+					on:refresh={async (e) => {
+						await loadResources(resourceType)
+						value = e.detail
+						valueSelect = { value, label: value }
+						open = false
+					}}
 				/>
 			{/await}
 		{/key}
@@ -82,7 +101,8 @@ export function askNewResource() {
 					on:error={(e) => {
 						sendUserToast(e.detail, true)
 					}}
-					on:refresh={(e) => {
+					on:refresh={async (e) => {
+						await loadResources(resourceType)
 						value = e.detail
 						valueSelect = { value, label: value }
 						drawer?.closeDrawer?.()
@@ -102,42 +122,91 @@ export function askNewResource() {
 {/if}
 
 <div class="flex flex-col w-full items-start">
-	<div class="flex flex-row gap-x-1 w-full">
-		<Select
-			{disabled}
-			portal={!disablePortal}
-			value={valueSelect}
-			on:change={(e) => {
-				value = e.detail.value
-				valueSelect = e.detail
-			}}
-			on:clear={() => {
-				value = undefined
-				valueSelect = ''
-			}}
-			items={collection}
-			class="text-clip grow min-w-0"
-			placeholder="{resourceType ?? 'any'} resource"
-			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-			containerStyles={darkMode
-				? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-				: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-		/>
-
-		{#if resourceType}
-			<Button
+	<div class="flex flex-row gap-x-1 w-full justify-between items-center">
+		{#if loading}
+			<Loader2 size={12} class="animate-spin" />
+		{:else if expressOAuthSetup && collection.length < 2}
+			{#if collection.length == 0}
+				<div class="text-2xs text-primary pr-2">Connect {resourceType}</div>
+			{:else if collection.length == 1 && value == collection[0]?.value}
+				<div class="text-2xs text-primary pr-2 flex items-center gap-1">
+					{resourceType} <div class="rounded-full w-2 h-2 bg-green-600 animate-pulse" />
+				</div>
+			{:else}
+				<Button
+					color="light"
+					size="sm"
+					on:click={() => {
+						const item = collection[0]
+						if (item) {
+							value = item.value
+							valueSelect = item
+						}
+					}}>Use existing</Button
+				>
+			{/if}
+		{:else}
+			<Select
 				{disabled}
-				color="light"
-				variant="contained"
-				btnClasses="w-8 px-0.5 py-1.5"
-				size="sm"
-				on:click={() => {
-					open = true
-					drawer?.openDrawer?.()
+				portal={!disablePortal}
+				value={valueSelect}
+				on:change={(e) => {
+					value = e.detail.value
+					valueSelect = e.detail
+				}}
+				on:clear={() => {
+					value = undefined
+					valueSelect = undefined
 				}}
-				startIcon={{ icon: Plus }}
-				iconOnly
+				items={collection}
+				class="text-clip grow min-w-0"
+				placeholder="{resourceType ?? 'any'} resource"
+				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+				containerStyles={darkMode
+					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+					: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 			/>
 		{/if}
+		<div class="flex gap-1 items-center">
+			{#if valueSelect && expressOAuthSetup}
+				<Button
+					{disabled}
+					color="light"
+					variant="contained"
+					size="sm"
+					btnClasses="w-8 px-0.5 py-1.5"
+					iconOnly
+					on:click={async () => {
+						if (valueSelect && valueSelect.label) {
+							value = undefined
+							await ResourceService.deleteResource({
+								workspace: appViewerContext?.workspace ?? $workspaceStore,
+								path: valueSelect.label
+							})
+							await loadResources(resourceType)
+							value = undefined
+							valueSelect = undefined
+						}
+					}}
+					startIcon={{ icon: Link2Off }}
+				/>
+			{/if}
+			{#if resourceType}
+				<Button
+					{disabled}
+					color="light"
+					variant="contained"
+					btnClasses="w-8 px-0.5 py-1.5"
+					size="sm"
+					on:click={() => {
+						refreshCount += 1
+						open = true
+						drawer?.openDrawer?.()
+					}}
+					startIcon={{ icon: Plus }}
+					iconOnly
+				/>
+			{/if}
+		</div>
 	</div>
 </div>

package/package/components/LightweightSchemaForm.svelte

@@ -11,6 +11,9 @@ export let isValid = true;
 export let defaultValues = {};
 export let dynamicEnums = {};
 export let disabled = false;
+export let appPath = undefined;
+export let computeS3ForceViewerPolicies = undefined;
+export let workspace = undefined;
 let inputCheck = {};
 let errors = {};
 $: isValid = allTrue(inputCheck) ?? false;
@@ -88,6 +91,9 @@ function reorder() {
 				{displayType}
 				{css}
 				disabled={disabled || schema.properties[argName].disabled}
+				{appPath}
+				{computeS3ForceViewerPolicies}
+				{workspace}
 			/>
 		{/if}
 	{/each}

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

@@ -12,6 +12,14 @@ declare const __propDef: {
         defaultValues?: Record<string, any> | undefined;
         dynamicEnums?: Record<string, any> | undefined;
         disabled?: boolean | undefined;
+        appPath?: string | undefined;
+        computeS3ForceViewerPolicies?: (() => {
+            allowed_resources: string[];
+            allow_user_resources: boolean;
+            allow_workspace_resource: boolean;
+            file_key_regex: string;
+        } | undefined) | undefined;
+        workspace?: string | undefined;
         invalidate?: ((key: string, error: string) => void) | undefined;
         validate?: ((key: string) => void) | undefined;
         validateAll?: (() => void) | undefined;

package/package/components/LogSnippetViewer.svelte

@@ -0,0 +1,31 @@
+<script>import AnsiUp from 'ansi_up';
+export let content;
+export let highlighted;
+const ansi_up = new AnsiUp();
+ansi_up.use_classes = true;
+function highlightSnippet(snippet) {
+    const opener = '!-!-!_H_START_WMILL_!-!-!';
+    const closer = '!-!-!_H_ENDER_WMILL_!-!-!';
+    let offset = 0;
+    let ret = snippet;
+    for (const range of highlighted) {
+        ret = ret.slice(0, range.start + offset) + opener + ret.slice(range.start + offset);
+        offset += opener.length;
+        ret = ret.slice(0, range.end + offset) + closer + ret.slice(range.end + offset);
+        offset += closer.length;
+    }
+    let html = ansi_up.ansi_to_html(ret);
+    let html2 = html
+        .replaceAll(opener, '<span class="bg-amber-400 text-black">')
+        .replaceAll(closer, '</span>');
+    return html2;
+}
+let html = highlightSnippet(content);
+</script>
+
+<button on:click class="font-light !m-0 !p-0">
+<pre
+	class="bg-surface-secondary hover:bg-surface px-2 py-1 text-secondary text-xs w-[100%] whitespace-pre border min-w-full text-start" >
+{@html html}
+</pre>
+</button>

package/package/components/LogSnippetViewer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        content: string;
+        highlighted: any[];
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogSnippetViewerProps = typeof __propDef.props;
+export type LogSnippetViewerEvents = typeof __propDef.events;
+export type LogSnippetViewerSlots = typeof __propDef.slots;
+export default class LogSnippetViewer extends SvelteComponent<LogSnippetViewerProps, LogSnippetViewerEvents, LogSnippetViewerSlots> {
+}
+export {};

package/package/components/LogViewer.svelte

@@ -2,7 +2,7 @@
 const s3LogPrefixes = [
     '\n[windmill] Previous logs have been saved to object storage at logs/',
     '\n[windmill] Previous logs have been saved to disk at logs/',
-    '\n[windmill] No object storage set in instance settings. Previous logs have been saved to disk at '
+    '\n[windmill] No object storage set in instance settings. Previous logs have been saved to disk at logs/'
 ];
 </script>
 
@@ -218,7 +218,7 @@ function showMoreTruncate(len) {
 					: 'top-2'}  left-36">mem peak: {(mem / 1024).toPrecision(4)}MB</span
 			>
 		{/if}
-		<pre class="whitespace-pre-wrap break-words {small ? '!text-2xs' : '!text-xs'} w-full p-2"
+		<pre class="whitespace-pre break-words {small ? '!text-2xs' : '!text-xs'} w-full p-2"
 			>{#if content}{@const len =
 					(content?.length ?? 0) +
 					(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button on:click={getStoreLogs}

package/package/components/Login.svelte

@@ -134,7 +134,10 @@ async function redirectUser() {
 }
 async function loadLogins() {
     const allLogins = await OauthService.listOauthLogins();
-    logins = allLogins.oauth;
+    logins = allLogins.oauth.map(login => ({
+        type: login.type,
+        displayName: login.display_name || login.type
+    }));
     saml = allLogins.saml;
     showPassword = (logins.length == 0 && !saml) || (email != undefined && email.length > 0);
 }
@@ -189,26 +192,26 @@ $: error && sendUserToast(error, true);
 				<Skeleton layout={[0.5, [2.375]]} />
 			{/each}
 		{:else}
-			{#each providers as { type, icon, name }}
-				{#if logins?.includes(type)}
+			{#each providers as { type, icon }}
+				{#if logins?.some(login => login.type === type)}
 					<Button
 						color="light"
 						variant="border"
 						startIcon={{ icon, classes: 'h-4' }}
 						on:click={() => storeRedirect(type)}
 					>
-						{name}
+						{logins.find(login => login.type === type)?.displayName}
 					</Button>
 				{/if}
 			{/each}
-			{#each logins.filter((x) => !providersType?.includes(x)) as login}
+			{#each logins.filter((login) => !providersType?.includes(login.type)) as login}
 				<Button
 					color="dark"
 					variant="border"
 					btnClasses="mt-2 w-full !border-gray-300"
-					on:click={() => storeRedirect(login)}
+					on:click={() => storeRedirect(login.type)}
 				>
-					{login}
+					{login.displayName}
 				</Button>
 			{/each}
 		{/if}

package/package/components/ModulePreview.svelte

@@ -47,7 +47,7 @@ export async function runTest(args) {
         const script = val.hash
             ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
             : await getScriptByPath(val.path);
-        await testJobLoader?.runPreview(val.path, script.content, script.language, args, $flowStore?.tag ?? script.tag);
+        await testJobLoader?.runPreview(val.path, script.content, script.language, args, $flowStore?.tag ?? (val.tag_override ? val.tag_override : script.tag));
     }
     else if (val.type == 'flow') {
         await testJobLoader?.abstractRun(() => JobService.runFlowByPath({
@@ -72,8 +72,6 @@ function jobDone() {
 let forceJson = false;
 </script>
 
-
-
 <TestJobLoader
 	toastError={noEditor}
 	on:done={() => jobDone()}
@@ -127,9 +125,14 @@ 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 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
@@ -155,7 +158,7 @@ let forceJson = false;
 					<div class="p-2">
 						{#if testIsLoading}
 							{#if !scriptProgress}
-							<Loader2 class="animate-spin" />
+								<Loader2 class="animate-spin" />
 							{/if}
 						{:else}
 							Test to see the result here

package/package/components/OAuthSetting.svelte

@@ -2,12 +2,26 @@
 import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
+import { onMount } from 'svelte';
 export let name;
 export let value;
 export let login = true;
 $: enabled = value != undefined;
 let tenant = '';
 $: name == 'microsoft' && changeTenantId(tenant);
+onMount(() => {
+    try {
+        if (name == 'microsoft' &&
+            value &&
+            value['login_config'] &&
+            typeof value['login_config']['auth_url'] == 'string') {
+            tenant = value['login_config']['auth_url'].split('/')[3];
+        }
+    }
+    catch (e) {
+        console.error('Could not set tenantId', e);
+    }
+});
 function changeTenantId(tenant) {
     if (value && tenant) {
         if (tenant != '') {
@@ -46,6 +60,12 @@ function changeTenantId(tenant) {
 	>
 	{#if enabled}
 		<div class="p-2 rounded border">
+			{#if name != 'slack'}
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Custom Name</span>
+					<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+				</label>
+			{/if}
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />

package/package/components/ObjectTypeNarrowing.svelte

@@ -1,14 +1,17 @@
-<script>import ResourceTypePicker from './ResourceTypePicker.svelte';
+<script>import { createEventDispatcher } from 'svelte';
+import ResourceTypePicker from './ResourceTypePicker.svelte';
 export let format;
 let resource = format?.startsWith('resource-')
     ? format.substring('resource-'.length)
     : undefined;
+const dispatch = createEventDispatcher();
 </script>
 
 <ResourceTypePicker
 	on:click={(e) => {
 		resource = e.detail
 		format = resource != undefined ? `resource-${resource}` : undefined
+		dispatch('change', format)
 	}}
 	value={resource}
 	nonePickable={true}

package/package/components/ObjectTypeNarrowing.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
         format: string | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/OktaSetting.svelte

@@ -61,6 +61,10 @@ function changeDomain(domain, custom) {
 					</div>
 				</div>
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm"
 					>Client Id <Tooltip

package/package/components/PageHeader.svelte

@@ -5,10 +5,10 @@ export let documentationLink = undefined;
 export let primary = true;
 </script>
 
-<div class="flex flex-row flex-wrap justify-between pt-6 pb-2 my-4">
+<div class="flex flex-row flex-wrap justify-between pb-2 my-4 mr-2">
 	{#if primary}
 		<span class="flex items-center gap-2">
-			<h1 class="!text-2xl font-semibold leading-6 tracking-tight">{title}</h1>
+			<h1 class="!text-2xl font-semibold whitespace-nowrap leading-6 tracking-tight">{title}</h1>
 			{#if tooltip != '' || documentationLink}
 				<Tooltip {documentationLink}>
 					{tooltip}