windmill-components 1.379.4 → 1.382.1

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/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) => {

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

@@ -84,7 +84,7 @@ function toggleRow(row) {
             outputs?.selectedRowIndex.set(rowIndex);
         }
         if (!deepEqual(outputs?.selectedRow?.peak(), data)) {
-            outputs?.selectedRow.set(data);
+            outputs?.selectedRow?.set(data);
         }
         if (iterContext && listInputs) {
             listInputs.set(id, { selectedRow: data, selectedRowIndex: selectedRowIndex });
@@ -147,20 +147,21 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
         ['AppViewerContext', context],
         ['ContextPanel', contextPanel]
     ]);
-    new AppAggridTableActions({
+    let ta = new AppAggridTableActions({
         target: c.eGui,
         props: {
+            p,
             id: id,
             actions,
             rowIndex,
             row,
             render,
             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 };
                 }
@@ -169,7 +170,7 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
                 }
                 outputs?.inputs.set(inputs, true);
             },
-            onRemove: (id) => {
+            onRemove: (id, rowIndex) => {
                 if (inputs?.[id] == undefined) {
                     return;
                 }
@@ -184,6 +185,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 mountGrid() {
     if (eGui) {

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

@@ -10,6 +10,7 @@ import { Plug2 } from 'lucide-svelte';
 import ComponentOutputViewer from '../../../editor/contextPanel/ComponentOutputViewer.svelte';
 import { connectOutput } from '../../../editor/appUtils';
 import RowWrapper from '../../layout/RowWrapper.svelte';
+export let p;
 export let id;
 export let render;
 export let actions = [];
@@ -29,11 +30,25 @@ onMount(() => {
         if (parent) {
             parent.classList.add('w-full');
         }
+        else {
+            //sometimes the parent is not available immediately
+            setTimeout(() => {
+                const parent = rowDiv?.parentElement?.parentElement?.parentElement;
+                if (parent) {
+                    parent.classList.add('w-full');
+                }
+            }, 10);
+        }
     }
 });
 </script>
 
-<RowWrapper value={row} index={rowIndex} {onSet} {onRemove}>
+<RowWrapper
+	value={row}
+	index={rowIndex}
+	onSet={(id, value) => onSet(id, value, rowIndex)}
+	onRemove={(id) => onRemove(id, rowIndex)}
+>
 	<div
 		class={twMerge(
 			'flex flex-row justify-center items-center gap-4 h-full px-4 py-1 w-full',
@@ -57,7 +72,7 @@ onMount(() => {
 					}
 				}}
 				on:pointerdown|stopPropagation={(e) => {
-					selectRow()
+					selectRow(p)
 
 					if (!$connectingInput.opened) {
 						$selectedComponent = [action.id]
@@ -159,7 +174,7 @@ onMount(() => {
 							noWFull
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow()
+								selectRow(p)
 							}}
 							id={action.id}
 							customCss={action.customCss}
@@ -185,7 +200,7 @@ onMount(() => {
 							onToggle={action.onToggle}
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow()
+								selectRow(p)
 							}}
 							verticalAlignment="center"
 							{controls}
@@ -204,7 +219,7 @@ onMount(() => {
 							onSelect={action.onSelect}
 							preclickAction={async () => {
 								dispatch('toggleRow')
-								selectRow()
+								selectRow(p)
 							}}
 							{controls}
 						/>
@@ -216,7 +231,7 @@ onMount(() => {
 						{render}
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							selectRow()
+							selectRow(p)
 						}}
 						noWFull
 						id={action.id}
@@ -241,7 +256,7 @@ onMount(() => {
 						onToggle={action.onToggle}
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							selectRow()
+							selectRow(p)
 						}}
 					/>
 				{:else if action.type == 'selectcomponent'}
@@ -258,7 +273,7 @@ onMount(() => {
 						onSelect={action.onSelect}
 						preclickAction={async () => {
 							dispatch('toggleRow')
-							selectRow()
+							selectRow(p)
 						}}
 					/>
 				{/if}

package/package/components/apps/components/display/table/AppAggridTableActions.svelte.d.ts

@@ -2,8 +2,10 @@ import { SvelteComponent } from "svelte";
 import type { TableAction } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
+import type { ICellRendererParams } from 'ag-grid-community';
 declare const __propDef: {
     props: {
+        p: ICellRendererParams<any>;
         id: string;
         render: boolean;
         actions?: TableAction[] | undefined;
@@ -11,10 +13,10 @@ declare const __propDef: {
         row: {
             original: Record<string, any>;
         };
-        onSet: (id: string, value: any) => void;
-        onRemove: (id: string) => void;
+        onSet: (id: string, value: any, rowIndex: number) => void;
+        onRemove: (id: string, rowIndex: number) => void;
         wrapActions?: boolean | undefined;
-        selectRow: () => void;
+        selectRow: (params: ICellRendererParams<any>) => void;
     };
     events: {
         toggleRow: CustomEvent<any>;

package/package/components/apps/components/display/table/utils.js

@@ -5,25 +5,26 @@
  */
 export class AbstractCellRenderer {
     eGui;
-    value;
-    params;
+    component;
     constructor(parentElement = 'span') {
         // create empty span (or other element) to place svelte component in
+        this.component = undefined;
         this.eGui = document.createElement(parentElement);
     }
     init(params) {
-        this.value = params.value;
-        this.createComponent(params);
+        this.component = this.createComponent(params);
         this.eGui.addEventListener('click', () => params.onClick?.(params.data));
-        this.params = params;
     }
     getGui() {
         return this.eGui;
     }
     refresh(params) {
-        this.value = params.value;
+        this.component?.refresh?.(params);
         return true;
     }
+    destroy() {
+        this.component?.destroy?.();
+    }
 }
 /**
  * Creates a cell renderer using the given callback for how to initialise a svelte component.
@@ -34,7 +35,7 @@ export class AbstractCellRenderer {
 export function cellRendererFactory(svelteComponent) {
     class Renderer extends AbstractCellRenderer {
         createComponent(params) {
-            svelteComponent(this, params);
+            return svelteComponent(this, params);
         }
     }
     return Renderer;

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -514,6 +514,18 @@ function updateBgRuns(loading) {
         bgRuns.update((runs) => runs.filter((r) => r !== id));
     }
 }
+function getError(obj) {
+    try {
+        if (obj?.error) {
+            return obj.error;
+        }
+        return undefined;
+    }
+    catch (e) {
+        console.error('Error accessing error from result', e);
+        return undefined;
+    }
+}
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v] (key)}
@@ -608,7 +620,7 @@ function updateBgRuns(loading) {
 			<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
 				Please select a runnable
 			</Alert>
-		{:else if result?.error && $mode === 'preview' && !errorHandledByComponent}
+		{:else if getError(result) && $mode === 'preview' && !errorHandledByComponent}
 			<div
 				title="Error"
 				class={classNames(

package/package/components/apps/components/helpers/eval.js

@@ -19,7 +19,7 @@ function create_context_function_template(eval_string, contextKeys, noReturn) {
 return async function (context, state, createProxy, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex, openModal, closeModal, open, close, validate, invalidate, validateAll, clearFiles, showToast, waitJob, askNewResource) {
 "use strict";
 ${contextKeys && contextKeys.length > 0
-        ? `let ${contextKeys.map((key) => ` ${key} = createProxy('${key}', context['${key}'] ?? {})`)};`
+        ? `let ${contextKeys.map((key) => ` ${key} = createProxy('${key}', context['${key}'])`)};`
         : ``}
 ${hasReturnAsLastLine
         ? eval_string
@@ -54,31 +54,37 @@ function hashCode(s) {
 }
 export async function eval_like(text, context = {}, state, editor, controlComponents, worldStore, runnableComponents, noReturn, groupContextId) {
     const createProxy = (name, obj) => {
-        if (name == 'group' && groupContextId) {
-            return createGroupProxy(groupContextId, obj);
-        }
-        return new Proxy(obj, {
-            set(target, key, value) {
-                if (name != 'state') {
-                    throw new Error('Cannot set value on objects that are neither the global state or a container group field');
-                }
-                if (typeof key !== 'string') {
-                    throw new Error('Invalid key');
-                }
-                target[key] = value;
-                let o = worldStore?.newOutput(name, key, value);
-                o?.set(value, true);
-                return true;
-            },
-            get(obj, prop) {
-                if (name != 'state' && prop == 'group') {
-                    return createGroupProxy(name, obj[prop]);
-                }
-                else {
-                    return obj[prop];
-                }
+        // console.log('Creating proxy', name, obj)
+        if (obj != null && obj != undefined && typeof obj == 'object') {
+            if (name == 'group' && groupContextId) {
+                return createGroupProxy(groupContextId, obj);
             }
-        });
+            return new Proxy(obj, {
+                set(target, key, value) {
+                    if (name != 'state') {
+                        throw new Error('Cannot set value on objects that are neither the global state or a container group field');
+                    }
+                    if (typeof key !== 'string') {
+                        throw new Error('Invalid key');
+                    }
+                    target[key] = value;
+                    let o = worldStore?.newOutput(name, key, value);
+                    o?.set(value, true);
+                    return true;
+                },
+                get(obj, prop) {
+                    if (name != 'state' && prop == 'group') {
+                        return createGroupProxy(name, obj[prop]);
+                    }
+                    else {
+                        return obj[prop];
+                    }
+                }
+            });
+        }
+        else {
+            return obj;
+        }
     };
     const createGroupProxy = (name, obj) => {
         return new Proxy(obj, {

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -144,6 +144,7 @@ async function computeTriggerables() {
                         input: getCountInput(resourceValue, tableValue, dbType, columnDefs, whereClause),
                         id: x.id + '_count'
                     });
+                    console.log(x.id, getCountInput(resourceValue, tableValue, dbType, columnDefs, whereClause), columnDefs);
                     r.push({
                         input: getInsertInput(tableValue, columnDefs, resourceValue, dbType),
                         id: x.id + '_insert'

package/package/components/apps/editor/AppReportsDrawer.svelte

@@ -17,6 +17,7 @@ import Toggle from '../../Toggle.svelte';
 import { RotateCw, Save } from 'lucide-svelte';
 import { CUSTOM_TAGS_SETTING, WORKSPACE_SLACK_BOT_TOKEN_PATH } from '../../../consts';
 import { loadSchemaFromPath } from '../../../infer';
+import { hubPaths } from '../../../hub';
 export let appPath;
 export let open = false;
 let appReportingEnabled = false;
@@ -155,7 +156,7 @@ export async function main(app_path: string, startup_duration = 5, kind: 'pdf' |
 }`;
 const notificationScripts = {
     discord: {
-        path: 'hub/7838/discord',
+        path: hubPaths.discordReport,
         schema: {
             type: 'object',
             properties: {
@@ -171,7 +172,7 @@ const notificationScripts = {
         }
     },
     slack: {
-        path: 'hub/7836/slack',
+        path: hubPaths.slackReport,
         schema: {
             type: 'object',
             properties: {
@@ -184,7 +185,7 @@ const notificationScripts = {
         }
     },
     email: {
-        path: 'hub/7837/smtp',
+        path: hubPaths.smtpReport,
         schema: {
             type: 'object',
             properties: {

package/package/components/apps/editor/component/components.d.ts

@@ -519,7 +519,7 @@ export declare const components: {
                     readonly fieldType: "select";
                     readonly type: "static";
                     readonly selectOptions: string[];
-                    readonly value: "Body" | "Title" | "Subtitle" | "Label" | "Caption";
+                    readonly value: "Title" | "Subtitle" | "Body" | "Label" | "Caption";
                 };
                 readonly copyButton: {
                     readonly type: "static";

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

@@ -37,7 +37,6 @@ setContext('DecisionTreeEditor', { selectedNodeId });
 						<DecisionTreePreview
 							bind:nodes
 							bind:component
-							{rebuildOnChange}
 							{paneHeight}
 							{paneWidth}
 							on:render={() => {