From 60d686b2bf4460ef407eb803ea4456a548f48a52 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 12 Apr 2024 16:25:30 +0200
Subject: [PATCH] Fix aggrid 2 (#3548)

* fix(frontend): Correctly handle undefined actions

* fix(frontend): Correctly handle undefined actions

* fix(frontend): Correctly handle undefined actions

* fix(frontend): add missinng migration code
---
 .../settingsPanel/ComponentPanel.svelte       |   2 +-
 .../editor/settingsPanel/TableActions.svelte  | 166 ++++++++++--------
 2 files changed, 93 insertions(+), 75 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 8ae4b439ec..9d307dc23b 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/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} />
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
index 735f5aeeb6..8372ace64e 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+++ b/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}