From 026c7cfd12004663525d667e4c5f8cba568171bc Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 24 Oct 2024 13:10:18 +0530
Subject: [PATCH] Fixes tabs copy pasting and component deletion inside
 container

---
 frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js      | 9 ++++++---
 frontend/src/AppBuilder/Viewer/DesktopHeader.jsx         | 7 ++-----
 .../src/AppBuilder/_stores/slices/componentsSlice.js     | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index 519f43f931..6baca33644 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -211,6 +211,7 @@ export const getAllChildComponents = (allComponents, parentId) => {
 
     if (componentParentId === parentId) {
       let childComponent = deepClone(allComponents[componentId]);
+      childComponent.componentId = componentId;
       childComponents.push(childComponent);
 
       // Recursively find children of the current child component
@@ -240,7 +241,10 @@ export const copyComponents = ({ isCut = false, isCloning = false }) => {
   const currentPageId = useStore.getState().getCurrentPageId();
   // if parent is selected, then remove the parent from the selected components
   const filteredSelectedComponents = selectedComponents.filter((selectedComponent) => {
-    const parentComponentId = selectedComponent?.component?.parent;
+    const parentComponentId = isChildOfTabsOrCalendar(selectedComponent, allComponents)
+      ? selectedComponent.component.parent.split('-').slice(0, -1).join('-')
+      : selectedComponent?.component?.parent;
+
     if (parentComponentId) {
       // Check if the parent component is also selected
       const isParentSelected = selectedComponents.some((comp) => comp.id === parentComponentId);
@@ -327,8 +331,7 @@ const updateComponentLayout = (components, parentId, isCut = false) => {
 
 const isChildOfTabsOrCalendar = (component, allComponents = [], componentParentId = undefined) => {
   const parentId = componentParentId ?? component.component?.parent?.split('-').slice(0, -1).join('-');
-
-  const parentComponent = allComponents.find((comp) => comp.componentId === parentId);
+  const parentComponent = allComponents?.[parentId];
   if (parentComponent) {
     return parentComponent.component.component === 'Tabs' || parentComponent.component.component === 'Calendar';
   }
diff --git a/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx b/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
index 43bb7acb4f..0c297b862c 100644
--- a/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
@@ -19,13 +19,10 @@ const DesktopHeader = ({
   isAppLoaded,
   changeToDarkMode,
 }) => {
-  const { editingVersion, showDarkModeToggle, isReleasedVersionId } = useStore(
+  const { showDarkModeToggle, isReleasedVersionId } = useStore(
     (state) => ({
-      editingVersion: state?.editingVersion,
-      isReleasedVersionId: state?.releasedVersionId == state.editingVersion || state.isVersionReleased,
-      switchDarkMode: state.switchDarkMode,
+      isReleasedVersionId: state?.releasedVersionId == state.selectedVersion?.id || state.isVersionReleased,
       showDarkModeToggle: state.globalSettings.appMode === 'auto' || !state.globalSettings.appMode,
-      appMode: state.globalSettings.appMode,
     }),
     shallow
   );
diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
index 6b477b0c72..7faafb4d98 100644
--- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
@@ -1377,7 +1377,7 @@ export const createComponentsSlice = (set, get) => ({
       const component = {
         component: allComponents?.[componentId]?.component,
         layouts: allComponents?.[componentId]?.layouts,
-        parent: allComponents?.[componentId]?.parent,
+        parent: allComponents?.[componentId]?.component?.parent,
         id: componentId,
       };
       _selected.push(component);