windmill-components 1.309.7 → 1.352.0

package/package/components/Login.svelte

@@ -0,0 +1,288 @@
+<script>import { goto } from '$app/navigation';
+import Github from './icons/brands/Github.svelte';
+import Gitlab from './icons/brands/Gitlab.svelte';
+import Google from './icons/brands/Google.svelte';
+import Microsoft from './icons/brands/Microsoft.svelte';
+import Okta from './icons/brands/Okta.svelte';
+import { OauthService, UserService, WorkspaceService } from '../gen';
+import { usersWorkspaceStore, workspaceStore, userStore } from '../stores';
+import { classNames, emptyString, parseQueryParams } from '../utils';
+import { getUserExt } from '../user';
+import { Button, Skeleton } from './common';
+import { sendUserToast } from '../toast';
+import { isCloudHosted } from '../cloud';
+import { refreshSuperadmin } from '../refreshUser';
+export let rd = undefined;
+export let email = undefined;
+export let password = undefined;
+export let error = undefined;
+const providers = [
+    {
+        type: 'github',
+        name: 'GitHub',
+        icon: Github
+    },
+    {
+        type: 'gitlab',
+        name: 'GitLab',
+        icon: Gitlab
+    },
+    {
+        type: 'google',
+        name: 'Google',
+        icon: Google
+    },
+    {
+        type: 'microsoft',
+        name: 'Microsoft',
+        icon: Microsoft
+    },
+    {
+        type: 'okta',
+        name: 'Okta',
+        icon: Okta
+    }
+];
+const providersType = providers.map((p) => p.type);
+let showPassword = false;
+let logins = undefined;
+let saml = undefined;
+async function login() {
+    if (!email || !password) {
+        sendUserToast('Please fill in both email and password', true);
+        return;
+    }
+    const requestBody = {
+        email,
+        password
+    };
+    try {
+        await UserService.login({ requestBody });
+    }
+    catch (err) {
+        sendUserToast('Invalid credentials', true);
+        return;
+    }
+    // Once logged in, we can fetch the workspaces
+    $usersWorkspaceStore = await WorkspaceService.listUserWorkspaces();
+    // trigger a reload of the user
+    if ($workspaceStore) {
+        $userStore = await getUserExt($workspaceStore);
+    }
+    // Finally, we check whether the user is a superadmin
+    refreshSuperadmin();
+    redirectUser();
+}
+async function redirectUser() {
+    const firstTimeCookie = document.cookie.match('(^|;)\\s*first_time\\s*=\\s*([^;]+)')?.pop() || '0';
+    if (Number(firstTimeCookie) > 0 && email === 'admin@windmill.dev') {
+        goto('/user/first-time');
+        return;
+    }
+    if (rd?.startsWith('http')) {
+        window.location.href = rd;
+        return;
+    }
+    if ($workspaceStore) {
+        goto(rd ?? '/');
+    }
+    else {
+        let workspaceTarget = parseQueryParams(rd ?? undefined)['workspace'];
+        if (rd && workspaceTarget) {
+            $workspaceStore = workspaceTarget;
+            goto(rd);
+            return;
+        }
+        if (!$usersWorkspaceStore) {
+            try {
+                usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces());
+            }
+            catch { }
+        }
+        const allWorkspaces = $usersWorkspaceStore?.workspaces.filter((x) => x.id != 'admins');
+        if (allWorkspaces?.length == 1) {
+            workspaceStore.set(allWorkspaces[0].id);
+            $userStore = await getUserExt($workspaceStore);
+            if (!$userStore?.is_super_admin && $userStore?.operator) {
+                let defaultApp = await WorkspaceService.getWorkspaceDefaultApp({
+                    workspace: $workspaceStore
+                });
+                if (!emptyString(defaultApp.default_app_path)) {
+                    goto(`/apps/get/${defaultApp.default_app_path}`);
+                }
+                else {
+                    goto(rd ?? '/');
+                }
+            }
+            else {
+                goto(rd ?? '/');
+            }
+        }
+        else if (rd?.startsWith('/user/workspaces')) {
+            goto(rd);
+        }
+        else if (rd == '/#user-settings') {
+            goto(`/user/workspaces#user-settings`);
+        }
+        else {
+            goto(`/user/workspaces${rd ? `?rd=${encodeURIComponent(rd)}` : ''}`);
+        }
+    }
+}
+async function loadLogins() {
+    const allLogins = await OauthService.listOauthLogins();
+    logins = allLogins.oauth;
+    saml = allLogins.saml;
+    showPassword = (logins.length == 0 && !saml) || (email != undefined && email.length > 0);
+}
+loadLogins();
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        login();
+    }
+}
+function storeRedirect(provider) {
+    if (rd) {
+        try {
+            localStorage.setItem('rd', rd);
+        }
+        catch (e) {
+            console.error('Could not persist redirection to local storage', e);
+        }
+    }
+    window.location.href = window.location.origin + '/api/oauth/login/' + provider;
+}
+$: error && sendUserToast(error, true);
+</script>
+
+<div class="bg-surface px-4 py-8 shadow md:border sm:rounded-lg sm:px-10">
+	<div class="grid {logins && logins.length > 2 ? 'grid-cols-2' : ''} gap-4">
+		{#if !logins}
+			{#each Array(4) as _}
+				<Skeleton layout={[0.5, [2.375]]} />
+			{/each}
+		{:else}
+			{#each providers as { type, icon, name }}
+				{#if logins?.includes(type)}
+					<Button
+						color="light"
+						variant="border"
+						startIcon={{ icon, classes: 'h-4' }}
+						on:click={() => storeRedirect(type)}
+					>
+						{name}
+					</Button>
+				{/if}
+			{/each}
+			{#each logins.filter((x) => !providersType?.includes(x)) as login}
+				<Button
+					color="dark"
+					variant="border"
+					btnClasses="mt-2 w-full !border-gray-300"
+					on:click={() => storeRedirect(login)}
+				>
+					{login}
+				</Button>
+			{/each}
+		{/if}
+		{#if saml}
+			<Button
+				color="dark"
+				variant="border"
+				btnClasses="mt-2 w-full !border-gray-300"
+				on:click={() => {
+					if (saml) {
+						window.location.href = saml
+					} else {
+						sendUserToast('No SAML login available', true)
+					}
+				}}
+			>
+				SSO
+			</Button>
+		{/if}
+	</div>
+	{#if saml || (logins && logins.length > 0)}
+		<div class={classNames('center-center', logins && logins.length > 0 ? 'mt-6' : '')}>
+			<Button
+				size="xs"
+				color="blue"
+				variant="border"
+				btnClasses="!border-none"
+				on:click={() => {
+					showPassword = !showPassword
+				}}
+			>
+				Log in without third-party
+			</Button>
+		</div>
+	{/if}
+
+	{#if showPassword}
+		<div>
+			<div class="space-y-6">
+				{#if isCloudHosted()}
+					<p class="text-xs text-tertiary italic pb-6">
+						To get credentials without the OAuth providers above, send an email at
+						contact@windmill.dev
+					</p>
+				{/if}
+				<div>
+					<label for="email" class="block text-sm font-medium leading-6 text-primary">
+						Email
+					</label>
+					<div>
+						<input
+							type="email"
+							bind:value={email}
+							id="email"
+							autocomplete="email"
+							class="block w-full rounded-md border-0 py-1.5 text-primary shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
+						/>
+					</div>
+				</div>
+
+				<div>
+					<label for="password" class="block text-sm font-medium leading-6 text-primary">
+						Password
+					</label>
+					<div>
+						<input
+							on:keyup={handleKeyUp}
+							bind:value={password}
+							id="password"
+							type="password"
+							autocomplete="current-password"
+							class="block w-full rounded-md border-0 py-1.5 text-shadow shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
+						/>
+					</div>
+				</div>
+
+				<div class="pt-2">
+					<button
+						on:click={login}
+						disabled={!email || !password}
+						class="flex w-full justify-center rounded-md bg-frost-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-frost-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-frost-600"
+					>
+						Sign in
+					</button>
+				</div>
+			</div>
+
+			{#if isCloudHosted()}
+				<p class="text-2xs text-tertiary italic mt-10 text-center">
+					By logging in, you agree to our
+					<a href="https://windmill.dev/terms_of_service" target="_blank" rel="noreferrer">
+						Terms of Service
+					</a>
+					and
+					<a href="https://windmill.dev/privacy_policy" target="_blank" rel="noreferrer">
+						Privacy Policy
+					</a>
+				</p>
+			{/if}
+		</div>
+	{/if}
+</div>

package/package/components/Login.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        rd?: string | undefined;
+        email?: string | undefined;
+        password?: string | undefined;
+        error?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LoginProps = typeof __propDef.props;
+export type LoginEvents = typeof __propDef.events;
+export type LoginSlots = typeof __propDef.slots;
+export default class Login extends SvelteComponent<LoginProps, LoginEvents, LoginSlots> {
+}
+export {};

package/package/components/ModulePreviewForm.svelte

@@ -65,6 +65,7 @@ loadResourceTypes();
 							description={schema.properties[argName].description}
 							bind:value={args[argName]}
 							type={schema.properties[argName].type}
+							oneOf={schema.properties[argName].oneOf}
 							required={schema.required.includes(argName)}
 							pattern={schema.properties[argName].pattern}
 							bind:editor={editor[argName]}
@@ -77,6 +78,9 @@ loadResourceTypes();
 							nestedRequired={schema.properties[argName].required}
 							itemsType={schema.properties[argName].items}
 							extra={schema.properties[argName]}
+							nullable={schema.properties[argName].nullable}
+							title={schema.properties[argName].title}
+							placeholder={schema.properties[argName].placeholder}
 						/>
 					{/if}
 					<div class="pt-6 mt-0.5">

package/package/components/NoMainFuncBadge.svelte

@@ -0,0 +1,8 @@
+<script>import Popover from './Popover.svelte';
+import { Badge } from './common';
+</script>
+
+<Popover notClickable>
+	<svelte:fragment slot="text">The script has no main function exported</svelte:fragment>
+	<Badge small color="yellow" baseClass="border border-indigo-200">No main</Badge>
+</Popover>

package/package/components/NoMainFuncBadge.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NoMainFuncBadgeProps = typeof __propDef.props;
+export type NoMainFuncBadgeEvents = typeof __propDef.events;
+export type NoMainFuncBadgeSlots = typeof __propDef.slots;
+export default class NoMainFuncBadge extends SvelteComponent<NoMainFuncBadgeProps, NoMainFuncBadgeEvents, NoMainFuncBadgeSlots> {
+}
+export {};

package/package/components/NumberTypeNarrowing.svelte

@@ -1,5 +1,6 @@
 <script>import Label from './Label.svelte';
 import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
 import { selectOptions } from './apps/editor/component';
 export let min;
 export let max;
@@ -9,51 +10,77 @@ let minChecked = min != undefined;
 let maxChecked = max != undefined;
 </script>
 
-<div class="my-2" />
-
 <div class="flex flex-col gap-2">
-	<div class="flex gap-2">
-		<Toggle
-			bind:checked={minChecked}
-			on:change={(e) => {
-				if (e.detail) {
-					min = 0
-				} else {
-					min = undefined
-				}
-			}}
-			options={{ right: 'min' }}
-		/>
-		<input type="number" bind:value={min} disabled={!minChecked} />
+	<div class="grid grid-cols-2 gap-4">
+		<Label label="Min" class="w-full col-span-1">
+			<svelte:fragment slot="header">
+				<Tooltip light small>
+					Set a minimum value for the number. If both min and max are set, the input will render as
+					a range slider.
+				</Tooltip>
+			</svelte:fragment>
+			<svelte:fragment slot="action">
+				<Toggle
+					bind:checked={minChecked}
+					on:change={(e) => {
+						if (e.detail) {
+							min = 0
+						} else {
+							min = undefined
+						}
+					}}
+					options={{ right: 'Enabled' }}
+					size="xs"
+				/>
+			</svelte:fragment> <input type="number" bind:value={min} disabled={!minChecked} />
+		</Label>
+
+		<Label label="Max" class="w-full col-span-1 ">
+			<svelte:fragment slot="header">
+				<Tooltip light small>
+					Set a maximum value for the number. If both min and max are set, the input will render as
+					a range slider.
+				</Tooltip>
+			</svelte:fragment>
+			<svelte:fragment slot="action">
+				<Toggle
+					bind:checked={maxChecked}
+					on:change={(e) => {
+						if (e.detail) {
+							max = 42
+						} else {
+							max = undefined
+						}
+					}}
+					options={{ right: 'Enabled' }}
+					size="xs"
+				/>
+			</svelte:fragment>
+			<input type="number" bind:value={max} disabled={!maxChecked} />
+		</Label>
 	</div>
-	<div class="flex gap-2">
-		<Toggle
-			bind:checked={maxChecked}
-			on:change={(e) => {
-				if (e.detail) {
-					max = 42
-				} else {
-					max = undefined
-				}
-			}}
-			options={{ right: 'max' }}
-		/>
-		<input type="number" bind:value={max} disabled={!maxChecked} />
+	<div class="grid grid-cols-3 gap-4">
+		<Label label="Currency" class="w-full col-span-2">
+			<svelte:fragment slot="header">
+				<Tooltip light small>
+					Select a currency to display the number in. If a currency is selected, you can also select
+					a locale to format the number according to that locale.
+				</Tooltip>
+			</svelte:fragment>
+			<select bind:value={currency}>
+				<option value={undefined}> No currency </option>
+				{#each selectOptions.currencyOptions as c}
+					<option value={c}>{c}</option>
+				{/each}
+			</select>
+		</Label>
+		<Label label="Currency locale" class="w-full">
+			<select bind:value={currencyLocale} disabled={!currency}>
+				<option value={undefined}> No locale </option>
+				{#each selectOptions.localeOptions as c}
+					<option value={c}>{c}</option>
+				{/each}
+			</select>
+		</Label>
 	</div>
-	<Label label="Currency">
-		<select class="mt-1" bind:value={currency}>
-			<option value={undefined}> No currency </option>
-			{#each selectOptions.currencyOptions as c}
-				<option value={c}>{c}</option>
-			{/each}
-		</select>
-	</Label>
-	<Label label="Currency locale">
-		<select class="mt-1" bind:value={currencyLocale}>
-			<option value={undefined}> No locale </option>
-			{#each selectOptions.localeOptions as c}
-				<option value={c}>{c}</option>
-			{/each}
-		</select>
-	</Label>
 </div>

package/package/components/OauthExtraParams.svelte

@@ -33,7 +33,7 @@ function sync() {
 		size="sm"
 		endIcon={{ icon: Plus }}
 		on:click={() => {
-			extra_params_vec = extra_params_vec.concat([['key', 'value']])
+			extra_params_vec = (extra_params_vec ?? []).concat([['key', 'value']])
 			sync()
 		}}
 	>

package/package/components/OauthScopes.svelte

@@ -30,7 +30,7 @@ export let scopes = [];
 		size="sm"
 		endIcon={{ icon: Plus }}
 		on:click={() => {
-			scopes = scopes.concat('')
+			scopes = (scopes ?? []).concat('')
 		}}
 	>
 		Add item

package/package/components/ObjectResourceInput.svelte

@@ -5,6 +5,7 @@ export let value;
 export let disablePortal = false;
 export let showSchemaExplorer = false;
 export let selectFirst = false;
+export let defaultValue;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
@@ -40,6 +41,7 @@ $: value && valueToPath();
 				resourceToValue()
 			}}
 			bind:value={path}
+			initialValue={defaultValue}
 			resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
 			{showSchemaExplorer}
 		/>

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         disablePortal?: boolean | undefined;
         showSchemaExplorer?: boolean | undefined;
         selectFirst?: boolean | undefined;
+        defaultValue: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/ObjectStoreConfigSettings.svelte

@@ -5,12 +5,17 @@ import { SettingService } from '../gen';
 import { sendUserToast } from '../toast';
 import TestConnection from './TestConnection.svelte';
 export let bucket_config = undefined;
+$: bucket_config?.type == 'S3' &&
+    bucket_config.allow_http == undefined &&
+    (bucket_config.allow_http = true);
 let loading = false;
 async function testConnection() {
     loading = true;
     try {
         if (bucket_config) {
-            await SettingService.testObjectStorageConfig({ requestBody: bucket_config });
+            await SettingService.testObjectStorageConfig({
+                requestBody: bucket_config
+            });
             sendUserToast('Connection successful', false);
         }
     }
@@ -129,6 +134,12 @@ async function testConnection() {
 			>
 			<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>
 	{:else if bucket_config.type === 'Azure'}
 		<label class="block pb-2">
 			<span class="text-primary font-semibold text-sm">Account Name</span>

package/package/components/ObjectStoreConfigSettings.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
             access_key: string;
             secret_key: string;
             endpoint: string;
+            allow_http?: boolean | undefined;
         } | {
             type: 'Azure';
             accountName: string;

package/package/components/ObjectTypeNarrowing.svelte

@@ -5,7 +5,6 @@ let resource = format?.startsWith('resource-')
     : undefined;
 </script>
 
-<div class="mt-2" />
 <ResourceTypePicker
 	on:click={(e) => {
 		resource = e.detail