fix(frontend): sync columnDefs + improve columnDefs management (#3632)

* fix(frontend): sync columnDefs + improve columnDefs management * fix(frontend): sync columnDefs + improve columnDefs management * fix(frontend): improve code quality * fix(frontend): improve code quality * fix(frontend): remove useless warning while the config is loading * fix(frontend): Disable actions for database studio, since columnDefs are managed by the component * feat(frontend): Fix Database studio * feat(frontend): revert changes from Database Studio * feat(frontend): fix DB Studio refresh * fix(frontend): improve code quality * fix(frontend): improve code quality * fix(frontend): fix build * fix(frontend): fix wording * fix(frontend): fix aggrid
windmill-labs · May 1, 2024 · ca209e9 · ca209e9
1 parent aa6204f
commit ca209e9
Show file tree

Hide file tree

Showing 13 changed files with 319 additions and 236 deletions.
diff --git a/frontend/src/lib/components/apps/components/display/AppMap.svelte b/frontend/src/lib/components/apps/components/display/AppMap.svelte
@@ -201,7 +201,7 @@
 		}
 	}
 
-	function handleSyncRegion() {
+	async function handleSyncRegion() {
 		const gridItem = findGridItem($app, id)
 		if (!map || !gridItem) {
 			return
@@ -225,6 +225,8 @@
 			gridItem.data.configuration.longitude.value = center[0]
 			//@ts-ignore
 			gridItem.data.configuration.latitude.value = center[1]
+
+			$app = $app
 		}
 	}
 </script>

diff --git a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
@@ -111,7 +111,7 @@
 		}, 1000)
 	}
 
-	const { app, worldStore, mode, selectedComponent, runnableComponents } =
+	const { app, worldStore, mode, selectedComponent } =
 		getContext<AppViewerContext>('AppViewerContext')
 	const editorContext = getContext<AppEditorContext>('AppEditorContext')
 
@@ -205,24 +205,6 @@
 		})
 	}
 
-	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
 
@@ -626,11 +608,19 @@
 	noInitialize
 	bind:runnableComponent
 	componentInput={input}
-	autoRefresh={true}
+	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)}
@@ -678,6 +668,7 @@
 					containerHeight={componentContainerHeight - (buttonContainerHeight ?? 0)}
 					on:update={onUpdate}
 					on:delete={onDelete}
+					allowColumnDefsActions={false}
 					{actions}
 				/>
 			{/key}

diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
 	import { GridApi, createGrid, type IDatasource } from 'ag-grid-community'
-	import { isObject, sendUserToast } from '$lib/utils'
+	import { sendUserToast } from '$lib/utils'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../../types'
 
 	import type { TableAction, components } from '$lib/components/apps/editor/component'
-	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import { deepEqual } from 'fast-equals'
-
+	import SyncColumnDefs from './SyncColumnDefs.svelte'
 	import 'ag-grid-community/styles/ag-grid.css'
 	import 'ag-grid-community/styles/ag-theme-alpine.css'
 	import { twMerge } from 'tailwind-merge'
@@ -21,7 +20,6 @@
 	import type { ColumnDef } from '../dbtable/utils'
 	import AppAggridTableActions from './AppAggridTableActions.svelte'
 	import Popover from '$lib/components/Popover.svelte'
-	// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 
 	export let id: string
 	export let customCss: ComponentCustomCSS<'aggridcomponent'> | undefined = undefined
@@ -36,39 +34,15 @@
 	export let outputs: Record<string, Output<any>>
 	export let allowDelete: boolean
 	export let actions: TableAction[] = []
+	export let result: any[] | undefined = undefined
+	export let allowColumnDefsActions: boolean = true
 	let inputs = {}
 
 	const context = getContext<AppViewerContext>('AppViewerContext')
 	const { app, selectedComponent, componentControl, darkMode } = context
 
 	let css = initCss($app.css?.aggridcomponent, customCss)
 
-	// let result: any[] | undefined = undefined
-
-	// $: result && setValues()
-
-	// let value: any[] = Array.isArray(result)
-	// 	? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() }))
-	// 	: [{ error: 'input was not an array' }]
-
-	// let loaded = false
-	// async function setValues() {
-	// 	value = Array.isArray(result)
-	// 		? (result as any[]).map((x, i) => ({ ...x, __index: i.toString() }))
-	// 		: [{ error: 'input was not an array' }]
-	// 	if (api && loaded) {
-	// 		let selected = api.getSelectedNodes()
-	// 		if (selected && selected.length > 0 && resolvedConfig?.selectFirstRowByDefault != false) {
-	// 			let data = { ...selected[0].data }
-	// 			delete data['__index']
-	// 			outputs?.selectedRow?.set(data)
-	// 		}
-	// 	}
-	// 	if (!loaded) {
-	// 		loaded = true
-	// 	}
-	// }
-
 	let selectedRowIndex = -1
 
 	function toggleRow(row: any) {
@@ -182,7 +156,11 @@
 		})
 	})
 
-	function transformColumnDefs(columnDefs: any[]) {
+	function transformColumnDefs(columnDefs: any[] | undefined) {
+		if (!columnDefs) {
+			return []
+		}
+
 		const { isValid, errors } = validateColumnDefs(columnDefs)
 
 		if (!isValid) {
@@ -248,10 +226,17 @@
 	let firstRow: number = 0
 	let lastRow: number = 0
 
-	function validateColumnDefs(columnDefs: ColumnDef[]): { isValid: boolean; errors: string[] } {
+	function validateColumnDefs(columnDefs: ColumnDef[]): {
+		isValid: boolean
+		errors: string[]
+	} {
 		let isValid = true
 		const errors: string[] = []
 
+		if (!Array.isArray(columnDefs)) {
+			return { isValid: false, errors: ['Column definitions must be an array.'] }
+		}
+
 		// Validate each column definition
 		columnDefs.forEach((colDef, index) => {
 			// Check if 'field' property exists and is a non-empty string
@@ -405,7 +390,7 @@
 	/>
 {/each}
 
-{#if Array.isArray(resolvedConfig.columnDefs) && resolvedConfig.columnDefs.every(isObject)}
+<SyncColumnDefs {id} columnDefs={resolvedConfig.columnDefs} {result} {allowColumnDefsActions}>
 	<div
 		class={twMerge(
 			'flex flex-col h-full component-wrapper divide-y',
@@ -451,16 +436,7 @@
 			</div>
 		{/if}
 	</div>
-{:else if resolvedConfig.columnDefs != undefined}
-	<Alert title="Parsing issues" type="error" size="xs">
-		The columnDefs should be an array of objects, received:
-		<pre class="overflow-auto">
-				{JSON.stringify(resolvedConfig.columnDefs)}
-			</pre>
-	</Alert>
-{:else}
-	<Alert title="Parsing issues" type="error" size="xs">The columnDefs are undefined</Alert>
-{/if}
+</SyncColumnDefs>
 
 <style>
 	.ag-theme-alpine {

diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte
@@ -27,6 +27,7 @@
 	export let render: boolean
 	export let customCss: ComponentCustomCSS<'aggridinfinitecomponent'> | undefined = undefined
 	export let actions: TableAction[] | undefined = undefined
+
 	let runnableComponent: RunnableComponent | undefined = undefined
 
 	function clear() {
@@ -196,9 +197,10 @@
 			{resolvedConfig}
 			{customCss}
 			{outputs}
-			allowDelete={false}
+			{result}
 			{actions}
+			allowDelete={false}
 			bind:this={aggrid}
-		/></div
-	>
+		/>
+	</div>
 </RunnableWrapper>