windmill-components 1.623.1 → 1.623.2

package/package/components/workspaceSettings/CreateWorkspace.svelte

@@ -3,7 +3,7 @@ import { goto } from '../../navigation';
 import { base } from '../../base';
 import { JobService, ResourceService, SettingService, UserService, VariableService, WorkspaceService } from '../../gen';
 import { validateUsername } from '../../utils';
-import { logoutWithRedirect } from '../../logout';
+import { logoutWithRedirect } from '../../logoutKit';
 import { page } from '$app/stores';
 import { usersWorkspaceStore, workspaceStore } from '../../stores';
 import CenteredModal from '../CenteredModal.svelte';
@@ -169,7 +169,7 @@ async function createWorkspace() {
     if (auto_invite) {
         await WorkspaceService.editAutoInvite({
             workspace: id,
-            requestBody: { operator: operatorOnly, invite_all: !isCloudHosted(), auto_add: true }
+            requestBody: { operator: operatorOnly, invite_all: !isCloudHosted(), auto_add: autoAdd }
         });
     }
     if (aiKey != '') {
@@ -274,6 +274,7 @@ onMount(() => {
 let isDomainAllowed = $state(undefined);
 let auto_invite = $state(false);
 let operatorOnly = $state(false);
+let autoAdd = $state(true);
 let selected = $state('openai');
 run(() => {
     id = name.toLowerCase().replace(/\s/gi, '-');
@@ -290,7 +291,7 @@ run(() => {
 let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 </script>
 
-<CenteredModal title="{isFork ? 'Forking' : 'New'} Workspace">
+<CenteredModal title="{isFork ? 'Forking' : 'New'} Workspace" centerVertically={false}>
 	<div class="flex flex-col gap-8">
 		{#if isFork}
 			<div class="flex flex-block gap-2">
@@ -487,8 +488,8 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 			<div class="flex flex-col gap-1">
 				<label for="auto-invite" class="text-xs font-semibold text-emphasis"
 					>{isCloudHosted()
-						? `Auto-invite anyone from ${domain}`
-						: `Auto-invite anyone joining the instance`}</label
+						? `Auto-${autoAdd ? 'add' : 'invite'} anyone from ${domain}`
+						: `Auto-${autoAdd ? 'add' : 'invite'} anyone joining the instance`}</label
 				>
 				<Toggle
 					id="auto-invite"
@@ -502,12 +503,25 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 				{#if auto_invite}
 					<div class="bg-surface-tertiary p-4 rounded-md flex flex-col gap-8">
 						<!-- svelte-ignore a11y_label_has_associated_control -->
-						<label class="flex flex-col gap-1">
-							<span class="text-xs font-semibold text-emphasis">Mode</span>
-							<span class="text-xs text-secondary font-normal"
-								>Whether to invite or add users directly to the workspace.</span
-							>
-						</label>
+						{#if isCloudHosted()}
+							<label class="flex flex-col gap-1">
+								<span class="text-xs font-semibold text-emphasis">Mode</span>
+								<span class="text-xs text-secondary font-normal"
+									>Whether to invite or add users directly to the workspace.</span
+								>
+								<ToggleButtonGroup
+									selected={autoAdd ? 'add' : 'invite'}
+									on:selected={async (e) => {
+										autoAdd = e.detail === 'add'
+									}}
+								>
+									{#snippet children({ item })}
+										<ToggleButton value="invite" label="Auto-invite" {item} />
+										<ToggleButton value="add" label="Auto-add" {item} />
+									{/snippet}
+								</ToggleButtonGroup>
+							</label>
+						{/if}
 
 						<label class="font-semibold flex flex-col gap-1">
 							<span class="text-xs font-semibold text-emphasis">Role</span>
@@ -528,7 +542,7 @@ let domain = $derived($usersWorkspaceStore?.email.split('@')[1]);
 				{/if}
 			</div>
 		{/if}
-		<div class="flex flex-wrap flex-row justify-between pt-12 gap-4">
+		<div class="flex flex-wrap flex-row justify-between gap-4 pt-4">
 			<Button
 				disabled={forkCreationLoading}
 				variant="default"

package/package/components/workspaceSettings/CustomInstanceDbSelect.svelte

@@ -22,6 +22,7 @@ let currentIsAlreadyUsedElsewhere = $derived(tag && status && status.tag !== tag
 		placeholder="Search or create..."
 		showPlaceholderOnOpen
 		items={onlySelectedTags}
+		id="custom-instance-db-select"
 		disabled={!$isCustomInstanceDbEnabled}
 	>
 		{#snippet endSnippet({ item })}

package/package/components/workspaceSettings/CustomInstanceDbWizardModal.svelte

@@ -109,7 +109,8 @@ let preventClose = false;
 										'GRANT CREATE ON SCHEMA public TO custom_instance_user;\n' +
 										`GRANT CREATE ON DATABASE "${dbname}" TO custom_instance_user;\n` +
 										'ALTER DEFAULT PRIVILEGES IN SCHEMA public \n' +
-										'  	GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES\n    TO custom_instance_user;'
+										'  	GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES\n    TO custom_instance_user;\n' +
+										'ALTER ROLE custom_instance_user CREATEROLE;'
 								}
 							],
 							status?.error ?? undefined
@@ -132,6 +133,7 @@ let preventClose = false;
 				{/if}
 				<Button
 					size="sm"
+					id="run-custom-instance-db-setup-button"
 					variant={!status?.success ? 'accent' : 'default'}
 					endIcon={status?.success ? undefined : { icon: ArrowRight }}
 					disabled={!$isCustomInstanceDbEnabled}

package/package/components/workspaceSettings/DataTableSettings.svelte

@@ -156,7 +156,7 @@ export function unsavedChanges() {
 		{#each tempSettings.dataTables as dataTable, dataTableIndex}
 			<Row>
 				<Cell first class="w-48 relative">
-					<TextInput bind:value={dataTable.name} inputProps={{ placeholder: 'Name' }} />
+					<TextInput bind:value={dataTable.name} inputProps={{ placeholder: 'Name', id: 'name' }} />
 				</Cell>
 				<Cell>
 					<div class="flex gap-2">
@@ -185,6 +185,7 @@ export function unsavedChanges() {
 										}
 									}
 								}
+								id="database-type-select"
 								class="w-28"
 							/>
 						</div>

package/package/components/workspaceSettings/DucklakeSettings.svelte

@@ -22,7 +22,8 @@ export function convertDucklakeSettingsToBackend(settings) {
             ducklake.storage.path = ducklake.storage.path.slice(1);
         s.ducklakes[ducklake.name] = {
             catalog: ducklake.catalog,
-            storage: ducklake.storage
+            storage: ducklake.storage,
+            extra_args: ducklake.extra_args || undefined
         };
     }
     return s;
@@ -30,7 +31,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 </script>
 
 <script>
-	import { Plus } from 'lucide-svelte'
+	import { Plus, SettingsIcon } from 'lucide-svelte'
 
 	import Button from '../common/button/Button.svelte'
 
@@ -43,7 +44,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 	import ResourcePicker from '../ResourcePicker.svelte'
 	import { usePromise } from '../../svelte5Utils.svelte'
 	import { SettingService, WorkspaceService } from '../../gen'
-	import { type GetSettingsResponse } from '../../gen'
+	import type { GetSettingsResponse } from '../../gen'
 
 	import { workspaceStore } from '../../stores'
 	import { sendUserToast } from '../../toast'
@@ -61,6 +62,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 	import { isCustomInstanceDbEnabled } from './utils.svelte'
 	import { resource } from 'runed'
 	import CustomInstanceDbSelect from './CustomInstanceDbSelect.svelte'
+	import Label from '../Label.svelte'
 
 	const DEFAULT_DUCKLAKE_CATALOG_NAME = 'ducklake_catalog'
 
@@ -179,7 +181,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 	</div>
 {/if}
 
-<DataTable>
+<DataTable containerClass="ducklake-settings-table">
 	<Head>
 		<tr>
 			{#each tableHeadNames as name, i}
@@ -212,7 +214,11 @@ export function convertDucklakeSettingsToBackend(settings) {
 							<code class="px-1 py-0.5 border rounded-md">ATTACH 'ducklake' AS dl;</code> shorthand
 						</Tooltip>
 					{/if}
-					<TextInput bind:value={ducklake.name} inputProps={{ placeholder: 'Name' }} />
+					<TextInput
+						bind:value={ducklake.name}
+						inputProps={{ placeholder: 'Name' }}
+						class="ducklake-name"
+					/>
 				</Cell>
 				<Cell>
 					<div class="flex gap-2">
@@ -286,39 +292,61 @@ export function convertDucklakeSettingsToBackend(settings) {
 									else delete ducklake.storage.storage
 								}
 							}
-							class="w-48"
+							class="ducklake-workspace-storage-select w-48"
 							inputClass="!placeholder-secondary"
 						/>
 						<TextInput
 							inputProps={{ placeholder: 'Data path (defaults to /)' }}
+							class="ducklake-storage-data-path"
 							bind:value={ducklake.storage.path}
 						/>
 					</div>
 				</Cell>
 				<Cell class="w-12">
-					{#if ducklakeIsDirty[ducklake.name]}
-						<Popover
-							openOnHover
-							contentClasses="p-2 text-sm text-secondary italic"
-							class="cursor-not-allowed"
-						>
+					<div class="flex gap-2">
+						<Popover contentClasses="p-4" enableFlyTransition closeOnOtherPopoverOpen>
 							<svelte:fragment slot="trigger">
-								<ExploreAssetButton
-									class="h-9"
-									asset={{ kind: 'ducklake', path: ducklake.name }}
-									{dbManagerDrawer}
-									disabled
-								/>
+								<div class="relative">
+									<Button variant="default" iconOnly size="sm" endIcon={{ icon: SettingsIcon }} />
+									{#if ducklake.extra_args}
+										<div
+											class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-accent rounded-full border border-surface"
+										></div>
+									{/if}
+								</div>
+							</svelte:fragment>
+							<svelte:fragment slot="content">
+								<Label
+									label="Extra args"
+									tooltip="Additional arguments to pass in the ATTACH command. The argument list is substituted as-is. Separate them with commas."
+								>
+									<TextInput
+										bind:value={ducklake.extra_args}
+										class="min-w-96"
+										underlyingInputEl="textarea"
+										inputProps={{ placeholder: "METADATA_SCHEMA 'schema', ENCRYPTED true" }}
+									/>
+								</Label>
 							</svelte:fragment>
-							<svelte:fragment slot="content">Please save settings first</svelte:fragment>
 						</Popover>
-					{:else}
-						<ExploreAssetButton
-							class="h-9"
-							asset={{ kind: 'ducklake', path: ducklake.name }}
-							{dbManagerDrawer}
-						/>
-					{/if}
+						{#if ducklakeIsDirty[ducklake.name]}
+							<Popover
+								openOnHover
+								contentClasses="p-2 text-sm text-secondary italic"
+								class="cursor-not-allowed"
+							>
+								<svelte:fragment slot="trigger">
+									<ExploreAssetButton asset={{ kind: 'ducklake', path: '' }} disabled />
+								</svelte:fragment>
+								<svelte:fragment slot="content">Please save settings first</svelte:fragment>
+							</Popover>
+						{:else}
+							<ExploreAssetButton
+								asset={{ kind: 'ducklake', path: ducklake.name }}
+								{dbManagerDrawer}
+							/>
+						{/if}
+					</div>
 				</Cell>
 				<Cell class="w-12">
 					<CloseButton small on:close={() => removeDucklake(ducklakeIndex)} />

package/package/components/workspaceSettings/DucklakeSettings.svelte.d.ts

@@ -9,11 +9,12 @@ export type DucklakeSettingsType = {
             storage?: string;
             path: string;
         };
+        extra_args?: string;
     }[];
 };
 export declare function convertDucklakeSettingsFromBackend(settings: GetSettingsResponse['ducklake']): DucklakeSettingsType;
 export declare function convertDucklakeSettingsToBackend(settings: DucklakeSettingsType): NonNullable<GetSettingsResponse['ducklake']>;
-import { type GetSettingsResponse } from '../../gen';
+import type { GetSettingsResponse } from '../../gen';
 type Props = {
     ducklakeSettings: DucklakeSettingsType;
     ducklakeSavedSettings: DucklakeSettingsType;

package/package/components/workspaceSettings/ModelTokenLimits.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { getModelMaxTokens } from '../copilot/lib';
+<script lang="ts">import { Badge, Button } from '../common';
+import { getModelMaxTokens } from '../copilot/lib';
 import { ChevronDown, ChevronUp } from 'lucide-svelte';
 import { slide } from 'svelte/transition';
 const MAX_TOKENS_LIMIT = 2000000;
@@ -70,9 +71,9 @@ $effect(() => {
 </script>
 
 {#if Object.keys(aiProviders).length > 0}
-	<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-2">
 		<div class="flex flex-col gap-1">
-			<p class="font-semibold">Model Output Limits</p>
+			<p class="font-semibold text-xs text-emphasis">Model Output Limits</p>
 			<p class="text-xs text-secondary">
 				Configure maximum token limits for each model. These limits apply to all AI chat
 				interactions in the workspace.
@@ -83,20 +84,16 @@ $effect(() => {
 			{#each Object.entries(modelsByProvider).filter(([provider, models]) => models.length > 0) as [provider, models]}
 				{@const isExpanded = !collapsedProviders[provider]}
 				{@const hasCustom = hasCustomSettings(provider, models)}
-				<div class="border border-gray-200 dark:border-gray-700 rounded-md">
+				<div class="border rounded-md bg-surface-tertiary">
 					<button
 						type="button"
 						onclick={() => toggleProvider(provider)}
-						class="w-full px-4 py-3 flex items-center justify-between bg-surface-secondary hover:bg-surface-hover transition-colors rounded-md"
+						class="w-full px-4 py-1 min-h-8 flex items-center justify-between hover:bg-surface-hover transition-colors rounded-t-md"
 					>
 						<div class="flex items-center gap-2">
-							<h4 class="font-medium text-sm capitalize">{provider}</h4>
+							<h4 class="font-medium text-xs capitalize">{provider}</h4>
 							{#if hasCustom}
-								<span
-									class="text-xs px-2 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded"
-								>
-									Modified
-								</span>
+								<Badge color="blue">Modified</Badge>
 							{/if}
 						</div>
 						{#if isExpanded}
@@ -107,7 +104,7 @@ $effect(() => {
 					</button>
 
 					{#if isExpanded}
-						<div transition:slide|local={{ duration: 200 }} class="p-3">
+						<div transition:slide|local={{ duration: 200 }} class="p-4 border-t">
 							<div class="space-y-3">
 								{#each models as { model }}
 									{@const currentTokens = getCurrentTokensForModel(provider as AIProvider, model)}
@@ -116,7 +113,7 @@ $effect(() => {
 									<div class="flex flex-col gap-1">
 										<div class="flex items-center gap-3">
 											<div class="flex-1 min-w-0">
-												<span class="text-sm text-primary truncate block">{model}</span>
+												<span class="text-xs text-primary truncate block">{model}</span>
 											</div>
 											<div class="flex items-center gap-2">
 												<input
@@ -138,14 +135,13 @@ $effect(() => {
 										{#if !isAtDefault}
 											<div class="text-xs text-primary flex flex-row items-center gap-1">
 												<span>Default: {defaultTokens} tokens</span>
-												<button
-													type="button"
+												<Button
+													variant="default"
+													unifiedSize="xs"
 													onclick={() => resetModelToDefault(provider as AIProvider, model)}
-													class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 whitespace-nowrap"
-													title="Reset to default ({defaultTokens})"
 												>
 													Reset
-												</button>
+												</Button>
 											</div>
 											{#if errors[getModelKey(provider as AIProvider, model)]}
 												<div class="text-xs text-red-500"

package/package/components/workspaceSettings/OAuthClientConfig.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">import { sendUserToast } from '../../utils';
+import { Button, Alert } from '../common';
+import Label from '../Label.svelte';
+import { Save, ExternalLink } from 'lucide-svelte';
+import { workspaceStore } from '../../stores';
+let { serviceName, serviceDisplayName, existingConfig, onConfigSaved, redirectUri = $bindable('') } = $props();
+let saving = $state(false);
+let clientId = $state('');
+let clientSecret = $state('');
+let baseUrl = $state('');
+let workspace = $workspaceStore;
+redirectUri = `${window.location.origin}/workspace_settings?tab=native_triggers&service=${serviceName}&workspace=${workspace}`;
+$effect(() => {
+    if (existingConfig) {
+        clientId = existingConfig.client_id;
+        clientSecret = existingConfig.client_secret;
+        baseUrl = existingConfig.base_url;
+    }
+});
+async function saveConfig() {
+    if (!clientId.trim() || !clientSecret.trim() || !baseUrl.trim()) {
+        sendUserToast('Please fill in all fields', true);
+        return;
+    }
+    saving = true;
+    try {
+        const oauthData = {
+            client_id: clientId.trim(),
+            client_secret: clientSecret.trim(),
+            base_url: baseUrl.trim().replace(/\/+$/, ''),
+            redirect_uri: redirectUri.trim()
+        };
+        await onConfigSaved(oauthData);
+        resetForm();
+    }
+    catch (err) {
+        sendUserToast(`Failed to configure OAuth client: ${err.message}`, true);
+    }
+    finally {
+        saving = false;
+    }
+}
+function resetForm() {
+    clientId = '';
+    clientSecret = '';
+}
+function copyToClipboard(text, label) {
+    navigator.clipboard
+        .writeText(text)
+        .then(() => {
+        sendUserToast(`${label} copied to clipboard`);
+    })
+        .catch(() => {
+        sendUserToast(`Failed to copy ${label}`, true);
+    });
+}
+</script>
+
+<div class="space-y-4">
+	<div class="flex justify-between items-center">
+		<h4 class="text-md font-medium text-primary">{serviceDisplayName} OAuth Client Configuration</h4
+		>
+	</div>
+
+	{#if !existingConfig}
+		<Alert type="warning" title="OAuth client required">
+			<p class="text-sm mb-2">
+				Before you can connect to {serviceDisplayName}, you need to configure an OAuth client. This
+				requires:
+			</p>
+			<ol class="list-decimal list-inside space-y-1 text-sm">
+				<li
+					>Create an OAuth2 application in your {serviceDisplayName} instance (Administration settings
+					-> Security -> OAuth 2.0 clients)</li
+				>
+				<li
+					>Configure the redirect URI: <code
+						class="text-xs bg-gray-100 dark:bg-gray-800 px-1 rounded"
+						>{redirectUri ||
+							`${window.location.origin}/workspace_settings?tab=integrations&service=${serviceName}`}</code
+					></li
+				>
+				<li>Enter the client credentials below</li>
+			</ol>
+		</Alert>
+	{/if}
+
+	<div class="space-y-4">
+		<div class="space-y-4">
+			<div class="flex flex-col gap-1">
+				<Label label="Nextcloud base URL" />
+				<p class="text-xs font-normal text-secondary"
+					>The base URL of your Nextcloud instance (without trailing slash)</p
+				>
+				<input
+					type="url"
+					bind:value={baseUrl}
+					placeholder="https://your-nextcloud.example.com"
+					class="windmill-input"
+					disabled={saving}
+				/>
+				{#if baseUrl}
+					<Button
+						wrapperClasses="self-start"
+						href={`${baseUrl}/settings/admin/security`}
+						target="_blank"
+						startIcon={{ icon: ExternalLink }}
+					>
+						{serviceDisplayName} OAuth Settings
+					</Button>
+				{/if}
+			</div>
+
+			<div class="flex flex-col gap-1">
+				<Label label="Redirect URI" />
+				<p class="text-xs font-normal text-secondary"
+					>Use this URL when creating the OAuth app in {serviceDisplayName}</p
+				>
+				<div class="flex gap-2">
+					<input
+						type="url"
+						bind:value={redirectUri}
+						readonly
+						class="windmill-input flex-1 bg-gray-50 dark:bg-gray-900"
+					/>
+					<Button
+						size="xs"
+						color="light"
+						variant="border"
+						onclick={() => copyToClipboard(redirectUri, 'Redirect URI')}
+					>
+						Copy
+					</Button>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-1">
+				<Label label="Client ID" />
+				<input
+					type="text"
+					bind:value={clientId}
+					placeholder="Generated by Nextcloud OAuth app"
+					class="windmill-input"
+					disabled={saving}
+				/>
+			</div>
+
+			<div class="flex flex-col gap-1">
+				<Label label="Client secret" />
+				<input
+					type="password"
+					bind:value={clientSecret}
+					placeholder="Generated by Nextcloud OAuth app"
+					class="windmill-input"
+					disabled={saving}
+				/>
+			</div>
+
+			<div class="flex gap-2">
+				<Button
+					color="blue"
+					onclick={saveConfig}
+					disabled={saving || !clientId.trim() || !clientSecret.trim() || !baseUrl.trim()}
+					startIcon={{ icon: Save }}
+				>
+					{saving ? 'Saving...' : 'Save configuration'}
+				</Button>
+			</div>
+		</div>
+	</div>
+
+	{#if existingConfig}
+		<Alert type="success" title="OAuth client configured">
+			<p class="text-sm">
+				OAuth client is configured for {serviceDisplayName}. You can now connect this workspace to
+				your {serviceDisplayName} instance.
+			</p>
+		</Alert>
+	{/if}
+</div>

package/package/components/workspaceSettings/OAuthClientConfig.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    serviceName: string;
+    serviceDisplayName: string;
+    existingConfig?: {
+        client_id: string;
+        client_secret: string;
+        base_url: string;
+    } | null;
+    redirectUri: string;
+    onConfigSaved: (oauthData: any) => Promise<void>;
+}
+declare const OAuthClientConfig: import("svelte").Component<Props, {}, "redirectUri">;
+type OAuthClientConfig = ReturnType<typeof OAuthClientConfig>;
+export default OAuthClientConfig;