From e0f36a18a5abe6826a1adfaa5caa1f3b9c12d37c Mon Sep 17 00:00:00 2001 From: Arpit Date: Tue, 24 Oct 2023 17:08:11 +0530 Subject: [PATCH] fixes: on cut and paste events should not cascade (#8010) --- frontend/src/Editor/EditorFunc.jsx | 6 +++++- frontend/src/_helpers/appUtils.js | 4 ++-- frontend/src/_services/appVersion.service.js | 15 ++++++++++++++- frontend/src/_stores/appDataStore.js | 5 ++++- server/src/controllers/apps.controller.v2.ts | 2 +- server/src/dto/component.dto.ts | 4 ++++ server/src/services/components.service.ts | 10 ++++++---- 7 files changed, 36 insertions(+), 10 deletions(-) diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index 526bd7b49d..04e07591b0 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/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) => { diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js index 9c54fc3e29..1e9c8b6e82 100644 --- a/frontend/src/_helpers/appUtils.js +++ b/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 = () => { diff --git a/frontend/src/_services/appVersion.service.js b/frontend/src/_services/appVersion.service.js index 69e4a9eba2..3471c23fd7 100644 --- a/frontend/src/_services/appVersion.service.js +++ b/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(), diff --git a/frontend/src/_stores/appDataStore.js b/frontend/src/_stores/appDataStore.js index a4ebf29ba7..4456bd0b64 100644 --- a/frontend/src/_stores/appDataStore.js +++ b/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); diff --git a/server/src/controllers/apps.controller.v2.ts b/server/src/controllers/apps.controller.v2.ts index 5d3e3ff4f9..e2e0dd4e36 100644 --- a/server/src/controllers/apps.controller.v2.ts +++ b/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) diff --git a/server/src/dto/component.dto.ts b/server/src/dto/component.dto.ts index a1bbf9a994..593e9db928 100644 --- a/server/src/dto/component.dto.ts +++ b/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 { diff --git a/server/src/services/components.service.ts b/server/src/services/components.service.ts index 476137c20c..b87bfcc936 100644 --- a/server/src/services/components.service.ts +++ b/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);