windmill-components 1.305.6 → 1.306.8

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

@@ -313,6 +313,12 @@ const aggridcomponentconst = {
                 value: 'normal',
                 selectOptions: ['normal', 'compact', 'comfortable'],
                 tooltip: 'Change the row height'
+            },
+            wrapActions: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
             }
         },
         componentInput: {
@@ -2409,6 +2415,12 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                             title: 'London'
                         }
                     ]
+                },
+                lock: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'Lock the map to prevent user interaction'
                 }
             }
         }

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -67,6 +67,13 @@ function renameId(newId) {
             propagateRename(old, c.id);
         }
     }
+    if (item?.data.type == 'aggridcomponent' || item?.data.type == 'aggridcomponentee') {
+        for (let c of item.data.actions ?? []) {
+            let old = c.id;
+            c.id = c.id.replace(id + '_', newId + '_');
+            propagateRename(old, c.id);
+        }
+    }
     if (item?.data.type === 'menucomponent') {
         for (let c of item.data.menuItems) {
             let old = c.id;
@@ -84,6 +91,12 @@ function renameComponent(from, to, data) {
             renameComponent(from, to, c);
         }
     }
+    if ((data.type == 'aggridcomponent' || data.type == 'aggridcomponentee') &&
+        Array.isArray(data.actions)) {
+        for (let c of data.actions) {
+            renameComponent(from, to, c);
+        }
+    }
     if (data.type === 'menucomponent') {
         for (let c of data.menuItems) {
             renameComponent(from, to, c);

package/package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte

@@ -10,4 +10,11 @@ export let gridItem;
 			{/each}
 		</div>
 	{/if}
+	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee') && gridItem.data.actions?.length > 0}
+		<div class="ml-2 border-l">
+			{#each gridItem.data.actions as action, index}
+				<Output id={action.id} first={index === 0} label="Table action" />
+			{/each}
+		</div>
+	{/if}
 </div>

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

@@ -30,6 +30,20 @@ export let gridItem;
 	{/each}
 {/if}
 
+{#if (gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee') && Array.isArray(gridItem.data.actions)}
+	{#each gridItem.data.actions as actionButton, index (index)}
+		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
+			<InlineScriptEditorPanel
+				on:createScriptFromInlineScript
+				componentType={actionButton.type}
+				id={actionButton.id}
+				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
+				bind:componentInput={actionButton.componentInput}
+			/>
+		{/if}
+	{/each}
+{/if}
+
 {#if gridItem?.data?.type === 'menucomponent'}
 	{#each gridItem.data.menuItems as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}

package/package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -46,6 +46,14 @@ function processGridItemRunnable(gridItem, list) {
                 processRunnable(actionButton.componentInput.runnable, actionButton.componentInput.transformer, actionButton.id, list);
             });
         }
+        if (component.type === 'aggridcomponent' || component.type === 'aggridcomponentee') {
+            component.actions?.forEach((actionButton) => {
+                if (actionButton.componentInput?.type !== 'runnable') {
+                    return;
+                }
+                processRunnable(actionButton.componentInput.runnable, actionButton.componentInput.transformer, actionButton.id, list);
+            });
+        }
         if (component.type === 'menucomponent') {
             component.menuItems?.forEach((menuItem) => {
                 if (menuItem.componentInput?.type !== 'runnable') {

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

@@ -294,6 +294,7 @@ function isMac() {
 			/>
 		{:else if componentSettings.item.data.type === 'aggridcomponentee'}
 			<GridAgGridLicenseKey bind:license={componentSettings.item.data.license} />
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'agchartscomponentee'}
 			<GridAgChartsLicenseKe bind:license={componentSettings.item.data.license} />
 		{:else if componentSettings.item.data.type === 'steppercomponent'}
@@ -323,6 +324,8 @@ function isMac() {
 				bind:panes={componentSettings.item.data.panes}
 				bind:component={componentSettings.item.data}
 			/>
+		{:else if componentSettings.item.data.type === 'aggridcomponent'}
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />
 		{:else if componentSettings.item.data.type === 'menucomponent' && Array.isArray(componentSettings.item.data.menuItems)}

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

@@ -2,14 +2,23 @@
 import Button from '../../../common/button/Button.svelte';
 import { getNextId } from '../../../flows/idUtils';
 import { classNames } from '../../../../utils';
-import { getContext } from 'svelte';
+import { getContext, onMount } from 'svelte';
 import { appComponentFromType } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
 import { Inspect, List, ToggleRightIcon, Trash } from 'lucide-svelte';
 export let components;
+// Migration code:
+onMount(() => {
+    if (components === undefined) {
+        components = [];
+    }
+});
 export let id;
 const { selectedComponent, app, errorByComponent } = getContext('AppViewerContext');
 function addComponent(typ) {
+    if (!components) {
+        return;
+    }
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
         ...appComponentFromType(typ)(`${id}_${actionId}`),
@@ -19,6 +28,9 @@ function addComponent(typ) {
     $app = $app;
 }
 function deleteComponent(cid) {
+    if (!components) {
+        return;
+    }
     components = components.filter((x) => x.id !== cid);
     delete $errorByComponent[cid];
     $selectedComponent = [id];
@@ -26,77 +38,79 @@ function deleteComponent(cid) {
 }
 </script>
 
-<PanelSection title={`Table Actions`}>
-	{#if components.length == 0}
-		<span class="text-xs text-tertiary">No action buttons</span>
-	{/if}
-	{#each components as component}
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			class={classNames(
-				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
-				'bg-surface hover:bg-surface-hover focus:border-primary text-secondary',
-				$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
-			)}
-			on:click={() => {
-				$selectedComponent = [component.id]
-			}}
-			on:keypress
-		>
-			<Badge color="dark-indigo">
-				{component.id}
-			</Badge>
+{#if components}
+	<PanelSection title={`Table Actions`}>
+		{#if components.length == 0}
+			<span class="text-xs text-tertiary">No action buttons</span>
+		{/if}
+		{#each components as component}
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class={classNames(
+					'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+					'bg-surface hover:bg-surface-hover focus:border-primary text-secondary',
+					$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
+				)}
+				on:click={() => {
+					$selectedComponent = [component.id]
+				}}
+				on:keypress
+			>
+				<Badge color="dark-indigo">
+					{component.id}
+				</Badge>
 
-			<div>
-				{#if component.type == 'buttoncomponent'}
-					Button
-				{:else if component.type == 'selectcomponent'}
-					Select
-				{:else if component.type == 'checkboxcomponent'}
-					Toggle
-				{/if}
-			</div>
-			<div>
-				<Button
-					variant="border"
-					color="red"
-					on:click={() => deleteComponent(component.id)}
-					startIcon={{ icon: Trash }}
-					iconOnly
-				/>
+				<div>
+					{#if component.type == 'buttoncomponent'}
+						Button
+					{:else if component.type == 'selectcomponent'}
+						Select
+					{:else if component.type == 'checkboxcomponent'}
+						Toggle
+					{/if}
+				</div>
+				<div>
+					<Button
+						variant="border"
+						color="red"
+						on:click={() => deleteComponent(component.id)}
+						startIcon={{ icon: Trash }}
+						iconOnly
+					/>
+				</div>
 			</div>
+		{/each}
+		<div class="w-full flex gap-2">
+			<Button
+				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				wrapperClasses="w-full"
+				color="light"
+				variant="border"
+				on:click={() => addComponent('buttoncomponent')}
+				title="Add Button"
+			>
+				+ <Inspect size={14} />
+			</Button>
+			<Button
+				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				wrapperClasses="w-full"
+				color="light"
+				variant="border"
+				on:click={() => addComponent('checkboxcomponent')}
+				title="Add Toggle"
+			>
+				+ <ToggleRightIcon size={14} />
+			</Button>
+			<Button
+				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				wrapperClasses="w-full"
+				color="light"
+				variant="border"
+				on:click={() => addComponent('selectcomponent')}
+				title="Add Select"
+			>
+				+ <List size={14} />
+			</Button>
 		</div>
-	{/each}
-	<div class="w-full flex gap-2">
-		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
-			wrapperClasses="w-full"
-			color="light"
-			variant="border"
-			on:click={() => addComponent('buttoncomponent')}
-			title="Add Button"
-		>
-			+ <Inspect size={14} />
-		</Button>
-		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
-			wrapperClasses="w-full"
-			color="light"
-			variant="border"
-			on:click={() => addComponent('checkboxcomponent')}
-			title="Add Toggle"
-		>
-			+ <ToggleRightIcon size={14} />
-		</Button>
-		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
-			wrapperClasses="w-full"
-			color="light"
-			variant="border"
-			on:click={() => addComponent('selectcomponent')}
-			title="Add Select"
-		>
-			+ <List size={14} />
-		</Button>
-	</div>
-</PanelSection>
+	</PanelSection>
+{/if}

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

@@ -3,7 +3,7 @@ import type { BaseAppComponent } from '../../types';
 import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component';
 declare const __propDef: {
     props: {
-        components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[];
+        components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[] | undefined;
         id: string;
     };
     events: {

package/package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte

@@ -80,6 +80,7 @@ function select(label) {
 									{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
 						>
 							<img
+								class="dark:invert"
 								loading="lazy"
 								src="https://cdn.jsdelivr.net/npm/lucide-static@0.367.0/icons/{label}.svg"
 							/>

package/package/components/apps/utils.js

@@ -235,6 +235,15 @@ export function getAllScriptNames(app) {
                 }
             });
         }
+        if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee') {
+            gridItem.data.actions?.forEach((actionButton) => {
+                if (actionButton.componentInput?.type === 'runnable') {
+                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
+                        acc.push(actionButton.componentInput.runnable.name);
+                    }
+                }
+            });
+        }
         if (gridItem.data.type === 'menucomponent') {
             gridItem.data.menuItems.forEach((menuItem) => {
                 if (menuItem.componentInput?.type === 'runnable') {

package/package/components/common/fileInput/FileInput.svelte

@@ -64,6 +64,20 @@ async function convertFile(file) {
         }
     });
 }
+function handleDragOver(event) {
+    event.preventDefault();
+    if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'copy';
+    }
+}
+function handleDrop(event) {
+    event.preventDefault();
+    if (event.dataTransfer) {
+        if (event.dataTransfer.files && event.dataTransfer.files.length) {
+            onChange(event.dataTransfer.files);
+        }
+    }
+}
 function removeFile(index) {
     if (!files)
         return;
@@ -99,6 +113,8 @@ export function clearFiles() {
 		duration-200 rounded-lg p-1`,
 		c
 	)}
+	on:dragover={handleDragOver}
+	on:drop={handleDrop}
 	{style}
 >
 	{#if !hideIcon && !files}

package/package/components/common/fileUpload/FileUpload.svelte

@@ -27,7 +27,7 @@ async function handleChange(files) {
         uploadFileToS3(file, file.name);
     }
 }
-let xhr = undefined;
+let activeUploads = [];
 async function uploadFileToS3(fileToUpload, fileToUploadKey) {
     if (fileToUpload === undefined || fileToUploadKey === undefined) {
         return;
@@ -99,7 +99,8 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
         // 		duplex: 'half'
         // 	}
         // )
-        xhr = new XMLHttpRequest();
+        let xhr = new XMLHttpRequest();
+        activeUploads.push({ xhr, fileName: fileToUpload.name });
         const response = (await new Promise((resolve, reject) => {
             xhr?.upload.addEventListener('progress', (event) => {
                 if (event.lengthComputable) {
@@ -126,7 +127,7 @@ async function uploadFileToS3(fileToUpload, fileToUploadKey) {
                         reject(response);
                     }
                 }
-                xhr = undefined;
+                activeUploads = activeUploads.filter((x) => x.fileName !== fileToUpload.name);
             });
             xhr?.open('POST', `/api/w/${$workspaceStore}/job_helpers/upload_s3_file?${params.toString()}`, true);
             xhr?.setRequestHeader('Content-Type', 'application/octet-stream');
@@ -165,11 +166,19 @@ async function deleteFile(fileKey) {
     dispatch('deletion', { path: fileKey });
     sendUserToast('File deleted!');
 }
-onDestroy(() => {
-    if (xhr) {
-        xhr?.abort;
-        xhr = undefined;
+function clearRequests() {
+    activeUploads.forEach(({ xhr }) => xhr.abort());
+    activeUploads = [];
+}
+function abortUpload(fileName) {
+    const upload = activeUploads.find((x) => x.fileName === fileName);
+    if (upload) {
+        upload.xhr.abort();
+        activeUploads = activeUploads.filter((x) => x.fileName !== fileName);
     }
+}
+onDestroy(() => {
+    clearRequests();
 });
 </script>
 
@@ -207,10 +216,7 @@ onDestroy(() => {
 												return
 											}
 
-											if (xhr) {
-												xhr.abort()
-												xhr = undefined
-											}
+											abortUpload(fileUpload.name)
 
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
@@ -235,10 +241,7 @@ onDestroy(() => {
 												return
 											}
 
-											if (xhr) {
-												xhr.abort()
-												xhr = undefined
-											}
+											clearRequests()
 
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
@@ -281,10 +284,7 @@ onDestroy(() => {
 											if (fileUpload.path) {
 												deleteFile(fileUpload.path)
 											}
-											if (xhr) {
-												xhr.abort()
-												xhr = undefined
-											}
+											abortUpload(fileUpload.name)
 										}}
 										startIcon={{
 											icon: Trash

package/package/user.js

@@ -11,7 +11,7 @@ export async function getUserExt(workspace) {
 function mapUserToUserExt(user) {
     return {
         ...user,
-        groups: user.groups,
+        groups: user.groups ?? [],
         pgroups: user.groups.map((x) => `g/${x}`)
     };
 }

package/package/utils.js

@@ -624,7 +624,7 @@ export function cleanValueProperties(obj) {
 }
 export function orderedJsonStringify(obj, space) {
     const allKeys = new Set();
-    JSON.stringify(obj, (key, value) => (allKeys.add(key), value));
+    JSON.stringify(obj, (key, value) => (value != undefined && value != null && allKeys.add(key), value));
     return JSON.stringify(obj, Array.from(allKeys).sort(), space);
 }
 function sortObjectKeys(obj) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.305.6",
+	"version": "1.306.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -291,6 +291,10 @@
 			"types": "./package/gen/core/OpenAPI.d.ts",
 			"default": "./package/gen/core/OpenAPI.js"
 		},
+		"./gen/core": {
+			"default": "./package/gen/core/index.js",
+			"types": "./package/gen/core/index.d.ts"
+		},
 		"./components/DropdownV2.svelte": {
 			"types": "./package/components/DropdownV2.svelte.d.ts",
 			"svelte": "./package/components/DropdownV2.svelte",
@@ -377,6 +381,9 @@
 			"stores": [
 				"./package/stores.d.ts"
 			],
+			"gen/core": [
+				"./package/gen/core/index.d.ts"
+			],
 			"components/flows/flowStore": [
 				"./package/components/flows/flowStore.d.ts"
 			],