windmill-components 1.138.7 → 1.139.0

package/package/components/DeployWorkspace.svelte

@@ -113,7 +113,6 @@ async function getDependencies(kind, path) {
     let processed = [];
     while (toProcess.length > 0) {
         const { kind, path } = toProcess.pop();
-        console.log('BAR', kind, path);
         toProcess.push(...(await rec(kind, path)));
         processed.push({ kind, path });
     }

package/package/components/DisplayResult.svelte

@@ -197,7 +197,9 @@ $: jsonStr = JSON.stringify(result, null, 4);
 					href="data:application/octet-stream;base64,{result.file}">Download</a
 				>
 			</div>
-		{:else if !forceJson && resultKind == 'error'}<div class="flex flex-col items-start">
+		{:else if !forceJson && resultKind == 'error' && result?.error}<div
+				class="flex flex-col items-start"
+			>
 				<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
 					>{#if result.error.name || result.error.message}{result.error.name}: {result.error
 							.message}{:else}{JSON.stringify(result.error, null, 4)}{/if}</span

package/package/components/EditorBar.svelte

@@ -361,7 +361,6 @@ let historyBrowserDrawerOpen = false;
 				}
 			} else {
 				const tsSchema = compile(resourceType.schema)
-				console.log(tsSchema)
 				editor.insertAtCursor(`type ${toCamel(capitalize(name))} = ${tsSchema}\n`)
 			}
 			sendUserToast(`${name} inserted at cursor`)

package/package/components/GroupEditor.svelte

@@ -37,7 +37,12 @@ async function addToGroup() {
     loadGroup();
 }
 async function loadInstanceGroup() {
-    instance_group = await GroupService.getInstanceGroup({ name });
+    try {
+        instance_group = await GroupService.getInstanceGroup({ name });
+    }
+    catch (e) {
+        instance_group = undefined;
+    }
 }
 async function loadGroup() {
     try {

package/package/components/ResultJobLoader.svelte

@@ -118,7 +118,15 @@ async function loadTestJob(id) {
                 if (currentId === id) {
                     job = { ...maybe_job, id };
                     await tick();
-                    dispatch('done', job);
+                    if ('error' in job ?? {}) {
+                        dispatch('doneError', {
+                            id,
+                            error: job.result.error
+                        });
+                    }
+                    else {
+                        dispatch('done', job);
+                    }
                     currentId = undefined;
                 }
             }

package/package/components/ResultJobLoader.svelte.d.ts

@@ -19,8 +19,8 @@ declare const __propDef: {
     };
     events: {
         started: CustomEvent<any>;
-        done: CustomEvent<any>;
         doneError: CustomEvent<any>;
+        done: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/ScheduleEditor.svelte

@@ -89,7 +89,6 @@ async function loadSchedule() {
         script_path = s.script_path ?? '';
         is_flow = s.is_flow;
         if (s.on_failure) {
-            console.log(s.on_failure);
             let splitted = s.on_failure.split('/');
             errorHandleritemKind = splitted[0];
             errorHandlerPath = splitted.slice(1)?.join('/');

package/package/components/SchemaEditor.svelte

@@ -101,7 +101,6 @@ function startEditArgument(argName) {
     if (Object.keys(schema.properties).includes(argName)) {
         editing = true;
         const modalProperty = schemaToModal(schema.properties[argName], argName, schema.required.includes(argName));
-        console.log(modalProperty.format);
         oldArgName = argName;
         schemaModal.openDrawer(modalProperty);
     }

package/package/components/SupabaseConnect.svelte

@@ -126,7 +126,8 @@ async function save() {
 				bind:error={pathError}
 				bind:path
 				initialPath=""
-				fullNamePlaceholder={'supabase_' + selectedDatabase?.name}
+				fullNamePlaceholder={'supabase_' +
+					selectedDatabase?.name?.replace(/\s+/g, '').replace(/[^\w\s]/gi, '')}
 				kind="resource"
 			/>
 

package/package/components/apps/components/display/AppCarouselList.svelte

@@ -0,0 +1,161 @@
+<script>import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { concatCustomCss } from '../../utils';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { components } from '../../editor/component';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import ListWrapper from '../layout/ListWrapper.svelte';
+import Carousel from 'svelte-carousel';
+import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-svelte';
+import { Button } from '../../../common';
+export let id;
+export let componentInput;
+export let configuration;
+export let customCss = undefined;
+export let render;
+export let initializing;
+export let componentContainerHeight;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false,
+    inputs: {}
+});
+const resolvedConfig = initConfig(components['carousellistcomponent'].initialData.configuration, configuration);
+function onFocus() {
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    };
+}
+$: css = concatCustomCss($app.css?.containercomponent, customCss);
+let result = undefined;
+let inputs = {};
+let carousel;
+$: $selectedComponent?.includes(id) &&
+    $focusedGrid === undefined &&
+    ($focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    });
+</script>
+
+{#each Object.keys(components['carousellistcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<RunnableWrapper
+	render={true}
+	{outputs}
+	autoRefresh
+	{componentInput}
+	{id}
+	bind:initializing
+	bind:result
+>
+	<div class="w-full flex flex-wrap overflow-auto divide-y max-h-full">
+		{#if $app.subgrids?.[`${id}-0`]}
+			{#if Array.isArray(result) && result.length > 0}
+				{#key result}
+					<Carousel
+						particlesToShow={1}
+						particlesToScroll={1}
+						autoplay={false}
+						autoplayProgressVisible={false}
+						timingFunction={resolvedConfig.timingFunction}
+						dots={true}
+						arrows={true}
+						swiping={false}
+						bind:this={carousel}
+						let:currentPageIndex
+						on:pageChange={(event) => {
+							$focusedGrid = {
+								parentComponentId: id,
+								subGridIndex: event.detail
+							}
+						}}
+					>
+						<div slot="prev" class="h-full flex justify-center flex-col p-2">
+							<div>
+								<Button
+									color="light"
+									on:click={() => {
+										const pagesCount = result?.length ?? 0
+
+										if (currentPageIndex > 0) {
+											carousel.goTo(currentPageIndex - 1)
+										} else {
+											carousel.goTo(pagesCount - 1)
+										}
+									}}
+								>
+									<ArrowLeftCircle size={16} />
+								</Button>
+							</div>
+						</div>
+						<div slot="next" class="h-full flex justify-center flex-col p-2">
+							<div>
+								<Button
+									color="light"
+									on:click={() => {
+										const pagesCount = result?.length ?? 0
+										if (currentPageIndex < pagesCount - 1) {
+											carousel.goTo(currentPageIndex + 1)
+										} else {
+											carousel.goTo(0)
+										}
+									}}
+								>
+									<ArrowRightCircle size={16} />
+								</Button>
+							</div>
+						</div>
+						{#each result ?? [] as value, index}
+							<div class="overflow-auto w-full">
+								<ListWrapper
+									on:inputsChange={() => {
+										outputs?.inputs.set(inputs, true)
+									}}
+									bind:inputs
+									{value}
+									{index}
+								>
+									<SubGridEditor
+										{id}
+										visible={render}
+										class={css?.container?.class}
+										style={css?.container?.style}
+										subGridId={`${id}-0`}
+										containerHeight={componentContainerHeight - 40}
+										on:focus={() => {
+											if (!$connectingInput.opened) {
+												$selectedComponent = [id]
+											}
+											onFocus()
+										}}
+									/>
+								</ListWrapper>
+							</div>
+						{/each}
+					</Carousel>
+				{/key}
+			{:else}
+				<ListWrapper disabled value={undefined} index={0}>
+					<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+				</ListWrapper>
+				{#if !Array.isArray(result)}
+					<div class="text-center text-tertiary">Input data is not an array</div>
+				{/if}
+			{/if}
+		{/if}
+	</div>
+</RunnableWrapper>

package/package/components/apps/components/display/AppCarouselList.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'containercomponent'> | undefined;
+        render: boolean;
+        initializing: boolean | undefined;
+        componentContainerHeight: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppCarouselListProps = typeof __propDef.props;
+export type AppCarouselListEvents = typeof __propDef.events;
+export type AppCarouselListSlots = typeof __propDef.slots;
+export default class AppCarouselList extends SvelteComponentTyped<AppCarouselListProps, AppCarouselListEvents, AppCarouselListSlots> {
+}
+export {};

package/package/components/apps/components/display/AppMarkdown.svelte

@@ -0,0 +1,66 @@
+<script>import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import Markdown from 'svelte-exmarkdown';
+import { classNames } from '../../../../utils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+export let configuration;
+const { app, worldStore } = getContext('AppViewerContext');
+const resolvedConfig = initConfig(components['mardowncomponent'].initialData.configuration, configuration);
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let result = undefined;
+$: css = concatCustomCss($app.css?.mardowncomponent, customCss);
+const proseMapping = {
+    sm: 'prose-sm',
+    Default: 'prose-base',
+    lg: 'prose-lg',
+    xl: 'prose-xl',
+    '2xl': 'prose-2xl'
+};
+</script>
+
+{#each Object.keys(components['mardowncomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<div
+	on:pointerdown={(e) => {
+		e?.preventDefault()
+	}}
+	class={classNames(
+		'h-full w-full overflow-y-auto prose',
+		resolvedConfig?.size ? proseMapping[resolvedConfig.size] : '',
+		css?.container?.class
+	)}
+>
+	<RunnableWrapper
+		{outputs}
+		{render}
+		autoRefresh
+		{componentInput}
+		{id}
+		bind:initializing
+		bind:result
+	>
+		{#if result}
+			{#key result}
+				<Markdown md={result} />
+			{/key}
+		{/if}
+	</RunnableWrapper>
+</div>

package/package/components/apps/components/display/AppMarkdown.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'mardowncomponent'> | undefined;
+        render: boolean;
+        configuration: RichConfigurations;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppMarkdownProps = typeof __propDef.props;
+export type AppMarkdownEvents = typeof __propDef.events;
+export type AppMarkdownSlots = typeof __propDef.slots;
+export default class AppMarkdown extends SvelteComponentTyped<AppMarkdownProps, AppMarkdownEvents, AppMarkdownSlots> {
+}
+export {};

package/package/components/apps/components/display/index.d.ts

@@ -13,3 +13,4 @@ export { default as AppText } from './AppText.svelte';
 export { default as AppTimeseries } from './AppTimeseries.svelte';
 export { default as PlotlyHtml } from './PlotlyHtml.svelte';
 export { default as VegaLiteHtml } from './VegaLiteHtml.svelte';
+export { default as AppMarkdown } from './AppMarkdown.svelte';

package/package/components/apps/components/display/index.js

@@ -13,3 +13,4 @@ export { default as AppText } from './AppText.svelte';
 export { default as AppTimeseries } from './AppTimeseries.svelte';
 export { default as PlotlyHtml } from './PlotlyHtml.svelte';
 export { default as VegaLiteHtml } from './VegaLiteHtml.svelte';
+export { default as AppMarkdown } from './AppMarkdown.svelte';

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

@@ -125,22 +125,14 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
                 iter: iterContext ? $iterContext : undefined,
                 row: rowContext ? $rowContext : undefined
             }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
-            await setResult(r, undefined);
-            $state = $state;
             const job = generateNextFrontendJobId();
-            const njobs = [{ job, component: id, result: r }, ...$jobs];
-            $jobs = $jobs?.length > 100 ? njobs.slice(0, 100) : njobs;
+            await setResult(r, job);
+            $state = $state;
         }
         catch (e) {
             sendUserToast(`Error running frontend script ${id}: ` + e.message, true);
-            // Manually add a fake job to the job list to show the error
             const job = generateNextFrontendJobId();
-            const error = e.body ?? e.message;
-            $errorByComponent[job] = {
-                error,
-                componentId: id
-            };
-            $jobs = [{ job, component: id, error }, ...$jobs];
+            await setResult({ error: { message: e.body ?? e.message } }, job);
         }
         loading = false;
         donePromise?.();
@@ -161,7 +153,7 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
         return;
     }
     try {
-        let njob = await resultJobLoader?.abstractRun(async () => {
+        await resultJobLoader?.abstractRun(async () => {
             const nonStaticRunnableInputs = {};
             const staticRunnableInputs = {};
             for (const k of Object.keys(fields ?? {})) {
@@ -206,13 +198,9 @@ async function executeComponent(noToast = false, inlineScriptOverride) {
                 requestBody
             });
         });
-        if (njob) {
-            const njobs = [{ job: njob, component: id }, ...$jobs];
-            $jobs = $jobs?.length > 100 ? njobs.slice(0, 100) : njobs;
-        }
     }
     catch (e) {
-        setResult({ error: e.body ?? e.message }, undefined);
+        updateResult({ error: e.body ?? e.message });
         loading = false;
     }
 }
@@ -226,7 +214,7 @@ export async function runComponent() {
         }
     }
     catch (e) {
-        setResult({ error: e.body ?? e.message }, undefined);
+        updateResult({ error: e.body ?? e.message });
     }
 }
 function recordError(error, jobId) {
@@ -238,21 +226,49 @@ function recordError(error, jobId) {
 async function setJobId(jobId) {
     outputs.jobId?.set(jobId);
 }
-async function setResult(res, jobId) {
-    dispatch('done');
-    const hasRes = res !== undefined && res !== null;
+function recordJob(jobId, result, error, transformer) {
+    const job = {
+        ...(result ? { result } : {}),
+        ...(error ? { error } : {}),
+        ...(transformer ? { transformer } : {}),
+        job: jobId,
+        component: id
+    };
+    if (error) {
+        recordError(error, jobId);
+    }
+    else if (job?.transformer?.error) {
+        recordError(job.transformer.error, jobId);
+    }
+    const njobs = [job, ...$jobs];
+    // Only keep the last 100 jobs
+    $jobs = $jobs?.length > 100 ? njobs.slice(0, 100) : njobs;
+}
+function getResultErrors(result) {
+    const errorAsArray = Array.isArray(result) ? result.flat() : [result];
+    const hasErrors = errorAsArray.some((r) => r?.error);
+    if (!hasErrors) {
+        return undefined;
+    }
+    return errorAsArray
+        .map((r) => r?.error?.message)
+        .filter(Boolean)
+        .join('\n');
+}
+async function runTransformer(res) {
     if (transformer) {
         try {
             let raw = $worldStore.newOutput(id, 'raw', res);
-            res = await eval_like(transformer.content, computeGlobalContext($worldStore, {
+            const transformerResult = await eval_like(transformer.content, computeGlobalContext($worldStore, {
                 iter: iterContext ? $iterContext : undefined,
                 row: rowContext ? $rowContext : undefined,
                 result: res
             }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
-            raw.set(res);
+            raw.set(transformerResult);
+            return transformerResult;
         }
         catch (err) {
-            res = {
+            return {
                 error: {
                     name: 'TransformerError',
                     message: 'An error occured in the transformer',
@@ -260,39 +276,40 @@ async function setResult(res, jobId) {
                 }
             };
         }
-        if (hasRes && res === undefined) {
-            res = {
-                error: {
-                    name: 'TransformerError',
-                    message: 'An error occured in the transformer',
-                    stack: 'Transformer returned undefined'
-                }
-            };
-        }
     }
-    // console.log('setr', id)
+}
+function updateResult(res) {
     outputs.result?.set(res);
     result = res;
-    // Flows with loops can have multiple results
-    const errorAsArray = Array.isArray(result) ? result.flat() : [result];
-    // As soon as we have an error, we consider the component errored
-    const hasErrors = errorAsArray.some((r) => r?.error);
-    if (hasErrors) {
-        const errorMessages = errorAsArray
-            .map((r) => r?.error?.message)
-            .filter(Boolean)
-            .join('\n');
-        jobId && recordError(errorMessages, jobId);
-        dispatch('handleError', errorMessages);
+}
+async function setResult(res, jobId) {
+    dispatch('done');
+    const hasRes = res !== undefined && res !== null;
+    if (!jobId && !hasRes) {
+        return;
     }
-    else {
-        dispatch('success');
+    const errors = getResultErrors(res);
+    console.log('errors', errors);
+    if (errors) {
+        const transformerResult = transformer
+            ? { error: 'Transformer could not be run because of previous errors' }
+            : undefined;
+        recordJob(jobId, undefined, errors, transformerResult);
+        updateResult(res);
+        dispatch('handleError', errors);
+        return;
     }
-    const previousJobId = Object.keys($errorByComponent).find((key) => $errorByComponent[key].componentId === id);
-    if (previousJobId && !hasErrors) {
-        delete $errorByComponent[previousJobId];
-        $errorByComponent = $errorByComponent;
+    const transformerResult = await runTransformer(res);
+    if (transformerResult?.error) {
+        recordJob(jobId, res, undefined, transformerResult);
+        updateResult(transformerResult);
+        dispatch('handleError', transformerResult.error);
+        return;
     }
+    updateResult(transformerResult ?? res);
+    recordJob(jobId, result, undefined, transformerResult);
+    $errorByComponent = clearErrorByComponentId(id, $errorByComponent);
+    dispatch('success');
     donePromise?.();
 }
 function handleInputClick(e) {
@@ -377,7 +394,7 @@ let inputValues = {};
 		loading = false
 	}}
 	on:doneError={(e) => {
-		setResult({ error: e.detail }, e.detail.id)
+		setResult({ error: e.detail.error }, e.detail.id)
 		loading = false
 	}}
 	bind:this={resultJobLoader}
@@ -414,10 +431,17 @@ let inputValues = {};
 							<Alert type="error" title="Error during execution">
 								<div class="flex flex-col gap-2">
 									An error occured, please contact the app author.
+
+									{#if lastJobId && $errorByComponent[lastJobId]?.error}
+										<div class="font-bold">{$errorByComponent[lastJobId]?.error}</div>
+									{/if}
 									<a
 										href={`/run/${lastJobId}?workspace=${workspace}`}
-										class="font-semibold text-red-800 underline">Job id: {lastJobId}</a
+										class="font-semibold text-red-800 underline"
+										target="_blank"
 									>
+										Job id: {lastJobId}
+									</a>
 								</div>
 							</Alert>
 						</div>

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

@@ -26,7 +26,6 @@ ${noReturn ? `return ${eval_string}` : eval_string}
 }
 function make_context_evaluator(eval_string, context, noReturn) {
     let template = create_context_function_template(eval_string, context, noReturn);
-    console.debug(template);
     let functor = Function(template);
     return functor();
 }

package/package/components/apps/components/icon.js

@@ -1,4 +1,10 @@
-import { toKebabCase } from '../utils';
+function toKebabCase(str) {
+    return str
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2') // Convert camel case to kebab case
+        .replace(/([A-Z0-9])([A-Z])/g, '$1-$2') // Separate consecutive uppercase letters
+        .replace(/([a-z])([0-9])/g, '$1-$2') // Separate letters from digits
+        .toLowerCase();
+}
 export async function loadIcon(name) {
     let iconComponent;
     try {

package/package/components/apps/components/inputs/AppFileInput.svelte

@@ -13,11 +13,18 @@ const { app, worldStore } = getContext('AppViewerContext');
 let acceptedFileTypes = undefined;
 let allowMultiple = undefined;
 let text = undefined;
+let includeMimeType = undefined;
 let outputs = initOutput($worldStore, id, {
     result: []
 });
 // Receives Base64 encoded strings from the input component
 async function handleChange(files) {
+    if (includeMimeType === false) {
+        files = files?.map((file) => {
+            const [_, data] = file.data.split('base64,');
+            return { name: file.name, data };
+        });
+    }
     outputs?.result.set(files);
 }
 $: css = concatCustomCss($app.css?.fileinputcomponent, customCss);
@@ -26,6 +33,7 @@ $: css = concatCustomCss($app.css?.fileinputcomponent, customCss);
 <InputValue {id} input={configuration.acceptedFileTypes} bind:value={acceptedFileTypes} />
 <InputValue {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
 <InputValue {id} input={configuration.text} bind:value={text} />
+<InputValue {id} input={configuration.includeMimeType} bind:value={includeMimeType} />
 
 <InitializeComponent {id} />