From 742ee3a5181fdcfba1f59889a8d99347fd0c4610 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 10 May 2023 20:53:52 +0200
Subject: [PATCH] feat(frontend): allow copy pasting nested containers

---
 .../component/ComponentNavigation.svelte      | 37 ++++++++++++++-----
 .../(logged)/flows/get/[...path]/+page.svelte |  2 +-
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
index 75816cd942..760deec2d9 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
@@ -6,7 +6,7 @@
 		getAllSubgridsAndComponentIds,
 		insertNewGridItem
 	} from '../appUtils'
-	import type { AppEditorContext, AppViewerContext, GridItem } from '../../types'
+	import type { AppEditorContext, AppViewerContext, FocusedGrid, GridItem } from '../../types'
 	import { push } from '$lib/history'
 	import { sendUserToast } from '$lib/utils'
 	import { gridColumns } from '../../gridUtils'
@@ -197,14 +197,8 @@
 		} else if (copiedGridItems) {
 			let nitems: string[] = []
 			for (let copiedGridItem of copiedGridItems) {
-				nitems.push(
-					insertNewGridItem(
-						$app,
-						(id) => ({ ...copiedGridItem.data, id }),
-						$focusedGrid,
-						Object.fromEntries(gridColumns.map((column) => [column, copiedGridItem[column]]))
-					)
-				)
+				let newItem = copyComponent(copiedGridItem, $focusedGrid)
+				newItem && nitems.push(newItem)
 			}
 			$selectedComponent = nitems.map((x) => x)
 		}
@@ -212,6 +206,31 @@
 		$app = $app
 	}
 
+	function copyComponent(item: GridItem, parentGrid: FocusedGrid | undefined, doNotVisit?: string) {
+		if (item.id === doNotVisit) {
+			return
+		}
+		const newItem = insertNewGridItem(
+			$app,
+			(id) => ({ ...item.data, id }),
+			parentGrid,
+			Object.fromEntries(gridColumns.map((column) => [column, item[column]]))
+		)
+
+		if ($app.subgrids && item.data.numberOfSubgrids) {
+			for (let i = 0; i < item.data.numberOfSubgrids; i++) {
+				$app.subgrids[`${item.id}-${i}`].forEach((subgridItem) => {
+					copyComponent(
+						subgridItem,
+						{ parentComponentId: newItem, subGridIndex: i },
+						doNotVisit ?? newItem
+					)
+				})
+			}
+		}
+		return newItem
+	}
+
 	function keydown(event: KeyboardEvent) {
 		// Ignore keydown events if the user is typing in monaco
 		let classes = event.target?.['className']
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 3fd65ab3ec..8f86b1b509 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -314,7 +314,7 @@
 				<FlowViewer {flow} noSummary={true} />
 
 				<h2 bind:this={webhook} class="mt-10 text-gray-700 pb-1 mb-3 border-b"
-					>Webhoosk<Tooltip>
+					>Webhooks<Tooltip>
 						Pass the input as a json payload, the token as a Bearer token or as query arg
 						`?token=XXX` and pass as header: 'Content-Type: application/json'. The webhook also
 						support 'x-www-form-urlencoded' encoded payloads <a