windmill-components 1.408.2 → 1.430.2

package/package/components/apps/components/helpers/RefreshButton.svelte

@@ -1,19 +1,22 @@
 <script>import { Button } from '../../../common';
-import { LoaderIcon, RefreshCw } from 'lucide-svelte';
+import { LoaderIcon, RefreshCw, RefreshCwOff } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import Popover from '../../../Popover.svelte';
 export let id;
 export let loading;
 const { runnableComponents } = getContext('AppViewerContext');
+let buttonHover = false;
+let cancelCallbacks = undefined;
 </script>
 
 <Popover>
 	<Button
+		on:mouseenter={() => (buttonHover = true)} on:mouseleave={() => (buttonHover = false)} 
 		startIcon={{
-			icon: loading ? LoaderIcon : RefreshCw,
+			icon: loading ? !buttonHover ? LoaderIcon : RefreshCwOff : RefreshCw,
 			classes: twMerge(
-				loading ? 'animate-spin text-blue-800' : '',
+				loading && !buttonHover ? 'animate-spin text-blue-800' : '',
 				'transition-all text-gray-500 dark:text-white'
 			)
 		}}
@@ -21,13 +24,21 @@ const { runnableComponents } = getContext('AppViewerContext');
 		size="xs2"
 		btnClasses={twMerge(loading ? ' bg-blue-100 dark:bg-blue-400' : '', 'transition-all')}
 		on:click={() => {
-			$runnableComponents[id]?.cb?.map((cb) => cb())
+			if (buttonHover && loading) {
+				cancelCallbacks?.forEach((cb) => cb.cancel()) 
+			} else {
+				cancelCallbacks = $runnableComponents[id]?.cb?.map((cb) =>  cb())
+			}
 		}}
 		iconOnly
 	/>
 	<svelte:fragment slot="text">
 		{#if loading}
-			Refreshing...
+			{#if buttonHover}
+				Stop Refreshing
+			{:else}
+				Refreshing...
+			{/if}
 		{:else}
 			Refresh
 		{/if}

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

@@ -14,6 +14,7 @@ import { userStore } from '../../../../stores';
 import { get } from 'svelte/store';
 import RefreshButton from './RefreshButton.svelte';
 import { ctxRegex } from '../../utils';
+import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3';
 // Component props
 export let id;
 export let fields;
@@ -526,6 +527,13 @@ function getError(obj) {
         return undefined;
     }
 }
+function computeS3ForceViewerPolicies() {
+    if (!isEditor) {
+        return undefined;
+    }
+    const policy = computeWorkspaceS3FileInputPolicy();
+    return policy;
+}
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v] (key)}
@@ -609,6 +617,9 @@ function getError(obj) {
 			<div class="px-2 h-fit min-h-0">
 				<LightweightSchemaForm
 					schema={schemaStripped}
+					appPath={defaultIfEmptyString(appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
+					{computeS3ForceViewerPolicies}
+					{workspace}
 					bind:this={schemaForm}
 					bind:args
 					on:inputClicked={handleInputClick}

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

@@ -158,9 +158,12 @@ export async function eval_like(text, context = {}, state, editor, controlCompon
             }
         };
         const downloadFile = (url, downloadFilename) => {
+            console.log(url, downloadFilename);
             const link = document.createElement('a');
             link.href = url;
-            link.download = downloadFilename || 'download';
+            link.download = downloadFilename || true;
+            link.target = '_blank';
+            link.rel = 'external';
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
@@ -180,21 +183,8 @@ export async function eval_like(text, context = {}, state, editor, controlCompon
             }
             else if (/^(http|https):\/\//.test(input) || input.startsWith('/')) {
                 const url = input.startsWith('/') ? `${window.location.origin}${input}` : input;
-                fetch(url)
-                    .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! status: ${response.status}`);
-                    }
-                    return response.blob();
-                })
-                    .then(blob => {
-                    const objectUrl = URL.createObjectURL(blob);
-                    const urlParts = input.split('/');
-                    const inferredFilename = urlParts[urlParts.length - 1];
-                    downloadFile(objectUrl, filename || inferredFilename);
-                    URL.revokeObjectURL(objectUrl);
-                })
-                    .catch(handleError);
+                console.log('Downloading file from:', url);
+                downloadFile(url, filename ?? url.split('/').pop()?.split('?')[0]);
             }
             else {
                 handleError(new Error('The input must be a valid URL, a base64 encoded string, or a valid S3 object.'));

package/package/components/apps/components/inputs/AppDateInput.svelte

@@ -25,7 +25,7 @@ $componentControl[id] = {
 let outputs = initOutput($worldStore, id, {
     result: undefined
 });
-$: !value && handleDefault(resolvedConfig.defaultValue);
+$: handleDefault(resolvedConfig.defaultValue);
 function formatDate(dateString, formatString = 'dd.MM.yyyy') {
     if (formatString === '') {
         formatString = 'dd.MM.yyyy';

package/package/components/apps/components/inputs/AppMultiSelectV2.svelte

@@ -13,6 +13,7 @@ import { tick } from 'svelte';
 import { offset, flip, shift } from 'svelte-floating-ui/dom';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import MultiSelect from '../../../multiselect/MultiSelect.svelte';
+import { deepEqual } from 'fast-equals';
 export let id;
 export let configuration;
 export let customCss = undefined;
@@ -23,34 +24,68 @@ const [floatingRef, floatingContent] = createFloatingActions({
     middleware: [offset(5), flip(), shift()]
 });
 const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
-let items;
+let items = [];
 const resolvedConfig = initConfig(components['multiselectcomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: []
 });
-let value = [...new Set(outputs?.result.peak())];
+let selectedItems = [
+    ...new Set(outputs?.result.peak())
+];
+function setResultsFromSelectedItems() {
+    outputs?.result.set([
+        ...(selectedItems?.map((item) => {
+            if (typeof item == 'object' && item.value != undefined && item.label != undefined) {
+                return item?.value ?? `NOT_STRING`;
+            }
+            else if (typeof item == 'string') {
+                return item;
+            }
+            else if (typeof item == 'object' && item.label != undefined) {
+                return item.label;
+            }
+            else {
+                return 'NOT_STRING';
+            }
+        }) ?? [])
+    ]);
+}
 $componentControl[id] = {
     setValue(nvalue) {
-        value = [...new Set(nvalue)];
-        outputs?.result.set([...(value ?? [])]);
+        if (Array.isArray(nvalue)) {
+            setSelectedItemsFromValues(nvalue);
+        }
+        else {
+            console.error('Invalid value for multiselect component, expected array', nvalue);
+        }
     }
 };
 $: resolvedConfig.items && handleItems();
 function handleItems() {
     if (Array.isArray(resolvedConfig.items)) {
-        items = resolvedConfig.items?.map((label) => {
-            return typeof label === 'string' ? label : `NOT_STRING`;
+        items = resolvedConfig.items?.map((item) => {
+            if (typeof item == 'object' && item.value != undefined && item.label != undefined) {
+                return item;
+            }
+            return typeof item === 'string' ? item : `NOT_STRING`;
         });
     }
 }
-$: resolvedConfig.defaultItems && handleDefaultItems();
-function handleDefaultItems() {
-    if (Array.isArray(resolvedConfig.defaultItems)) {
-        const nvalue = resolvedConfig.defaultItems?.map((label) => {
-            return typeof label === 'string' ? label : `NOT_STRING`;
-        });
-        value = [...new Set(nvalue)];
-        outputs?.result.set([...(value ?? [])]);
+$: resolvedConfig.defaultItems && setSelectedItemsFromValues(resolvedConfig.defaultItems);
+function setSelectedItemsFromValues(values) {
+    if (Array.isArray(values)) {
+        const nvalue = values
+            .map((value) => {
+            return (items.find((item) => {
+                if (typeof item == 'object' && item.value != undefined && item.label != undefined) {
+                    return deepEqual(item.value, value);
+                }
+                return item == value;
+            }) ?? (typeof value == 'string' ? value : undefined));
+        })
+            .filter((item) => item != undefined);
+        selectedItems = [...new Set(nvalue)];
+        setResultsFromSelectedItems();
     }
 }
 let css = initCss($app.css?.multiselectcomponent, customCss);
@@ -118,7 +153,7 @@ let open = false;
 		use:floatingRef
 		bind:clientWidth={w}
 	>
-		{#if !value || Array.isArray(value)}
+		{#if !selectedItems || Array.isArray(selectedItems)}
 			<MultiSelect
 				bind:outerDiv
 				outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
@@ -126,7 +161,7 @@ let open = false;
 				--sms-border={'none'}
 				--sms-min-height={'32px'}
 				--sms-focus-border={'none'}
-				bind:selected={value}
+				bind:selected={selectedItems}
 				options={items}
 				placeholder={resolvedConfig.placeholder}
 				allowUserOptions={resolvedConfig.create}
@@ -134,7 +169,7 @@ let open = false;
 					if (event?.detail?.type === 'removeAll') {
 						outputs?.result.set([])
 					} else {
-						outputs?.result.set([...(value ?? [])])
+						setResultsFromSelectedItems()
 					}
 				}}
 				on:open={() => {
@@ -156,7 +191,7 @@ let open = false;
 						e.target?.['parentElement']?.dispatchEvent(newe)
 					}}
 				>
-					{option}
+					{typeof option == 'object' ? option?.label ?? 'NO_LABEL' : option}
 				</div>
 			</MultiSelect>
 			<Portal name="app-multiselect-v2">
@@ -172,7 +207,7 @@ let open = false;
 				</div>
 			</Portal>
 		{:else}
-			Value {value} is not an array
+			Value {selectedItems} is not an array
 		{/if}
 	</div>
 </AlignWrapper>

package/package/components/apps/components/inputs/AppS3FileInput.svelte

@@ -7,6 +7,9 @@ import { components } from '../../editor/component';
 import { writable } from 'svelte/store';
 import FileUpload from '../../../common/fileUpload/FileUpload.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { computeS3FileInputPolicy } from '../../editor/appUtilsS3';
+import { defaultIfEmptyString } from '../../../../utils';
+import { userStore } from '../../../../stores';
 export let id;
 export let configuration;
 export let customCss = undefined;
@@ -22,8 +25,9 @@ $componentControl[id] = {
         $fileUploads = [];
     }
 };
+let value = undefined;
 const outputs = initOutput($worldStore, id, {
-    result: [],
+    result: value ?? [],
     loading: false,
     jobId: undefined
 });
@@ -52,6 +56,14 @@ let css = initCss($app.css?.fileinputcomponent, customCss);
                                 {/if}
                                 */
 let forceDisplayUploads = false;
+const { appPath, isEditor } = getContext('AppViewerContext');
+function computeForceViewerPolicies() {
+    if (!isEditor) {
+        return undefined;
+    }
+    const policy = computeS3FileInputPolicy(configuration?.type?.configuration?.s3, $app);
+    return policy;
+}
 </script>
 
 <InitializeComponent {id} />
@@ -100,16 +112,21 @@ let forceDisplayUploads = false;
 		customResourceType="s3"
 		customClass={css?.container?.class}
 		customStyle={css?.container?.style}
+		{fileUploads}
 		{workspace}
 		on:addition={(evt) => {
 			const curr = outputs.result.peak()
-			outputs.result.set(curr.concat(evt.detail))
+			value = curr.concat(evt.detail)
+			outputs.result.set(value)
 			onFileChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 		}}
 		on:deletion={(evt) => {
 			const curr = outputs.result.peak()
-			outputs.result.set(curr.filter((file) => file.path !== evt.detail?.path))
+			value = curr.filter((file) => file.path !== evt.detail?.path)
+			outputs.result.set(value)
 		}}
 		{forceDisplayUploads}
+		appPath={defaultIfEmptyString(appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
+		{computeForceViewerPolicies}
 	/>
 {/if}

package/package/components/apps/components/inputs/AppSelect.svelte

@@ -60,7 +60,13 @@ function setContextValue(value) {
 function handleItems() {
     listItems = Array.isArray(resolvedConfig.items)
         ? resolvedConfig.items.map((item) => {
-            if (!item || typeof item !== 'object') {
+            if (typeof item == 'string') {
+                return {
+                    label: item,
+                    value: JSON.stringify(item)
+                };
+            }
+            else if (!item || typeof item !== 'object') {
                 console.error('Select component items should be an array of objects');
                 return {
                     label: 'not object',
@@ -81,7 +87,13 @@ function handleItems() {
         rawValue = resolvedConfig.defaultValue;
     }
     else if (listItems.length > 0 && resolvedConfig?.preselectFirst) {
-        rawValue = resolvedConfig.items[0].value;
+        let firstItem = resolvedConfig.items[0];
+        if (typeof firstItem === 'string') {
+            rawValue = firstItem;
+        }
+        else {
+            rawValue = resolvedConfig.items[0].value;
+        }
     }
     if (rawValue !== undefined && rawValue !== null) {
         value = JSON.stringify(rawValue);

package/package/components/apps/components/inputs/AppSelectStep.svelte

@@ -25,19 +25,20 @@ $: resolvedConfig.defaultValue != undefined && setDefaultValue();
 $componentControl[id] = {
     setValue(nvalue) {
         selected = nvalue;
-        selectedIndex = resolvedConfig.items.findIndex((item) => item.value === nvalue);
+        selectedIndex = resolvedConfig.items.findIndex((item) => getValue(item) === nvalue);
     },
     setTab(index) {
-        selected = resolvedConfig.items?.[index]?.value;
+        let item = resolvedConfig.items?.[index];
+        selected = getValue(item);
         selectedIndex = index;
     }
 };
 function setDefaultValue() {
     if (resolvedConfig.defaultValue != undefined) {
-        selectedIndex = resolvedConfig.items.findIndex((item) => item.value === resolvedConfig.defaultValue);
+        selectedIndex = resolvedConfig.items.findIndex((item) => getValue(item) === resolvedConfig.defaultValue);
     }
     if (selectedIndex === -1 || resolvedConfig.defaultValue == undefined) {
-        selected = resolvedConfig.items[0].value;
+        selected = getValue(resolvedConfig.items[0]);
     }
     else if (resolvedConfig.defaultValue) {
         selected = resolvedConfig.items[selectedIndex].value;
@@ -51,6 +52,12 @@ function onPointerDown(e) {
         e.stopPropagation();
     }
 }
+function getValue(item) {
+    return typeof item == 'string' ? item : item.value;
+}
+function getLabel(item) {
+    return typeof item == 'string' ? item : item.label;
+}
 let css = initCss($app.css?.selectstepcomponent, customCss);
 $: selected && handleSelection(selected);
 </script>
@@ -85,14 +92,15 @@ $: selected && handleSelection(selected);
 >
 	<div class="w-full" on:pointerdown={onPointerDown}>
 		<Stepper
-			tabs={(resolvedConfig?.items ?? []).map((item) => item.label)}
+			tabs={(resolvedConfig?.items ?? []).map((item) => getLabel(item))}
 			hasValidations={false}
 			allowStepNavigation={true}
 			{selectedIndex}
 			on:click={(e) => {
 				const index = e.detail.index
 				selectedIndex = index
-				outputs?.result.set(resolvedConfig?.items[index].value)
+				let item = resolvedConfig?.items[index]
+				outputs?.result.set(getValue(item))
 			}}
 		/>
 	</div>

package/package/components/apps/components/inputs/AppTextInput.svelte

@@ -21,7 +21,7 @@ const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 let value = resolvedConfig.defaultValue;
 let outputs = initOutput($worldStore, id, {
-    result: ''
+    result: value ?? ''
 });
 onDestroy(() => {
     listInputs?.remove(id);