windmill-components 1.623.1 → 1.642.0

package/package/components/MoveDrawer.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,14 +11,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const MoveDrawer: $$__sveltets_2_IsomorphicComponent<{
-    openDrawer?: (initialPath_l: string, summary_l: string | undefined, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app") => Promise<void>;
-}, {
+declare const MoveDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (initialPath_l: string, summary_l: string | undefined, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app") => Promise<void>;
-}, string>;
+    openDrawer: (initialPath_l: string, summary_l: string | undefined, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule") => Promise<void>;
+}, "">;
 type MoveDrawer = InstanceType<typeof MoveDrawer>;
 export default MoveDrawer;

package/package/components/NextcloudSetting.svelte

@@ -2,6 +2,7 @@
 import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable(), baseUrl } = $props();
 function changeDomain(domain) {
     if (value && domain) {
@@ -50,7 +51,7 @@ $effect(() => {
 		/></label
 	>
 	{#if enabled}
-		<div class="p-4 rounded-md border flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Nextcloud Instance Domain</span>
 				<TextInput
@@ -81,7 +82,7 @@ $effect(() => {
 					>Client Secret from your Nextcloud OAuth2 app configuration</span
 				>
 				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
+					inputProps={{ type: 'password', placeholder: 'Client Secret' }}
 					bind:value={value['secret']}
 				/>
 			</label>
@@ -96,6 +97,6 @@ $effect(() => {
 					5. Copy the Client ID and Client Secret to the fields above<br />
 				</div>
 			</CollapseLink>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/NoDirectDeployAlert.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { userStore } from '../stores';
+import { canUserBypassRuleKind, getActiveRulesetsForKind, isRuleActive } from '../workspaceProtectionRules.svelte';
+import { Alert } from './common';
+let activeDeployRulesets = $derived(getActiveRulesetsForKind('DisableDirectDeployment'));
+let canBypass = $derived(canUserBypassRuleKind('DisableDirectDeployment', $userStore));
+let overrideChecked = $state(false);
+let canEdit = $derived(!isRuleActive('DisableDirectDeployment') || (canBypass && overrideChecked));
+let { onUpdateCanEditStatus = (value) => { } } = $props();
+$effect(() => {
+    onUpdateCanEditStatus(canEdit);
+});
+</script>
+
+{#if !$userStore?.operator && activeDeployRulesets.length > 0}
+	<div class="my-2">
+		<Alert type="info" title="Workspace protection active">
+			<div class="flex flex-col gap-2">
+				<p>
+					The rule{activeDeployRulesets.length > 1 ? "s" : ""} <b>{activeDeployRulesets.map((r) => r.name).join(', ')}</b> restrict{activeDeployRulesets.length > 1 ? "" : "s"} direct edits to
+					this workspace. You will need to either fork the workspace, or make your changes locally and submit a PR to an authorized user.
+				</p>
+				{#if canBypass}
+					<label class="flex items-center gap-2 cursor-pointer">
+						<input class="rounded max-w-4" type="checkbox" bind:checked={overrideChecked} />
+						<span class="text-xs">Bypass restriction</span>
+					</label>
+				{/if}
+			</div>
+		</Alert>
+	</div>
+{/if}

package/package/components/NoDirectDeployAlert.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    onUpdateCanEditStatus?: (value: boolean) => void;
+};
+declare const NoDirectDeployAlert: import("svelte").Component<$$ComponentProps, {}, "">;
+type NoDirectDeployAlert = ReturnType<typeof NoDirectDeployAlert>;
+export default NoDirectDeployAlert;

package/package/components/NumberTypeNarrowing.svelte

@@ -1,78 +1,75 @@
 <script lang="ts">import Label from './Label.svelte';
-import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { selectOptions } from './apps/editor/component';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import Select from './select/Select.svelte';
 import TextInput from './text_input/TextInput.svelte';
-let { min = $bindable(), max = $bindable(), currency = $bindable(), currencyLocale = $bindable() } = $props();
-let minChecked = $state(min != undefined);
-let maxChecked = $state(max != undefined);
+let { min = $bindable(), max = $bindable(), currency = $bindable(), currencyLocale = $bindable(), seconds = $bindable() } = $props();
+let mode = $state(seconds ? 'seconds' : currency ? 'currency' : undefined);
+function onModeChange(newMode) {
+    mode = newMode;
+    if (newMode === 'seconds') {
+        seconds = true;
+        currency = undefined;
+        currencyLocale = undefined;
+    }
+    else if (newMode === 'currency') {
+        seconds = undefined;
+    }
+    else {
+        seconds = undefined;
+        currency = undefined;
+        currencyLocale = undefined;
+    }
+}
 </script>
 
-<div class="flex flex-col gap-2">
-	<div class="grid grid-cols-2 gap-4">
-		<Label label="Min" class="w-full col-span-1">
-			{#snippet header()}
-				<Tooltip light small>
-					Set a minimum value for the number. If both min and max are set, the input will render as
-					a range slider.
-				</Tooltip>
-			{/snippet}
-			{#snippet action()}
-				<Toggle
-					bind:checked={minChecked}
-					on:change={(e) => {
-						if (e.detail) {
-							min = 0
-						} else {
-							min = undefined
-						}
-					}}
-					options={{ right: 'Enabled' }}
-					size="xs"
-				/>
-			{/snippet}
-			<TextInput
-				inputProps={{ type: 'number', disabled: !minChecked }}
-				bind:value={() => min?.toString(), (v) => (min = v ? parseInt(v) : undefined)}
-			/>
-		</Label>
+<div class="grid grid-cols-2 gap-4 p-4 border rounded-md">
+	<Label label="Min" class="w-full">
+		{#snippet header()}
+			<Tooltip light small>
+				Set a minimum value for the number. If both min and max are set, the input will render as a
+				range slider.
+			</Tooltip>
+		{/snippet}
+		<TextInput
+			inputProps={{ type: 'number' }}
+			bind:value={() => min?.toString(), (v) => (min = v !== '' && v != null ? parseInt(v) : undefined)}
+		/>
+	</Label>
 
-		<Label label="Max" class="w-full col-span-1 ">
-			{#snippet header()}
-				<Tooltip light small>
-					Set a maximum value for the number. If both min and max are set, the input will render as
-					a range slider.
-				</Tooltip>
-			{/snippet}
-			{#snippet action()}
-				<Toggle
-					bind:checked={maxChecked}
-					on:change={(e) => {
-						if (e.detail) {
-							max = 42
-						} else {
-							max = undefined
-						}
-					}}
-					options={{ right: 'Enabled' }}
-					size="xs"
-				/>
-			{/snippet}
-			<TextInput
-				inputProps={{ type: 'number', disabled: !maxChecked }}
-				bind:value={() => max?.toString(), (v) => (max = v ? parseInt(v) : undefined)}
-			/>
-		</Label>
-	</div>
-	<div class="flex gap-2">
-		<Label label="Currency">
-			{#snippet header()}
-				<Tooltip light small>
-					Select a currency to display the number in. If a currency is selected, you can also select
-					a locale to format the number according to that locale.
-				</Tooltip>
+	<Label label="Max" class="w-full">
+		{#snippet header()}
+			<Tooltip light small>
+				Set a maximum value for the number. If both min and max are set, the input will render as a
+				range slider.
+			</Tooltip>
+		{/snippet}
+		<TextInput
+			inputProps={{ type: 'number' }}
+			bind:value={() => max?.toString(), (v) => (max = v !== '' && v != null ? parseInt(v) : undefined)}
+		/>
+	</Label>
+
+	<Label label="Format" class="w-full col-span-2">
+		{#snippet header()}
+			<Tooltip light small>Display the number as a currency or as a duration in seconds.</Tooltip>
+		{/snippet}
+		<ToggleButtonGroup
+			selected={mode ?? 'none'}
+			onSelected={(v) => onModeChange(v === 'none' ? undefined : v)}
+		>
+			{#snippet children({ item })}
+				<ToggleButton value="none" label="None" {item} size="sm" />
+				<ToggleButton value="currency" label="Currency" {item} size="sm" />
+				<ToggleButton value="seconds" label="Seconds" {item} size="sm" />
 			{/snippet}
+		</ToggleButtonGroup>
+	</Label>
+
+	{#if mode === 'currency'}
+		<Label label="Currency" class="w-full">
 			<Select
 				bind:value={
 					() => currency,
@@ -86,6 +83,7 @@ let maxChecked = $state(max != undefined);
 				clearable
 			/>
 		</Label>
+
 		<Label label="Currency locale" class="w-full">
 			<Select
 				bind:value={currencyLocale}
@@ -95,5 +93,5 @@ let maxChecked = $state(max != undefined);
 				clearable
 			/>
 		</Label>
-	</div>
+	{/if}
 </div>

package/package/components/NumberTypeNarrowing.svelte.d.ts

@@ -3,7 +3,8 @@ interface Props {
     max: number | undefined;
     currency: string | undefined;
     currencyLocale: string | undefined;
+    seconds: boolean | undefined;
 }
-declare const NumberTypeNarrowing: import("svelte").Component<Props, {}, "max" | "min" | "currency" | "currencyLocale">;
+declare const NumberTypeNarrowing: import("svelte").Component<Props, {}, "max" | "min" | "seconds" | "currency" | "currencyLocale">;
 type NumberTypeNarrowing = ReturnType<typeof NumberTypeNarrowing>;
 export default NumberTypeNarrowing;

package/package/components/OAuthSetting.svelte

@@ -6,6 +6,7 @@ import { onMount, untrack } from 'svelte';
 import { enterpriseLicense } from '../stores';
 import Button from './common/button/Button.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { name, value = $bindable(), login = true, eeOnly = false } = $props();
 let tenant = $state('');
 onMount(() => {
@@ -54,6 +55,7 @@ function changeTenantId(tenant) {
 }
 let enabled = $derived(value != undefined && !(eeOnly && !$enterpriseLicense));
 $effect(() => {
+    tenant;
     if (name == 'microsoft' || name == 'teams') {
         untrack(() => changeTenantId(tenant));
     }
@@ -85,7 +87,7 @@ $effect(() => {
 		{/if}
 	</label>
 	{#if enabled}
-		<div class="p-4 rounded border mb-4 flex flex-col gap-6">
+		<SettingCard class="mb-4 flex flex-col gap-6">
 			{#if name != 'slack' && name != 'teams'}
 				<label class="flex flex-col gap-1">
 					<span class="text-emphasis font-semibold text-xs">Custom Name</span>
@@ -161,7 +163,7 @@ $effect(() => {
 			{/if}
 			{#if name == 'google'}
 				<CollapseLink text="Instructions">
-					<div class="helper">
+					<div class="text-xs text-primary rounded-md">
 						Create a new OAuth 2.0 Client <a
 							href="https://console.cloud.google.com/apis/credentials"
 							target="_blank">in Google console</a
@@ -172,7 +174,7 @@ $effect(() => {
 				</CollapseLink>
 			{:else if name == 'slack'}
 				<CollapseLink text="Set up slack">
-					<div class="helper">
+					<div class="text-xs text-primary rounded-md">
 						To use Slack OAuth, create a new Slack app <a
 							href="https://api.slack.com/apps?new_app=1"
 							target="_blank"
@@ -251,7 +253,7 @@ $effect(() => {
 				</CollapseLink>
 			{:else if name == 'teams'}
 				<CollapseLink text="Instructions">
-					<div class="helper">
+					<div class="text-xs text-primary rounded-md">
 						Follow this guide on <a
 							href="https://www.windmill.dev/docs/misc/setup_oauth#microsoft-teams"
 							target="_blank">Windmill Docs</a
@@ -260,15 +262,6 @@ $effect(() => {
 					</div>
 				</CollapseLink>
 			{/if}
-		</div>
+		</SettingCard>
 	{/if}
 </div>
-
-<style>
-	.helper {
-    border-radius: 0.375rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-text-primary) / var(--tw-text-opacity, 1))
-}</style>

package/package/components/ObjectStoreConfigSettings.svelte

@@ -6,11 +6,11 @@ import { sendUserToast } from '../toast';
 import TestConnection from './TestConnection.svelte';
 import { enterpriseLicense } from '../stores';
 import SimpleEditor from './SimpleEditor.svelte';
-export let bucket_config = undefined;
-$: bucket_config?.type == 'S3' &&
-    bucket_config.allow_http == undefined &&
-    (bucket_config.allow_http = true);
-let loading = false;
+import Label from './Label.svelte';
+import TextInput from './text_input/TextInput.svelte';
+let { bucket_config = $bindable(undefined) } = $props();
+let effectiveAllowHttp = $derived(bucket_config?.type === 'S3' ? (bucket_config.allow_http ?? true) : false);
+let loading = $state(false);
 async function testConnection() {
     loading = true;
     try {
@@ -28,6 +28,22 @@ async function testConnection() {
         loading = false;
     }
 }
+let simpleEditor = $state(undefined);
+let serviceAccountKeyCode = $state(bucket_config?.type === 'Gcs'
+    ? JSON.stringify(bucket_config.serviceAccountKey, null, '\t')
+    : '{}');
+let lastEditorSyncedJson = bucket_config?.type === 'Gcs' ? JSON.stringify(bucket_config.serviceAccountKey) : '{}';
+$effect(() => {
+    if (bucket_config?.type === 'Gcs') {
+        const configJson = JSON.stringify(bucket_config.serviceAccountKey);
+        if (configJson !== lastEditorSyncedJson) {
+            lastEditorSyncedJson = configJson;
+            const formatted = JSON.stringify(bucket_config.serviceAccountKey, null, '\t');
+            serviceAccountKeyCode = formatted;
+            simpleEditor?.setCode(formatted);
+        }
+    }
+});
 </script>
 
 <div class="my-0.5">
@@ -43,7 +59,8 @@ async function testConnection() {
 					region: '',
 					access_key: '',
 					secret_key: '',
-					endpoint: ''
+					endpoint: '',
+					allow_http: true
 				}
 			} else {
 				bucket_config = undefined
@@ -52,7 +69,7 @@ async function testConnection() {
 	/>
 </div>
 {#if bucket_config}
-	<div class="p-2">
+	<div class="">
 		<div class="flex gap-2 py-1">
 			<Button
 				spacingSize="sm"
@@ -86,7 +103,8 @@ async function testConnection() {
 						region: '',
 						access_key: '',
 						secret_key: '',
-						endpoint: ''
+						endpoint: '',
+						allow_http: true
 					}
 				} else if (e.detail === 'Azure' && bucket_config?.type !== 'Azure') {
 					bucket_config = {
@@ -119,11 +137,17 @@ async function testConnection() {
 			<Tab value="AwsOidc" label="AWS OIDC" />
 			<Tab value="Gcs" label="Google Cloud Storage" />
 		</Tabs>
-		<div class="flex flex-col gap-2 mt-2 p-2 border rounded-md">
+		<div class="flex flex-col gap-6 mt-2 p-4 border rounded-md">
 			{#if bucket_config.type === 'S3'}
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis">Bucket</span>
-					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
+					<TextInput
+						inputProps={{ placeholder: 'bucket-name' }}
+						bind:value={
+							() => (bucket_config as S3Config).bucket,
+							(v) => (bucket_config = { ...(bucket_config as S3Config), bucket: v })
+						}
+					/>
 				</label>
 
 				<label class="block pb-2">
@@ -131,7 +155,12 @@ async function testConnection() {
 					<span class="text-primary text-2xs"
 						>If left empty, will be derived automatically from $AWS_REGION</span
 					>
-					<input type="text" bind:value={bucket_config.region} />
+					<TextInput
+						bind:value={
+							() => (bucket_config as S3Config).region,
+							(v) => (bucket_config = { ...(bucket_config as S3Config), region: v })
+						}
+					/>
 				</label>
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis">Access key ID</span>
@@ -139,17 +168,24 @@ async function testConnection() {
 						>If left empty, will be derived automatically from $AWS_ACCESS_KEY_ID, pod or ec2
 						profile</span
 					>
-					<input type="text" bind:value={bucket_config.access_key} />
+					<TextInput
+						bind:value={
+							() => (bucket_config as S3Config).access_key,
+							(v) => (bucket_config = { ...(bucket_config as S3Config), access_key: v })
+						}
+					/>
 				</label>
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis">Secret key</span>
 					<span class="text-primary text-2xs"
 						>If left empty, will be derived automatically from $AWS_SECRET_KEY, pod or ec2 profile</span
 					>
-					<input
-						type="password"
-						autocomplete="new-password"
-						bind:value={bucket_config.secret_key}
+					<TextInput
+						inputProps={{ type: 'password', autocomplete: 'new-password' }}
+						bind:value={
+							() => (bucket_config as S3Config).secret_key,
+							(v) => (bucket_config = { ...(bucket_config as S3Config), secret_key: v })
+						}
 					/>
 				</label>
 				<label class="block pb-2">
@@ -157,42 +193,79 @@ async function testConnection() {
 					<span class="text-primary text-2xs"
 						>Only needed for non AWS S3 providers like R2 or MinIo</span
 					>
-					<input type="text" bind:value={bucket_config.endpoint} />
+					<TextInput
+						bind:value={
+							() => (bucket_config as S3Config).endpoint,
+							(v) => (bucket_config = { ...(bucket_config as S3Config), endpoint: v })
+						}
+					/>
 				</label>
 				<div class="block pb-2">
 					<span class="text-primary text-2xs">Disable if using https only policy</span>
 					<div>
-						<Toggle bind:checked={bucket_config.allow_http} options={{ right: 'Allow http' }} />
+						<Toggle
+							checked={effectiveAllowHttp}
+							on:change={(e) => {
+								if (bucket_config?.type === 'S3') {
+									bucket_config = { ...bucket_config, allow_http: e.detail }
+								}
+							}}
+							options={{ right: 'Allow http' }}
+						/>
 					</div>
 				</div>
 			{:else if bucket_config.type === 'Azure'}
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis">Account name</span>
-					<input type="text" placeholder="account-name" bind:value={bucket_config.accountName} />
+					<TextInput
+						inputProps={{ placeholder: 'account-name' }}
+						bind:value={
+							() => (bucket_config as AzureConfig).accountName,
+							(v) => (bucket_config = { ...(bucket_config as AzureConfig), accountName: v })
+						}
+					/>
 				</label>
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis">Container name</span>
-					<input
-						type="text"
-						placeholder="container-name"
-						bind:value={bucket_config.containerName}
+					<TextInput
+						inputProps={{ placeholder: 'container-name' }}
+						bind:value={
+							() => (bucket_config as AzureConfig).containerName,
+							(v) => (bucket_config = { ...(bucket_config as AzureConfig), containerName: v })
+						}
 					/>
 				</label>
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis">Access key</span>
-					<input type="password" autocomplete="new-password" bind:value={bucket_config.accessKey} />
+					<TextInput
+						inputProps={{ type: 'password', autocomplete: 'new-password' }}
+						bind:value={
+							() => (bucket_config as AzureConfig).accessKey,
+							(v) => (bucket_config = { ...(bucket_config as AzureConfig), accessKey: v })
+						}
+					/>
 				</label>
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis"
 						>Tenant ID <span class="text-2xs text-primary">(optional)</span></span
 					>
-					<input type="text" bind:value={bucket_config.tenantId} />
+					<TextInput
+						bind:value={
+							() => (bucket_config as AzureConfig).tenantId,
+							(v) => (bucket_config = { ...(bucket_config as AzureConfig), tenantId: v })
+						}
+					/>
 				</label>
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis"
 						>Client ID <span class="text-2xs text-primary">(optional)</span></span
 					>
-					<input type="text" bind:value={bucket_config.clientId} />
+					<TextInput
+						bind:value={
+							() => (bucket_config as AzureConfig).clientId,
+							(v) => (bucket_config = { ...(bucket_config as AzureConfig), clientId: v })
+						}
+					/>
 				</label>
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis"
@@ -201,56 +274,78 @@ async function testConnection() {
 					<span class="text-primary text-2xs"
 						>Only needed for non Azure Blob providers like Azurite</span
 					>
-					<input type="text" bind:value={bucket_config.endpoint} />
+					<TextInput
+						bind:value={
+							() => (bucket_config as AzureConfig).endpoint,
+							(v) => (bucket_config = { ...(bucket_config as AzureConfig), endpoint: v })
+						}
+					/>
 				</label>
 			{:else if bucket_config.type === 'AwsOidc'}
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis">Bucket</span>
-					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
+					<TextInput
+						inputProps={{ placeholder: 'bucket-name' }}
+						bind:value={
+							() => (bucket_config as AwsOidcConfig).bucket,
+							(v) => (bucket_config = { ...(bucket_config as AwsOidcConfig), bucket: v })
+						}
+					/>
 				</label>
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis">Region</span>
-					<input type="text" placeholder="region" bind:value={bucket_config.region} />
+					<TextInput
+						inputProps={{ placeholder: 'region' }}
+						bind:value={
+							() => (bucket_config as AwsOidcConfig).region,
+							(v) => (bucket_config = { ...(bucket_config as AwsOidcConfig), region: v })
+						}
+					/>
 				</label>
 				<label class="block pb-2">
 					<span class="text-xs font-semibold text-emphasis">Role ARN</span>
-					<input
-						type="text"
-						placeholder="arn:aws:iam::123456789012:role/test"
-						bind:value={bucket_config.roleArn}
+					<TextInput
+						inputProps={{ placeholder: 'arn:aws:iam::123456789012:role/test' }}
+						bind:value={
+							() => (bucket_config as AwsOidcConfig).roleArn,
+							(v) => (bucket_config = { ...(bucket_config as AwsOidcConfig), roleArn: v })
+						}
 					/>
 				</label>
 			{:else if bucket_config.type === 'Gcs'}
-				<label class="block pb-2">
-					<span class="text-xs font-semibold text-emphasis">Bucket</span>
-					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
-				</label>
-				<label class="block pb-2">
-					<span class="text-xs font-semibold text-emphasis">Service Account Key</span>
+				<Label label="Bucket">
+					<TextInput
+						inputProps={{ placeholder: 'bucket-name' }}
+						bind:value={
+							() => (bucket_config as GcsConfig).bucket,
+							(v) => (bucket_config = { ...(bucket_config as GcsConfig), bucket: v })
+						}
+					/>
+				</Label>
+				<Label label="Service Account Key">
 					<span class="text-primary text-2xs">JSON content of the service account key file</span>
 					<SimpleEditor
+						bind:this={simpleEditor}
 						lang="json"
-						bind:code={
-							() => {
-								if (bucket_config?.type === 'Gcs') {
-									return JSON.stringify(bucket_config.serviceAccountKey)
-								} else {
-									return '{}'
+						bind:code={serviceAccountKeyCode}
+						on:change={(e) => {
+							if (bucket_config?.type === 'Gcs') {
+								if (e.detail.code === undefined || e.detail.code === '') {
+									bucket_config = { ...bucket_config, serviceAccountKey: undefined }
+									return
 								}
-							},
-							(v) => {
-								if (bucket_config?.type === 'Gcs') {
-									try {
-										bucket_config.serviceAccountKey = JSON.parse(v ?? '{}')
-									} catch (_) {
-										bucket_config.serviceAccountKey = {}
-									}
+								try {
+									const parsed = JSON.parse(e.detail.code ?? '{}')
+									lastEditorSyncedJson = JSON.stringify(parsed)
+									bucket_config = { ...bucket_config, serviceAccountKey: parsed }
+								} catch (_) {
+									bucket_config = { ...bucket_config, serviceAccountKey: undefined }
 								}
 							}
-						}
+						}}
 						class="h-80"
 					/>
-				</label>
+				</Label>
 			{:else}
 				<div>Unknown bucket type {bucket_config['type']}</div>
 			{/if}