From 91ff545d4efd764f1c272309a37ec558492d37c4 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Tue, 17 Oct 2023 13:44:25 +0530
Subject: [PATCH] fixes: deleting children components via selecto (#7915)

---
 frontend/src/_helpers/appUtils.js | 38 +++++++++++++++++++------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 3e47bc26ba..52752760c7 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -1700,24 +1700,34 @@ export function snapToGrid(canvasWidth, x, y) {
   return [snappedX, snappedY];
 }
 export const removeSelectedComponent = (pageId, newDefinition, selectedComponents, updateAppDefinition) => {
-  selectedComponents.forEach((component) => {
-    let childComponents = [];
+  const toDeleteComponents = [];
 
-    if (newDefinition.pages[pageId].components[component.id]?.component?.component === 'Tabs') {
-      childComponents = Object.keys(newDefinition.pages[pageId].components).filter((key) =>
-        newDefinition.pages[pageId].components[key].parent?.startsWith(component.id)
-      );
-    } else {
-      childComponents = Object.keys(newDefinition.pages[pageId].components).filter(
-        (key) => newDefinition.pages[pageId].components[key].parent === component.id
-      );
+  if (selectedComponents.length < 1) return getSelectedText();
+
+  const { components: allComponents } = newDefinition.pages[pageId];
+
+  const findAllChildComponents = (componentId) => {
+    if (!toDeleteComponents.includes(componentId)) {
+      toDeleteComponents.push(componentId);
+
+      // Find the children of this component
+      const children = getAllChildComponents(allComponents, componentId).map((child) => child.componentId);
+
+      if (children.length > 0) {
+        // Recursively find children of children
+        children.forEach((child) => {
+          findAllChildComponents(child);
+        });
+      }
     }
+  };
 
-    childComponents.forEach((componentId) => {
-      delete newDefinition.pages[pageId].components[componentId];
-    });
+  selectedComponents.forEach((component) => {
+    findAllChildComponents(component.id);
+  });
 
-    delete newDefinition.pages[pageId].components[component.id];
+  toDeleteComponents.forEach((componentId) => {
+    delete newDefinition.pages[pageId].components[componentId];
   });
 
   updateAppDefinition(newDefinition, { componentDefinitionChanged: true, componentDeleted: true });