From 1ad1d54c82b86358f5185aced3723f055fe07cbe Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Fri, 28 Feb 2025 16:26:07 +0530
Subject: [PATCH] Refactored the code and added conditions for tabs, modal and
 kanban components as parent component.

---
 .../useCallbackActions.js                     | 27 ++----------
 .../_stores/slices/leftSideBarSlice.js        | 43 +++++++++++++++++++
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js
index 7067cd540d..6fea25c151 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js
@@ -30,30 +30,11 @@ const useCallbackActions = () => {
     return toast.success('Copied to the clipboard', { position: 'top-center' });
   };
 
-  const autoScrollTo = (id) => {
-    setSelectedComponents([id]);
-    const target = document.getElementById(id);
-    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-  };
-
   const handleAutoScrollToComponent = (data) => {
-    const currentPageComponents = useStore.getState().getCurrentPageComponents();
-    const component = currentPageComponents?.[data.id];
-
-    let parentId = component?.component?.parent;
-    if (parentId) {
-      const regex = /-\d+$/;
-      if (regex.test(parentId)) {
-        parentId = parentId.replace(regex, ''); // To get parentId without tab index if parent type is Tab
-      }
-      const parentType = currentPageComponents?.[parentId]?.component?.component;
-      if (parentType && (parentType === 'Modal' || parentType === 'Tabs')) {
-        autoScrollTo(parentId); // To scroll to parent component if parent type is Modal or Tabs
-        return;
-      }
-    }
-
-    autoScrollTo(data.id);
+    const computedComponentId = useStore.getState().getComponentIdToAutoScroll(data.id);
+    setSelectedComponents([computedComponentId]);
+    const target = document.getElementById(computedComponentId);
+    target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
   };
 
   const callbackActions = [
diff --git a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
index 98decac629..77e8b5f284 100644
--- a/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
@@ -37,4 +37,47 @@ export const createLeftSideBarSlice = (set, get) => ({
       toggleLeftSidebar(true);
     }
   },
+  getComponentIdToAutoScroll: (componentId) => {
+    const { getCurrentPageComponents, getAllExposedValues } = get();
+    const currentPageComponents = getCurrentPageComponents();
+    const component = currentPageComponents?.[componentId];
+    let parentId = component?.component?.parent;
+
+    if (!parentId) {
+      return componentId;
+    }
+
+    // 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;
+    }
+
+    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;
+  },
 });