fix(frontend): add missinng migration code

frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

@@ -36,7 +36,7 @@
 	export let initializing: boolean | undefined = undefined
 	export let render: boolean
 	export let customCss: ComponentCustomCSS<'aggridcomponent'> | undefined = undefined
-	export let actions: TableAction[] = []
+	export let actions: TableAction[] | undefined = undefined
 
 	const context = getContext<AppViewerContext>('AppViewerContext')
 
@@ -198,7 +198,7 @@
 
 	function actionRenderer(params) {
 		const { rowIndex, data: row } = params
-		if (rowIndex === -1) {
+		if (rowIndex === -1 || actions == undefined || actions?.length == 0) {
 			return null
 		}
 
@@ -261,7 +261,7 @@
 						: []
 
 				// Add the action column if actions are defined
-				if (actions.length > 0) {
+				if (actions && actions.length > 0) {
 					columnDefs.push({
 						headerName: 'Actions',
 						cellRenderer: actionRenderer,
@@ -385,7 +385,7 @@
 					: []
 
 			// Add the action column if actions are defined
-			if (actions.length > 0) {
+			if (actions && actions.length > 0) {
 				columnDefs.push({
 					headerName: 'Actions',
 					cellRenderer: actionRenderer,

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -184,7 +184,10 @@
 					if (c.type === 'tablecomponent') {
 						r.push(...c.actionButtons.map((x) => ({ input: x.componentInput, id: x.id })))
 					}
-					if (c.type === 'aggridcomponent' || c.type === 'aggridcomponentee') {
+					if (
+						(c.type === 'aggridcomponent' || c.type === 'aggridcomponentee') &&
+						Array.isArray(c.actions)
+					) {
 						r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })))
 					}
 					if (c.type === 'menucomponent') {

frontend/src/lib/components/apps/editor/AppInputs.svelte

@@ -33,9 +33,11 @@
 			<div>
 				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
 				<div class="ml-4 mt-4">
-					{#each gridItem.data.actions as actionButton (actionButton.id)}
-						<AppComponentInput bind:component={actionButton.data} {resourceOnly} />
-					{/each}
+					{#if Array.isArray(gridItem.data.actions)}
+						{#each gridItem.data.actions as actionButton (actionButton.id)}
+							<AppComponentInput bind:component={actionButton.data} {resourceOnly} />
+						{/each}
+					{/if}
 				</div>
 			</div>
 		{:else}

frontend/src/lib/components/apps/editor/SettingsPanel.svelte

@@ -89,7 +89,10 @@
 						)
 					}
 
-					if (parent.data.type === 'aggridcomponent' || parent.data.type === 'aggridcomponentee') {
+					if (
+						(parent.data.type === 'aggridcomponent' || parent.data.type === 'aggridcomponentee') &&
+						Array.isArray(parent.data.actions)
+					) {
 						parent.data.actions = parent.data.actions.filter(
 							(x) => x.id !== tableActionSettings?.item.id
 						)

frontend/src/lib/components/apps/editor/appUtils.ts

@@ -74,7 +74,7 @@ export function dfs(
 			return [item.id, id]
 		} else if (
 			(item.data.type == 'aggridcomponent' || item.data.type == 'aggridcomponentee') &&
-			item.data.actions.find((x) => id == x.id)
+			item.data.actions?.find((x) => id == x.id)
 		) {
 			return [item.id, id]
 		} else {
@@ -170,7 +170,10 @@ export function allsubIds(app: App, parentId: string): string[] {
 			if (item.data.type === 'tablecomponent') {
 				subIds.push(...item.data.actionButtons?.map((x) => x.id))
 			}
-			if (item.data.type === 'aggridcomponent' || item.data.type === 'aggridcomponentee') {
+			if (
+				item.data.type === 'aggridcomponent' ||
+				(item.data.type === 'aggridcomponentee' && Array.isArray(item.data.actions))
+			) {
 				subIds.push(...item.data.actions?.map((x) => x.id))
 			}
 			if (item.data.type === 'menucomponent') {
@@ -514,7 +517,10 @@ export function getAllGridItems(app: App): GridItem[] {
 		.map((x) => {
 			if (x?.data?.type === 'tablecomponent') {
 				return [x, ...x?.data?.actionButtons?.map((x) => ({ data: x, id: x.id }))]
-			} else if (x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') {
+			} else if (
+				(x?.data?.type === 'aggridcomponent' || x?.data?.type === 'aggridcomponentee') &&
+				Array.isArray(x?.data?.actions)
+			) {
 				return [x, ...x?.data?.actions?.map((x) => ({ data: x, id: x.id }))]
 			} else if (x?.data?.type === 'menucomponent') {
 				return [x, ...x?.data?.menuItems?.map((x) => ({ data: x, id: x.id }))]

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -351,7 +351,7 @@
 				bind:initializing
 				componentInput={component.componentInput}
 				customCss={component.customCss}
-				actions={component.actions}
+				actions={component.actions ?? []}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponentee'}
@@ -362,7 +362,7 @@
 				bind:initializing
 				componentInput={component.componentInput}
 				customCss={component.customCss}
-				actions={component.actions}
+				actions={component.actions ?? []}
 				{render}
 			/>
 		{:else if component.type === 'textcomponent'}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte

@@ -34,7 +34,7 @@
 	{/each}
 {/if}
 
-{#if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee'}
+{#if (gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee') && Array.isArray(gridItem.data.actions)}
 	{#each gridItem.data.actions as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -365,7 +365,7 @@
 				bind:panes={componentSettings.item.data.panes}
 				bind:component={componentSettings.item.data}
 			/>
-		{:else if componentSettings.item.data.type === 'aggridcomponent' && Array.isArray(componentSettings.item.data.actions)}
+		{:else if componentSettings.item.data.type === 'aggridcomponent'}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
 		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />

frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte

@@ -3,21 +3,34 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { getNextId } from '$lib/components/flows/idUtils'
 	import { classNames } from '$lib/utils'
-	import { getContext } from 'svelte'
+	import { getContext, onMount } from 'svelte'
 	import type { AppViewerContext, BaseAppComponent } from '../../types'
 	import { appComponentFromType } from '../appUtils'
 	import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component'
 	import PanelSection from './common/PanelSection.svelte'
 	import { Inspect, List, ToggleRightIcon, Trash } from 'lucide-svelte'
 
-	export let components: (BaseAppComponent &
-		(ButtonComponent | CheckboxComponent | SelectComponent))[]
+	export let components:
+		| (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[]
+		| undefined
+
+	// Migration code:
+	onMount(() => {
+		if (components === undefined) {
+			components = []
+		}
+	})
+
 	export let id: string
 
 	const { selectedComponent, app, errorByComponent } =
 		getContext<AppViewerContext>('AppViewerContext')
 
 	function addComponent(typ: 'buttoncomponent' | 'checkboxcomponent' | 'selectcomponent') {
+		if (!components) {
+			return
+		}
+
 		const actionId = getNextId(components.map((x) => x.id.split('_')[1]))
 
 		const newComponent = {
@@ -29,6 +42,9 @@
 	}
 
 	function deleteComponent(cid: string) {
+		if (!components) {
+			return
+		}
 		components = components.filter((x) => x.id !== cid)
 
 		delete $errorByComponent[cid]
@@ -38,77 +54,79 @@
 	}
 </script>
 
-<PanelSection title={`Table Actions`}>
-	{#if components.length == 0}
-		<span class="text-xs text-tertiary">No action buttons</span>
-	{/if}
-	{#each components as component}
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			class={classNames(
-				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
-				'bg-surface hover:bg-surface-hover focus:border-primary text-secondary',
-				$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
-			)}
-			on:click={() => {
-				$selectedComponent = [component.id]
-			}}
-			on:keypress
-		>
-			<Badge color="dark-indigo">
-				{component.id}
-			</Badge>
+{#if components}
+	<PanelSection title={`Table Actions`}>
+		{#if components.length == 0}
+			<span class="text-xs text-tertiary">No action buttons</span>
+		{/if}
+		{#each components as component}
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class={classNames(
+					'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+					'bg-surface hover:bg-surface-hover focus:border-primary text-secondary',
+					$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
+				)}
+				on:click={() => {
+					$selectedComponent = [component.id]
+				}}
+				on:keypress
+			>
+				<Badge color="dark-indigo">
+					{component.id}
+				</Badge>
 
-			<div>
-				{#if component.type == 'buttoncomponent'}
-					Button
-				{:else if component.type == 'selectcomponent'}
-					Select
-				{:else if component.type == 'checkboxcomponent'}
-					Toggle
-				{/if}
-			</div>
-			<div>
-				<Button
-					variant="border"
-					color="red"
-					on:click={() => deleteComponent(component.id)}
-					startIcon={{ icon: Trash }}
-					iconOnly
-				/>
+				<div>
+					{#if component.type == 'buttoncomponent'}
+						Button
+					{:else if component.type == 'selectcomponent'}
+						Select
+					{:else if component.type == 'checkboxcomponent'}
+						Toggle
+					{/if}
+				</div>
+				<div>
+					<Button
+						variant="border"
+						color="red"
+						on:click={() => deleteComponent(component.id)}
+						startIcon={{ icon: Trash }}
+						iconOnly
+					/>
+				</div>
 			</div>
+		{/each}
+		<div class="w-full flex gap-2">
+			<Button
+				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				wrapperClasses="w-full"
+				color="light"
+				variant="border"
+				on:click={() => addComponent('buttoncomponent')}
+				title="Add Button"
+			>
+				+ <Inspect size={14} />
+			</Button>
+			<Button
+				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				wrapperClasses="w-full"
+				color="light"
+				variant="border"
+				on:click={() => addComponent('checkboxcomponent')}
+				title="Add Toggle"
+			>
+				+ <ToggleRightIcon size={14} />
+			</Button>
+			<Button
+				btnClasses="gap-1 flex items-center text-sm text-tertiary"
+				wrapperClasses="w-full"
+				color="light"
+				variant="border"
+				on:click={() => addComponent('selectcomponent')}
+				title="Add Select"
+			>
+				+ <List size={14} />
+			</Button>
 		</div>
-	{/each}
-	<div class="w-full flex gap-2">
-		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
-			wrapperClasses="w-full"
-			color="light"
-			variant="border"
-			on:click={() => addComponent('buttoncomponent')}
-			title="Add Button"
-		>
-			+ <Inspect size={14} />
-		</Button>
-		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
-			wrapperClasses="w-full"
-			color="light"
-			variant="border"
-			on:click={() => addComponent('checkboxcomponent')}
-			title="Add Toggle"
-		>
-			+ <ToggleRightIcon size={14} />
-		</Button>
-		<Button
-			btnClasses="gap-1 flex items-center text-sm text-tertiary"
-			wrapperClasses="w-full"
-			color="light"
-			variant="border"
-			on:click={() => addComponent('selectcomponent')}
-			title="Add Select"
-		>
-			+ <List size={14} />
-		</Button>
-	</div>
-</PanelSection>
+	</PanelSection>
+{/if}

frontend/src/lib/components/apps/utils.ts

@@ -292,7 +292,7 @@ export function getAllScriptNames(app: App): string[] {
 		}
 
 		if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee') {
-			gridItem.data.actions.forEach((actionButton) => {
+			gridItem.data.actions?.forEach((actionButton) => {
 				if (actionButton.componentInput?.type === 'runnable') {
 					if (actionButton.componentInput.runnable?.type === 'runnableByName') {
 						acc.push(actionButton.componentInput.runnable.name)