From be36d23c64d3a9e5169902ffc522f9809e4ef2c9 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Fri, 6 Oct 2023 15:28:07 +0530
Subject: [PATCH] [appdef] - copy associated events for cloned components
 (#7634)

* fixes: Copying  component is not coping the events associated with the component.

* cleanup
---
 frontend/src/Editor/EditorFunc.jsx | 55 +++++++++++++++++++++++++++++-
 frontend/src/_helpers/appUtils.js  | 15 ++++++--
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx
index abc5a9c6f2..84225b68e6 100644
--- a/frontend/src/Editor/EditorFunc.jsx
+++ b/frontend/src/Editor/EditorFunc.jsx
@@ -79,7 +79,8 @@ const EditorComponent = (props) => {
   const { socket } = createWebsocketConnection(props?.params?.id);
   const mounted = useMounted();
 
-  const { updateState, updateAppDefinitionDiff, updateAppVersion, setIsSaving } = useAppDataActions();
+  const { updateState, updateAppDefinitionDiff, updateAppVersion, setIsSaving, createAppVersionEventHandlers } =
+    useAppDataActions();
   const { updateEditorState, updateQueryConfirmationList } = useEditorActions();
 
   const { setAppVersions } = useAppVersionActions();
@@ -822,6 +823,49 @@ const EditorComponent = (props) => {
     }
   };
 
+  const cloneEventsForClonedComponents = (componentUpdateDiff, operation, componentMap) => {
+    function getKeyFromComponentMap(componentMap, newItem) {
+      for (const key in componentMap) {
+        if (componentMap.hasOwnProperty(key) && componentMap[key] === newItem) {
+          return key;
+        }
+      }
+      return null;
+    }
+
+    if (operation !== 'create') return;
+
+    const newComponentIds = Object.keys(componentUpdateDiff);
+
+    const mappedEvents = [];
+
+    newComponentIds.forEach((componentId) => {
+      const sourceComponentId = getKeyFromComponentMap(componentMap, componentId);
+      if (!sourceComponentId) return;
+
+      const componentEvents = events.filter((event) => event.sourceId === sourceComponentId);
+
+      mappedEvents.push(...componentEvents);
+    });
+
+    if (mappedEvents.length === 0) return;
+
+    return Promise.all(
+      mappedEvents.map((event) => {
+        const newEvent = {
+          event: {
+            ...event?.event,
+          },
+          eventType: event?.target,
+          attachedTo: componentMap[event?.sourceId],
+          index: event?.index,
+        };
+
+        createAppVersionEventHandlers(newEvent);
+      })
+    );
+  };
+
   const saveEditingVersion = (isUserSwitchedVersion = false) => {
     if (isVersionReleased && !isUserSwitchedVersion) {
       updateEditorState({
@@ -863,6 +907,15 @@ const EditorComponent = (props) => {
             isUpdatingEditorStateInProcess: false,
           });
           toast.error('App could not save.');
+        })
+        .finally(() => {
+          if (appDiffOptions?.cloningComponent) {
+            cloneEventsForClonedComponents(
+              updateDiff.updateDiff,
+              updateDiff.operation,
+              appDiffOptions?.cloningComponent
+            );
+          }
         });
     }
 
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index e02b529fd1..b6a45aae03 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -1317,7 +1317,7 @@ export const getComponentName = (currentState, id) => {
   }
 };
 
-const updateNewComponents = (pageId, appDefinition, newComponents, updateAppDefinition) => {
+const updateNewComponents = (pageId, appDefinition, newComponents, updateAppDefinition, componentMap, isCut) => {
   const newAppDefinition = JSON.parse(JSON.stringify(appDefinition));
 
   newAppDefinition.pages[pageId].components = {
@@ -1325,7 +1325,16 @@ const updateNewComponents = (pageId, appDefinition, newComponents, updateAppDefi
     ...newComponents,
   };
 
-  updateAppDefinition(newAppDefinition, { componentAdded: true, containerChanges: true });
+  const opts = {
+    componentAdded: true,
+    containerChanges: true,
+  };
+
+  if (!isCut) {
+    opts.cloningComponent = componentMap;
+  }
+
+  updateAppDefinition(newAppDefinition, opts);
 };
 
 export const cloneComponents = (
@@ -1489,7 +1498,7 @@ export const addComponents = (pageId, appDefinition, appDefinitionChanged, paren
 
   !isCloning && updateComponentLayout(pastedComponents, parentId, isCut);
 
-  updateNewComponents(pageId, appDefinition, finalComponents, appDefinitionChanged);
+  updateNewComponents(pageId, appDefinition, finalComponents, appDefinitionChanged, componentMap, isCut);
   !isCloning && toast.success('Component pasted succesfully');
 };