windmill-components 1.504.6 → 1.510.1

package/package/ata/index.js

@@ -223,7 +223,7 @@ function getDTName(s) {
     if (s.indexOf('@') === 0 && s.indexOf('/') !== -1) {
         // we have a scoped module, e.g. @bla/foo
         // which should be converted to   bla__foo
-        s = s.substr(1).replace('/', '__');
+        s = s.substring(1).replace('/', '__');
     }
     return s;
 }

package/package/components/AppConnectInner.svelte

@@ -19,6 +19,7 @@ import Toggle from './Toggle.svelte';
 import { Pen } from 'lucide-svelte';
 import GfmMarkdown from './GfmMarkdown.svelte';
 import { apiTokenApps, forceSecretValue, linkedSecretValue } from './app_connect';
+import Tooltip from './Tooltip.svelte';
 let { step = $bindable(1), resourceType = $bindable(''), isGoogleSignin = $bindable(false), disabled = $bindable(false), manual = $bindable(true), express = false } = $props();
 let isValid = $state(true);
 const nativeLanguagesCategory = [
@@ -52,8 +53,27 @@ function computeLinkedSecret(resourceType, argsKeys, passwords) {
 }
 let scopes = $state([]);
 let extra_params = [];
+let responseExtra = $state({});
 let path = $state('');
 let description = $state('');
+/**
+ * Client credentials OAuth flow support
+ * @description Determines if the selected OAuth provider supports client_credentials grant type
+ * alongside the traditional authorization_code flow
+ */
+let supportsClientCredentials = $state(false);
+/**
+ * OAuth flow selection
+ * @description Controls which OAuth flow to use:
+ * - false: authorization_code flow (interactive, requires user consent)
+ * - true: client_credentials flow (server-to-server, no user interaction)
+ */
+let useClientCredentials = $state(false);
+/**
+ * Client credentials for resource-level OAuth
+ */
+let clientId = $state('');
+let clientSecret = $state('');
 let resourceTypeInfo = $state(undefined);
 let pathError = $state('');
 export async function open(rt) {
@@ -65,6 +85,11 @@ export async function open(rt) {
     description = '';
     resourceType = rt ?? '';
     valueToken = undefined;
+    // Reset client credentials state
+    supportsClientCredentials = false;
+    useClientCredentials = false;
+    clientId = '';
+    clientSecret = '';
     await loadConnects();
     manual = !connects?.includes(resourceType);
     if (manual && express) {
@@ -106,13 +131,15 @@ run(() => {
     disabled =
         (step == 1 && resourceType == '') ||
             (step == 2 &&
-                value == '' &&
-                args &&
-                args['token'] == '' &&
-                args['password'] == '' &&
-                args['api_key'] == '' &&
-                args['key'] == '' &&
-                linkedSecret != undefined) ||
+                (manual
+                    ? value == '' &&
+                        args &&
+                        args['token'] == '' &&
+                        args['password'] == '' &&
+                        args['api_key'] == '' &&
+                        args['key'] == '' &&
+                        linkedSecret != undefined
+                    : false)) ||
             step == 3 ||
             (step == 4 && pathError != '') ||
             !isValid;
@@ -187,6 +214,7 @@ function processPopupData(data) {
         resourceType = data.resource_type;
         value = data.res.access_token;
         valueToken = data.res;
+        responseExtra = data.extra ?? {};
         step = 4;
         if (express) {
             path = `u/${$userStore?.username}/${resourceType}_${new Date().getTime()}`;
@@ -198,6 +226,11 @@ async function getScopesAndParams() {
     const connect = await OauthService.getOauthConnect({ client: resourceType });
     scopes = connect.scopes ?? [];
     extra_params = Object.entries(connect.extra_params ?? {});
+    /**
+     * Check if the OAuth provider supports client_credentials grant type
+     * This determines whether to show the OAuth flow selection UI
+     */
+    supportsClientCredentials = connect.grant_types?.includes('client_credentials') ?? false;
 }
 async function getResourceTypeInfo() {
     resourceTypeInfo = await ResourceService.getResourceType({
@@ -227,20 +260,61 @@ export async function next() {
         step += 1;
     }
     else if (step == 2 && !manual) {
-        const url = new URL(`/api/oauth/connect/${resourceType}`, window.location.origin);
-        url.searchParams.append('scopes', scopes.join('+'));
-        if (extra_params.length > 0) {
-            extra_params.forEach(([key, value]) => url.searchParams.append(key, value));
+        if (useClientCredentials) {
+            /**
+             * Client credentials flow: Direct API call to backend
+             * No popup window or user interaction required
+             * Uses instance-level OAuth credentials for server-to-server auth
+             */
+            try {
+                // Trim whitespace from credentials to avoid false negatives
+                const trimmedClientId = clientId.trim();
+                const trimmedClientSecret = clientSecret.trim();
+                // Validate required fields
+                if (!trimmedClientId || !trimmedClientSecret) {
+                    sendUserToast('Client ID and Client Secret are required for client credentials flow', true);
+                    return;
+                }
+                const tokenResponse = await OauthService.connectClientCredentials({
+                    client: resourceType,
+                    requestBody: {
+                        scopes: scopes,
+                        cc_client_id: trimmedClientId,
+                        cc_client_secret: trimmedClientSecret
+                    }
+                });
+                // Process the token response like in popup flow
+                value = tokenResponse.access_token;
+                valueToken = {
+                    ...tokenResponse,
+                    grant_type: 'client_credentials' // Mark this token as client_credentials
+                };
+                step = 4;
+                if (express) {
+                    path = `u/${$userStore?.username}/${resourceType}_${new Date().getTime()}`;
+                    next();
+                }
+            }
+            catch (error) {
+                sendUserToast(`Failed to connect with client credentials: ${error.body || error.message}`, true);
+            }
+        }
+        else {
+            /**
+             * Authorization code flow: Traditional OAuth popup window
+             * Requires user interaction and consent
+             * Opens popup for user to authenticate with OAuth provider
+             */
+            const url = new URL(`/api/oauth/connect/${resourceType}`, window.location.origin);
+            url.searchParams.append('scopes', scopes.join('+'));
+            if (extra_params.length > 0) {
+                extra_params.forEach(([key, value]) => url.searchParams.append(key, value));
+            }
+            window.addEventListener('message', popupListener);
+            window.addEventListener('storage', handleStorageEvent);
+            window.open(url.toString(), '_blank', 'popup=true');
+            step += 1;
         }
-        // if (!newPageOAuth) {
-        // 	window.location.href = url.toString()
-        // } else {
-        window.addEventListener('message', popupListener);
-        window.addEventListener('storage', handleStorageEvent);
-        window.open(url.toString(), '_blank', 'popup=true');
-        step += 1;
-        // 	dispatch('close')
-        // }
     }
     else {
         if (!path) {
@@ -266,15 +340,25 @@ export async function next() {
                 args['account_identifier'] = account_identifier[1];
             }
         }
+        else if (resourceType === 'quickbooks' && responseExtra['realmId']) {
+            args['realmId'] = responseExtra['realmId'];
+        }
         let account = undefined;
         if (valueToken?.expires_in != undefined) {
+            const accountData = {
+                refresh_token: valueToken.refresh_token ?? '',
+                expires_in: valueToken.expires_in,
+                client: resourceType,
+                grant_type: valueToken.grant_type || 'authorization_code'
+            };
+            // Add client credentials if using client_credentials flow
+            if (useClientCredentials) {
+                accountData.cc_client_id = clientId.trim();
+                accountData.cc_client_secret = clientSecret.trim();
+            }
             account = Number(await OauthService.createAccount({
                 workspace: $workspaceStore,
-                requestBody: {
-                    refresh_token: valueToken.refresh_token ?? '',
-                    expires_in: valueToken.expires_in,
-                    client: resourceType
-                }
+                requestBody: accountData
             }));
         }
         const resourceValue = args;
@@ -532,14 +616,58 @@ let editScopes = $state(false);
 		{#if manual == false && resourceType != ''}
 			<h1 class="mb-4">{resourceType}</h1>
 			<div class="my-4 text-secondary"
-				>Click connect to create a resource backed by an oauth connection, whose token is fetched
-				from the external services and refreshed automatically if needed before expiration (using
-				its refresh token)</div
+				>Create a resource backed by an OAuth connection, whose token is fetched from the external
+				services and refreshed automatically if needed before expiration.</div
 			>
 			<h4 class="mb-2">Description</h4>
 			<div class="text-sm mb-8">
 				<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
 			</div>
+
+			{#if supportsClientCredentials}
+				<div style="margin-bottom: 16px;">
+					<h3 class="mb-4">Authentication Method</h3>
+					<div style="display: flex; align-items: center; gap: 8px;">
+						<input
+							type="checkbox"
+							style="width: 16px; height: 16px; margin: 0;"
+							bind:checked={useClientCredentials}
+						/>
+						<span style="font-size: 14px; font-weight: 600;">Use Client Credentials Flow</span>
+						<Tooltip>
+							Server-to-server authentication without user interaction.
+							<br /><br />
+							Provide your own OAuth client credentials for this resource.
+						</Tooltip>
+					</div>
+
+					{#if useClientCredentials}
+						<div style="margin-top: 16px;">
+							<label style="display: block; margin-bottom: 8px;">
+								<span style="font-weight: 600;">Client ID</span>
+								<input
+									type="text"
+									bind:value={clientId}
+									placeholder="Enter OAuth client ID"
+									class="w-full p-2 border border-gray-300 rounded mt-1"
+									required
+								/>
+							</label>
+							<label style="display: block;">
+								<span style="font-weight: 600;">Client Secret</span>
+								<input
+									type="password"
+									bind:value={clientSecret}
+									placeholder="Enter OAuth client secret"
+									class="w-full p-2 border border-gray-300 rounded mt-1"
+									required
+								/>
+							</label>
+						</div>
+					{/if}
+				</div>
+			{/if}
+
 			<h3 class="mb-4 flex gap-4"
 				>Scopes <button
 					onclick={() => {
@@ -559,7 +687,11 @@ let editScopes = $state(false);
 			{/if}
 		{/if}
 	{:else if step == 3 && !manual && !express}
-		Finish connection in popup window
+		{#if useClientCredentials}
+			Connecting with client credentials...
+		{:else}
+			Finish connection in popup window
+		{/if}
 	{:else}
 		<Path
 			initialPath=""

package/package/components/ArgInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { preventDefault, stopPropagation, createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
 import { setInputCat as computeInputCat, debounce, emptyString, getSchemaFromProperties } from '../utils';
-import { DollarSign, Pipette, Plus, X, Check, Loader2 } from 'lucide-svelte';
+import { DollarSign, Plus, X, Check, Loader2 } from 'lucide-svelte';
 import { createEventDispatcher, onDestroy, onMount, tick, untrack } from 'svelte';
 import { fade } from 'svelte/transition';
 import { Button, SecondsInput } from './common';
@@ -14,9 +14,7 @@ import { twMerge } from 'tailwind-merge';
 import ArgEnum from './ArgEnum.svelte';
 import DateTimeInput from './DateTimeInput.svelte';
 import DateInput from './DateInput.svelte';
-import S3FilePicker from './S3FilePicker.svelte';
 import CurrencyInput from './apps/components/inputs/currency/CurrencyInput.svelte';
-import FileUpload from './common/fileUpload/FileUpload.svelte';
 import autosize from '../autosize';
 import PasswordArgInput from './PasswordArgInput.svelte';
 import Password from './Password.svelte';
@@ -28,6 +26,7 @@ import { deepEqual } from 'fast-equals';
 import DynSelect from './DynSelect.svelte';
 import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
+import S3ArgInput from './common/fileUpload/S3ArgInput.svelte';
 let { label = '', value = $bindable(), defaultValue = $bindable(undefined), description = $bindable(undefined), format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = $bindable(undefined), valid = $bindable(undefined), enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
 $effect(() => {
     if (description == undefined) {
@@ -72,8 +71,6 @@ function onOneOfChange() {
 const dispatch = createEventDispatcher();
 let ignoreValueUndefined = $state(false);
 let error = $state('');
-let s3FilePicker = $state();
-let s3FileUploadRawMode = $state(false);
 let isListJson = $state(false);
 let hasIsListJsonChanged = $state(false);
 let el = $state(undefined);
@@ -326,16 +323,6 @@ onDestroy(() => {
 });
 </script>
 
-<S3FilePicker
-	bind:this={s3FilePicker}
-	bind:selectedFileKey={value}
-	on:close={() => {
-		rawValue = JSON.stringify(value, null, 2)
-		editor?.setCode(rawValue)
-	}}
-	readOnlyMode={false}
-/>
-
 <!-- svelte-ignore a11y_autofocus -->
 <div
 	class={twMerge(
@@ -458,6 +445,22 @@ onDestroy(() => {
 					<span>&nbsp; Not set</span>
 				{/if}
 			</div>
+		{:else if (inputCat == 'resource-object' && format && format.split('-').length > 1 && format
+				.replace('resource-', '')
+				.replace('_', '')
+				.toLowerCase() == 's3object') || (inputCat == 'list' && (itemsType?.resourceType === 's3_object' || itemsType?.resourceType === 's3object'))}
+			<S3ArgInput
+				multiple={inputCat == 'list'}
+				bind:value
+				{defaultValue}
+				{setNewValueFromCode}
+				{workspace}
+				onFocus={() => dispatch('focus')}
+				onBlur={() => dispatch('blur')}
+				bind:editor
+				{appPath}
+				{computeS3ForceViewerPolicies}
+			/>
 		{:else if inputCat == 'list' && !isListJson}
 			<div class="w-full flex gap-4">
 				<div class="w-full">
@@ -471,38 +474,24 @@ onDestroy(() => {
 								reorderable
 							/>
 						</div>
-					{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && (Array.isArray(value) || value == undefined)}
+					{:else if enum_ && (Array.isArray(value) || value == undefined)}
 						<div class="items-start">
 							<MultiSelect
 								{disabled}
 								bind:value
-								items={safeSelectItems(itemsType?.enum)}
+								items={safeSelectItems(enum_)}
 								onOpen={() => dispatch('focus')}
 								reorderable
 							/>
 						</div>
-					{:else if itemsType?.type == 'object' && itemsType?.resourceType == 's3object'}
-						<div class="w-full">
-							<FileUpload
-								{appPath}
-								computeForceViewerPolicies={computeS3ForceViewerPolicies}
-								{workspace}
-								allowMultiple={true}
-								randomFileKey={true}
-								on:addition={(evt) => {
-									value = [
-										...value,
-										{
-											s3: evt.detail?.path ?? '',
-											filename: evt.detail?.filename ?? ''
-										}
-									]
-								}}
-								on:deletion={(evt) => {
-									value = value.filter((v) => v.s3 !== evt.detail?.path)
-								}}
-								defaultValue={defaultValue?.map((v) => v.s3)}
-								initialValue={value}
+					{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && (Array.isArray(value) || value == undefined)}
+						<div class="items-start">
+							<MultiSelect
+								{disabled}
+								bind:value
+								items={safeSelectItems(itemsType?.enum)}
+								onOpen={() => dispatch('focus')}
+								reorderable
 							/>
 						</div>
 					{:else}
@@ -575,6 +564,7 @@ onDestroy(() => {
 															{onlyMaskPassword}
 															{disablePortal}
 															{disabled}
+															{prettifyHeader}
 															schema={getSchemaFromProperties(itemsType?.properties)}
 															bind:args={value[i]}
 														/>
@@ -678,70 +668,6 @@ onDestroy(() => {
 				}}
 				{showSchemaExplorer}
 			/>
-		{:else if inputCat == 'resource-object' && format && format.split('-').length > 1 && format
-				.replace('resource-', '')
-				.replace('_', '')
-				.toLowerCase() == 's3object'}
-			<div class="flex flex-col w-full gap-1">
-				<Toggle
-					class="flex justify-end"
-					bind:checked={s3FileUploadRawMode}
-					size="xs"
-					options={{ left: 'Raw S3 object input' }}
-				/>
-				{#if s3FileUploadRawMode}
-					{#await import('./JsonEditor.svelte')}
-						<Loader2 class="animate-spin" />
-					{:then Module}
-						<Module.default
-							bind:editor
-							on:focus={(e) => {
-								dispatch('focus')
-							}}
-							on:blur={(e) => {
-								dispatch('blur')
-							}}
-							code={JSON.stringify(value ?? defaultValue ?? { s3: '' }, null, 2)}
-							on:changeValue={(e) => {
-								setNewValueFromCode(e.detail)
-							}}
-						/>
-					{/await}
-				{:else}
-					<FileUpload
-						{appPath}
-						computeForceViewerPolicies={computeS3ForceViewerPolicies}
-						{workspace}
-						allowMultiple={false}
-						randomFileKey={true}
-						on:addition={(evt) => {
-							value = {
-								s3: evt.detail?.path ?? '',
-								filename: evt.detail?.filename ?? ''
-							}
-						}}
-						on:deletion={(evt) => {
-							value = {
-								s3: ''
-							}
-						}}
-						defaultValue={defaultValue?.s3}
-						initialValue={value}
-					/>
-				{/if}
-				<Button
-					variant="border"
-					color="light"
-					size="xs"
-					btnClasses="mt-1"
-					on:click={() => {
-						s3FilePicker?.open?.(value)
-					}}
-					startIcon={{ icon: Pipette }}
-				>
-					Choose an object from the catalog
-				</Button>
-			</div>
 		{:else if inputCat == 'object' || inputCat == 'resource-object' || isListJson}
 			{#if oneOf && oneOf.length >= 2}
 				<div class="flex flex-col gap-2 w-full">
@@ -781,6 +707,7 @@ onDestroy(() => {
 												{onlyMaskPassword}
 												{disablePortal}
 												{disabled}
+												{prettifyHeader}
 												bind:schema={
 													() => ({
 														properties: obj.properties ?? {},
@@ -811,6 +738,7 @@ onDestroy(() => {
 												{onlyMaskPassword}
 												{disablePortal}
 												{disabled}
+												{prettifyHeader}
 												hiddenArgs={['label', 'kind']}
 												schema={{
 													properties: obj.properties,
@@ -886,6 +814,7 @@ onDestroy(() => {
 							{onlyMaskPassword}
 							{disablePortal}
 							{disabled}
+							{prettifyHeader}
 							bind:schema={
 								() => ({
 									properties,
@@ -921,6 +850,7 @@ onDestroy(() => {
 							{onlyMaskPassword}
 							{disablePortal}
 							{disabled}
+							{prettifyHeader}
 							schema={{
 								properties,
 								order,

package/package/components/AuthSettings.svelte

@@ -15,6 +15,7 @@ import { capitalize } from '../utils';
 import Toggle from './Toggle.svelte';
 import { ExternalLink, Plus } from 'lucide-svelte';
 import AzureOauthSettings from './AzureOauthSettings.svelte';
+import Tooltip from './Tooltip.svelte';
 let { snowflakeAccountIdentifier = $bindable(), oauths = $bindable(), requirePreexistingUserForOauth = $bindable(), scim } = $props();
 $effect(() => {
     if (snowflakeAccountIdentifier == undefined) {
@@ -213,6 +214,49 @@ let tab = $state('sso');
 									<span class="text-primary font-semibold text-sm">Client Secret</span>
 									<input type="text" placeholder="Client Secret" bind:value={oauths[k]['secret']} />
 								</label>
+								{#if k === 'visma' || !windmillBuiltins.includes(k)}
+									<div style="margin-bottom: 8px;">
+										<div style="display: flex; align-items: center; gap: 8px;">
+											<input
+												type="checkbox"
+												style="width: 16px; height: 16px; margin: 0;"
+												checked={oauths?.[k]?.['grant_types']?.includes('client_credentials') ??
+													false}
+												onchange={(e) => {
+													const target = e.target as HTMLInputElement
+													if (oauths && oauths[k]) {
+														if (!oauths[k]['grant_types']) {
+															oauths[k]['grant_types'] = ['authorization_code']
+														}
+														if (target.checked) {
+															if (!oauths[k]['grant_types'].includes('client_credentials')) {
+																oauths[k]['grant_types'] = [
+																	...oauths[k]['grant_types'],
+																	'client_credentials'
+																]
+															}
+														} else {
+															oauths[k]['grant_types'] = oauths[k]['grant_types'].filter(
+																(gt) => gt !== 'client_credentials'
+															)
+														}
+													}
+												}}
+											/>
+											<span style="font-size: 14px; font-weight: 600;"
+												>Support Client Credentials Flow</span
+											>
+											<Tooltip>
+												Enables server-to-server authentication without user interaction. Use for
+												automated scripts and background jobs.
+												<br /><br />
+												When enabled, users can provide their own client credentials at the resource
+												level. The Client ID and Secret configured above are only used for the traditional
+												OAuth flow (popup window).
+											</Tooltip>
+										</div>
+									</div>
+								{/if}
 								{#if k === 'azure_oauth'}
 									<AzureOauthSettings bind:connect_config={oauths[k]['connect_config']} />
 								{:else if !windmillBuiltins.includes(k) && k != 'slack'}
@@ -265,7 +309,7 @@ let tab = $state('sso');
 					on:click={() => {
 						if (oauths) {
 							let name = oauth_name == 'custom' ? resourceName : oauth_name
-							oauths[name ?? ''] = { id: '', secret: '' }
+							oauths[name ?? ''] = { id: '', secret: '', grant_types: ['authorization_code'] }
 						}
 						resourceName = ''
 					}}