windmill-components 1.623.1 → 1.642.0

package/package/cancelable-promise-utils.js

@@ -29,8 +29,10 @@ export var CancelablePromiseUtils;
     }
     CancelablePromiseUtils.map = map;
     function pipe(promise, f) {
-        promise.then((value) => {
-            f(value);
+        promise
+            .then((value) => f(value))
+            .catch(() => {
+            // we are just piping, ignore errors
         });
         return promise;
     }

package/package/components/AIAgentLogViewer.svelte

@@ -32,7 +32,7 @@ const resultSchema = z.object({
             .optional()
     }))
 });
-let { tools, agentJob, workspaceId, onToolJobLoaded, storedToolCallJobs } = $props();
+let { tools, agentJob, workspaceId, onToolJobLoaded, storedToolCallJobs, noPadding = false } = $props();
 const fakeModuleStates = $state({});
 async function loadMissingJobs(agentActions) {
     const promises = agentActions.map(async (toolCall, idx) => {
@@ -168,7 +168,7 @@ onMount(() => {
 </script>
 
 {#if job}
-	<div class="p-2">
+	<div class={noPadding ? '' : 'p-2'}>
 		<FlowLogViewerWrapper
 			{job}
 			localModuleStates={fakeModuleStates}

package/package/components/AIAgentLogViewer.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     workspaceId?: string | undefined;
     storedToolCallJobs?: Record<number, Job>;
     onToolJobLoaded?: (job: Job, idx: number) => void;
+    noPadding?: boolean;
 }
 declare const AIAgentLogViewer: import("svelte").Component<Props, {}, "">;
 type AIAgentLogViewer = ReturnType<typeof AIAgentLogViewer>;

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() {
@@ -78,7 +78,7 @@ let selected = $state('developer');
 				<input type="text" onkeyup={handleKeyUp} placeholder="username" bind:value={username} />
 			{/if}
 
-			<span class="text-xs mb-1 pt-2 leading-6">Role</span>
+			<span class="text-xs mb-1 pt-6 leading-6">Role</span>
 			<ToggleButtonGroup bind:selected class="mb-4">
 				{#snippet children({ item })}
 					<ToggleButton

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';
@@ -11,6 +12,8 @@ import { Loader2 } from 'lucide-svelte';
 import { untrack } from 'svelte';
 import { base } from '../base';
 import GitHubAppIntegration from './GitHubAppIntegration.svelte';
+import BedrockCredentialsCheck from './BedrockCredentialsCheck.svelte';
+import { isCloudHosted } from '../cloud';
 let { resourceType, resourceTypeInfo, args = $bindable({}), linkedSecret = $bindable(undefined), isValid = $bindable(true), linkedSecretCandidates = undefined, description = $bindable(undefined) } = $props();
 let schema = $state(emptySchema());
 let notFound = $state(false);
@@ -57,7 +60,7 @@ function switchTab(asJson) {
     }
     else {
         parseJson();
-        if (resourceTypeInfo?.format_extension) {
+        if (resourceTypeInfo?.format_extension && !resourceTypeInfo?.is_fileset) {
             textFileContent = args.content;
         }
     }
@@ -117,6 +120,7 @@ $effect(() => {
 			options={{
 				right: 'As JSON'
 			}}
+			class="as-json-toggle"
 		/>
 		<TestConnection {resourceType} {args} />
 		{#if resourceType == 'postgresql'}
@@ -181,6 +185,9 @@ $effect(() => {
 			onDescriptionUpdate={(newDescription) => (description = newDescription)}
 		/>
 	</div>
+	{#if resourceType?.includes('bedrock') && !isCloudHosted()}
+		<BedrockCredentialsCheck />
+	{/if}
 {:else}
 	<p class="text-primary font-normal text-xs mb-4"
 		>No corresponding resource type found in your workspace for {resourceType}. Define the value in
@@ -204,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/AppConnectDrawer.svelte

@@ -36,6 +36,7 @@ let darkMode = false;
 >
 	<DrawerContent
 		title="Add a resource"
+		id="add-resource-drawer"
 		on:close={drawer.closeDrawer}
 		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"

package/package/components/AppConnectInner.svelte

@@ -470,6 +470,7 @@ let hubRtSync = usePromise(async () => {
 				placeholder="Search resource type"
 				bind:value={filter}
 				class="text-2xl grow"
+				id="search-resource-type"
 			/>
 		</div>
 

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

@@ -7,11 +7,13 @@ import KeycloakSetting from './KeycloakSetting.svelte';
 import CustomSso from './CustomSso.svelte';
 import AuthentikSetting from './AuthentikSetting.svelte';
 import AutheliaSetting from './AutheliaSetting.svelte';
+import PocketIdSetting from './PocketIdSetting.svelte';
 import KanidmSetting from './KanidmSetting.svelte';
 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';
@@ -20,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 = '';
@@ -64,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
@@ -176,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={{
@@ -223,11 +221,12 @@ function generateOAuthDropdownItems() {
 				<KeycloakSetting bind:value={oauths['keycloak']} />
 				<AuthentikSetting bind:value={oauths['authentik']} />
 				<AutheliaSetting bind:value={oauths['authelia']} />
+				<PocketIdSetting bind:value={oauths['pocketid']} />
 				<KanidmSetting bind:value={oauths['kanidm']} />
 				<ZitadelSetting bind:value={oauths['zitadel']} />
 				<NextcloudSetting bind:value={oauths['nextcloud']} {baseUrl} />
 				{#each Object.keys(oauths) as k}
-					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud'].includes(k) && oauths[k] && 'login_config' in oauths[k]}
+					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud', 'pocketid'].includes(k) && oauths[k] && 'login_config' in oauths[k]}
 						{#if oauths[k]}
 							<div class="flex flex-col gap-2 pb-4">
 								<div class="flex flex-row items-center gap-2">
@@ -247,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"
@@ -256,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"
@@ -317,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>
@@ -434,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}
@@ -507,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;