windmill-components 1.339.2 → 1.352.0

package/package/components/apps/components/display/AppFlowStatusComponent.svelte

@@ -1,72 +1,15 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import { initOutput } from '../../editor/appUtils';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import { initCss } from '../../utils';
-import FlowStatusViewer from '../../../FlowStatusViewer.svelte';
-import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let componentInput;
-export let initializing = false;
-export let customCss = undefined;
-export let render;
-const { app, worldStore, workspace } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-initializing = false;
-let css = initCss($app.css?.flowstatuscomponent, customCss);
-let jobId;
+<script>import { Alert } from '../../../common';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 </script>
 
-{#each Object.keys(css ?? {}) as key (key)}
-	<ResolveStyle
-		{id}
-		{customCss}
-		{key}
-		bind:css={css[key]}
-		componentStyle={$app.css?.flowstatuscomponent}
-	/>
-{/each}
-
-<RunnableWrapper
-	on:started={(e) => {
-		jobId = e.detail
-	}}
-	{outputs}
-	{render}
-	{componentInput}
-	{id}
->
-	<div class="flex flex-col w-full h-full">
-		<div
-			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-				css?.header?.class,
-				'wm-flow-status-header'
-			)}
-			style={css?.header?.style}
-		>
-			Flow Status
-		</div>
-		<div
-			style={twMerge(
-				$app.css?.['flowstatuscomponent']?.['container']?.style,
-				customCss?.container?.style
-			)}
-			class={twMerge(
-				'p-2 grow overflow-auto',
-				$app.css?.['flowstatuscomponent']?.['container']?.class,
-				customCss?.container?.class,
-				'wm-flow-status-container'
-			)}
-		>
-			{#if jobId}
-				<FlowStatusViewer workspaceId={workspace} {jobId} />
-			{:else}
-				<span class="text-secondary text-xs">No flow</span>
-			{/if}
-		</div>
-	</div>
-</RunnableWrapper>
+<AlignWrapper verticalAlignment="center" horizontalAlignment="center">
+	<Alert
+		title="Deprecated component"
+		documentationLink="https://www.windmill.dev/docs/apps/app_configuration_settings/flow_status"
+		tooltip="See documentation of the new component:"
+		type="error"
+	>
+		This component is deprecated and has been removed. Please use the Flow status by Job Id
+		component instead.
+	</Alert>
+</AlignWrapper>

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

@@ -1,14 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
-    props: {
-        id: string;
-        componentInput: AppInput | undefined;
-        initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'flowstatuscomponent'> | undefined;
-        render: boolean;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/components/display/AppJobIdFlowStatus.svelte

@@ -1,23 +1,23 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { initCss } from '../../utils';
 import FlowStatusViewer from '../../../FlowStatusViewer.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
 export let id;
-export let componentInput;
 export let initializing = false;
 export let customCss = undefined;
-export let render;
 export let configuration;
+export let render;
 const { app, worldStore, workspace } = getContext('AppViewerContext');
-let resolvedConfig = initConfig(components['jobidlogcomponent'].initialData.configuration, configuration);
+const resolvedConfig = initConfig(components['jobidlogcomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
-    loading: false
+    loading: false,
+    jobId: undefined
 });
 initializing = false;
 let css = initCss($app.css?.jobidflowstatuscomponent, customCss);
@@ -43,7 +43,9 @@ $: jobId = resolvedConfig.jobId;
 	/>
 {/each}
 
-<RunnableWrapper {outputs} {render} {componentInput} {id}>
+<InitializeComponent {id} />
+
+{#if render}
 	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
@@ -66,10 +68,21 @@ $: jobId = resolvedConfig.jobId;
 			)}
 		>
 			{#if jobId}
-				<FlowStatusViewer workspaceId={workspace} {jobId} />
+				<FlowStatusViewer
+					workspaceId={workspace}
+					{jobId}
+					on:start={() => {
+						outputs?.jobId.set(jobId)
+						outputs?.loading.set(true)
+					}}
+					on:done={(e) => {
+						outputs?.loading.set(false)
+						outputs?.result.set(e?.detail?.result)
+					}}
+				/>
 			{:else}
 				<span class="text-secondary text-xs">No flow</span>
 			{/if}
 		</div>
 	</div>
-</RunnableWrapper>
+{/if}

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

@@ -1,14 +1,12 @@
 import { SvelteComponent } 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<'jobidflowstatuscomponent'> | undefined;
-        render: boolean;
         configuration: RichConfigurations;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/display/AppJobIdLogComponent.svelte

@@ -1,20 +1,19 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { initCss } from '../../utils';
 import LogViewer from '../../../LogViewer.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
 export let id;
-export let componentInput;
 export let initializing = false;
 export let customCss = undefined;
-export let render;
 export let configuration;
-const { app, worldStore } = getContext('AppViewerContext');
+export let render;
+const { app, worldStore, workspace } = getContext('AppViewerContext');
 let resolvedConfig = initConfig(components['jobidlogcomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
@@ -27,6 +26,7 @@ let testJobLoader = undefined;
 let testIsLoading = false;
 let testJob = undefined;
 $: if (resolvedConfig.jobId) {
+    outputs.loading.set(true);
     testJobLoader?.watchJob(resolvedConfig?.['jobId']);
 }
 </script>
@@ -50,9 +50,21 @@ $: if (resolvedConfig.jobId) {
 	/>
 {/each}
 
-<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
+<TestJobLoader
+	workspaceOverride={workspace}
+	bind:this={testJobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+	on:done={(e) => {
+		outputs.loading.set(false)
+		outputs.jobId.set(e.detail.id)
+		outputs.result.set(e.detail.result)
+	}}
+/>
+
+<InitializeComponent {id} />
 
-<RunnableWrapper {outputs} {render} {componentInput} {id}>
+{#if render}
 	<div class="flex flex-col w-full h-full component-wrapper">
 		<div
 			class={twMerge(
@@ -77,4 +89,4 @@ $: if (resolvedConfig.jobId) {
 			/>
 		</div>
 	</div>
-</RunnableWrapper>
+{/if}

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

@@ -1,14 +1,12 @@
 import { SvelteComponent } 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<'jobidlogcomponent'> | undefined;
-        render: boolean;
         configuration: RichConfigurations;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/display/AppLogsComponent.svelte

@@ -1,72 +1,15 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import { initOutput } from '../../editor/appUtils';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import { initCss } from '../../utils';
-import LogViewer from '../../../LogViewer.svelte';
-import TestJobLoader from '../../../TestJobLoader.svelte';
-import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let componentInput;
-export let initializing = false;
-export let customCss = undefined;
-export let render;
-const { app, worldStore } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-initializing = false;
-let css = initCss($app.css?.logcomponent, customCss);
-let testJobLoader = undefined;
-let testIsLoading = false;
-let testJob = undefined;
+<script>import { Alert } from '../../../common';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 </script>
 
-<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
-
-{#each Object.keys(css ?? {}) as key (key)}
-	<ResolveStyle
-		{id}
-		{customCss}
-		{key}
-		bind:css={css[key]}
-		componentStyle={$app.css?.logcomponent}
-	/>
-{/each}
-
-<RunnableWrapper
-	on:started={(e) => {
-		testJobLoader?.watchJob(e.detail)
-	}}
-	{outputs}
-	{render}
-	{componentInput}
-	{id}
->
-	<div class="flex flex-col w-full h-full">
-		<div
-			class={twMerge(
-				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-				css?.header?.class,
-				'wm-log-header'
-			)}
-			style={css?.header?.style}
-		>
-			Logs
-		</div>
-		<div
-			style={css?.container?.style}
-			class={twMerge('p-2 grow overflow-auto', css?.container?.class, 'wm-log-container')}
-		>
-			<LogViewer
-				jobId={testJob?.id}
-				duration={testJob?.['duration_ms']}
-				mem={testJob?.['mem_peak']}
-				content={testJob?.logs}
-				isLoading={testIsLoading}
-				tag={testJob?.tag}
-			/>
-		</div>
-	</div>
-</RunnableWrapper>
+<AlignWrapper verticalAlignment="center" horizontalAlignment="center">
+	<Alert
+		title="Deprecated component"
+		documentationLink="https://www.windmill.dev/docs/apps/app_configuration_settings/log_display"
+		tooltip="See documentation of the new component:"
+		type="error"
+	>
+		This component is deprecated and has been removed. Please use the Log by Job Id component
+		instead.
+	</Alert>
+</AlignWrapper>

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

@@ -1,14 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
-    props: {
-        id: string;
-        componentInput: AppInput | undefined;
-        initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'logcomponent'> | undefined;
-        render: boolean;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/components/display/charts/AppAgCharts.svelte

@@ -1,6 +1,6 @@
 <script>import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { initCss } from '../../../utils';
-import { getContext, onMount } from 'svelte';
+import { getContext } from 'svelte';
 import { initConfig, initOutput } from '../../../editor/appUtils';
 import { components } from '../../../editor/component';
 import ResolveConfig from '../../helpers/ResolveConfig.svelte';
@@ -194,22 +194,32 @@ async function loadLibrary() {
         AgChartsInstance = community.AgCharts;
     }
 }
-onMount(() => {
+function initChart() {
+    try {
+        // Chart Options
+        const options = {
+            container: document.getElementById(`agchart-${id}`),
+            data: [],
+            series: []
+        };
+        chartInstance = AgChartsInstance?.create(options);
+    }
+    catch (error) {
+        console.error(error);
+    }
+}
+function destroyChart() {
+    if (chartInstance) {
+        chartInstance.destroy();
+        chartInstance = undefined;
+    }
+}
+$: if (render) {
+    destroyChart();
     loadLibrary().then(() => {
-        try {
-            // Chart Options
-            const options = {
-                container: document.getElementById(`agchart-${id}`),
-                data: [],
-                series: []
-            };
-            chartInstance = AgChartsInstance?.create(options);
-        }
-        catch (error) {
-            console.error(error);
-        }
+        initChart();
     });
-});
+}
 </script>
 
 {#if datasets}

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

@@ -141,6 +141,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 							}}
 							componentInput={action.componentInput}
 							verticalAlignment="center"
+							replaceCallback={true}
 							{controls}
 						/>
 					{:else if action.type == 'checkboxcomponent'}
@@ -198,6 +199,7 @@ const { selectedComponent, hoverStore, mode, connectingInput } = getContext('App
 						extraQueryParams={{
 							row
 						}}
+						replaceCallback={true}
 						componentInput={action.componentInput}
 					/>
 				{:else if action.type == 'checkboxcomponent'}

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

@@ -95,7 +95,7 @@ async function updateConfiguration() {
 				</div>
 			</Alert>
 		</div>
-	{:else}
+	{:else if $mode === 'dnd'}
 		<div class="m-16">
 			<Alert title="Parsing issues" type="error" size="xs">
 				<div class="flex flex-col items-start gap-2">

package/package/components/apps/components/helpers/HiddenComponent.svelte

@@ -18,7 +18,8 @@ onMount(() => {
 });
 let outputs = initOutput($worldStore, id, {
     result: result,
-    loading: false
+    loading: false,
+    jobId: undefined
 });
 </script>
 

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

@@ -39,6 +39,7 @@ export let allowConcurentRequests = false;
 export let noInitialize = false;
 export let overrideCallback = undefined;
 export let overrideAutoRefresh = false;
+export let replaceCallback = false;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, jobsById, noBackend, errorByComponent, mode, stateId, state, componentControl, initialized, selectedComponent, app, connectingInput, bgRuns } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 const iterContext = getContext('ListWrapperContext');
@@ -318,7 +319,7 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
         loading = false;
     }
 }
-export async function runComponent(noToast = false, inlineScriptOverride, setRunnableJobEditorPanel, dynamicArgsOverride, callbacks) {
+export async function runComponent(noToast = true, inlineScriptOverride, setRunnableJobEditorPanel, dynamicArgsOverride, callbacks) {
     try {
         if (cancellableRun && !dynamicArgsOverride) {
             await cancellableRun();
@@ -329,7 +330,7 @@ export async function runComponent(noToast = false, inlineScriptOverride, setRun
         }
     }
     catch (e) {
-        let error = e.body ?? e.message;
+        let error = e?.body ?? e?.message;
         updateResult({ error });
         $errorByComponent[id] = { error };
     }
@@ -454,7 +455,7 @@ onMount(() => {
                     },
                     error: (e) => {
                         console.error(e);
-                        reject();
+                        reject(e);
                     }
                 }).catch(reject);
             });
@@ -466,11 +467,20 @@ onMount(() => {
             return p;
         };
     }
-    $runnableComponents[id] = {
-        autoRefresh: (autoRefresh && recomputableByRefreshButton) || overrideAutoRefresh,
-        refreshOnStart: refreshOnStart,
-        cb: [...($runnableComponents[id]?.cb ?? []), cancellableRun]
-    };
+    if (replaceCallback) {
+        $runnableComponents[id] = {
+            autoRefresh: (autoRefresh && recomputableByRefreshButton) || overrideAutoRefresh,
+            refreshOnStart: refreshOnStart,
+            cb: [cancellableRun]
+        };
+    }
+    else {
+        $runnableComponents[id] = {
+            autoRefresh: (autoRefresh && recomputableByRefreshButton) || overrideAutoRefresh,
+            refreshOnStart: refreshOnStart,
+            cb: [...($runnableComponents[id]?.cb ?? []), cancellableRun]
+        };
+    }
     if (!noInitialize && !$initialized.initializedComponents.includes(id)) {
         $initialized.initializedComponents = [...$initialized.initializedComponents, id];
     }

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

@@ -35,6 +35,7 @@ declare const __propDef: {
         noInitialize?: boolean | undefined;
         overrideCallback?: (() => CancelablePromise<void>) | undefined;
         overrideAutoRefresh?: boolean | undefined;
+        replaceCallback?: boolean | undefined;
         setArgs?: ((value: any) => void) | undefined;
         invalidate?: ((key: string, error: string) => void) | undefined;
         validate?: ((key: string) => void) | undefined;

package/package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -9,6 +9,7 @@ export let noInitialize = false;
 export let hideRefreshButton = undefined;
 export let overrideCallback = undefined;
 export let overrideAutoRefresh = false;
+export let replaceCallback = false;
 export let id;
 export let result = undefined;
 export let initializing = true;
@@ -173,6 +174,7 @@ export async function handleSideEffect(success, errorMessage) {
 		{refreshOnStart}
 		{extraKey}
 		{hasChildrens}
+		{replaceCallback}
 		bind:loading
 		bind:this={runnableComponent}
 		fields={componentInput.fields}

package/package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         hideRefreshButton?: boolean | undefined;
         overrideCallback?: (() => CancelablePromise<void>) | undefined;
         overrideAutoRefresh?: boolean | undefined;
+        replaceCallback?: boolean | undefined;
         id: string;
         result?: any;
         initializing?: boolean | undefined;

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

@@ -1,4 +1,3 @@
-import { isPlainObject } from 'lodash';
 import { sendUserToast } from '../../../../toast';
 export function computeGlobalContext(world, extraContext = {}) {
     return {
@@ -41,35 +40,6 @@ function make_context_evaluator(eval_string, contextKeys, noReturn) {
     functorCache[cacheKey] = r;
     return r;
 }
-function isSerializable(obj) {
-    var isNestedSerializable;
-    function isPlain(val) {
-        return (val == null ||
-            typeof val === 'undefined' ||
-            typeof val === 'string' ||
-            typeof val === 'boolean' ||
-            typeof val === 'number' ||
-            Array.isArray(val) ||
-            isPlainObject(val));
-    }
-    if (!isPlain(obj)) {
-        return false;
-    }
-    for (var property in obj) {
-        if (obj.hasOwnProperty(property)) {
-            if (!isPlain(obj[property])) {
-                return false;
-            }
-            if (typeof obj[property] == 'object') {
-                isNestedSerializable = isSerializable(obj[property]);
-                if (!isNestedSerializable) {
-                    return false;
-                }
-            }
-        }
-    }
-    return true;
-}
 function hashCode(s) {
     var hash = 0, i, chr;
     if (s.length === 0)
@@ -89,12 +59,7 @@ export async function eval_like(text, context = {}, state, editor, controlCompon
             }
             target[key] = value;
             let o = worldStore?.newOutput('state', key, value);
-            if (isSerializable(value)) {
-                o?.set(value, true);
-            }
-            else {
-                o?.set('Not serializable object usable only by frontend scripts', true);
-            }
+            o?.set(value, true);
             return true;
         }
     });

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

@@ -10,7 +10,8 @@ export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
-const { app, worldStore, componentControl, mode } = getContext('AppViewerContext');
+export let onFileChange = undefined;
+const { app, worldStore, componentControl, mode, runnableComponents } = getContext('AppViewerContext');
 let acceptedFileTypes = undefined;
 let allowMultiple = undefined;
 let text = undefined;
@@ -28,6 +29,7 @@ async function handleChange(files) {
         });
     }
     outputs?.result.set(files);
+    onFileChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()));
 }
 let css = initCss($app.css?.fileinputcomponent, customCss);
 let fileInput = undefined;

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         configuration: RichConfigurations;
         customCss?: ComponentCustomCSS<'fileinputcomponent'> | undefined;
         render: boolean;
+        onFileChange?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -12,9 +12,10 @@ export let configuration;
 export let customCss = undefined;
 export let render;
 export let extraKey = undefined;
+export let onFileChange = undefined;
 let resolvedConfig = initConfig(components['s3fileinputcomponent'].initialData.configuration, configuration);
 let fileUploads = writable([]);
-const { app, worldStore, componentControl } = getContext('AppViewerContext');
+const { app, worldStore, componentControl, runnableComponents } = getContext('AppViewerContext');
 $componentControl[id] = {
     clearFiles: () => {
         outputs.result.set([]);
@@ -102,6 +103,7 @@ let forceDisplayUploads = false;
 		on:addition={(evt) => {
 			const curr = outputs.result.peak()
 			outputs.result.set(curr.concat(evt.detail))
+			onFileChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 		}}
 		on:deletion={(evt) => {
 			const curr = outputs.result.peak()

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'s3fileinputcomponent'> | undefined;
         render: boolean;
         extraKey?: string | undefined;
+        onFileChange?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;