windmill-components 1.532.0 → 1.537.1

package/package/components/ModulePreviewResultViewer.svelte

@@ -7,18 +7,16 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getContext } from 'svelte';
 import { getStringError } from './copilot/chat/utils';
 import AiAgentLogViewer from './AIAgentLogViewer.svelte';
-let { lang, editor, diffEditor, loopStatus = undefined, lastJob = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false, tagLabel = undefined } = $props();
-const { testSteps } = getContext('FlowEditorContext');
-let selectedJob = $state(undefined);
-let preview = $state(undefined);
+let { lang, editor, diffEditor, loopStatus = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false, tagLabel = undefined } = $props();
+const { stepsInputArgs } = getContext('FlowEditorContext');
 let jobProgressReset = $state(() => { });
-$effect(() => {
-    if (preview != undefined && testJob) {
-        preview = undefined;
-    }
-});
-let forceJson = $state(false);
+let outputPickerInner = $state(undefined);
+export function getOutputPickerInner() {
+    return outputPickerInner;
+}
+const selectedJob = $derived.by(() => outputPickerInner?.getSelectedJob?.() ?? undefined);
 const logJob = $derived(testJob ?? selectedJob);
+const preview = $derived.by(() => outputPickerInner?.getPreview?.());
 </script>
 
 <Splitpanes horizontal>
@@ -33,7 +31,6 @@ const logJob = $derived(testJob ?? selectedJob);
 		{/if}
 
 		<OutputPickerInner
-			{lastJob}
 			{testJob}
 			fullResult
 			moduleId={mod.id}
@@ -41,24 +38,22 @@ const logJob = $derived(testJob ?? selectedJob);
 			getLogs
 			{onUpdateMock}
 			mock={mod.mock}
-			bind:forceJson
-			bind:selectedJob
 			isLoading={testIsLoading || loadingJob}
-			bind:preview
 			path={`path` in mod.value ? mod.value.path : ''}
 			{loopStatus}
 			{disableMock}
 			{disableHistory}
+			bind:this={outputPickerInner}
 		>
 			{#snippet copilot_fix()}
-				{#if lang && editor && diffEditor && testSteps.getStepArgs(mod.id) && selectedJob?.type === 'CompletedJob' && !selectedJob.success && getStringError(selectedJob.result)}
+				{#if lang && editor && diffEditor && stepsInputArgs.getStepArgs(mod.id) && selectedJob?.type === 'CompletedJob' && !selectedJob.success && getStringError(selectedJob.result)}
 					<ScriptFix {lang} />
 				{/if}
 			{/snippet}
 		</OutputPickerInner>
 	</Pane>
 	<Pane size={35} minSize={10}>
-		{#if (mod.mock?.enabled && preview != 'job') || preview == 'mock'}
+		{#if (mod.mock?.enabled && preview !== 'job' && testJob?.type !== 'QueuedJob') || preview === 'mock'}
 			<LogViewer
 				small
 				content={undefined}
@@ -82,9 +77,9 @@ const logJob = $derived(testJob ?? selectedJob);
 				jobId={logJob?.id}
 				duration={logJob?.['duration_ms']}
 				mem={logJob?.['mem_peak']}
-				content={logJob?.logs}
+				content={logJob?.['logs']}
 				isLoading={(testIsLoading && logJob?.['running'] == false) || loadingJob}
-				tag={logJob?.tag}
+				tag={logJob?.['tag']}
 				{tagLabel}
 			/>
 		{/if}

package/package/components/ModuleTest.svelte

@@ -5,17 +5,17 @@ import { getContext } from 'svelte';
 import JobLoader, {} from './JobLoader.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 import { loadSchemaFromModule } from './flows/flowInfers';
-let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined) } = $props();
-const { flowStore, flowStateStore, pathStore, testSteps, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
+let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined), onJobDone } = $props();
+const { flowStore, flowStateStore, pathStore, stepsInputArgs, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
 let jobLoader = $state(undefined);
 let jobProgressReset = () => { };
 let stepHistoryLoader = getStepHistoryLoaderContext();
 export function runTestWithStepArgs() {
-    runTest(testSteps.getStepArgs(mod.id));
+    runTest(stepsInputArgs.getStepArgs(mod.id));
 }
 export function loadArgsAndRunTest() {
-    testSteps?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
-    runTest(testSteps.getStepArgs(mod.id));
+    stepsInputArgs?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
+    runTest(stepsInputArgs.getStepArgs(mod.id));
 }
 export async function runTest(args) {
     // Not defined if JobProgressBar not loaded
@@ -92,6 +92,7 @@ function jobDone(testJob) {
     if (modulesTestStates.states[mod.id]) {
         modulesTestStates.states[mod.id].testJob = testJob;
     }
+    onJobDone?.();
 }
 export function cancelJob() {
     modulesTestStates.states[mod.id]?.cancel?.();

package/package/components/ModuleTest.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     testIsLoading?: boolean;
     noEditor?: boolean;
     scriptProgress?: any;
+    onJobDone?: () => void;
 }
 declare const ModuleTest: import("svelte").Component<Props, {
     runTestWithStepArgs: () => void;

package/package/components/OktaSetting.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">import CollapseLink from './CollapseLink.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 let { value = $bindable() } = $props();
+let lastValues = { domain: undefined, custom: undefined };
 function changeDomain(domain, custom) {
     if (value) {
         let baseUrl = custom ? `https://${domain}` : `https://${domain}.okta.com`;
@@ -25,8 +27,11 @@ function changeDomain(domain, custom) {
     }
 }
 let enabled = $derived(value != undefined);
-$effect(() => {
-    changeDomain(value?.['domain'], value?.['custom']);
+$effect.pre(() => {
+    if (value?.['domain'] != lastValues.domain || value?.['custom'] != lastValues.custom) {
+        lastValues = { domain: value?.['domain'], custom: value?.['custom'] };
+        untrack(() => changeDomain(value?.['domain'], value?.['custom']));
+    }
 });
 </script>
 

package/package/components/Portal.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	import { tick } from 'svelte'
 
 	export function portal(el, options) {
@@ -50,13 +50,17 @@
 
 <script>
 	/**
-	 * DOM Element or CSS Selector
-	 * @type { HTMLElement|string}
+	 * @typedef {Object} Props
+	 * @property { HTMLElement|string} [target] - DOM Element or CSS Selector
+	 * @property {any} [name]
+	 * @property {string|undefined} [class]
+	 * @property {import('svelte').Snippet} [children]
 	 */
-	export let target = 'body'
-	export let name = undefined
+
+	/** @type {Props} */
+	let { target = 'body', name = undefined, class: clazz = undefined, children } = $props()
 </script>
 
-<div use:portal={{ target, name }} hidden class={$$props.class}>
-	<slot />
+<div use:portal={{ target, name }} hidden class={clazz}>
+	{@render children?.()}
 </div>

package/package/components/Portal.svelte.d.ts

@@ -3,45 +3,25 @@ export function portal(el: any, options: any): {
     destroy: () => void;
 };
 export default Portal;
-type Portal = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    name?: any;
-    target?: string | HTMLElement | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+type Portal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
 };
-declare const Portal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const Portal: import("svelte").Component<{
+    /**
+     * - DOM Element or CSS Selector
+     */
+    target?: string | HTMLElement | undefined;
     name?: any;
+    class?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * - DOM Element or CSS Selector
+     */
     target?: string | HTMLElement | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-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;
-}
+    name?: any;
+    class?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/RunForm.svelte

@@ -25,7 +25,7 @@ export async function setArgs(nargs) {
 export function run() {
     runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag);
 }
-let { runnable = $bindable(), runAction, buttonText = 'Run', schedulable = true, detailed = true, autofocus = false, topButton = false, loading = false, noVariablePicker = false, viewKeybinding = false, scheduledForStr = $bindable(), invisible_to_owner = $bindable(), overrideTag = $bindable(), args = $bindable(), jsonView = false, isValid = $bindable(true) } = $props();
+let { runnable, runAction, buttonText = 'Run', schedulable = true, detailed = true, autofocus = false, topButton = false, loading = false, noVariablePicker = false, viewKeybinding = false, scheduledForStr = $bindable(), invisible_to_owner = $bindable(), overrideTag = $bindable(), args = $bindable(), jsonView = false, isValid = $bindable(true) } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -238,7 +238,7 @@ $effect(() => {
 								bind:scheduledForStr
 								bind:invisible_to_owner
 								bind:overrideTag
-								bind:runnable
+								{runnable}
 							/>
 						{/snippet}
 					</Popover>

package/package/components/RunForm.svelte.d.ts

@@ -33,6 +33,6 @@ declare const RunForm: import("svelte").Component<Props, {
     setArgs: (nargs: Record<string, any>) => Promise<void>;
     run: () => void;
     setCode: (code: string) => void;
-}, "args" | "invisible_to_owner" | "runnable" | "isValid" | "scheduledForStr" | "overrideTag">;
+}, "args" | "invisible_to_owner" | "isValid" | "scheduledForStr" | "overrideTag">;
 type RunForm = ReturnType<typeof RunForm>;
 export default RunForm;

package/package/components/RunFormAdvancedPopup.svelte

@@ -53,7 +53,19 @@ async function loadWorkerGroups() {
 	{#if !$userStore?.operator}
 		{#if $workerTags && $workerTags?.length > 0}
 			<div class="w-full">
-				<select placeholder="Worker group" bind:value={overrideTag}>
+				<select
+					placeholder="Worker group"
+					bind:value={
+						() => overrideTag ?? '',
+						(v) => {
+							if (v == '') {
+								overrideTag = undefined
+							} else {
+								overrideTag = v
+							}
+						}
+					}
+				>
 					{#if overrideTag}
 						<option value="">reset to default</option>
 					{:else}

package/package/components/SchemaForm.svelte

@@ -14,7 +14,7 @@ import ArgInput from './ArgInput.svelte';
 import { createEventDispatcher, untrack } from 'svelte';
 import { deepEqual } from 'fast-equals';
 import { dragHandleZone } from '@windmill-labs/svelte-dnd-action';
-let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
+let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', computeS3ForceViewerPolicies = undefined, workspace = undefined, actions: actions_render = undefined } = $props();
 const dispatch = createEventDispatcher();
 let inputCheck = $state({});
 export function setDefaults() {
@@ -135,7 +135,6 @@ $effect.pre(() => {
 $effect.pre(() => {
     isValid = allTrue(inputCheck ?? {});
 });
-const actions_render = $derived(actions);
 </script>
 
 {#if showReset}

package/package/components/ScriptBuilder.svelte

@@ -908,7 +908,7 @@ async function loadWorkerTags() {
 														>
 															<LanguageIcon {lang} />
 															<span class="ml-2 py-2 truncate">{label}</span>
-															{#if lang === 'nu' || lang === 'ruby'}
+															{#if lang === 'ruby'}
 																<span class="text-tertiary !text-xs"> BETA </span>
 															{/if}
 														</Button>

package/package/components/ScriptEditor.svelte

@@ -35,6 +35,7 @@ import { aiChatManager, AIMode } from './copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte';
 import { assetEq } from './assets/lib';
+import { editor as meditor } from 'monaco-editor';
 let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right } = $props();
 $effect.pre(() => {
     if (schema == undefined) {
@@ -273,7 +274,7 @@ function getError(job) {
 function showDiffMode() {
     diffMode = true;
     diffEditor?.setOriginal(lastDeployedCode ?? '');
-    diffEditor?.setModified(editor?.getCode() ?? '');
+    diffEditor?.setModifiedModel(editor?.getModel());
     diffEditor?.show();
     editor?.hide();
 }
@@ -493,16 +494,29 @@ $effect(() => {
 						{args}
 					/>
 					<DiffEditor
-						class="h-full"
+						className="h-full"
 						bind:this={diffEditor}
+						modifiedModel={editor?.getModel() as meditor.ITextModel}
 						automaticLayout
 						defaultLang={scriptLangToEditorLang(lang)}
 						{fixedOverflowWidgets}
-						showButtons={diffMode}
-						on:hideDiffMode={hideDiffMode}
-						on:seeHistory={() => {
-							showHistoryDrawer = true
-						}}
+						buttons={diffMode
+							? [
+									{
+										text: 'See changes history',
+										onClick: () => {
+											showHistoryDrawer = true
+										}
+									},
+									{
+										text: 'Quit diff mode',
+										onClick: () => {
+											hideDiffMode()
+										},
+										color: 'red'
+									}
+								]
+							: []}
 					/>
 				{/key}
 			</div>

package/package/components/SimpleEditor.svelte

@@ -289,7 +289,6 @@ async function loadMonaco() {
         return;
     }
     try {
-        console.log('fixedOverflowWidgets', fixedOverflowWidgets);
         editor = meditor.create(divEl, {
             ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
             model,

package/package/components/apps/components/layout/AppModal.svelte

@@ -121,11 +121,11 @@ async function getMenuElements() {
 		<Disposable
 			{id}
 			bind:this={disposable}
-			on:open={() => {
+			onOpen={() => {
 				outputs?.open.set(true)
 				onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}
-			on:close={() => {
+			onClose={() => {
 				outputs?.open.set(false)
 				onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}

package/package/components/apps/editor/component/ComponentNavigation.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { getContext } from 'svelte';
 import { handleEscape, handlePaste, handleArrowUp, handleCut, handleCopy, down, right, left } from './componentCallbacks.svelte';
-const { history, movingcomponents, jobsDrawerOpen } = getContext('AppEditorContext');
+const { history, movingcomponents, jobsDrawerOpen, runnableJobEditorPanel } = getContext('AppEditorContext');
 const { app, selectedComponent, focusedGrid, componentControl } = getContext('AppViewerContext');
 const ctx = {
     history,
@@ -16,7 +16,8 @@ function keydown(event) {
     // Ignore keydown events if the user is typing in monaco
     let classes = event.target?.['className'];
     if ((typeof classes === 'string' && classes.includes('inputarea')) ||
-        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) ||
+        $runnableJobEditorPanel.focused) {
         return;
     }
     switch (event.key) {

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -350,7 +350,7 @@ let extraLib = $derived(isFrontend && worldStore
 				<DiffEditor
 					open={false}
 					bind:this={diffEditor}
-					class="h-full"
+					className="h-full"
 					automaticLayout
 					fixedOverflowWidgets
 					defaultLang={scriptLangToEditorLang(inlineScript?.language)}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -79,7 +79,6 @@ function refresh(runnable) {
     if (deepEqual(runnable, lastRunnable)) {
         return;
     }
-    console.log('runnable', runnable);
     notFound = false;
     if (runnable.runType == 'script') {
         refreshScript(runnable);

package/package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -218,6 +218,7 @@ $effect(() => {
 $effect(() => {
     items != undefined && handleItemsChange();
 });
+const rnd = generateRandomString();
 </script>
 
 <div class="flex gap-2 flex-col mt-2 w-full">
@@ -267,7 +268,8 @@ $effect(() => {
 				use:dragHandleZone={{
 					items,
 					flipDurationMs,
-					dropTargetStyle: {}
+					dropTargetStyle: {},
+					type: rnd
 				}}
 				onconsider={handleConsider}
 				onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/GridCondition.svelte

@@ -92,6 +92,7 @@ function addCondition() {
     });
     component.numberOfSubgrids = items.length + 1;
 }
+const rnd = generateRandomString();
 </script>
 
 <PanelSection title={'Conditions'}>
@@ -107,7 +108,8 @@ function addCondition() {
 			use:dragHandleZone={{
 				items: items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				type: rnd
 			}}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/GridNavbar.svelte

@@ -94,6 +94,7 @@ function handleFinalize(e) {
 }
 let resolvedPaths = $state([]);
 let resolvedLabels = $state([]);
+const rnd = generateRandomString();
 </script>
 
 <PanelSection
@@ -107,7 +108,8 @@ let resolvedLabels = $state([]);
 			use:dragHandleZone={{
 				items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				type: rnd
 			}}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/GridTab.svelte

@@ -112,6 +112,7 @@ function handleFinalize(e) {
         });
     }
 }
+const rnd = generateRandomString();
 </script>
 
 <PanelSection title={`${word}s ${tabs && tabs.length > 0 ? `(${tabs.length})` : ''}`}>
@@ -123,7 +124,8 @@ function handleFinalize(e) {
 			use:dragHandleZone={{
 				items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				type: rnd
 			}}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte

@@ -3,7 +3,7 @@ import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
 import { cleanseOneOfConfiguration } from '../appUtils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 let { key, oneOf = $bindable(), inputSpecsConfiguration, labels, shouldCapitalize, id, resourceOnly, tooltip, disabledOptions = [], acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = true } = $props();
-$effect(() => {
+$effect.pre(() => {
     if (oneOf == undefined) {
         oneOf = { configuration: {}, selected: '' };
     }
@@ -35,59 +35,61 @@ function getValueOfDeprecated(obj) {
 </script>
 
 <div class="p-2 border">
-	<div class="mb-2 text-sm font-semibold">
-		{capitalize(addWhitespaceBeforeCapitals(key))}&nbsp;
-		{#if tooltip}
-			<Tooltip light>{tooltip}</Tooltip>
-		{/if}
-	</div>
-	<select
-		class="w-full border border-gray-300 rounded-md p-2"
-		value={oneOf.selected}
-		onchange={(e) => {
-			oneOf = { ...oneOf, selected: e?.target?.['value'] }
-		}}
-	>
-		{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
-			{#if (!disabledOptions.includes(choice) && !getValueOfDeprecated(inputSpecsConfiguration[choice])) || oneOf.selected === choice}
-				<option value={choice}>{labels?.[choice] ?? choice}</option>
+	{#if oneOf}
+		<div class="mb-2 text-sm font-semibold">
+			{capitalize(addWhitespaceBeforeCapitals(key))}&nbsp;
+			{#if tooltip}
+				<Tooltip light>{tooltip}</Tooltip>
 			{/if}
-		{/each}
-	</select>
-	{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}
-		<div class="mb-4"></div>
-	{/if}
-	<div class="flex flex-col gap-4">
-		{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
-			{@const config = {
-				...inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey],
-				...oneOf.configuration?.[oneOf.selected]?.[nestedKey]
+		</div>
+		<select
+			class="w-full border border-gray-300 rounded-md p-2"
+			value={oneOf.selected}
+			onchange={(e) => {
+				oneOf = { ...oneOf, selected: e?.target?.['value'] }
 			}}
+		>
+			{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
+				{#if (!disabledOptions.includes(choice) && !getValueOfDeprecated(inputSpecsConfiguration[choice])) || oneOf.selected === choice}
+					<option value={choice}>{labels?.[choice] ?? choice}</option>
+				{/if}
+			{/each}
+		</select>
+		{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}
+			<div class="mb-4"></div>
+		{/if}
+		<div class="flex flex-col gap-4">
+			{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
+				{@const config = {
+					...inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey],
+					...oneOf.configuration?.[oneOf.selected]?.[nestedKey]
+				}}
 
-			{#if config && oneOf.configuration[oneOf.selected]}
-				<InputsSpecEditor
-					{recomputeOnInputChanged}
-					key={nestedKey}
-					bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
-					{id}
-					{acceptSelf}
-					userInputEnabled={false}
-					{shouldCapitalize}
-					{resourceOnly}
-					fieldType={config?.['fieldType']}
-					subFieldType={config?.['subFieldType']}
-					format={config?.['format']}
-					selectOptions={config?.['selectOptions']}
-					placeholder={config?.['placeholder']}
-					customTitle={config?.['customTitle']}
-					tooltip={config?.['tooltip']}
-					fileUpload={config?.['fileUpload']}
-					loading={config?.['loading']}
-					documentationLink={config?.['documentationLink']}
-					allowTypeChange={config?.['allowTypeChange']}
-					{showOnDemandOnlyToggle}
-				/>
-			{/if}
-		{/each}
-	</div>
+				{#if config && oneOf.configuration[oneOf.selected]}
+					<InputsSpecEditor
+						{recomputeOnInputChanged}
+						key={nestedKey}
+						bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
+						{id}
+						{acceptSelf}
+						userInputEnabled={false}
+						{shouldCapitalize}
+						{resourceOnly}
+						fieldType={config?.['fieldType']}
+						subFieldType={config?.['subFieldType']}
+						format={config?.['format']}
+						selectOptions={config?.['selectOptions']}
+						placeholder={config?.['placeholder']}
+						customTitle={config?.['customTitle']}
+						tooltip={config?.['tooltip']}
+						fileUpload={config?.['fileUpload']}
+						loading={config?.['loading']}
+						documentationLink={config?.['documentationLink']}
+						allowTypeChange={config?.['allowTypeChange']}
+						{showOnDemandOnlyToggle}
+					/>
+				{/if}
+			{/each}
+		</div>
+	{/if}
 </div>

package/package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -72,6 +72,7 @@ function handleFinalize(e) {
     const { items: newItems } = e.detail;
     items = newItems;
 }
+const rnd = generateRandomString();
 </script>
 
 {#if components}
@@ -101,7 +102,8 @@ function handleFinalize(e) {
 				use:dragHandleZone={{
 					items,
 					flipDurationMs: 200,
-					dropTargetStyle: {}
+					dropTargetStyle: {},
+					type: rnd
 				}}
 				onconsider={handleConsider}
 				onfinalize={handleFinalize}