From c696f3b6cfe60de2aede098f98230ddfed183a86 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 24 Feb 2023 15:09:38 +0100
Subject: [PATCH] flatten

---
 .../apps/editor/SubGridEditor.svelte          |  4 +---
 .../apps/editor/component/components.ts       |  4 ++--
 .../InlineScriptEditorRec.svelte              |  5 ++---
 frontend/src/lib/components/apps/types.ts     | 19 ++++++++++---------
 frontend/src/lib/components/apps/utils.ts     | 11 +----------
 5 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 1e8dabe5a3..02ffba5774 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -6,11 +6,9 @@
 	import type { AppEditorContext, GridItem } from '../types'
 	import Component from './component/Component.svelte'
 
-	export let subGrid: GridItem[]
 	export let containerHeight: number
 	export let noPadding = false
-	export let parentId: string
-	export let index: number
+	export let id: string
 
 	const dispatch = createEventDispatcher()
 
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 034d6aa07d..a87cc2f03a 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -175,7 +175,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 			},
 			componentInput: undefined,
 			card: false,
-			subGrids: [[]]
+			subgrids: 1
 		}
 	},
 	textcomponent: {
@@ -1027,7 +1027,7 @@ Hello \${ctx.username}
 			},
 			componentInput: undefined,
 			card: false,
-			subGrids: [[], []],
+			subgrids: 2,
 			tabs: ['First tab', 'Second tab']
 		}
 	},
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
index e51316d901..cd352557a5 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorRec.svelte
@@ -9,7 +9,6 @@
 	export let selectedScriptComponentId: string | undefined = undefined
 </script>
 
-{gridItems}
 {#if gridItems}
 	{#each gridItems as gridComponent, index (index)}
 		{#if gridComponent.data}
@@ -19,10 +18,10 @@
 					bind:componentInput={gridComponent.data.componentInput}
 				/>
 			{:else if gridComponent.data.subGrids}
-				<!-- <InlineScriptEditorList
+				<InlineScriptEditorList
 					{selectedScriptComponentId}
 					bind:subgrids={gridComponent.data.subGrids}
-				/> -->
+				/>
 			{/if}
 
 			{#if gridComponent.data.type === 'tablecomponent'}
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 547594602a..8ae0489827 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -42,14 +42,14 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	configuration: Record<
 		string,
 		GeneralAppInput &
-			(
-				| StaticAppInput
-				| ConnectedAppInput
-				| UserAppInput
-				| RowAppInput
-				| EvalAppInput
-				| UploadAppInput
-			)
+		(
+			| StaticAppInput
+			| ConnectedAppInput
+			| UserAppInput
+			| RowAppInput
+			| EvalAppInput
+			| UploadAppInput
+		)
 	>
 	card: boolean | undefined
 	customCss?: ComponentCustomCSS
@@ -59,7 +59,7 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	 * *For example when the component has a popup like `Select`*
 	 */
 	softWrap?: boolean
-	subGrids?: GridItem[][]
+	subgrids?: number
 }
 
 export type ComponentSet = {
@@ -99,6 +99,7 @@ export type App = {
 		fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
 	}>
 	css?: Record<'viewer' | 'grid' | AppComponent['type'], ComponentCustomCSS>
+	subgrids?: Record<string, GridItem[]>
 }
 
 export type ConnectingInput = {
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 126e592387..0556219832 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -16,16 +16,7 @@ import type { Output } from './rx'
 import type { App, GridItem } from './types'
 import { getNextId } from '../flows/flowStateUtils'
 
-export function deleteComponent(parentItems: GridItem[] | undefined, component: AppComponent, app: App, staticOutputs: Record<string, any>, runnableComponents: Record<string, any>) {
-	(component.subGrids ?? []).forEach((subgrid) => {
-		if (subgrid) {
-			subgrid.forEach((item) => {
-				if (item.data) {
-					deleteComponent(undefined, item.data, app, staticOutputs, runnableComponents)
-				}
-			})
-		}
-	})
+export function deleteComponent(subgrid: string | undefined, component: AppComponent, app: App, staticOutputs: Record<string, any>, runnableComponents: Record<string, any>) {
 	if (parentItems) {
 		let index = parentItems.findIndex((item) => item.data?.id === component.id)
 		if (index != -1) {