windmill-components 1.623.2 → 1.642.0

package/package/components/AIProviderPicker.svelte

@@ -8,33 +8,25 @@ import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
 import ToggleButtonMore from './common/toggleButton-v2/ToggleButtonMore.svelte';
 import Toggle from './Toggle.svelte';
-let { value = $bindable(), disabled = false, actions } = $props();
+import { saveConfig, removeConfig, isSameAsStoredConfig } from './aiProviderStorage';
+let { value: _uncheckedValue = $bindable(), disabled = false, actions } = $props();
+let value = $derived.by(() => {
+    if (!_uncheckedValue || typeof _uncheckedValue !== 'object')
+        return undefined;
+    return _uncheckedValue;
+});
 let loading = $state(false);
 let availableModels = $state([]);
 let filterText = $state('');
-let useAsDefault = $state(false);
 let modelsCache = new Map();
-const STORAGE_KEY = 'windmill_ai_provider_config';
-// Initialize value if undefined
-if (!value) {
-    const storedConfig = loadStoredConfig();
-    if (storedConfig) {
-        value = storedConfig;
-        useAsDefault = true;
-    }
-    else {
-        const providers = Object.keys(AI_PROVIDERS);
-        value = {
-            kind: providers.length > 0 ? providers[0] : undefined,
-            resource: undefined,
-            model: undefined
-        };
-        useAsDefault = false;
-    }
-}
-else {
-    useAsDefault = isSameAsStoredConfig(value);
+if (!_uncheckedValue) {
+    _uncheckedValue = {
+        kind: 'openai',
+        resource: '',
+        model: ''
+    };
 }
+let useAsDefault = $derived(isSameAsStoredConfig(value));
 // Reactive items for the Select component
 let items = $derived.by(() => {
     const r = availableModels.map((model) => ({
@@ -54,58 +46,6 @@ const providerOptions = Object.entries(AI_PROVIDERS).map(([key, details]) => ({
     value: key,
     label: details.label
 }));
-// Check if the current config is the same as the stored config
-function isSameAsStoredConfig(config) {
-    const storedConfig = loadStoredConfig();
-    return (storedConfig !== undefined &&
-        storedConfig?.kind === config.kind &&
-        storedConfig?.resource === config.resource &&
-        storedConfig?.model === config.model);
-}
-// Load stored configuration from localStorage
-function loadStoredConfig() {
-    if (typeof localStorage === 'undefined') {
-        return undefined;
-    }
-    try {
-        const stored = localStorage.getItem(STORAGE_KEY);
-        if (stored) {
-            const parsed = JSON.parse(stored);
-            // Validate that the stored provider is still available
-            if (parsed.kind && AI_PROVIDERS[parsed.kind]) {
-                return parsed;
-            }
-        }
-    }
-    catch (e) {
-        console.error('Failed to load AI provider config from localStorage:', e);
-    }
-    return undefined;
-}
-// Save configuration to localStorage
-function saveConfig(config) {
-    if (typeof localStorage === 'undefined') {
-        return;
-    }
-    try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
-    }
-    catch (e) {
-        console.error('Failed to save AI provider config to localStorage:', e);
-    }
-}
-// Remove configuration from localStorage
-function removeConfig() {
-    if (typeof localStorage === 'undefined') {
-        return;
-    }
-    try {
-        localStorage.removeItem(STORAGE_KEY);
-    }
-    catch (e) {
-        console.error('Failed to remove AI provider config from localStorage:', e);
-    }
-}
 async function loadModels(signal) {
     const provider = value?.kind;
     const resourceValue = value?.resource;
@@ -146,8 +86,8 @@ async function loadModels(signal) {
 function onProviderChange(selectedProvider) {
     if (value) {
         value.kind = selectedProvider;
-        value.resource = undefined;
-        value.model = undefined;
+        value.resource = '';
+        value.model = '';
     }
 }
 // Helper functions to handle $res: prefix like ObjectResourceInput does
@@ -211,7 +151,7 @@ $effect(() => {
 			{/each}
 			<ToggleButtonMore
 				class="ml-auto"
-				btnText={providerOptions.findIndex((p) => p.value === value.kind) >= 3 ? '' : 'More'}
+				btnText={providerOptions.findIndex((p) => p.value === value?.kind) >= 3 ? '' : 'More'}
 				togglableItems={providerOptions.slice(3)}
 				{item}
 				bind:selected={() => value?.kind, (v) => v && onProviderChange(v)}
@@ -228,7 +168,7 @@ $effect(() => {
 					() => resourceValueToPath(value?.resource),
 					(v) => {
 						if (value) {
-							value.resource = pathToResourceValue(v)
+							value.resource = pathToResourceValue(v) ?? ''
 						}
 					}
 				}
@@ -244,12 +184,12 @@ $effect(() => {
 			<p class="text-xs font-normal text-primary">model</p>
 			<Select
 				{items}
-				bind:value={value.model}
+				bind:value={() => value?.model, (v) => value && (value.model = v ?? '')}
 				placeholder="Select model"
 				disabled={disabled || !value?.kind || !resourceValueToPath(value?.resource)}
 				onCreateItem={(r) => {
 					availableModels.push(r)
-					value.model = r
+					if (value) value.model = r
 				}}
 				createText="Press enter to use custom model"
 				{loading}

package/package/components/AIProviderPicker.svelte.d.ts

@@ -1,12 +1,7 @@
 import { type Snippet } from 'svelte';
-import type { AIProvider } from '../gen';
-interface ProviderValue {
-    kind?: AIProvider;
-    resource?: string;
-    model?: string;
-}
+import type { ProviderConfig } from '../gen';
 interface Props {
-    value: ProviderValue | undefined;
+    value: ProviderConfig | undefined;
     disabled?: boolean;
     actions?: Snippet;
 }

package/package/components/AddUser.svelte

@@ -19,10 +19,10 @@ function handleKeyUp(event) {
         addUser();
     }
 }
-let automateUsernameCreation = $state(false);
+let automateUsernameCreation = $state(true);
 async function getAutomateUsernameCreationSetting() {
     automateUsernameCreation =
-        (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+        (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? true;
 }
 getAutomateUsernameCreationSetting();
 async function addUser() {

package/package/components/ApiConnectForm.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { OauthService } from '../gen';
+import FilesetEditor from './FilesetEditor.svelte';
 import { workspaceStore } from '../stores';
 import { emptySchema, emptyString } from '../utils';
 import SchemaForm from './SchemaForm.svelte';
@@ -59,7 +60,7 @@ function switchTab(asJson) {
     }
     else {
         parseJson();
-        if (resourceTypeInfo?.format_extension) {
+        if (resourceTypeInfo?.format_extension && !resourceTypeInfo?.is_fileset) {
             textFileContent = args.content;
         }
     }
@@ -210,6 +211,11 @@ $effect(() => {
 			/>
 		{/await}
 	</div>
+{:else if resourceTypeInfo?.is_fileset}
+	<h5 class="mt-1 inline-flex items-center gap-4">
+		Fileset
+	</h5>
+	<FilesetEditor bind:args />
 {:else if resourceTypeInfo?.format_extension}
 	<h5 class="mt-4 inline-flex items-center gap-4">
 		File content ({resourceTypeInfo.format_extension})

package/package/components/AppConnectInner.svelte.d.ts

@@ -30,6 +30,6 @@ declare const AppConnectInner: $$__sveltets_2_IsomorphicComponent<Props, {
     loadResourceTypes: () => Promise<void>;
     next: () => Promise<void>;
     back: () => Promise<void>;
-}, "step" | "disabled" | "manual" | "resourceType" | "isGoogleSignin">;
+}, "manual" | "step" | "disabled" | "resourceType" | "isGoogleSignin">;
 type AppConnectInner = InstanceType<typeof AppConnectInner>;
 export default AppConnectInner;

package/package/components/ArgInput.svelte

@@ -92,7 +92,11 @@ function computeDefaultValue(inputCat, defaultValue, nnullable) {
         nvalue = structuredClone($state.snapshot(defaultValue));
         if (defaultValue === undefined || defaultValue === null) {
             if (inputCat === 'string') {
-                nvalue = nullable ? null : format === 'uuid' && extra?.['x-auto-generate'] ? randomUUID() : '';
+                nvalue = nullable
+                    ? null
+                    : format === 'uuid' && extra?.['x-auto-generate']
+                        ? randomUUID()
+                        : '';
             }
             else if (inputCat == 'enum' && required) {
                 let firstV = enum_?.[0];
@@ -483,10 +487,17 @@ onDestroy(() => {
 
 	<div class="flex space-x-1">
 		{#if inputCat == 'number'}
-			{#if extra['min'] != undefined && extra['max'] != undefined}
+			{#if extra['seconds'] !== undefined}
+				<div class="w-full">
+					<SecondsInput
+						bind:seconds={value}
+						onfocus={bubble('focus')}
+						{defaultValue}
+						clearable={extra['clearable'] !== false}
+					/>
+				</div>
+			{:else if extra['min'] != undefined && extra['max'] != undefined}
 				<Range bind:value min={extra['min']} max={extra['max']} {defaultValue} />
-			{:else if extra['seconds'] !== undefined}
-				<SecondsInput bind:seconds={value} on:focus />
 			{:else if extra?.currency}
 				<CurrencyInput
 					inputClasses={{
@@ -997,7 +1008,6 @@ onDestroy(() => {
 										titleClass="text-2xs"
 									/>
 								{/if}
-	
 							{:else if disabled}
 								<textarea disabled></textarea>
 							{:else}

package/package/components/ArgInput.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { EnumType, SchemaProperty } from '../common';
 import { type DynamicInput as DynamicInputTypes } from '../utils';
 import type ItemPicker from './ItemPicker.svelte';
-import type SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
 import type { SchemaDiff } from './schema/schemaUtils.svelte';
 import type { ComponentCustomCSS } from './apps/types';
@@ -55,7 +54,7 @@ interface Props {
     title?: string | undefined;
     placeholder?: string | undefined;
     order?: string[] | undefined;
-    editor?: SimpleEditor | undefined;
+    editor?: any | undefined;
     orderEditable?: boolean;
     shouldDispatchChanges?: boolean;
     noDefaultOnSelectFirst?: boolean;
@@ -99,10 +98,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const ArgInput: $$__sveltets_2_IsomorphicComponent<Props, {
-    focus: CustomEvent<any>;
     nestedChange: CustomEvent<any>;
     acceptChange: CustomEvent<any>;
     rejectChange: CustomEvent<any>;
+    focus: CustomEvent<any>;
     blur: CustomEvent<any>;
     change: CustomEvent<any>;
     keydownCmdEnter: CustomEvent<any>;
@@ -110,6 +109,6 @@ declare const ArgInput: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "value" | "description" | "title" | "pattern" | "format" | "order" | "placeholder" | "properties" | "oneOf" | "defaultValue" | "valid" | "editor" | "enum_" | "itemsType" | "pickForField">;
+}, "value" | "description" | "title" | "pattern" | "format" | "order" | "placeholder" | "defaultValue" | "properties" | "oneOf" | "valid" | "editor" | "enum_" | "itemsType" | "pickForField">;
 type ArgInput = InstanceType<typeof ArgInput>;
 export default ArgInput;

package/package/components/Auth0Setting.svelte

@@ -6,6 +6,7 @@ import Tooltip from './Tooltip.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
 function changeDomain(domain, custom) {
     if (value) {
@@ -51,7 +52,7 @@ $effect.pre(() => {
 		/></label
 	>
 	{#if enabled}
-		<div class="p-4 rounded-md border flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label>
 				<div class="flex gap-2 items-start">
 					<div>
@@ -81,6 +82,7 @@ $effect.pre(() => {
 				<TextInput
 					inputProps={{ type: 'text', placeholder: 'Custom Name' }}
 					bind:value={value['display_name']}
+					class="max-w-lg"
 				/>
 			</label>
 			<label class="flex flex-col gap-1">
@@ -91,6 +93,7 @@ $effect.pre(() => {
 				<TextInput
 					inputProps={{ type: 'text', placeholder: 'Client Id' }}
 					bind:value={value['id']}
+					class="max-w-lg"
 				/>
 			</label>
 			<label class="flex flex-col gap-1">
@@ -100,6 +103,7 @@ $effect.pre(() => {
 				<TextInput
 					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
 					bind:value={value['secret']}
+					class="max-w-lg"
 				/>
 			</label>
 			<CollapseLink text="Instructions">
@@ -151,6 +155,6 @@ $effect.pre(() => {
 					</div>
 				</div>
 			</CollapseLink>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/AuthSettings.svelte

@@ -13,6 +13,7 @@ import ZitadelSetting from './ZitadelSetting.svelte';
 import NextcloudSetting from './NextcloudSetting.svelte';
 import CustomOauth from './CustomOauth.svelte';
 import { capitalize } from '../utils';
+import ClipboardPanel from './details/ClipboardPanel.svelte';
 import Toggle from './Toggle.svelte';
 import DropdownV2 from './DropdownV2.svelte';
 import { APP_TO_ICON_COMPONENT } from './icons';
@@ -21,7 +22,8 @@ import AzureOauthSettings from './AzureOauthSettings.svelte';
 import Tooltip from './Tooltip.svelte';
 import { tick } from 'svelte';
 import { Popover } from './meltComponents';
-let { snowflakeAccountIdentifier = $bindable(), oauths = $bindable(), requirePreexistingUserForOauth = $bindable(), baseUrl, scim } = $props();
+import SettingsPageHeader from './settings/SettingsPageHeader.svelte';
+let { snowflakeAccountIdentifier = $bindable(), oauths = $bindable(), requirePreexistingUserForOauth = $bindable(), baseUrl, scim, tab = $bindable('sso'), hideTabs = false } = $props();
 $effect(() => {
     if (snowflakeAccountIdentifier == undefined) {
         snowflakeAccountIdentifier = '';
@@ -65,7 +67,6 @@ let dropdownOpen = $state(false);
 let ssoPopoverOpen = $state(false);
 let ssoClientName = $state('');
 let ssoNameInput = $state();
-let tab = $state('sso');
 function createOAuthClient(name) {
     if (oauths && name) {
         // Create a new object to ensure the new item is added at the end
@@ -177,34 +178,30 @@ function generateOAuthDropdownItems() {
 }
 </script>
 
-<div>
-	<Tabs bind:selected={tab} class="mb-4">
-		<Tab value="sso" label="SSO" />
-		<Tab value="oauth" label="OAuth" />
-		<Tab value="scim" label="SCIM/SAML" />
-	</Tabs>
-</div>
+{#if !hideTabs}
+	<div>
+		<Tabs bind:selected={tab} class="mb-4">
+			<Tab value="sso" label="SSO" />
+			<Tab value="oauth" label="OAuth" />
+			<Tab value="scim" label="SCIM/SAML" />
+		</Tabs>
+	</div>
+{/if}
 
 <div class="mb-6">
 	{#if oauths}
 		{#if tab === 'sso'}
+			<SettingsPageHeader
+				title="Single Sign-On"
+				description="Configure SSO providers to let users authenticate using their existing identity provider credentials. To test SSO, save the settings and try to login in an incognito window."
+				link="https://www.windmill.dev/docs/misc/setup_oauth#sso"
+			/>
 			{#if !$enterpriseLicense || $enterpriseLicense.endsWith('_pro')}
-				<Alert type="warning" title="Limited to 10 SSO users">
+				<Alert type="info" title="Limited to 10 SSO users">
 					Without EE, the number of SSO users is limited to 10. SCIM/SAML is available on EE
 				</Alert>
 				<div class="mb-2"></div>
 			{/if}
-
-			<div class="mb-2">
-				<div class="text-primary text-xs"
-					>When at least one of the below options is set, users will be able to login to Windmill
-					via their third-party account.
-					<br /> To test SSO, the recommended workflow is to to save the settings and try to login
-					in an incognito window.
-					<a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#sso">Learn more</a
-					>
-				</div>
-			</div>
 			<div class="flex gap-2 py-4">
 				<Toggle
 					options={{
@@ -249,8 +246,8 @@ function generateOAuthDropdownItems() {
 										}}
 									/>
 								</div>
-								<div class="p-4 border rounded">
-									<label class="block pb-2">
+								<div class="p-4 rounded bg-surface-tertiary shadow-sm">
+									<label class="block pb-6">
 										<span class="text-primary font-semibold text-xs">Custom Name</span>
 										<input
 											type="text"
@@ -258,11 +255,11 @@ function generateOAuthDropdownItems() {
 											bind:value={oauths[k]['display_name']}
 										/>
 									</label>
-									<label class="block pb-2">
+									<label class="block pb-6">
 										<span class="text-primary font-semibold text-xs">Client Id</span>
 										<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
 									</label>
-									<label class="block pb-2">
+									<label class="block pb-6">
 										<span class="text-primary font-semibold text-xs">Client Secret</span>
 										<input
 											type="text"
@@ -319,20 +316,11 @@ function generateOAuthDropdownItems() {
 				</Popover>
 			</div>
 		{:else if tab === 'oauth'}
-			<div class="mb-2">
-				<div class="text-primary text-xs"
-					>Connect third-party services like Slack, Teams or Google to let users authenticate
-					directly from Windmill and automatically obtain access tokens. Once configured, users can
-					create resources of the corresponding type (e.g. a 'github' resource) and authenticate via
-					OAuth without manually handling credentials.
-					<a
-						target="_blank"
-						href="https://www.windmill.dev/docs/misc/setup_oauth#oauth"
-						class="inline-flex items-center whitespace-nowrap"
-						>Learn more&nbsp;<ExternalLink size={12} /></a
-					></div
-				>
-			</div>
+			<SettingsPageHeader
+				title="OAuth"
+				description="Connect third-party services like Slack, Teams or Google to let users authenticate directly from Windmill and automatically obtain access tokens."
+				link="https://www.windmill.dev/docs/misc/setup_oauth#oauth"
+			/>
 			<div class="h-1"></div>
 			<OAuthSetting login={false} name="slack" bind:value={oauths['slack']} />
 			<div class="h-6"></div>
@@ -436,6 +424,42 @@ function generateOAuthDropdownItems() {
 										/>
 									</label>
 								{/if}
+								{#if k === 'gworkspace'}
+									<div>
+										<Toggle
+											options={{
+												right:
+													'Allow workspace admins to setup Google native triggers using these credentials'
+											}}
+											checked={oauths[k]?.share_with_workspaces ?? false}
+											on:change={(e) => {
+												if (oauths && oauths[k]) {
+													oauths[k] = { ...oauths[k], share_with_workspaces: e.detail }
+												}
+											}}
+										/>
+										{#if oauths[k]?.share_with_workspaces}
+											<p class="text-xs text-tertiary mt-1">
+												Workspace admins will be able to connect Google native triggers without
+												configuring their own OAuth client. The credentials are not exposed to them.
+											</p>
+											<p class="text-xs text-tertiary mt-2">
+												Add the following redirect URI to
+												<a
+													href="https://console.cloud.google.com/apis/credentials"
+													target="_blank"
+													class="underline">Google Cloud Console</a
+												>:
+											</p>
+											<div class="mt-1">
+												<ClipboardPanel
+													content="{baseUrl}/workspace_settings?tab=native_triggers&service=google"
+													size="sm"
+												/>
+											</div>
+										{/if}
+									</div>
+								{/if}
 							</div>
 						</div>
 					{/if}
@@ -509,6 +533,11 @@ function generateOAuthDropdownItems() {
 				</div>
 			{/if}
 		{:else if tab == 'scim'}
+			<SettingsPageHeader
+				title="SCIM/SAML"
+				description="Set up SAML and SCIM to authenticate users using your identity provider."
+				link="https://www.windmill.dev/docs/misc/saml_and_scim"
+			/>
 			{@render scim?.()}
 		{/if}
 	{/if}

package/package/components/AuthSettings.svelte.d.ts

@@ -4,7 +4,9 @@ interface Props {
     requirePreexistingUserForOauth?: boolean;
     baseUrl?: string;
     scim?: import('svelte').Snippet;
+    tab?: 'sso' | 'oauth' | 'scim';
+    hideTabs?: boolean;
 }
-declare const AuthSettings: import("svelte").Component<Props, {}, "snowflakeAccountIdentifier" | "oauths" | "requirePreexistingUserForOauth">;
+declare const AuthSettings: import("svelte").Component<Props, {}, "tab" | "snowflakeAccountIdentifier" | "oauths" | "requirePreexistingUserForOauth">;
 type AuthSettings = ReturnType<typeof AuthSettings>;
 export default AuthSettings;

package/package/components/AutheliaSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 export let value;
 $: enabled = value != undefined;
 let org = '';
@@ -40,7 +41,7 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Authelia Url</span>
 				<span class="text-secondary font-normal text-xs"
@@ -69,6 +70,6 @@ function changeOrg(org) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/AuthentikSetting.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 export let value;
 $: enabled = value != undefined;
 // Initialize org from existing auth_url
@@ -40,7 +41,7 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label>
 				<span class="text-emphasis font-semibold text-xs">Authentik Url</span>
 				<span class="text-secondary font-normal text-xs"
@@ -60,6 +61,6 @@ function changeOrg(org) {
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
 				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/AutoscalingConfigEditor.svelte

@@ -13,7 +13,7 @@ import { ConfigService } from '../gen';
 import Select from './select/Select.svelte';
 import ScriptPicker from './ScriptPicker.svelte';
 import Badge from './common/badge/Badge.svelte';
-let { config = $bindable(), worker_tags, disabled } = $props();
+let { config = $bindable(), worker_tags, disabled, eeOnly = false } = $props();
 let test_input = $state(3);
 let healthCheckLoading = $state(false);
 let healthCheckResult = $state(null);
@@ -51,6 +51,7 @@ let collapsed = $state(true);
 	class="flex flex-col gap-6"
 	bind:collapsed
 	description="Autoscaling automatically adjusts the number of workers based on your workload demands."
+	{eeOnly}
 >
 	{#snippet labelExtra()}
 		<Badge color="gray">Beta</Badge>

package/package/components/AutoscalingConfigEditor.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     config: AutoscalingConfig | undefined;
     worker_tags: string[] | undefined;
     disabled: boolean;
+    eeOnly?: boolean;
 }
 declare const AutoscalingConfigEditor: import("svelte").Component<Props, {}, "config">;
 type AutoscalingConfigEditor = ReturnType<typeof AutoscalingConfigEditor>;

package/package/components/CenteredModal.svelte

@@ -3,18 +3,26 @@ import { enterpriseLicense, whitelabelNameStore } from '../stores';
 import { twMerge } from 'tailwind-merge';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 import LoginPageHeader from './LoginPageHeader.svelte';
-let { subtitle = undefined, title = 'Windmill', disableLogo = false, large = false, centerVertically = true, loading = false, children } = $props();
+let { subtitle = undefined, title = 'Windmill', disableLogo = false, large = false, centerVertically = true, loading = false, containOverflow = false, children } = $props();
 setLicense();
 let height = $state(0);
 </script>
 
 <div
-	class="flex justify-center h-screen p-4 relative bg-surface-secondary overflow-auto"
+	class="flex justify-center h-screen p-4 relative bg-surface-secondary {containOverflow
+		? 'overflow-hidden'
+		: 'overflow-auto'}"
 	class:items-center={centerVertically}
 	style="scrollbar-gutter: stable both-edges;"
 	bind:clientHeight={height}
 >
-	<div class={twMerge("flex flex-col gap-2 items-center w-full pb-8  h-fit", height > 1080 ? 'pt-28' : 'pt-12')} >
+	<div
+		class={twMerge(
+			'flex flex-col gap-2 items-center w-full pb-8',
+			containOverflow ? 'min-h-0' : 'h-fit',
+			containOverflow ? '' : height > 1080 ? 'pt-28' : 'pt-12'
+		)}
+	>
 		{#if (!disableLogo && !$enterpriseLicense) || !$whitelabelNameStore}
 			<div class="hidden lg:block">
 				<div>
@@ -40,7 +48,9 @@ let height = $state(0);
 			<div
 				class="rounded-md bg-surface w-full {large
 					? 'max-w-5xl'
-					: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 z-10"
+					: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 z-10 {containOverflow
+					? 'flex-1 min-h-0 flex flex-col'
+					: ''}"
 			>
 				{@render children()}
 			</div>

package/package/components/CenteredModal.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     large?: boolean;
     centerVertically?: boolean;
     loading?: boolean;
+    containOverflow?: boolean;
     children?: import('svelte').Snippet;
 }
 declare const CenteredModal: import("svelte").Component<Props, {}, "">;