npm - windmill-components - Versions diffs - 1.623.1 → 1.642.0 - Mend

windmill-components 1.623.1 → 1.642.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (903) hide show

package/package/components/workspaceSettings/DucklakeSettings.svelte CHANGED Viewed

@@ -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,9 +31,10 @@ export function convertDucklakeSettingsToBackend(settings) {
 </script>
 <script>
-	import { Plus } from 'lucide-svelte'
+	import { Plus, SettingsIcon } from 'lucide-svelte'
 	import Button from '../common/button/Button.svelte'
+	import SettingsFooter from './SettingsFooter.svelte'
 	import Description from '../Description.svelte'
 	import { random_adj } from '../random_positive_adjetive'
@@ -43,12 +45,11 @@ 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 { globalDbManagerDrawer, workspaceStore } from '../../stores'
 	import { sendUserToast } from '../../toast'
 	import ExploreAssetButton from '../ExploreAssetButton.svelte'
-	import DbManagerDrawer from '../DBManagerDrawer.svelte'
 	import Tooltip from '../Tooltip.svelte'
 	import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte'
 	import { createAsyncConfirmationModal } from '../common/confirmationModal/asyncConfirmationModal.svelte'
@@ -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'
@@ -68,11 +70,13 @@ export function convertDucklakeSettingsToBackend(settings) {
 		ducklakeSettings: DucklakeSettingsType
 		ducklakeSavedSettings: DucklakeSettingsType
 		onSave?: () => void
+		onDiscard?: () => void
 	}
 	let {
 		ducklakeSettings = $bindable(),
 		ducklakeSavedSettings = $bindable(),
-		onSave: onSaveProp = undefined
+		onSave: onSaveProp = undefined,
+		onDiscard = undefined
 	}: Props = $props()
 	function onNewDucklake() {
@@ -105,6 +109,11 @@ export function convertDucklakeSettingsToBackend(settings) {
 		)
 	)
+	let hasUnsavedChanges = $derived(
+		ducklakeSavedSettings.ducklakes.length !== ducklakeSettings.ducklakes.length ||
+			!Object.values(ducklakeIsDirty).every((v) => v === false)
+	)
 	const customInstanceDbs = resource([], SettingService.listCustomInstanceDbs)
 	async function onSave() {
@@ -135,6 +144,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 		} catch (e) {
 			sendUserToast(e, true)
 			console.error('Error saving ducklake settings', e)
+			throw e
 		}
 	}
@@ -156,7 +166,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 			'Where the data is actually stored, in parquet format. You need to configure a workspace storage first'
 	}
-	let dbManagerDrawer: DbManagerDrawer | undefined = $state()
+	let dbManagerDrawer = $derived(globalDbManagerDrawer.val)
 	let confirmationModal = createAsyncConfirmationModal()
 </script>
@@ -179,7 +189,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 	</div>
 {/if}
-<DataTable>
+<DataTable containerClass="ducklake-settings-table">
 	<Head>
 		<tr>
 			{#each tableHeadNames as name, i}
@@ -194,7 +204,7 @@ export function convertDucklakeSettingsToBackend(settings) {
 			{/each}
 		</tr>
 	</Head>
-	<tbody class="divide-y bg-surface">
+	<tbody class="divide-y bg-surface-tertiary">
 		{#if ducklakeSettings.ducklakes.length == 0}
 			<Row>
 				<Cell colspan={tableHeadNames.length} class="text-center py-6">
@@ -212,7 +222,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 +300,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)} />
@@ -336,15 +372,13 @@ export function convertDucklakeSettingsToBackend(settings) {
 		</Row>
 	</tbody>
 </DataTable>
-<Button
-	wrapperClasses="mt-4 mb-16 max-w-fit"
-	variant="accent"
-	on:click={onSave}
-	disabled={ducklakeSavedSettings.ducklakes.length === ducklakeSettings.ducklakes.length &&
-		Object.values(ducklakeIsDirty).every((v) => v === false)}
->
-	Save ducklake settings
-</Button>
-<DbManagerDrawer bind:this={dbManagerDrawer} />
+<SettingsFooter
+	class="mt-6 mb-16"
+	inline
+	{hasUnsavedChanges}
+	{onSave}
+	onDiscard={() => onDiscard?.()}
+	saveLabel="Save ducklake settings"
+/>
 <ConfirmationModal {...confirmationModal.props} />

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

@@ -9,15 +9,17 @@ 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;
     onSave?: () => void;
+    onDiscard?: () => void;
 };
 declare const DucklakeSettings: import("svelte").Component<Props, {}, "ducklakeSettings" | "ducklakeSavedSettings">;
 type DucklakeSettings = ReturnType<typeof DucklakeSettings>;

package/package/components/workspaceSettings/GitSyncFilterSettings.svelte CHANGED Viewed

@@ -1,13 +1,14 @@
 <script lang="ts">import Toggle from '../Toggle.svelte';
-import { Filter, Terminal, ChevronDown, ChevronUp, Edit3 } from 'lucide-svelte';
+import { Filter, ChevronDown } from 'lucide-svelte';
 import Tooltip from '../Tooltip.svelte';
 import FilterList from './FilterList.svelte';
-import { Tabs, Tab } from '../common';
+import { Tabs, Tab, Button, Section } from '../common';
 import { workspaceStore } from '../../stores';
+import { twMerge } from 'tailwind-merge';
+import { slide } from 'svelte/transition';
 let { git_repo_resource_path = $bindable(''), include_path = $bindable(['f/**']), include_type = $bindable(['script', 'flow', 'app', 'folder']), exclude_types_override = $bindable([]), isLegacyRepo = false, excludes = $bindable([]), extraIncludes = $bindable([]), isInitialSetup = false, requiresMigration = false, actions = undefined, useIndividualBranch = false } = $props();
 // Component state
 let collapsed = $state(false);
-let showCliInstructions = $state(false);
 // Determine if component should be editable or read-only
 const isEditable = $derived(isInitialSetup || requiresMigration);
 // Compute effective include types (include_type minus exclude_types_override for legacy repos only)
@@ -71,8 +72,8 @@ function capitalize(str) {
 	<!-- Card Header -->
 	<div class="flex items-center justify-between min-h-10 px-4 py-1 border-b">
 		<div class="flex items-center gap-2">
-			<Filter size={18} class="text-primary" />
-			<span class="font-semibold text-sm">Git Sync filter settings</span>
+			<Filter size={14} class="text-primary" />
+			<span class="font-semibold text-xs text-emphasis">Git Sync filter settings</span>
 			{#if isLegacyRepo}
 				<Tooltip>
 					This repository uses legacy configuration format and inherits settings from
@@ -86,50 +87,21 @@ function capitalize(str) {
 				</Tooltip>
 			{/if}
 		</div>
-		<div class="flex items-center gap-2">
-			<button
-				class="text-secondary hover:text-primary focus:outline-none"
-				onclick={() => (collapsed = !collapsed)}
-				aria-label="Toggle collapse"
-			>
-				{#if collapsed}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 9l-7 7-7-7"
-						/>
-					</svg>
-				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M5 15l7-7 7 7"
-						/>
-					</svg>
-				{/if}
-			</button>
-		</div>
+		<Button
+			unifiedSize="sm"
+			variant="subtle"
+			startIcon={{
+				icon: ChevronDown,
+				classes: twMerge('transition duration-150', collapsed ? '' : 'rotate-180')
+			}}
+			onClick={() => (collapsed = !collapsed)}
+			iconOnly
+		/>
 	</div>
 	{#if !collapsed}
 		{#if isEditable}
 			<!-- Editable mode -->
-			<div class="px-4 py-2">
+			<div class="px-4 py-2" transition:slide={{ duration: 150 }}>
 				<div class="grid grid-cols-1 md:grid-cols-2 md:gap-32">
 					<div class="flex flex-col gap-2">
 						<Tabs bind:selected={filtersTab}>
@@ -305,7 +277,7 @@ function capitalize(str) {
 				<div class="grid grid-cols-1 md:grid-cols-2 md:gap-8">
 					<div class="flex flex-col gap-3">
 						<div>
-							<h4 class="font-semibold text-sm mb-1">Include Paths</h4>
+							<h4 class="font-semibold text-xs text-emphasis mb-1">Include Paths</h4>
 							{#if include_path.length > 0}
 								<div class="flex flex-wrap gap-1 text-xs">
 									{#each include_path as path}
@@ -320,7 +292,7 @@ function capitalize(str) {
 						</div>
 						<div>
-							<h4 class="font-semibold text-sm mb-1">Exclude Paths</h4>
+							<h4 class="font-semibold text-xs text-emphasis mb-1">Exclude Paths</h4>
 							{#if excludes.length > 0}
 								<div class="flex flex-wrap gap-1 text-xs">
 									{#each excludes as path}
@@ -334,7 +306,7 @@ function capitalize(str) {
 					</div>
 					<div class="flex flex-col gap-2">
-						<h4 class="font-semibold text-sm">Included Types</h4>
+						<h4 class="font-semibold text-xs text-emphasis">Included Types</h4>
 						<div class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
 							{#each Object.entries(typeToggles) as [key, enabled]}
 								<div class="flex items-center gap-1">
@@ -359,21 +331,7 @@ function capitalize(str) {
 				<!-- CLI Instructions (collapsible) -->
 				<div class="border-t pt-2 mt-4">
-					<button
-						class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
-						onclick={() => (showCliInstructions = !showCliInstructions)}
-					>
-						<Terminal size={16} />
-						<span>Update settings with CLI</span>
-						<Edit3 size={14} class="text-primary" />
-						{#if showCliInstructions}
-							<ChevronUp size={16} />
-						{:else}
-							<ChevronDown size={16} />
-						{/if}
-					</button>
-					{#if showCliInstructions}
+					<Section label="Update settings with CLI" collapsable={true} collapsed={true}>
 						<div class="mt-3 bg-surface-secondary rounded-lg p-3">
 							<div class="text-xs text-primary mb-2">
 								These filter settings are sourced from the <code
@@ -401,8 +359,8 @@ git commit
 git push
 # Push changes to workspace or click the pull settings button above{#if useIndividualBranch}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path} --promotion main{:else}
-wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path}{/if}</pre
+									wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path} --promotion main{:else}
+									wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo_resource_path}{/if}</pre
 							>
 							{#if useIndividualBranch}
 								<div class="text-xs text-primary mt-3">
@@ -421,7 +379,7 @@ wmill gitsync-settings push --workspace {$workspaceStore} --repository {git_repo
 								</div>
 							{/if}
 						</div>
-					{/if}
+					</Section>
 				</div>
 			</div>
 		{/if}

package/package/components/workspaceSettings/ModelTokenLimits.svelte CHANGED Viewed

@@ -1,6 +1,8 @@
-<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';
+import SettingCard from '../instanceSettings/SettingCard.svelte';
 const MAX_TOKENS_LIMIT = 2000000;
 let { aiProviders, maxTokensPerModel = $bindable() } = $props();
 let errors = $state({});
@@ -70,33 +72,24 @@ $effect(() => {
 </script>
 {#if Object.keys(aiProviders).length > 0}
-	<div class="flex flex-col gap-4">
-		<div class="flex flex-col gap-1">
-			<p class="font-semibold">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.
-			</p>
-		</div>
+	<SettingCard
+		label="Model output limits"
+		description="Configure maximum token limits for each model. These limits apply to all AI chat interactions in the workspace."
+	>
 		<div class="flex flex-col gap-3">
 			{#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 +100,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 +109,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 +131,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"
@@ -161,5 +153,5 @@ $effect(() => {
 				</div>
 			{/each}
 		</div>
-	</div>
+	</SettingCard>
 {/if}

package/package/components/workspaceSettings/OAuthClientConfig.svelte ADDED Viewed

@@ -0,0 +1,151 @@
+<script lang="ts">import { sendUserToast } from '../../utils';
+import { Button, Alert } from '../common';
+import Label from '../Label.svelte';
+import ClipboardPanel from '../details/ClipboardPanel.svelte';
+import { Save, ExternalLink } from 'lucide-svelte';
+let { serviceName, serviceDisplayName, existingConfig, onConfigSaved, redirectUri, requiresBaseUrl = true, baseUrlLabel = `${serviceDisplayName} base URL`, baseUrlPlaceholder = `https://your-${serviceName}.example.com`, baseUrlSettingsPath = '/settings/admin/security', clientIdPlaceholder = `Generated by ${serviceDisplayName} OAuth app`, clientSecretPlaceholder = `Generated by ${serviceDisplayName} OAuth app`, setupInstructions } = $props();
+let saving = $state(false);
+let clientId = $state('');
+let clientSecret = $state('');
+let baseUrl = $state('');
+$effect(() => {
+    if (existingConfig) {
+        clientId = existingConfig.client_id;
+        clientSecret = existingConfig.client_secret;
+        baseUrl = existingConfig.base_url;
+    }
+});
+let canSave = $derived(!saving &&
+    !!clientId.trim() &&
+    !!clientSecret.trim() &&
+    (!requiresBaseUrl || !!baseUrl.trim()));
+async function saveConfig() {
+    if (!canSave) {
+        sendUserToast('Please fill in all required fields', true);
+        return;
+    }
+    saving = true;
+    try {
+        const oauthData = {
+            client_id: clientId.trim(),
+            client_secret: clientSecret.trim(),
+            base_url: requiresBaseUrl ? 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 = '';
+}
+</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.
+			</p>
+			{#if setupInstructions}
+				<ol class="list-decimal list-inside space-y-1 text-sm">
+					{#each setupInstructions as instruction}
+						<li>{@html instruction}</li>
+					{/each}
+				</ol>
+			{/if}
+		</Alert>
+	{/if}
+	<div class="space-y-4">
+		<div class="space-y-4">
+			{#if requiresBaseUrl}
+				<div class="flex flex-col gap-1">
+					<Label label={baseUrlLabel} />
+					<p class="text-xs font-normal text-secondary"
+						>The base URL of your {serviceDisplayName} instance (without trailing slash)</p
+					>
+					<input
+						type="url"
+						bind:value={baseUrl}
+						placeholder={baseUrlPlaceholder}
+						class="windmill-input"
+						disabled={saving}
+					/>
+					{#if baseUrl && baseUrlSettingsPath}
+						<Button
+							wrapperClasses="self-start"
+							href={`${baseUrl}${baseUrlSettingsPath}`}
+							target="_blank"
+							startIcon={{ icon: ExternalLink }}
+						>
+							{serviceDisplayName} OAuth Settings
+						</Button>
+					{/if}
+				</div>
+			{/if}
+			<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
+				>
+				<ClipboardPanel content={redirectUri} size="sm" />
+			</div>
+			<div class="flex flex-col gap-1">
+				<Label label="Client ID" />
+				<input
+					type="text"
+					bind:value={clientId}
+					placeholder={clientIdPlaceholder}
+					class="windmill-input"
+					disabled={saving}
+				/>
+			</div>
+			<div class="flex flex-col gap-1">
+				<Label label="Client secret" />
+				<input
+					type="password"
+					bind:value={clientSecret}
+					placeholder={clientSecretPlaceholder}
+					class="windmill-input"
+					disabled={saving}
+				/>
+			</div>
+			<div class="flex gap-2">
+				<Button
+					color="blue"
+					onclick={saveConfig}
+					disabled={!canSave}
+					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
+				{serviceDisplayName}.
+			</p>
+		</Alert>
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+interface Props {
+    serviceName: string;
+    serviceDisplayName: string;
+    existingConfig?: {
+        client_id: string;
+        client_secret: string;
+        base_url: string;
+    } | null;
+    redirectUri: string;
+    onConfigSaved: (oauthData: any) => Promise<void>;
+    requiresBaseUrl?: boolean;
+    baseUrlLabel?: string;
+    baseUrlPlaceholder?: string;
+    baseUrlSettingsPath?: string;
+    clientIdPlaceholder?: string;
+    clientSecretPlaceholder?: string;
+    setupInstructions?: string[];
+}
+declare const OAuthClientConfig: import("svelte").Component<Props, {}, "">;
+type OAuthClientConfig = ReturnType<typeof OAuthClientConfig>;
+export default OAuthClientConfig;