windmill-components 1.379.4 → 1.382.3

package/package/components/HighlightCode.svelte

@@ -67,7 +67,7 @@ $: lang = getLang(language);
 		}}
 		iconOnly
 	/>
-	{#if code?.length < 5000}
+	{#if code?.length < 10000}
 		{#if !lines}
 			<Highlight class="nowrap {$$props.class}" language={lang} {code} />
 		{:else}
@@ -76,7 +76,7 @@ $: lang = getLang(language);
 			</Highlight>
 		{/if}
 	{:else}
-		<pre class="overflow-auto max-h-screen {$$props.class}"
+		<pre class="overflow-auto max-h-screen text-xs {$$props.class}"
 			><code class="language-{language}">{code}</code></pre
 		>
 	{/if}

package/package/components/ModulePreviewForm.svelte

@@ -35,7 +35,7 @@ $: {
     }
 }
 function plugIt(argName) {
-    args[argName] = evalValue(argName, mod, testStepStore, pickableProperties, true);
+    args[argName] = structuredClone(evalValue(argName, mod, testStepStore, pickableProperties, true));
     try {
         editor?.[argName]?.setCode(JSON.stringify(args[argName], null, 4));
     }

package/package/components/ObjectResourceInput.svelte

@@ -1,11 +1,14 @@
-<script>import ResourcePicker from './ResourcePicker.svelte';
+<script>import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
 import S3ObjectPicker from './S3ObjectPicker.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 export let format;
 export let value;
 export let disablePortal = false;
 export let showSchemaExplorer = false;
 export let selectFirst = false;
 export let defaultValue;
+export let editor = undefined;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
@@ -32,7 +35,7 @@ $: value && valueToPath();
 <div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
 	{#if format === 'resource-s3_object'}
 		<S3ObjectPicker bind:value />
-	{:else}
+	{:else if value == undefined || typeof value === 'string'}
 		<ResourcePicker
 			{selectFirst}
 			{disablePortal}
@@ -45,5 +48,7 @@ $: value && valueToPath();
 			resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
 			{showSchemaExplorer}
 		/>
+	{:else}
+		<JsonEditor bind:editor code={JSON.stringify(value, null, 2)} bind:value />
 	{/if}
 </div>

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         format: string;
@@ -7,6 +8,7 @@ declare const __propDef: {
         showSchemaExplorer?: boolean | undefined;
         selectFirst?: boolean | undefined;
         defaultValue: any;
+        editor?: SimpleEditor | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/ResourcePicker.svelte

@@ -9,6 +9,7 @@ import DBSchemaExplorer from './DBSchemaExplorer.svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Pen, Plus, RotateCw } from 'lucide-svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
+import { sendUserToast } from '../toast';
 const dispatch = createEventDispatcher();
 export let initialValue = undefined;
 export let value = initialValue;
@@ -33,27 +34,36 @@ let collection = valueSelect ? [valueSelect] : [];
 export async function askNewResource() {
     appConnect?.open?.(resourceType, expressOAuthSetup);
 }
+let loading = true;
 async function loadResources(resourceType) {
-    const nc = (await ResourceService.listResource({
-        workspace: $workspaceStore,
-        resourceType
-    }))
-        .filter((x) => x.resource_type != 'state' && x.resource_type != 'cache')
-        .map((x) => ({
-        value: x.path,
-        label: x.path,
-        type: x.resource_type
-    }));
-    // TODO check if this is needed
-    if (!nc.find((x) => x.value == value) && (initialValue || value)) {
-        nc.push({ value: value ?? initialValue, label: value ?? initialValue, type: '' });
+    loading = true;
+    try {
+        const nc = (await ResourceService.listResource({
+            workspace: $workspaceStore,
+            resourceType
+        }))
+            .filter((x) => x.resource_type != 'state' && x.resource_type != 'cache')
+            .map((x) => ({
+            value: x.path,
+            label: x.path,
+            type: x.resource_type
+        }));
+        // TODO check if this is needed
+        if (!nc.find((x) => x.value == value) && (initialValue || value)) {
+            nc.push({ value: value ?? initialValue, label: value ?? initialValue, type: '' });
+        }
+        collection = nc;
+        if (collection.length == 1 && selectFirst && valueSelect == undefined) {
+            value = collection[0].value;
+            valueType = collection[0].type;
+            valueSelect = collection[0];
+        }
     }
-    collection = nc;
-    if (collection.length == 1 && selectFirst && valueSelect == undefined) {
-        value = collection[0].value;
-        valueType = collection[0].type;
-        valueSelect = collection[0];
+    catch (e) {
+        sendUserToast('Failed to load resource types', true);
+        console.error(e);
     }
+    loading = false;
 }
 $: $workspaceStore && loadResources(resourceType);
 $: dispatch('change', value);
@@ -115,46 +125,48 @@ let darkMode = false;
 					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
 					: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 			/>
-		{:else}
+		{:else if !loading}
 			<div class="text-2xs text-tertiary mr-2">0 found</div>
 		{/if}
 
-		{#if value && value != ''}
-			<Button
-				{disabled}
-				color="light"
-				variant="border"
-				size="xs"
-				on:click={() => resourceEditor?.initEdit?.(value ?? '')}
-				startIcon={{ icon: Pen }}
-				iconOnly
-			/>
-		{/if}
+		{#if !loading}
+			{#if value && value != ''}
+				<Button
+					{disabled}
+					color="light"
+					variant="border"
+					size="xs"
+					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
+					startIcon={{ icon: Pen }}
+					iconOnly
+				/>
+			{/if}
 
-		{#if resourceType?.includes(',')}
-			{#each resourceType.split(',') as rt}
+			{#if resourceType?.includes(',')}
+				{#each resourceType.split(',') as rt}
+					<Button
+						{disabled}
+						color="light"
+						variant="border"
+						size="xs"
+						on:click={() => appConnect?.open?.(rt)}
+						startIcon={{ icon: Plus }}>{rt}</Button
+					>
+				{/each}
+			{:else}
 				<Button
 					{disabled}
 					color="light"
 					variant="border"
 					size="xs"
-					on:click={() => appConnect?.open?.(rt)}
-					startIcon={{ icon: Plus }}>{rt}</Button
+					on:click={() => appConnect?.open?.(resourceType, expressOAuthSetup)}
+					startIcon={{ icon: Plus }}
+					iconOnly={collection?.length > 0}
+					>{#if collection?.length == 0}
+						Add a {resourceType} resource
+					{/if}</Button
 				>
-			{/each}
-		{:else}
-			<Button
-				{disabled}
-				color="light"
-				variant="border"
-				size="xs"
-				on:click={() => appConnect?.open?.(resourceType, expressOAuthSetup)}
-				startIcon={{ icon: Plus }}
-				iconOnly={collection?.length > 0}
-				>{#if collection?.length == 0}
-					Add a {resourceType} resource
-				{/if}</Button
-			>
+			{/if}
 		{/if}
 
 		<Button

package/package/components/ScriptBuilder.svelte

@@ -43,6 +43,7 @@ export let savedScript = undefined;
 export let searchParams = new URLSearchParams();
 export let disableHistoryChange = false;
 export let replaceStateFn = (url) => window.history.replaceState(null, '', url);
+export let customUi = {};
 let metadataOpen = showMeta ||
     (initialPath == '' &&
         searchParams.get('state') == undefined &&
@@ -344,7 +345,7 @@ async function saveDraft(forceSave = false) {
     loadingDraft = false;
 }
 function computeDropdownItems(initialPath) {
-    let dropdownItems = initialPath != ''
+    let dropdownItems = initialPath != '' && customUi?.topBar?.extraDeployOptions != false
         ? [
             {
                 label: 'Deploy & Stay here',
@@ -965,32 +966,34 @@ function langToLanguage(lang) {
 							{$scheduleStore.cron ?? ''}
 						</Button>
 					{/if}
-					<div class="flex justify-start w-full border rounded-md overflow-hidden">
-						<div>
-							<button
-								on:click={async () => {
-									metadataOpen = true
-								}}
-							>
-								<Badge
-									color="gray"
-									class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all"
+					{#if customUi?.topBar?.path != false}
+						<div class="flex justify-start w-full border rounded-md overflow-hidden">
+							<div>
+								<button
+									on:click={async () => {
+										metadataOpen = true
+									}}
 								>
-									<Pen size={12} class="mr-2" /> Path
-								</Badge>
-							</button>
+									<Badge
+										color="gray"
+										class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all"
+									>
+										<Pen size={12} class="mr-2" /> Path
+									</Badge>
+								</button>
+							</div>
+							<input
+								type="text"
+								readonly
+								value={script.path}
+								size={script.path?.length || 50}
+								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
+								on:focus={({ currentTarget }) => {
+									currentTarget.select()
+								}}
+							/>
 						</div>
-						<input
-							type="text"
-							readonly
-							value={script.path}
-							size={script.path?.length || 50}
-							class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none !border-0 !shadow-none"
-							on:focus={({ currentTarget }) => {
-								currentTarget.select()
-							}}
-						/>
-					</div>
+					{/if}
 				</div>
 
 				{#if $enterpriseLicense && initialPath != ''}
@@ -1021,17 +1024,19 @@ function langToLanguage(lang) {
 							<span class="hidden lg:flex"> Diff </span>
 						</div>
 					</Button>
-					<Button
-						color="light"
-						variant="border"
-						size="xs"
-						on:click={() => {
-							metadataOpen = true
-						}}
-						startIcon={{ icon: Settings }}
-					>
-						<span class="hidden lg:flex"> Settings </span>
-					</Button>
+					{#if customUi?.topBar?.settings != false}
+						<Button
+							color="light"
+							variant="border"
+							size="xs"
+							on:click={() => {
+								metadataOpen = true
+							}}
+							startIcon={{ icon: Settings }}
+						>
+							<span class="hidden lg:flex"> Settings </span>
+						</Button>
+					{/if}
 					<Button
 						loading={loadingDraft}
 						size="xs"
@@ -1085,6 +1090,7 @@ function langToLanguage(lang) {
 		</div>
 
 		<ScriptEditor
+			{customUi}
 			collabMode
 			edit={initialPath != ''}
 			on:format={() => {

package/package/components/ScriptBuilder.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 import { type NewScript, type NewScriptWithDraft } from '../gen';
 import type DiffDrawer from './DiffDrawer.svelte';
+import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui';
 declare const __propDef: {
     props: {
         script: NewScript;
@@ -15,6 +16,7 @@ declare const __propDef: {
         searchParams?: URLSearchParams | undefined;
         disableHistoryChange?: boolean | undefined;
         replaceStateFn?: ((url: string) => void) | undefined;
+        customUi?: ScriptBuilderWhitelabelCustomUi | undefined;
         setCode?: ((code: string) => void) | undefined;
     };
     events: {

package/package/components/ScriptEditor.svelte

@@ -38,6 +38,7 @@ export let edit = true;
 export let noHistory = false;
 export let saveToWorkspace = false;
 export let watchChanges = false;
+export let customUi = {};
 let websocketAlive = {
     pyright: false,
     deno: false,
@@ -204,6 +205,7 @@ function collabUrl() {
 					setCollaborationMode()
 				}
 			}}
+			customUi={customUi?.editorBar}
 			collabLive={wsProvider?.shouldConnect}
 			{collabMode}
 			{validCode}
@@ -221,7 +223,7 @@ function collabUrl() {
 			{noHistory}
 			{saveToWorkspace}
 		/>
-		{#if !noSyncFromGithub}
+		{#if !noSyncFromGithub && customUi?.editorBar?.useVsCode != false}
 			<div class="py-1">
 				<Button
 					target="_blank"

package/package/components/ScriptEditor.svelte.d.ts

@@ -3,6 +3,7 @@ import type { Schema, SupportedLanguage } from '../common';
 import { type Preview } from '../gen';
 import Editor from './Editor.svelte';
 import DiffEditor from './DiffEditor.svelte';
+import type { ScriptEditorWhitelabelCustomUi } from './custom_ui';
 declare const __propDef: {
     props: {
         schema?: Schema | any;
@@ -22,6 +23,7 @@ declare const __propDef: {
         noHistory?: boolean | undefined;
         saveToWorkspace?: boolean | undefined;
         watchChanges?: boolean | undefined;
+        customUi?: ScriptEditorWhitelabelCustomUi | undefined;
         inferSchema?: ((code: string, nlang?: SupportedLanguage) => Promise<void>) | undefined;
         setCollaborationMode?: (() => Promise<void>) | undefined;
         disableCollaboration?: (() => void) | undefined;

package/package/components/ScriptVersionHistory.svelte

@@ -7,13 +7,16 @@ import { Skeleton } from './common';
 import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
 import { createEventDispatcher } from 'svelte';
 import Button from './common/button/Button.svelte';
-import { ExternalLink, Pencil, ArrowRight, X } from 'lucide-svelte';
+import { ExternalLink, Pencil, ArrowRight, X, Diff, Code } from 'lucide-svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 const dispatch = createEventDispatcher();
 export let openDetails = false;
 export let scriptPath;
 let deploymentMsgUpdateMode = false;
 let deploymentMsgUpdate = undefined;
 let selectedVersion = undefined;
+let selectedVersionIndex = undefined;
 let versions = undefined;
 let loading = false;
 async function loadVersions() {
@@ -43,6 +46,8 @@ async function updateDeploymentMsg(scriptHash) {
     loadVersions();
 }
 loadVersions();
+let showDiff = false;
+let previousHash = undefined;
 </script>
 
 <Splitpanes class="!overflow-visible">
@@ -52,17 +57,34 @@ loadVersions();
 				{#if !loading}
 					{#if versions && versions.length > 0}
 						<div class="flex gap-2 flex-col">
-							{#each versions ?? [] as version}
+							{#each versions ?? [] as version, versionIndex}
 								<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<!-- svelte-ignore a11y-no-static-element-interactions -->
 								<div
 									class={classNames(
-										'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+										'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer ',
 										selectedVersion?.script_hash == version.script_hash
-											? 'bg-blue-100 text-blue-600'
-											: ''
+											? 'bg-surface-selected'
+											: '',
+										'hover:bg-surface-hover'
 									)}
 									on:click={() => {
 										selectedVersion = version
+										selectedVersionIndex = versionIndex
+
+										if (showDiff && versions && selectedVersionIndex === versions.length - 1) {
+											showDiff = false
+										}
+
+										const availableVersions = versions?.slice(selectedVersionIndex + 1)
+
+										if (
+											previousHash &&
+											!availableVersions?.find((v) => v.script_hash === previousHash)
+										) {
+											previousHash = availableVersions?.[0]?.script_hash
+										}
+
 										deploymentMsgUpdate = undefined
 										deploymentMsgUpdateMode = false
 									}}
@@ -99,7 +121,7 @@ loadVersions();
 		<div class="h-full w-full overflow-auto">
 			{#if selectedVersion}
 				{#key selectedVersion}
-					<div class="flex flex-col">
+					<div class="flex flex-col min-h-full">
 						<span class="flex flex-row text-sm p-2 text-tertiary">
 							{#if deploymentMsgUpdateMode}
 								<div class="flex w-full">
@@ -158,7 +180,41 @@ loadVersions();
 								</button>
 							{/if}
 						</span>
-						<FlowModuleScript showDate path={scriptPath} hash={selectedVersion.script_hash} />
+
+						{#if selectedVersionIndex !== undefined && versions?.slice(selectedVersionIndex + 1).length}
+							<div class="p-2 flex flex-row items-center gap-2 h-8">
+								<div class="w-min">
+									<ToggleButtonGroup bind:selected={showDiff}>
+										<ToggleButton light small value={false} label="Code" icon={Code} />
+										<ToggleButton light small value={true} label="Diff" icon={Diff} />
+									</ToggleButtonGroup>
+								</div>
+
+								{#if showDiff}
+									<div class="text-xs">Versions:</div>
+									<select bind:value={previousHash} class="!text-xs !w-40">
+										{#each versions?.slice(selectedVersionIndex + 1) ?? [] as version}
+											<option
+												value={version.script_hash}
+												selected={version.script_hash === selectedVersion.script_hash}
+												class="!text-xs"
+											>
+												{version.deployment_msg ?? version.script_hash}
+											</option>
+										{/each}
+									</select>
+								{/if}
+							</div>
+						{:else}
+							<div class="p-2 text-xs text-secondary"> No previous version found </div>
+						{/if}
+						<FlowModuleScript
+							showDate
+							path={scriptPath}
+							hash={selectedVersion.script_hash}
+							{previousHash}
+							{showDiff}
+						/>
 					</div>
 				{/key}
 			{:else}

package/package/components/apps/components/display/AppText.svelte

@@ -21,6 +21,11 @@ export let customCss = undefined;
 export let render;
 export let editorMode = false;
 let resolvedConfig = initConfig(components['textcomponent'].initialData.configuration, configuration);
+$: editorMode && onEditorMode();
+function onEditorMode() {
+    autosize();
+    setTimeout(() => autosize(), 50);
+}
 const { app, worldStore, mode, componentControl } = getContext('AppViewerContext');
 let css = initCss($app.css?.textcomponent, customCss);
 let result = undefined;
@@ -105,6 +110,7 @@ function autosize() {
             el.style.cssText = 'height:auto; padding:0';
             el.style.cssText = 'height:' + el.scrollHeight + 'px';
         }
+        // console.log(el, el?.scrollHeight)
     }, 0);
 }
 </script>
@@ -137,7 +143,6 @@ function autosize() {
 			if (!editorMode) {
 				editorMode = true
 				document.getElementById(`text-${id}`)?.focus()
-				autosize()
 			}
 		}}
 		on:keydown|stopPropagation
@@ -146,7 +151,7 @@ function autosize() {
 			<AlignWrapper {verticalAlignment}>
 				<textarea
 					class={twMerge(
-						'whitespace-pre-wrap !outline-none !border-0 !bg-transparent !resize-none !overflow-hidden !ring-0 !p-0',
+						'whitespace-pre-wrap !outline-none !border-0 !bg-transparent !resize-none !ring-0 !p-0',
 						css?.text?.class,
 						'wm-text',
 						classes,
@@ -188,7 +193,7 @@ function autosize() {
 						class="flex flex-wrap gap-2 pb-0.5 w-full {$mode === 'dnd' &&
 						(componentInput?.type == 'template' || componentInput?.type == 'templatev2')
 							? 'cursor-text'
-							: ''}"
+							: 'overflow-auto'}"
 					>
 						<svelte:element
 							this={component}

package/package/components/apps/components/display/dbtable/DbExplorerCount.svelte

@@ -25,10 +25,11 @@ let renderCountLast = -1;
 let quicksearchLast = undefined;
 let localColumnDefs = columnDefs;
 let lastTable = table;
-$: {
+$: lastTable != undefined && table && onTableChange();
+function onTableChange() {
     if (table !== lastTable) {
-        localColumnDefs = [];
         lastTable = table;
+        localColumnDefs = [];
     }
 }
 $: table && renderCount != undefined && quicksearch != undefined && computeCount();

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -95,20 +95,21 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
         ['AppViewerContext', context],
         ['ContextPanel', contextPanel]
     ]);
-    new AppAggridTableActions({
+    const ta = new AppAggridTableActions({
         target: c.eGui,
         props: {
+            p,
             id: id,
             actions,
             rowIndex,
             row,
             render: true,
             wrapActions: resolvedConfig.wrapActions,
-            selectRow: () => {
+            selectRow: (p) => {
                 toggleRow(p);
                 p.node.setSelected(true);
             },
-            onSet: (id, value) => {
+            onSet: (id, value, rowIndex) => {
                 if (!inputs[id]) {
                     inputs[id] = { [rowIndex]: value };
                 }
@@ -117,7 +118,7 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
                 }
                 outputs?.inputs.set(inputs, true);
             },
-            onRemove: (id) => {
+            onRemove: (id, rowIndex) => {
                 if (inputs?.[id] == undefined) {
                     return;
                 }
@@ -132,6 +133,14 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
         },
         context: componentContext
     });
+    return {
+        destroy: () => {
+            ta.$destroy();
+        },
+        refresh(params) {
+            ta.$set({ rowIndex: params.node.rowIndex ?? 0, row: params.data, p: params });
+        }
+    };
 });
 function transformColumnDefs(columnDefs) {
     if (!columnDefs) {
@@ -148,7 +157,7 @@ function transformColumnDefs(columnDefs) {
             field: 'delete',
             headerName: 'Delete',
             cellRenderer: cellRendererFactory((c, p) => {
-                new Button({
+                let ta = new Button({
                     target: c.eGui,
                     props: {
                         btnClasses: 'w-12',
@@ -161,6 +170,14 @@ function transformColumnDefs(columnDefs) {
                         nonCaptureEvent: true
                     }
                 });
+                return {
+                    destroy: () => {
+                        ta.$destroy();
+                    },
+                    refresh(params) {
+                        //
+                    }
+                };
             }),
             cellRendererParams: {
                 onClick: (e) => {