windmill-components 1.493.10 → 1.501.5

package/package/components/InputTransformSchemaForm.svelte

@@ -1,30 +1,23 @@
 <script lang="ts">import { VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import { allTrue } from '../utils';
-import { createEventDispatcher } from 'svelte';
+import { untrack } from 'svelte';
 import { Button } from './common';
 import StepInputsGen from './copilot/StepInputsGen.svelte';
 import InputTransformForm from './InputTransformForm.svelte';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import { Plus } from 'lucide-svelte';
-export let schema;
-export let args = {};
-export let isValid = true;
-export let extraLib = 'missing extraLib';
-export let previousModuleId = undefined;
-export let filter = undefined;
-export let noDynamicToggle = false;
-export let pickableProperties = undefined;
-export let enableAi = false;
-let clazz = '';
-export { clazz as class };
-let inputCheck = {};
-const dispatch = createEventDispatcher();
-$: isValid = allTrue(inputCheck) ?? false;
-$: if (args == undefined || typeof args !== 'object') {
-    args = {};
-}
+let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '' } = $props();
+let inputCheck = $state({});
+$effect(() => {
+    isValid = allTrue(inputCheck) ?? false;
+});
+$effect(() => {
+    if (args == undefined || typeof args !== 'object') {
+        args = {};
+    }
+});
 export function setArgs(nargs) {
     args = nargs;
 }
@@ -37,17 +30,17 @@ function removeExtraKey() {
     });
     args = nargs;
 }
-let pickForField;
-let itemPicker = undefined;
-let variableEditor = undefined;
-let keys = [];
-$: {
+let pickForField = $state();
+let itemPicker = $state(undefined);
+let variableEditor = $state(undefined);
+let keys = $state([]);
+$effect(() => {
     let lkeys = Object.keys(schema?.properties ?? {});
     if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
         keys = lkeys;
-        removeExtraKey();
+        untrack(() => removeExtraKey());
     }
-}
+});
 </script>
 
 <div class="w-full {clazz}">
@@ -69,15 +62,17 @@ $: {
 		</div>
 	{/if}
 	{#if keys.length > 0}
-		{#each keys as argName (argName)}
+		{#each keys as argName, index (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
 				<div class="pt-2 relative">
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
 						bind:schema
-						bind:argName
-						bind:inputCheck={inputCheck[argName]}
+						bind:argName={keys[index]}
+						bind:inputCheck={
+							() => inputCheck[argName] ?? false, (value) => (inputCheck[argName] = value)
+						}
 						bind:extraLib
 						{variableEditor}
 						{itemPicker}
@@ -85,10 +80,6 @@ $: {
 						{noDynamicToggle}
 						{pickableProperties}
 						{enableAi}
-						on:change={(e) => {
-							const { argName } = e.detail
-							dispatch('changeArg', { argName })
-						}}
 					/>
 				</div>
 			{/if}
@@ -113,22 +104,21 @@ $: {
 			...x
 		}))}
 >
-	<div
-		slot="submission"
-		class="flex flex-row-reverse w-full border-t border-gray-200 rounded-bl-lg rounded-br-lg"
-	>
-		<Button
-			variant="border"
-			color="blue"
-			size="sm"
-			startIcon={{ icon: Plus }}
-			on:click={() => {
-				variableEditor?.initNew?.()
-			}}
-		>
-			New variable
-		</Button>
-	</div>
+	{#snippet submission()}
+		<div class="flex flex-row-reverse w-full border-t border-gray-200 rounded-bl-lg rounded-br-lg">
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				startIcon={{ icon: Plus }}
+				on:click={() => {
+					variableEditor?.initNew?.()
+				}}
+			>
+				New variable
+			</Button>
+		</div>
+	{/snippet}
 </ItemPicker>
 
 <VariableEditor bind:this={variableEditor} />

package/package/components/InputTransformSchemaForm.svelte.d.ts

@@ -1,20 +1,7 @@
 import type { Schema } from '../common';
 import { type InputTransform } from '../gen';
 import type { PickableProperties } from './flows/previousResults';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const InputTransformSchemaForm: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     schema: Schema | {
         properties?: Record<string, any>;
     };
@@ -27,13 +14,9 @@ declare const InputTransformSchemaForm: $$__sveltets_2_IsomorphicComponent<{
     pickableProperties?: PickableProperties | undefined;
     enableAi?: boolean;
     class?: string;
-    setArgs?: (nargs: Record<string, InputTransform | any>) => void;
-}, {
-    changeArg: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+}
+declare const InputTransformSchemaForm: import("svelte").Component<Props, {
     setArgs: (nargs: Record<string, InputTransform | any>) => void;
-}, string>;
-type InputTransformSchemaForm = InstanceType<typeof InputTransformSchemaForm>;
+}, "args" | "schema" | "extraLib" | "isValid">;
+type InputTransformSchemaForm = ReturnType<typeof InputTransformSchemaForm>;
 export default InputTransformSchemaForm;

package/package/components/InstanceSetting.svelte

@@ -21,17 +21,14 @@ import SimpleEditor from './SimpleEditor.svelte';
 import LoadingIcon from './apps/svelte-select/lib/LoadingIcon.svelte';
 import TeamSelector from './TeamSelector.svelte';
 import ChannelSelector from './ChannelSelector.svelte';
-export let setting;
-export let version;
-export let values;
-export let loading = true;
+let { setting, version, values, loading = true } = $props();
 const dispatch = createEventDispatcher();
 if ((setting.fieldType == 'select' || setting.fieldType == 'select_python') &&
     $values[setting.key] == undefined) {
     $values[setting.key] = 'default';
 }
-let latestKeyRenewalAttempt;
-let isFetching = false;
+let latestKeyRenewalAttempt = $state(null);
+let isFetching = $state(false);
 function showSetting(setting, values) {
     if (setting == 'dev_instance') {
         if (values['license_key'] == undefined) {
@@ -40,10 +37,10 @@ function showSetting(setting, values) {
     }
     return true;
 }
-let licenseKeyChanged = false;
-let renewing = false;
-let opening = false;
-let to = '';
+let licenseKeyChanged = $state(false);
+let renewing = $state(false);
+let opening = $state(false);
+let to = $state('');
 async function reloadKeyrenewalAttemptInfo() {
     latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
 }
@@ -99,8 +96,8 @@ function parseLicenseKey(key) {
         valid: false
     };
 }
-let pythonAvailableVersions = [];
-let isPyFetching = false;
+let pythonAvailableVersions = $state([]);
+let isPyFetching = $state(false);
 async function fetch_available_python_versions() {
     if (isPyFetching)
         return;
@@ -133,7 +130,7 @@ async function fetchTeams() {
     }
 }
 function handleTeamChange(teamItem, i) {
-    const team = $values['teams'].find((team) => team.team_id === teamItem.team_id) || null;
+    const team = (teamItem && $values['teams'].find((team) => team.team_id === teamItem.team_id)) || null;
     $values['critical_error_channels'][i] = {
         teams_channel: {
             team_id: team?.team_id,
@@ -159,7 +156,7 @@ function handleChannelChange(channel, i) {
 </script>
 
 <!-- {JSON.stringify($values, null, 2)} -->
-{#if (!setting.cloudonly || isCloudHosted()) && showSetting(setting.key, $values) && !(setting.hiddenIfNull && $values[setting.key] == null)}
+{#if (!setting.cloudonly || isCloudHosted()) && showSetting(setting.key, $values) && !(setting.hiddenIfNull && $values[setting.key] == null) && !(setting.hiddenIfEmpty && !$values[setting.key])}
 	{#if setting.ee_only != undefined && !$enterpriseLicense}
 		<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap">
 			<AlertTriangle size={16} />
@@ -168,7 +165,7 @@ function handleChannelChange(channel, i) {
 	{/if}
 	{#if setting.fieldType == 'select'}
 		<div>
-			<!-- svelte-ignore a11y-label-has-associated-control -->
+			<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">{setting.label}</span>
 				{#if setting.description}
@@ -177,20 +174,22 @@ function handleChannelChange(channel, i) {
 					</span>
 				{/if}
 			</label>
-			<ToggleButtonGroup bind:selected={$values[setting.key]} let:item={toggleButton}>
-				{#each setting.select_items ?? [] as item}
-					<ToggleButton
-						value={item.value ?? item.label}
-						label={item.label}
-						tooltip={item.tooltip}
-						item={toggleButton}
-					/>
-				{/each}
+			<ToggleButtonGroup bind:selected={$values[setting.key]}>
+				{#snippet children({ item: toggleButton })}
+					{#each setting.select_items ?? [] as item}
+						<ToggleButton
+							value={item.value ?? item.label}
+							label={item.label}
+							tooltip={item.tooltip}
+							item={toggleButton}
+						/>
+					{/each}
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	{:else if setting.fieldType == 'select_python'}
 		<div>
-			<!-- svelte-ignore a11y-label-has-associated-control -->
+			<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">{setting.label}</span>
 				{#if setting.description}
@@ -200,56 +199,59 @@ function handleChannelChange(channel, i) {
 				{/if}
 			</label>
 
-			<ToggleButtonGroup bind:selected={$values[setting.key]} let:item={toggleButtonn}>
-				{#each setting.select_items ?? [] as item}
-					<ToggleButton
-						value={item.value ?? item.label}
-						label={item.label}
-						tooltip={item.tooltip}
-						item={toggleButtonn}
-					/>
-				{/each}
-				<PopoverMelt closeButton={!isPyFetching}>
-					<svelte:fragment slot="trigger">
-						{#if setting.select_items?.some((e) => e.label == $values[setting.key] || e.value == $values[setting.key])}
-							<Button
-								variant="border"
-								color="dark"
-								btnClasses="px-1.5 py-1.5 text-2xs bg-surface-secondary border-0"
-								nonCaptureEvent={true}>Select Custom</Button
-							>
-						{:else}
-							<Button
-								variant="border"
-								color="dark"
-								btnClasses="px-1.5 py-1.5 text-2xs border-0 shadow-md"
-								nonCaptureEvent={true}>Custom | {$values[setting.key]}</Button
-							>
-						{/if}
-					</svelte:fragment>
-					<svelte:fragment slot="content">
-						{#if isPyFetching}
-							<div class="p-4">
-								<LoadingIcon />
-							</div>
-						{:else}
-							<ToggleButtonGroup
-								bind:selected={$values[setting.key]}
-								let:item={toggleButtonn}
-								class="mr-10 h-full"
-								tabListClass="flex-wrap p-2"
-							>
-								{#each pythonAvailableVersions as item}
-									<ToggleButton value={item} label={item} tooltip={item} item={toggleButtonn} />
-								{/each}
-							</ToggleButtonGroup>
-						{/if}
-					</svelte:fragment>
-				</PopoverMelt>
+			<ToggleButtonGroup bind:selected={$values[setting.key]}>
+				{#snippet children({ item: toggleButtonn })}
+					{#each setting.select_items ?? [] as item}
+						<ToggleButton
+							value={item.value ?? item.label}
+							label={item.label}
+							tooltip={item.tooltip}
+							item={toggleButtonn}
+						/>
+					{/each}
+					<PopoverMelt closeButton={!isPyFetching}>
+						{#snippet trigger()}
+							{#if setting.select_items?.some((e) => e.label == $values[setting.key] || e.value == $values[setting.key])}
+								<Button
+									variant="border"
+									color="dark"
+									btnClasses="px-1.5 py-1.5 text-2xs bg-surface-secondary border-0"
+									nonCaptureEvent={true}>Select Custom</Button
+								>
+							{:else}
+								<Button
+									variant="border"
+									color="dark"
+									btnClasses="px-1.5 py-1.5 text-2xs border-0 shadow-md"
+									nonCaptureEvent={true}>Custom | {$values[setting.key]}</Button
+								>
+							{/if}
+						{/snippet}
+						{#snippet content()}
+							{#if isPyFetching}
+								<div class="p-4">
+									<LoadingIcon />
+								</div>
+							{:else}
+								<ToggleButtonGroup
+									bind:selected={$values[setting.key]}
+									class="mr-10 h-full"
+									tabListClass="flex-wrap p-2"
+								>
+									{#snippet children({ item: toggleButtonn })}
+										{#each pythonAvailableVersions as item}
+											<ToggleButton value={item} label={item} tooltip={item} item={toggleButtonn} />
+										{/each}
+									{/snippet}
+								</ToggleButtonGroup>
+							{/if}
+						{/snippet}
+					</PopoverMelt>
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	{:else}
-		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<!-- svelte-ignore a11y_label_has_associated_control -->
 		<label class="block pb-2">
 			<span class="text-primary font-semibold text-sm">{setting.label}</span>
 			{#if setting.description}
@@ -398,27 +400,29 @@ function handleChannelChange(channel, i) {
 											on {attemptedAt}
 										</span>
 									</div>
-									<div slot="text">
-										{#if latestKeyRenewalAttempt.result === 'success'}
-											<span class="text-green-300">
-												Latest key renewal succeeded on {attemptedAt}
-											</span>
-										{:else if isTrial}
-											<span class="text-yellow-300">
-												License key cannot be renewed during trial ({attemptedAt})
-											</span>
-										{:else}
-											<span class="text-red-300">
-												Latest key renewal failed on {attemptedAt}: {latestKeyRenewalAttempt.result.replace(
-													'error: ',
-													''
-												)}
-											</span>
-										{/if}
-										<br />
-										As long as invoices are paid and usage corresponds to the subscription, the key is
-										renewed daily with a validity of 35 days (grace period).
-									</div>
+									{#snippet text()}
+										<div>
+											{#if latestKeyRenewalAttempt?.result === 'success'}
+												<span class="text-green-300">
+													Latest key renewal succeeded on {attemptedAt}
+												</span>
+											{:else if isTrial}
+												<span class="text-yellow-300">
+													License key cannot be renewed during trial ({attemptedAt})
+												</span>
+											{:else}
+												<span class="text-red-300">
+													Latest key renewal failed on {attemptedAt}: {latestKeyRenewalAttempt?.result.replace(
+														'error: ',
+														''
+													)}
+												</span>
+											{/if}
+											<br />
+											As long as invoices are paid and usage corresponds to the subscription, the key
+											is renewed daily with a validity of 35 days (grace period).
+										</div>
+									{/snippet}
 								</Popover>
 							</div>
 						{/if}
@@ -474,7 +478,7 @@ function handleChannelChange(channel, i) {
 									<div class="flex w-full max-w-lg mt-1 gap-2 items-center">
 										<select
 											class="max-w-24"
-											on:change={(e) => {
+											onchange={(e) => {
 												if (e.target?.['value']) {
 													$values[setting.key][i] = {
 														[e.target['value']]: ''
@@ -499,7 +503,7 @@ function handleChannelChange(channel, i) {
 											<input
 												type="text"
 												placeholder="Slack channel"
-												on:input={(e) => {
+												oninput={(e) => {
 													if (e.target?.['value']) {
 														$values[setting.key][i] = {
 															slack_channel: e.target['value']
@@ -516,15 +520,19 @@ function handleChannelChange(channel, i) {
 													showRefreshButton={false}
 													placeholder="Select team"
 													teams={$values['teams']}
-													on:change={(e) => handleTeamChange(e.detail, i)}
-													selectedTeam={$values['critical_error_channels'][i]?.teams_channel
-														? {
-																team_id:
-																	$values['critical_error_channels'][i]?.teams_channel?.team_id,
-																team_name:
-																	$values['critical_error_channels'][i]?.teams_channel?.team_name
-															}
-														: undefined}
+													bind:selectedTeam={
+														() =>
+															$values['critical_error_channels'][i]?.teams_channel
+																? {
+																		team_id:
+																			$values['critical_error_channels'][i]?.teams_channel?.team_id,
+																		team_name:
+																			$values['critical_error_channels'][i]?.teams_channel
+																				?.team_name
+																	}
+																: undefined,
+														(team) => handleTeamChange(team, i)
+													}
 												/>
 
 												{#if $values['critical_error_channels'][i]?.teams_channel?.team_id}
@@ -536,22 +544,24 @@ function handleChannelChange(channel, i) {
 																team.team_id ===
 																$values['critical_error_channels'][i]?.teams_channel?.team_id
 														)?.channels ?? []}
-														on:change={(e) => handleChannelChange(e.detail, i)}
-														selectedChannel={$values['critical_error_channels'][i]?.teams_channel
-															?.channel_id
-															? {
-																	channel_id:
-																		$values['critical_error_channels'][i]?.teams_channel
-																			?.channel_id,
-																	channel_name:
-																		$values['critical_error_channels'][i]?.teams_channel
-																			?.channel_name
-																}
-															: undefined}
+														bind:selectedChannel={
+															() =>
+																$values['critical_error_channels'][i]?.teams_channel?.channel_id
+																	? {
+																			channel_id:
+																				$values['critical_error_channels'][i]?.teams_channel
+																					?.channel_id,
+																			channel_name:
+																				$values['critical_error_channels'][i]?.teams_channel
+																					?.channel_name
+																		}
+																	: undefined,
+															(channel) => handleChannelChange(channel, i)
+														}
 													/>
 												{/if}
 												<div>
-													<button on:click={fetchTeams} class="flex items-center gap-1 mt-2">
+													<button onclick={fetchTeams} class="flex items-center gap-1 mt-2">
 														<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
 													</button>
 												</div>
@@ -560,7 +570,7 @@ function handleChannelChange(channel, i) {
 											<input
 												type="email"
 												placeholder="Email address"
-												on:input={(e) => {
+												oninput={(e) => {
 													if (e.target?.['value']) {
 														$values[setting.key][i] = {
 															email: e.target['value']
@@ -574,7 +584,7 @@ function handleChannelChange(channel, i) {
 											transition:fade|local={{ duration: 100 }}
 											class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
 											aria-label="Clear"
-											on:click={() => {
+											onclick={() => {
 												$values[setting.key] = $values[setting.key].filter(
 													(_, index) => index !== i
 												)
@@ -671,7 +681,7 @@ function handleChannelChange(channel, i) {
 									type="number"
 									id="writer_memory_budget"
 									placeholder="300"
-									on:input={(e) => {
+									oninput={(e) => {
 										if (e.target instanceof HTMLInputElement) {
 											if (e.target.valueAsNumber) {
 												$values[setting.key].writer_memory_budget =
@@ -729,7 +739,7 @@ function handleChannelChange(channel, i) {
 									type="number"
 									id="max_indexed_job_log_size"
 									placeholder="1024"
-									on:input={(e) => {
+									oninput={(e) => {
 										if (e.target instanceof HTMLInputElement) {
 											if (e.target.valueAsNumber) {
 												$values[setting.key].max_indexed_job_log_size =

package/package/components/InstanceSetting.svelte.d.ts

@@ -1,5 +1,11 @@
 import type { Setting } from './instanceSettings';
 import type { Writable } from 'svelte/store';
+interface Props {
+    setting: Setting;
+    version: string;
+    values: Writable<Record<string, any>>;
+    loading?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -13,20 +19,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InstanceSetting: $$__sveltets_2_IsomorphicComponent<{
-    setting: Setting;
-    version: string;
-    values: Writable<Record<string, any>>;
-    loading?: boolean;
-    renewLicenseKey?: () => Promise<void>;
-    openCustomerPortal?: () => Promise<void>;
-}, {
+declare const InstanceSetting: $$__sveltets_2_IsomorphicComponent<Props, {
     closeDrawer: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     renewLicenseKey: () => Promise<void>;
     openCustomerPortal: () => Promise<void>;
-}, string>;
+}, "">;
 type InstanceSetting = InstanceType<typeof InstanceSetting>;
 export default InstanceSetting;

package/package/components/InstanceSettings.svelte

@@ -10,25 +10,22 @@ import { setLicense } from '../enterpriseUtils';
 import AuthSettings from './AuthSettings.svelte';
 import InstanceSetting from './InstanceSetting.svelte';
 import { writable } from 'svelte/store';
-export let tab = 'Core';
-export let hideTabs = false;
-export let hideSave = false;
-export let closeDrawer = () => { };
+let { tab = $bindable('Core'), hideTabs = false, hideSave = false, closeDrawer = () => { } } = $props();
 let values = writable({});
 let initialOauths = {};
 let initialRequirePreexistingUserForOauth = false;
-let requirePreexistingUserForOauth = false;
+let requirePreexistingUserForOauth = $state(false);
 let initialValues = {};
-let snowflakeAccountIdentifier = '';
-let version = '';
-let loading = true;
+let snowflakeAccountIdentifier = $state('');
+let version = $state('');
+let loading = $state(true);
 loadSettings();
 loadVersion();
 const dispatch = createEventDispatcher();
 async function loadVersion() {
     version = await SettingsService.backendVersion();
 }
-let oauths = {};
+let oauths = $state({});
 async function loadSettings() {
     loading = true;
     async function getValue(key, storage) {
@@ -193,13 +190,13 @@ function isValidTeamsChannel(value) {
 </script>
 
 <div class="pb-8">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<Tabs {hideTabs} bind:selected={tab}>
 		{#each settingsKeys as category}
 			<Tab value={category}>{category}</Tab>
 		{/each}
 
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			{#each Object.keys(settings) as category}
 				<TabContent value={category}>
 					{#if category == 'SMTP'}
@@ -285,7 +282,7 @@ function isValidTeamsChannel(value) {
 							bind:snowflakeAccountIdentifier
 							bind:requirePreexistingUserForOauth
 						>
-							<svelte:fragment slot="scim">
+							{#snippet scim()}
 								<div class="flex-col flex gap-2 pb-4">
 									{#each scimSamlSetting as setting}
 										<InstanceSetting
@@ -297,7 +294,7 @@ function isValidTeamsChannel(value) {
 										/>
 									{/each}
 								</div>
-							</svelte:fragment>
+							{/snippet}
 						</AuthSettings>
 					{/if}
 					<div>
@@ -315,7 +312,7 @@ function isValidTeamsChannel(value) {
 					</div>
 				</TabContent>
 			{/each}
-		</svelte:fragment>
+		{/snippet}
 	</Tabs>
 </div>