From 6dd933fa63c77df1047cbccc1eec1459fdd65cb1 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 3 Mar 2025 14:18:22 +0530
Subject: [PATCH] Implemented logic for handling nested components.

---
 .../_stores/slices/leftSideBarSlice.js        | 108 ++++++++++++------
 1 file changed, 73 insertions(+), 35 deletions(-)

diff --git a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
index 77e8b5f284..3cc424f790 100644
--- a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
@@ -38,46 +38,84 @@ export const createLeftSideBarSlice = (set, get) => ({
     }
   },
   getComponentIdToAutoScroll: (componentId) => {
-    const { getCurrentPageComponents, getAllExposedValues } = get();
+    const { getCurrentPageComponents, getAllExposedValues, modalsOpenOnCanvas } = get();
     const currentPageComponents = getCurrentPageComponents();
-    const component = currentPageComponents?.[componentId];
-    let parentId = component?.component?.parent;
 
-    if (!parentId) {
-      return componentId;
+    let candidate = componentId;
+    let current = componentId;
+    const visited = new Set();
+    let closedUnusedModals = false; // Flag to check if we have closed all unused modals on the canvas
+
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      if (visited.has(current)) break;
+      visited.add(current);
+
+      const component = currentPageComponents?.[current];
+      if (!component) break;
+
+      const parentId = component?.component?.parent;
+      if (!parentId) break;
+
+      let isParentInactive = false;
+      let newCandidate = candidate;
+
+      // If the component exists inside a tab component
+      const regForTabs = /-(?!\d{12}$)\d+$/; // Parent id for tabs follow the format 'id-index' and index is not UUIDv4 id segment
+      if (regForTabs.test(parentId)) {
+        const reg = /-(\d+)$/;
+        const tabIndex = Number(parentId.match(reg)[1]); // Tab index inside which the component exists
+
+        const tabId = parentId.replace(regForTabs, ''); // Extract tab id from parent id
+        const { currentTab } = getAllExposedValues().components[tabId];
+        const activeTabIndex = Number(currentTab);
+
+        if (tabIndex !== activeTabIndex) {
+          isParentInactive = true;
+          newCandidate = tabId;
+        }
+      }
+
+      const parentExposedValues = getAllExposedValues().components[parentId];
+
+      // If the component exists inside a modal component
+      if (currentPageComponents?.[parentId]?.component?.component === 'Modal') {
+        // Close all modals that are open on the canvas until we get to the parent modal
+        if (modalsOpenOnCanvas.length > 0 && !closedUnusedModals) {
+          if (!modalsOpenOnCanvas.includes(parentId)) {
+            modalsOpenOnCanvas.map((modalId) => getAllExposedValues().components[modalId]?.close());
+          } else {
+            const idx = modalsOpenOnCanvas.indexOf(parentId);
+            modalsOpenOnCanvas.slice(idx + 1).map((modalId) => getAllExposedValues().components[modalId]?.close());
+          }
+          closedUnusedModals = true;
+        }
+
+        if (!parentExposedValues?.show) {
+          isParentInactive = true;
+          newCandidate = parentId;
+        }
+      }
+
+      // If the component exists inside the kanban component's modal
+      if (parentId.endsWith('-modal')) {
+        isParentInactive = true;
+        newCandidate = parentId.replace(/-modal$/, ''); // Extract kanban id from parent id
+      }
+
+      if (isParentInactive) {
+        candidate = newCandidate;
+        current = newCandidate;
+      } else {
+        current = parentId;
+      }
     }
 
-    // If the component exists inside a tab component
-    const regForTabs = /-(?!\d{12}$)\d+$/; // Parent id for tabs follow the format 'id-index' and index is not UUIDv4 id segment
-    if (regForTabs.test(parentId)) {
-      const reg = /-(\d+)$/;
-      const tabIndex = Number(parentId.match(reg)[1]); // Tab index inside which the component exists
-
-      parentId = parentId.replace(regForTabs, ''); // Extract tab id from parent id
-      const { currentTab } = getAllExposedValues().components[parentId];
-      const activeTabIndex = Number(currentTab);
-
-      if (tabIndex !== activeTabIndex) {
-        return parentId;
-      } else return componentId;
+    // Close all modals that are open on the canvas if the component is not inside any of the modals
+    if (modalsOpenOnCanvas.length > 0 && !closedUnusedModals) {
+      modalsOpenOnCanvas.map((modalId) => getAllExposedValues().components[modalId]?.close());
     }
 
-    const parentExposedValues = getAllExposedValues().components[parentId];
-    const parentComponent = currentPageComponents?.[parentId];
-
-    // If the component exists inside a modal component
-    if (parentComponent?.component?.component === 'Modal') {
-      if (parentExposedValues?.show) {
-        return componentId;
-      } else return parentId;
-    }
-
-    // If the component exists inside the kanban component's modal
-    if (parentId.endsWith('-modal')) {
-      return parentId.replace(/-modal$/, ''); // Extract kanban id from parent id
-    }
-
-    // If the component exists inside any other component
-    return componentId;
+    return candidate;
   },
 });