fixes: on cut and paste events should not cascade (#8010)

frontend/src/Editor/EditorFunc.jsx

@@ -942,7 +942,11 @@ const EditorComponent = (props) => {
           };
           useAppVersionStore.getState().actions.updateEditingVersion(_editingVersion);
 
-          if (updateDiff?.type === 'components' && updateDiff?.operation === 'delete') {
+          if (
+            updateDiff?.type === 'components' &&
+            updateDiff?.operation === 'delete' &&
+            !appDiffOptions?.componentCut
+          ) {
             const appEvents = Array.isArray(events) && events.length > 0 ? JSON.parse(JSON.stringify(events)) : [];
 
             const updatedEvents = appEvents.filter((event) => {

frontend/src/_helpers/appUtils.js

@@ -1551,7 +1551,7 @@ export const addComponents = (
   }
 
   pastedComponents.forEach((component) => {
-    const newComponentId = uuidv4();
+    const newComponentId = isCut ? component.componentId : uuidv4();
     const componentName = computeComponentName(component.component.component, {
       ...appDefinition.pages[pageId].components,
       ...finalComponents,
@@ -1735,7 +1735,7 @@ export const removeSelectedComponent = (pageId, newDefinition, selectedComponent
     delete newDefinition.pages[pageId].components[componentId];
   });
 
-  updateAppDefinition(newDefinition, { componentDefinitionChanged: true, componentDeleted: true });
+  updateAppDefinition(newDefinition, { componentDefinitionChanged: true, componentDeleted: true, componentCut: true });
 };
 
 const getSelectedText = () => {

frontend/src/_services/appVersion.service.js

@@ -69,7 +69,16 @@ function save(appId, versionId, values, isUserSwitchedVersion = false) {
   return fetch(`${config.apiUrl}/apps/${appId}/versions/${versionId}`, requestOptions).then(handleResponse);
 }
 
-function autoSaveApp(appId, versionId, diff, type, pageId, operation, isUserSwitchedVersion = false) {
+function autoSaveApp(
+  appId,
+  versionId,
+  diff,
+  type,
+  pageId,
+  operation,
+  isUserSwitchedVersion = false,
+  isComponentCutProcess = false
+) {
   const OPERATION = {
     create: 'POST',
     update: 'PUT',
@@ -94,6 +103,10 @@ function autoSaveApp(appId, versionId, diff, type, pageId, operation, isUserSwit
         diff,
       };
 
+  if (type === 'components' && operation === 'delete' && isComponentCutProcess) {
+    body['is_component_cut'] = true;
+  }
+
   const requestOptions = {
     method: OPERATION[operation],
     headers: authHeader(),

frontend/src/_stores/appDataStore.js

@@ -38,6 +38,8 @@ export const useAppDataStore = create(
         updateAppVersion: (appId, versionId, pageId, appDefinitionDiff, isUserSwitchedVersion = false) => {
           return new Promise((resolve) => {
             useAppDataStore.getState().actions.setIsSaving(true);
+            const isComponentCutProcess = get().appDiffOptions?.componentCut === true;
+
             appVersionService
               .autoSaveApp(
                 appId,
@@ -46,7 +48,8 @@ export const useAppDataStore = create(
                 appDefinitionDiff.type,
                 pageId,
                 appDefinitionDiff.operation,
-                isUserSwitchedVersion
+                isUserSwitchedVersion,
+                isComponentCutProcess
               )
               .then(() => {
                 useAppDataStore.getState().actions.setIsSaving(false);

server/src/controllers/apps.controller.v2.ts

@@ -300,7 +300,7 @@ export class AppsControllerV2 {
       throw new ForbiddenException('You do not have permissions to perform this action');
     }
 
-    await this.componentsService.delete(deleteComponentDto.diff, versionId);
+    await this.componentsService.delete(deleteComponentDto.diff, versionId, deleteComponentDto.is_component_cut);
   }
 
   @UseGuards(JwtAuthGuard)

server/src/dto/component.dto.ts

@@ -87,6 +87,10 @@ export class DeleteComponentDto {
 
   @IsArray()
   diff: string[];
+
+  @IsBoolean()
+  @IsOptional()
+  is_component_cut: boolean;
 }
 
 export class LayoutUpdateDto {

server/src/services/components.service.ts

@@ -109,7 +109,7 @@ export class ComponentsService {
     }, appVersionId);
   }
 
-  async delete(componentIds: string[], appVersionId: string) {
+  async delete(componentIds: string[], appVersionId: string, isComponentCut = false) {
     return dbTransactionForAppVersionAssociationsUpdate(async (manager: EntityManager) => {
       const components = await manager.findByIds(Component, componentIds);
 
@@ -121,9 +121,11 @@ export class ComponentsService {
         };
       }
 
-      components.forEach((component) => {
-        this.eventHandlerService.cascadeDeleteEvents(component.id);
-      });
+      if (!isComponentCut) {
+        components.forEach((component) => {
+          this.eventHandlerService.cascadeDeleteEvents(component.id);
+        });
+      }
 
       await manager.delete(Component, componentIds);
     }, appVersionId);