windmill-components 1.379.4 → 1.382.3

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/components/inputs/AppSelect.svelte

@@ -101,6 +101,11 @@ function onChange(e) {
         onSelect.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f()));
     }
 }
+function onNativeChange(e) {
+    const target = e.target;
+    const value = target.value;
+    setValue(value);
+}
 function setValue(nvalue) {
     let result = undefined;
     try {
@@ -188,35 +193,46 @@ let filterText = '';
 		}}
 	>
 		{#if Array.isArray(listItems) && listItems.every((x) => x && typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
-			<Select
-				inAppEditor={true}
-				--border-radius="0.250rem"
-				--clear-icon-color="#6b7280"
-				--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
-				bind:filterText
-				on:filter={handleFilter}
-				on:clear={onClear}
-				on:change={onChange}
-				items={listItems}
-				listAutoWidth={resolvedConfig.fullWidth}
-				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={($darkMode
-					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-					: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
-				{value}
-				class={css?.input?.class}
-				placeholder={resolvedConfig.placeholder}
-				disabled={resolvedConfig.disabled}
-				on:focus={() => {
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-					}
-				}}
-			>
-				<svelte:fragment slot="item" let:item
-					>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
-				</svelte:fragment>
-			</Select>
+			{#if resolvedConfig.nativeHtmlSelect}
+				<select class={css?.input?.class} style={css?.input?.style} on:change={onNativeChange}>
+					{#if resolvedConfig.placeholder}
+						<option value="" disabled selected>{resolvedConfig.placeholder}</option>
+					{/if}
+					{#each listItems as item (item.value)}
+						<option value={item.value} selected={item.value === value}>{item.label}</option>
+					{/each}
+				</select>
+			{:else}
+				<Select
+					inAppEditor={true}
+					--border-radius="0.250rem"
+					--clear-icon-color="#6b7280"
+					--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
+					bind:filterText
+					on:filter={handleFilter}
+					on:clear={onClear}
+					on:change={onChange}
+					items={listItems}
+					listAutoWidth={resolvedConfig.fullWidth}
+					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+					containerStyles={($darkMode
+						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
+					{value}
+					class={css?.input?.class}
+					placeholder={resolvedConfig.placeholder}
+					disabled={resolvedConfig.disabled}
+					on:focus={() => {
+						if (!$connectingInput.opened) {
+							$selectedComponent = [id]
+						}
+					}}
+				>
+					<svelte:fragment slot="item" let:item
+						>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
+					</svelte:fragment>
+				</Select>
+			{/if}
 		{:else}
 			<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
 				<div

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";
@@ -2388,6 +2388,12 @@ export declare const components: {
                     readonly fieldType: "boolean";
                     readonly tooltip: "Preselect first item in the options if no default value is set";
                 };
+                readonly nativeHtmlSelect: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly tooltip: "Use a native html select instead of the Windmill select component";
+                };
                 readonly fullWidth: {
                     readonly type: "static";
                     readonly fieldType: "boolean";

package/package/components/apps/editor/component/components.js

@@ -1625,6 +1625,12 @@ This is a paragraph.
                     fieldType: 'boolean',
                     tooltip: 'Preselect first item in the options if no default value is set'
                 },
+                nativeHtmlSelect: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Use a native html select instead of the Windmill select component'
+                },
                 fullWidth: {
                     type: 'static',
                     fieldType: 'boolean',

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

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

@@ -1,55 +1,65 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { twMerge } from 'tailwind-merge';
+<script>import { twMerge } from 'tailwind-merge';
 import InsertDecisionTreeNode from './decisionTree/InsertDecisionTreeNode.svelte';
 import { X } from 'lucide-svelte';
-export let node;
-export let editable = true;
-export let canDelete = true;
-export let label = '';
+import NodeWrapper from '../../../graph/renderers/nodes/NodeWrapper.svelte';
+export let data;
 let open = false;
-const dispatch = createEventDispatcher();
 </script>
 
-<div class="relative h-full">
-	<div
-		class={twMerge(
-			'w-full h-full border border-gray-400',
-			'flex flex-row gap-2 items-center justify-between rounded-sm overflow-hidden'
-		)}
-		style="min-width: 275px; max-height: 80px; background-color: {document.documentElement.classList.contains(
-			'dark'
-		)
-			? '#2e3440'
-			: '#dfe6ee'}"
-	>
-		<div class="ml-4 text-xs font-normal text-primary"> {label} </div>
-	</div>
-
-	{#if canDelete}
-		<div class="w-[27px] absolute -top-[32px] left-[50%] right-[50%] -translate-x-1/2">
-			<button
-				title="Delete branch"
-				on:click|preventDefault|stopPropagation={() => dispatch('removeBranch')}
-				type="button"
-				class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
-			>
-				<X class="m-[5px]" size={15} />
-			</button>
-		</div>
-	{/if}
-
-	{#if node.id !== 'end' && editable}
+<NodeWrapper>
+	<div class="relative h-full">
 		<div
 			class={twMerge(
-				'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
-				open ? 'z-20' : ''
+				'w-full h-full border border-gray-400',
+				'flex flex-row gap-2 items-center justify-between rounded-sm overflow-hidden'
 			)}
+			style="width: 275px; height: 34px; background-color: {document.documentElement.classList.contains(
+				'dark'
+			)
+				? '#2e3440'
+				: '#dfe6ee'}"
 		>
-			<InsertDecisionTreeNode
-				on:node={() => dispatch('nodeInsert')}
-				on:addBranch={() => dispatch('addBranch')}
-				canAddBranch={false}
-			/>
+			<div class="ml-4 text-xs font-normal text-primary"> {data.node.label} </div>
 		</div>
-	{/if}
-</div>
+
+		{#if data.canDelete}
+			<div class="w-[27px] absolute -top-[32px] left-[50%] right-[50%] -translate-x-1/2">
+				<button
+					title="Delete branch"
+					on:click|preventDefault|stopPropagation={() => {
+						data.nodeCallbackHandler('removeBranch', data.node.id, data.node, data.parentIds, false)
+					}}
+					type="button"
+					class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
+				>
+					<X class="m-[5px]" size={15} />
+				</button>
+			</div>
+		{/if}
+
+		{#if data.node.id !== 'end'}
+			<div
+				class={twMerge(
+					'absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex items-center',
+					open ? 'z-20' : ''
+				)}
+			>
+				<InsertDecisionTreeNode
+					on:node={() => {
+						data.nodeCallbackHandler(
+							'nodeInsert',
+							data.node.id,
+							data.node,
+							data.parentIds ?? [],
+							data.branchHeader
+						)
+					}}
+					on:addBranch={() => {
+						data.nodeCallbackHandler('addBranch', data.node.id, data.node, data.parentIds, true)
+					}}
+					canAddBranch={false}
+				/>
+			</div>
+		{/if}
+	</div>
+</NodeWrapper>

package/package/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte.d.ts

@@ -2,17 +2,15 @@ import { SvelteComponent } from "svelte";
 import type { DecisionTreeNode } from '../component';
 declare const __propDef: {
     props: {
-        node: DecisionTreeNode;
-        editable?: boolean | undefined;
-        canDelete?: boolean | undefined;
-        label?: string | undefined;
+        data: {
+            node: DecisionTreeNode;
+            canDelete: boolean;
+            nodeCallbackHandler: (event: string, detail: string, graphNode: DecisionTreeNode | undefined, parentIds: string[], branchInsert: boolean) => void;
+            parentIds: string[];
+            branchHeader: boolean;
+        };
     };
     events: {
-        nodeInsert: CustomEvent<void>;
-        delete: CustomEvent<void>;
-        addBranch: CustomEvent<void>;
-        removeBranch: CustomEvent<void>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};