fixes: event mapping for newer versions for new components, pages and queries id

frontend/src/Editor/EditorFunc.jsx

@@ -202,7 +202,7 @@ const EditorComponent = (props) => {
   // Ref to store the previous appDefinition for comparison
 
   useEffect(() => {
-    if (currentUser?.current_organization_id) {
+    if (mounted && currentUser?.current_organization_id) {
       fetchGlobalDataSources();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -489,7 +489,6 @@ const EditorComponent = (props) => {
     props.switchDarkMode(newMode);
   };
 
-  //! Needs attention
   const handleEvent = (eventName, event, options) => {
     return onEvent(editorRef, eventName, event, options, 'edit');
   };
@@ -672,6 +671,7 @@ const EditorComponent = (props) => {
 
     await fetchDataSources(data.editing_version?.id);
     await fetchDataQueries(data.editing_version?.id, true, true);
+    await fetchGlobalDataSources();
 
     const currentPageEvents = data.events.filter((event) => event.target === 'page' && event.sourceId === homePageId);
 

frontend/src/Editor/Inspector/EventManager.jsx

@@ -487,7 +487,7 @@ export const EventManager = ({
                       options={dataQueries
                         .filter((qry) => isQueryRunnable(qry))
                         .map((qry) => ({ name: qry.name, value: qry.id }))}
-                      value={event.queryId}
+                      value={event?.queryId}
                       search={true}
                       onChange={(value) => {
                         const query = dataQueries.find((dataquery) => dataquery.id === value);
@@ -898,7 +898,12 @@ export const EventManager = ({
                             if (typeof popOverCallback === 'function') popOverCallback(showing);
                           }}
                         >
-                          <div>
+                          <div
+                            key={index}
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                          >
                             <ManageEventButton
                               eventDisplayName={eventMetaDefinition?.events[event.event.eventId]?.displayName}
                               actionName={actionMeta.name}

frontend/src/Editor/Inspector/ManageEventButton.jsx

@@ -3,6 +3,7 @@ import './manageEventButton.scss';
 import AddRectangle from '@/_ui/Icon/solidIcons/AddRectangle';
 import Trash from '@/_ui/Icon/solidIcons/Trash';
 import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import SortableList from '@/_components/SortableList';
 
 const ManageEventButton = ({ eventDisplayName = 'Upon events', actionName, index, removeHandler }) => {
   const [isHovered, setIsHovered] = useState(false);
@@ -14,8 +15,15 @@ const ManageEventButton = ({ eventDisplayName = 'Upon events', actionName, index
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
-        <div data-cy="event-handler-card">
-          <div className="d-flex justify-content-between" role="button" style={{ padding: '6px 12px' }}>
+        <div data-cy="event-handler-card" className="d-flex">
+          <span className="d-flex align-items-center px-2">
+            <SortableList.DragHandle show />
+          </span>
+          <div
+            className="d-flex justify-content-between"
+            role="button"
+            style={{ padding: '6px 12px 6px 8px', width: '100%' }}
+          >
             <div className="text-truncate event-handler-text" data-cy="event-handler">
               {eventDisplayName}
             </div>

server/src/services/apps.service.ts

@@ -375,20 +375,66 @@ export class AppsService {
         })
       );
 
-      await this.createNewDataSourcesAndQueriesForVersion(manager, appVersion, versionFrom, organizationId);
-
       if (versionFrom) {
         (appVersion.showViewerNavigation = versionFrom.showViewerNavigation),
           (appVersion.globalSettings = versionFrom.globalSettings),
           await manager.save(appVersion);
 
-        await this.createNewPagesAndComponentsForVersion(manager, appVersion, versionFrom.id, versionFrom.homePageId);
+        const oldDataQueryToNewMapping = await this.createNewDataSourcesAndQueriesForVersion(
+          manager,
+          appVersion,
+          versionFrom,
+          organizationId
+        );
+
+        const { oldComponentToNewComponentMapping, oldPageToNewPageMapping } =
+          await this.createNewPagesAndComponentsForVersion(manager, appVersion, versionFrom.id, versionFrom.homePageId);
+
+        await this.updateEventActionsForNewVersionWithNewMappingIds(
+          manager,
+          appVersion.id,
+          oldDataQueryToNewMapping,
+          oldComponentToNewComponentMapping,
+          oldPageToNewPageMapping
+        );
       }
 
       return appVersion;
     }, manager);
   }
 
+  async updateEventActionsForNewVersionWithNewMappingIds(
+    manager: EntityManager,
+    versionId: string,
+    oldDataQueryToNewMapping: any,
+    oldComponentToNewComponentMapping: any,
+    oldPageToNewPageMapping: any
+  ) {
+    const allEvents = await manager.find(EventHandler, {
+      where: { appVersionId: versionId },
+    });
+
+    for (const event of allEvents) {
+      const eventDefinition = event.event;
+
+      if (eventDefinition?.actionId === 'run-query') {
+        eventDefinition.queryId = oldDataQueryToNewMapping[eventDefinition.queryId];
+      }
+
+      if (eventDefinition?.actionId === 'control-component') {
+        eventDefinition.componentId = oldComponentToNewComponentMapping[eventDefinition.componentId];
+      }
+
+      if (eventDefinition?.actionId === 'switch-page') {
+        eventDefinition.pageId = oldPageToNewPageMapping[eventDefinition.pageId];
+      }
+
+      event.event = eventDefinition;
+
+      await manager.save(event);
+    }
+  }
+
   async createNewPagesAndComponentsForVersion(
     manager: EntityManager,
     appVersion: AppVersion,
@@ -411,6 +457,7 @@ export class AppsService {
     const newComponents = [];
     const newComponentLayouts = [];
     const oldComponentToNewComponentMapping = {};
+    const oldPageToNewPageMapping = {};
 
     for (const page of pages) {
       const savedPage = await manager.save(
@@ -421,7 +468,7 @@ export class AppsService {
           appVersionId: appVersion.id,
         })
       );
-
+      oldPageToNewPageMapping[page.id] = savedPage.id;
       if (page.id === prevHomePagePage) {
         homePageId = savedPage.id;
       }
@@ -495,7 +542,9 @@ export class AppsService {
       await manager.save(newComponentLayouts);
     }
 
-    return await manager.update(AppVersion, { id: appVersion.id }, { homePageId });
+    await manager.update(AppVersion, { id: appVersion.id }, { homePageId });
+
+    return { oldComponentToNewComponentMapping, oldPageToNewPageMapping };
   }
 
   async deleteVersion(app: App, version: AppVersion): Promise<void> {
@@ -672,6 +721,8 @@ export class AppsService {
         }
       }
     }
+
+    return oldDataQueryToNewMapping;
   }
 
   private async createEnvironments(appEnvironments: any[], manager: EntityManager, organizationId: string) {