windmill-components 1.309.7 → 1.352.0

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/AppMap.svelte

@@ -159,7 +159,7 @@ function updateRegionOutput() {
         }
     }
 }
-function handleSyncRegion() {
+async function handleSyncRegion() {
     const gridItem = findGridItem($app, id);
     if (!map || !gridItem) {
         return;
@@ -179,6 +179,7 @@ function handleSyncRegion() {
         gridItem.data.configuration.longitude.value = center[0];
         //@ts-ignore
         gridItem.data.configuration.latitude.value = center[1];
+        $app = $app;
     }
 }
 </script>
@@ -207,7 +208,7 @@ function handleSyncRegion() {
 {/each}
 
 {#if render}
-	<div class="relative h-full w-full">
+	<div class="relative h-full w-full component-wrapper">
 		<div
 			on:pointermove={updateRegionOutput}
 			on:wheel={updateRegionOutput}

package/package/components/apps/components/display/AppMenu.svelte

@@ -5,12 +5,12 @@ import { components } from '../../editor/component';
 import { initCss } from '../../utils';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
-import { AlignWrapper } from '../helpers';
 import { Button } from '../../../common';
 import { loadIcon } from '../icon';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import Menu from '../../../common/menu/MenuV2.svelte';
 import { AppButton } from '../buttons';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;

package/package/components/apps/components/display/AppPdf.svelte

@@ -189,17 +189,13 @@ let css = initCss($app.css?.pdfcomponent, customCss);
 <InitializeComponent {id} />
 
 {#if render}
-	<div class="relative flex flex-col w-full h-full bg-gray-100">
+	<div class="relative flex flex-col w-full h-full bg-gray-100 component-wrapper">
 		{#if source && zoom}
 			{#if pages?.length}
 				<div
 					bind:clientWidth={controlsWidth}
 					bind:clientHeight={controlsHeight}
-					class="flex {$mode !== 'preview'
-						? 'w-[calc(100%-2px)] top-[1px]'
-						: 'w-full top-0'} {wideView
-						? 'justify-center gap-14'
-						: '!justify-between'} overflow-x-auto bg-surface border mx-auto py-1"
+					class="flex flex-row w-full justify-between overflow-x-auto bg-surface border-b mx-auto py-1"
 				>
 					<div class="flex justify-start items-center px-2 text-secondary text-sm">
 						<Button
@@ -275,15 +271,11 @@ let css = initCss($app.css?.pdfcomponent, customCss);
 							disabled={!doc}
 							size="xs"
 							color="light"
-							variant="border"
 							title="Download PDF"
 							aria-label="Download PDF"
 							btnClasses="!font-medium !px-2"
 						>
-							{#if wideView}
-								<span class="mr-1"> Download </span>
-							{/if}
-							<Download size={16} />
+							<Download size={14} />
 						</Button>
 					</div>
 				</div>

package/package/components/apps/components/display/AppText.svelte

@@ -146,12 +146,17 @@ function autosize() {
 			<AlignWrapper {verticalAlignment}>
 				<textarea
 					class={twMerge(
-						'whitespace-pre-wrap !outline-none !border-0 !bg-transparent !resize-none !overflow-hidden !ring-0 !p-0 text-center',
+						'whitespace-pre-wrap !outline-none !border-0 !bg-transparent !resize-none !overflow-hidden !ring-0 !p-0',
 						css?.text?.class,
 						'wm-text',
 						classes,
 						getClasses(),
-						getClassesByType()
+						getClassesByType(),
+						horizontalAlignment === 'center'
+							? 'text-center'
+							: horizontalAlignment === 'right'
+							? 'text-right'
+							: 'text-left'
 					)}
 					on:pointerdown|stopPropagation
 					style={css?.text?.style}

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';
@@ -163,15 +163,17 @@ $: resolvedDatasetsValues = resolvedDatasets?.map((d) => {
     };
 });
 $: resolvedXData && resolvedDatasets && resolvedDatasetsValues && chartInstance && updateChart();
-$: result && updateChartByResult();
+$: result && chartInstance && updateChartByResult();
 function updateChartByResult() {
     if (!result || !chartInstance) {
         return;
     }
+    if (typeof result !== 'object') {
+        return;
+    }
     const options = {
         container: document.getElementById(`agchart-${id}`),
-        data: result?.['data'],
-        series: result?.['series']
+        ...result
     };
     outputs.result.set({
         data: result?.['data'],
@@ -192,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}
@@ -259,6 +271,7 @@ onMount(() => {
 		class={twMerge('w-full h-full', css?.container?.class, 'wm-agchart')}
 		style={css?.container?.style ?? ''}
 	>
+		<!-- {JSON.stringify(result)} -->
 		<div id={`agchart-${id}`} class="h-full w-full" />
 	</div>
 </RunnableWrapper>

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -13,13 +13,14 @@ import Portal from 'svelte-portal';
 import { sendUserToast } from '../../../../../toast';
 import DbExplorerCount from './DbExplorerCount.svelte';
 import AppAggridExplorerTable from '../table/AppAggridExplorerTable.svelte';
-import { RunnableWrapper } from '../../helpers';
 import InsertRowRunnable from './InsertRowRunnable.svelte';
 import DeleteRow from './DeleteRow.svelte';
 import InitializeComponent from '../../helpers/InitializeComponent.svelte';
 import { getSelectInput } from './queries/select';
 import DebouncedInput from '../../helpers/DebouncedInput.svelte';
 import { CancelablePromise } from '../../../../../gen';
+import RefreshButton from '../../helpers/RefreshButton.svelte';
+import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;
@@ -61,7 +62,7 @@ function computeInput(columnDefs, whereClause, resource) {
         input = getSelectInput(resource, resolvedConfig.type.configuration[resolvedConfig.type.selected].table, columnDefs, whereClause, resolvedConfig.type.selected);
     }, 1000);
 }
-const { app, worldStore, mode, selectedComponent, runnableComponents } = getContext('AppViewerContext');
+const { app, worldStore, mode, selectedComponent } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 let input = undefined;
 let quicksearch = '';
@@ -116,19 +117,6 @@ function updateOneOfConfiguration(oneOfConfiguration, resolvedConfig, patch) {
         };
     });
 }
-let isCallbackAdded = false;
-function addOnRecomputeCallback() {
-    $runnableComponents[id].cb = [
-        ...$runnableComponents[id].cb,
-        () => new CancelablePromise(async (resolve) => {
-            await dbExplorerCount?.computeCount(true);
-            aggrid?.clearRows();
-            resolve();
-        })
-    ];
-    isCallbackAdded = true;
-}
-$: $runnableComponents[id]?.cb && !isCallbackAdded && addOnRecomputeCallback();
 async function listTables() {
     let resource = resolvedConfig.type.configuration?.[resolvedConfig.type.selected]?.resource;
     if (!resource)
@@ -386,6 +374,7 @@ function onDelete(e) {
 let refreshCount = 0;
 $: hideSearch = resolvedConfig.hideSearch;
 $: hideInsert = resolvedConfig.hideInsert;
+let loading = false;
 </script>
 
 {#each Object.keys(components['dbexplorercomponent'].initialData.configuration) as key (key)}
@@ -440,34 +429,46 @@ $: hideInsert = resolvedConfig.hideInsert;
 	bind:runnableComponent
 	componentInput={input}
 	autoRefresh={false}
+	bind:loading
 	{render}
 	{id}
 	{outputs}
+	overrideCallback={() =>
+		new CancelablePromise(async (resolve) => {
+			await dbExplorerCount?.computeCount(true)
+
+			aggrid?.clearRows()
+			resolve()
+		})}
+	overrideAutoRefresh={true}
 >
 	<div class="h-full" bind:clientHeight={componentContainerHeight}>
 		{#if !(hideSearch === true && hideInsert === true)}
-			<div class="flex p-2 justify-between gap-4" bind:clientHeight={buttonContainerHeight}>
+			<div class="flex py-2 h-12 justify-between gap-4" bind:clientHeight={buttonContainerHeight}>
 				{#if hideSearch !== true}
 					<DebouncedInput
 						class="w-full max-w-[300px]"
 						type="text"
 						bind:value={quicksearch}
-						placeholder="Quicksearch"
+						placeholder="Search..."
 					/>
 				{/if}
-				{#if hideInsert !== true}
-					<Button
-						startIcon={{ icon: Plus }}
-						color="dark"
-						size="xs"
-						on:click={() => {
-							args = {}
-							insertDrawer?.openDrawer()
-						}}
-					>
-						Insert
-					</Button>
-				{/if}
+				<div class="flex flex-row gap-2">
+					<RefreshButton {id} {loading} />
+					{#if hideInsert !== true}
+						<Button
+							startIcon={{ icon: Plus }}
+							color="dark"
+							size="xs2"
+							on:click={() => {
+								args = {}
+								insertDrawer?.openDrawer()
+							}}
+						>
+							Insert
+						</Button>
+					{/if}
+				</div>
 			</div>
 		{/if}
 		{#if resolvedConfig.type.configuration?.[resolvedConfig?.type?.selected]?.resource && resolvedConfig.type.configuration?.[resolvedConfig?.type?.selected]?.table}
@@ -487,6 +488,7 @@ $: hideInsert = resolvedConfig.hideInsert;
 					containerHeight={componentContainerHeight - (buttonContainerHeight ?? 0)}
 					on:update={onUpdate}
 					on:delete={onDelete}
+					allowColumnDefsActions={false}
 					{actions}
 				/>
 			{/key}

package/package/components/apps/components/display/dbtable/InsertRow.svelte

@@ -1,5 +1,5 @@
 <script>import LightweightSchemaForm from '../../../../LightweightSchemaForm.svelte';
-import { ColumnIdentity, getFieldType } from './utils';
+import { ColumnIdentity } from './utils';
 import init, { parse_sql, parse_mysql, parse_bigquery, parse_snowflake, parse_mssql } from 'windmill-sql-datatype-parser-wasm';
 import wasmUrl from 'windmill-sql-datatype-parser-wasm/windmill_sql_datatype_parser_wasm_bg.wasm?url';
 init(wasmUrl);
@@ -18,13 +18,11 @@ $: fields = columnDefs
     const name = column.field;
     const isPrimaryKey = column.isprimarykey;
     const defaultValue = column.defaultValueNull ? null : column.defaultUserValue;
-    const fieldType = getFieldType(type, dbType);
     return {
         type,
         name,
         isPrimaryKey,
         defaultValue,
-        fieldType,
         identity: column.isidentity,
         nullable: column.isnullable
     };
@@ -77,9 +75,8 @@ async function builtSchema(fields, dbType) {
         };
         const parsedArg = columnDefs.find((arg) => arg.field === field.name);
         if (parsedArg) {
-            let typ = rawTypeToSchemaType(parseSQLArgs(parsedArg.datatype, dbType));
+            let typ = rawTypeToSchemaType(parseSQLArgs(parsedArg.datatype.split('(')[0].trim(), dbType));
             argSigToJsonSchemaType(typ, schemaProperty);
-            console.log('schemaProperty', schemaProperty, field.name, typ, parseSQLArgs(parsedArg.datatype, dbType));
         }
         if (field.defaultValue) {
             if (schemaProperty.type === 'number' || schemaProperty.type === 'integer') {
@@ -111,7 +108,7 @@ $: builtSchema(fields ?? [], dbType);
 export let isInsertable = false;
 $: if (schema) {
     const requiredFields = schema.required ?? [];
-    const filledFields = Object.keys(args).filter((key) => args[key] !== undefined && args[key] !== null);
+    const filledFields = Object.keys(args).filter((key) => args[key] !== undefined && args[key] !== null && args[key] !== '');
     isInsertable = requiredFields.every((field) => filledFields.includes(field));
 }
 </script>

package/package/components/apps/components/display/dbtable/queries/delete.js

@@ -4,7 +4,7 @@ function deleteWithAllValues(table, columns, dbType) {
     switch (dbType) {
         case 'postgresql': {
             const conditions = columns
-                .map((c, i) => `($${i + 1}::${c.datatype} IS NULL AND ${c.field} IS NULL OR ${c.field} = $${i + 1}::${c.datatype})`)
+                .map((c, i) => `($${i + 1}::text::${c.datatype} IS NULL AND ${c.field} IS NULL OR ${c.field} = $${i + 1}::text::${c.datatype})`)
                 .join('\n    AND ');
             query += `\nDELETE FROM ${table} \nWHERE ${conditions} RETURNING 1;`;
             return query;

package/package/components/apps/components/display/dbtable/queries/insert.js

@@ -1,22 +1,11 @@
 import { buildParameters, ColumnIdentity } from '../utils';
 import { getLanguageByResourceType } from '../utils';
-function mapDataTypeToDbType(dataType) {
-    if (dataType === 'integer') {
-        return 'int';
-    }
-    if (dataType === 'boolean') {
-        return 'bool';
-    }
-    return dataType;
-}
 function formatInsertValues(columns, dbType, startIndex = 1) {
     switch (dbType) {
         case 'mysql':
             return columns.map((c) => `:${c.field}`).join(', ');
         case 'postgresql':
-            return columns
-                .map((c, i) => `$${startIndex + i}::${mapDataTypeToDbType(c.datatype)}`)
-                .join(', ');
+            return columns.map((c, i) => `$${startIndex + i}::${c.datatype}`).join(', ');
         case 'ms_sql_server':
             return columns.map((c, i) => `@p${startIndex + i}`).join(', ');
         case 'snowflake':

package/package/components/apps/components/display/dbtable/queries/select.js

@@ -193,7 +193,7 @@ export function getSelectInput(resource, table, columnDefs, whereClause, dbType,
         },
         type: 'runnable',
         fieldType: 'object',
-        hideRefreshButton: false
+        hideRefreshButton: true
     };
     return getQuery;
 }

package/package/components/apps/components/display/dbtable/queries/update.js

@@ -11,9 +11,9 @@ function updateWithAllValues(table, column, columns, dbType) {
     switch (dbType) {
         case 'postgresql': {
             const conditions = columns
-                .map((c, i) => `($${i + 2}::${c.datatype} IS NULL AND ${c.field} IS NULL OR ${c.field} = $${i + 2}::${c.datatype})`)
+                .map((c, i) => `($${i + 2}::text::${c.datatype} IS NULL AND ${c.field} IS NULL OR ${c.field} = $${i + 2}::text::${c.datatype})`)
                 .join('\n    AND ');
-            query += `\nUPDATE ${table} SET ${column.field} = $1::${column.datatype} \nWHERE ${conditions}	RETURNING 1`;
+            query += `\nUPDATE ${table} SET ${column.field} = $1::text::${column.datatype} \nWHERE ${conditions}	RETURNING 1`;
             return query;
         }
         case 'mysql': {

package/package/components/apps/components/display/dbtable/utils.d.ts

@@ -73,7 +73,6 @@ export declare function formatSchema(dbSchema: {
     };
 };
 export declare function formatGraphqlSchema(schema: IntrospectionQuery): string;
-export declare function getFieldType(type: string, databaseType: DbType): "number" | "text" | "date" | "checkbox";
 export type DbType = 'mysql' | 'ms_sql_server' | 'postgresql' | 'snowflake' | 'bigquery';
 export declare function buildVisibleFieldList(columnDefs: ColumnDef[], dbType: DbType): string[];
 export declare function getLanguageByResourceType(name: string): Preview['language'];

package/package/components/apps/components/display/dbtable/utils.js

@@ -433,89 +433,6 @@ export function formatSchema(dbSchema) {
 export function formatGraphqlSchema(schema) {
     return printSchema(buildClientSchema(schema));
 }
-export function getFieldType(type, databaseType) {
-    switch (databaseType) {
-        case 'postgresql': {
-            const baseType = type.split('(')[0];
-            const validTextTypes = ['character varying', 'text'];
-            const validNumberTypes = ['integer', 'bigint', 'numeric', 'double precision'];
-            const validDateTypes = ['date', 'timestamp without time zone', 'timestamp with time zone'];
-            return validTextTypes.includes(baseType)
-                ? 'text'
-                : validNumberTypes.includes(baseType)
-                    ? 'number'
-                    : baseType === 'boolean'
-                        ? 'checkbox'
-                        : validDateTypes.includes(baseType)
-                            ? 'date'
-                            : 'text';
-        }
-        case 'mysql': {
-            const baseType = type.split('(')[0].toLowerCase(); // Ensure case-insensitive comparison
-            const validTextTypes = ['varchar', 'text', 'char', 'mediumtext', 'longtext', 'tinytext'];
-            const validNumberTypes = ['int', 'bigint', 'decimal', 'numeric', 'float', 'double'];
-            const validDateTypes = ['date', 'datetime', 'timestamp', 'time', 'year'];
-            return validTextTypes.includes(baseType)
-                ? 'text'
-                : validNumberTypes.includes(baseType)
-                    ? 'number'
-                    : baseType === 'boolean'
-                        ? 'checkbox'
-                        : validDateTypes.includes(baseType)
-                            ? 'date'
-                            : 'text';
-        }
-        case 'ms_sql_server': {
-            const baseType = type.split('(')[0].toLowerCase(); // Ensure case-insensitive comparison
-            const validTextTypes = ['varchar', 'text', 'char', 'nchar', 'nvarchar', 'ntext'];
-            const validNumberTypes = [
-                'int',
-                'bigint',
-                'decimal',
-                'numeric',
-                'float',
-                'real',
-                'smallint',
-                'tinyint'
-            ];
-            const validDateTypes = [
-                'date',
-                'datetime',
-                'datetime2',
-                'smalldatetime',
-                'datetimeoffset',
-                'time'
-            ];
-            return validTextTypes.includes(baseType)
-                ? 'text'
-                : validNumberTypes.includes(baseType)
-                    ? 'number'
-                    : baseType === 'bit'
-                        ? 'checkbox'
-                        : validDateTypes.includes(baseType)
-                            ? 'date'
-                            : 'text';
-        }
-        case 'snowflake': {
-            const baseType = type.split('(')[0].toLowerCase(); // Ensure case-insensitive comparison
-            const validTextTypes = ['varchar', 'text', 'char'];
-            const validNumberTypes = ['int', 'number', 'decimal', 'float', 'double'];
-            const validDateTypes = ['date', 'timestamp', 'time'];
-            return validTextTypes.includes(baseType)
-                ? 'text'
-                : validNumberTypes.includes(baseType)
-                    ? 'number'
-                    : baseType === 'boolean'
-                        ? 'checkbox'
-                        : validDateTypes.includes(baseType)
-                            ? 'date'
-                            : 'text';
-        }
-        default: {
-            return 'text';
-        }
-    }
-}
 export function buildVisibleFieldList(columnDefs, dbType) {
     // Filter out hidden columns to avoid counting the wrong number of rows
     return columnDefs