From 47b6fdd56868c9f8f5632b5e14f1bf517627d5b2 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 24 Oct 2024 18:21:23 +0530
Subject: [PATCH] Prevent pasting if the parent subcontainer was deleted during
 a cut operation

---
 .../src/AppBuilder/AppCanvas/HotkeyProvider.jsx   |  4 ++--
 .../src/AppBuilder/AppCanvas/appCanvasUtils.js    | 15 ++++++++++-----
 .../AppBuilder/_stores/slices/componentsSlice.js  |  2 +-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx b/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx
index a6c5a3bef1..f45850d220 100644
--- a/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx
+++ b/frontend/src/AppBuilder/AppCanvas/HotkeyProvider.jsx
@@ -18,8 +18,8 @@ export const HotkeyProvider = ({ children, mode, currentLayout, canvasMaxWidth }
   const enableReleasedVersionPopupState = useStore((state) => state.enableReleasedVersionPopupState, shallow);
   const clearSelectedComponents = useStore((state) => state.clearSelectedComponents, shallow);
   const getSelectedComponents = useStore((state) => state.getSelectedComponents, shallow);
-  const undoRef = useHotkeys('meta+z, control+z', handleUndo, { enabled: mode === 'edit' });
-  const redoRef = useHotkeys('meta+shift+z, control+shift+z', handleRedo, { enabled: mode === 'edit' });
+  useHotkeys('meta+z, control+z', handleUndo, { enabled: mode === 'edit' });
+  useHotkeys('meta+shift+z, control+shift+z', handleRedo, { enabled: mode === 'edit' });
 
   const paste = async () => {
     if (isContainerFocused && navigator.clipboard && typeof navigator.clipboard.readText === 'function') {
diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
index e6e2a2473d..69809f0bff 100644
--- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
+++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js
@@ -187,7 +187,6 @@ export function computeComponentName(componentType, currentComponents) {
 
 export const getAllChildComponents = (allComponents, parentId) => {
   const childComponents = [];
-
   Object.keys(allComponents).forEach((componentId) => {
     const componentParentId = allComponents[componentId].component?.parent;
 
@@ -198,7 +197,7 @@ export const getAllChildComponents = (allComponents, parentId) => {
 
     if (componentParentId && isParentTabORCalendar) {
       let childComponent = deepClone(allComponents[componentId]);
-      childComponent.componentId = componentId;
+      childComponent.id = componentId;
       const childTabId = componentParentId.split('-').at(-1);
       if (componentParentId === `${parentId}-${childTabId}`) {
         childComponent.isParentTabORCalendar = true;
@@ -211,7 +210,7 @@ export const getAllChildComponents = (allComponents, parentId) => {
 
     if (componentParentId === parentId) {
       let childComponent = deepClone(allComponents[componentId]);
-      childComponent.componentId = componentId;
+      childComponent.id = componentId;
       childComponents.push(childComponent);
 
       // Recursively find children of the current child component
@@ -312,7 +311,10 @@ const updateComponentLayout = (components, parentId, isCut = false) => {
   let _components = deepClone(components);
   _components.forEach((component, index) => {
     Object.keys(component.layouts).map((layout) => {
-      if ((parentId !== undefined && !component?.component?.parent) || component?.component?.parent === parentId) {
+      if (
+        (parentId !== undefined && !component?.component?.parent) ||
+        (component?.component?.parent === parentId && !isCut)
+      ) {
         if (index > 0) {
           component.layouts[layout].top = prevComponent.layouts[layout].top + prevComponent.layouts[layout].height;
           component.layouts[layout].left = 0;
@@ -347,11 +349,14 @@ export function pasteComponents(parentId, copiedComponentObj) {
   const components = useStore.getState().getCurrentPageComponents();
   const currentPageId = useStore.getState().getCurrentPageId();
   const { isCut = false, newComponents: pastedComponents = [], pageId, isCloning = false } = copiedComponentObj;
+  // Prevent pasting if the parent subcontainer was deleted during a cut operation
+  if (parentId && !Object.keys(components).find((key) => parentId === key)) {
+    return;
+  }
   if (parentId) {
     const id = Object.keys(components).filter((key) => parentId.startsWith(key));
     parentComponent = components[id];
   }
-
   pastedComponents.forEach((component) => {
     const newComponentId = isCut ? component.id : uuidv4();
     const componentName = computeComponentName(component.component.component, {
diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
index 7faafb4d98..19b278421a 100644
--- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js
@@ -796,7 +796,7 @@ export const createComponentsSlice = (set, get) => ({
             toDeleteComponents.push(componentId);
 
             // Find the children of this component
-            const children = getAllChildComponents(allComponents, componentId).map((child) => child.componentId);
+            const children = getAllChildComponents(allComponents, componentId).map((child) => child.id);
             if (children.length > 0) {
               // Recursively find children of children
               children.forEach((child) => {