Merge branch 'main' into feat/react-moveable-integration

docs/package.json

@@ -18,11 +18,14 @@
     "@docusaurus/plugin-google-gtag": "^2.4.3",
     "@docusaurus/plugin-sitemap": "^2.4.3",
     "@docusaurus/preset-classic": "^2.4.3",
-    "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
+  "overrides": {
+    "got": "^12.1.0",
+    "trim": "^0.0.3"
+  },
   "browserslist": {
     "production": [
       ">0.5%",

frontend/src/Editor/Container.jsx

@@ -24,6 +24,7 @@ import _, { cloneDeep } from 'lodash';
 import { diff } from 'deep-object-diff';
 import DragContainer from './DragContainer';
 import { compact, correctBounds } from './gridUtils';
+// eslint-disable-next-line import/no-unresolved
 
 // const noOfGrids = 24;
 

frontend/src/Editor/Editor.jsx

@@ -313,9 +313,7 @@ const EditorComponent = (props) => {
   const fetchApps = async (page) => {
     const { apps } = await appService.getAll(page);
 
-    updateState({
-      apps: apps.map((app) => ({ id: app.id, name: app.name, slug: app.slug })),
-    });
+    updateState({ apps: apps.map((app) => ({ id: app.id, name: app.name, slug: app.slug })) });
   };
 
   const fetchOrgEnvironmentVariables = () => {
@@ -681,10 +679,7 @@ const EditorComponent = (props) => {
 
   const getPagesWithIds = () => {
     //! Needs attention
-    return Object.entries(appDefinition?.pages).map(([id, page]) => ({
-      ...page,
-      id,
-    }));
+    return Object.entries(appDefinition?.pages).map(([id, page]) => ({ ...page, id }));
   };
 
   const handleEditorMarginLeftChange = (value) => {
@@ -1195,11 +1190,7 @@ const EditorComponent = (props) => {
       const diffPatches = diff(appDefinition, updatedAppDefinition);
 
       if (!isEmpty(diffPatches)) {
-        appDefinitionChanged(updatedAppDefinition, {
-          skipAutoSave: true,
-          componentDefinitionChanged: true,
-          ...props,
-        });
+        appDefinitionChanged(updatedAppDefinition, { skipAutoSave: true, componentDefinitionChanged: true, ...props });
       }
     }
   };
@@ -1275,10 +1266,7 @@ const EditorComponent = (props) => {
 
     _appDefinition.pages[currentPageId].components = newComponents;
 
-    appDefinitionChanged(_appDefinition, {
-      containerChanges: true,
-      widgetMovedWithKeyboard: true,
-    });
+    appDefinitionChanged(_appDefinition, { containerChanges: true, widgetMovedWithKeyboard: true });
   };
 
   const copyComponents = () =>
@@ -1680,9 +1668,7 @@ const EditorComponent = (props) => {
   };
 
   useEffect(() => {
-    const previewQuery = queryString.stringify({
-      version: editingVersion?.name,
-    });
+    const previewQuery = queryString.stringify({ version: editingVersion?.name });
     const appVersionPreviewLink = editingVersion
       ? `/applications/${slug || appId}/${currentState.page.handle}${
           !_.isEmpty(previewQuery) ? `?${previewQuery}` : ''
@@ -1857,7 +1843,7 @@ const EditorComponent = (props) => {
                   background: !props.darkMode ? '#EBEBEF' : '#2E3035',
                 }}
                 onMouseUp={(e) => {
-                  if (['real-canvas', 'modal'].includes(e.target.className)) {
+                  if (e.target.classList.contains('real-canvas') || e.target.classList.contains('modal')) {
                     updateEditorState({
                       currentSidebarTab: 2,
                       selectedComponents: [],

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

@@ -92,6 +92,14 @@ export class AppsControllerV2 {
     response['pages'] = pagesForVersion;
     response['events'] = eventsForVersion;
 
+    //! if editing version exists, camelize the definition
+    if (app.editingVersion && app.editingVersion.definition) {
+      response['editing_version'] = {
+        ...response['editing_version'],
+        definition: camelizeKeys(app.editingVersion.definition),
+      };
+    }
+
     return response;
   }
 

server/src/services/app_import_export.service.ts

@@ -695,6 +695,12 @@ export class AppImportExportService {
 
         const pageComponents = importingComponents.filter((component) => component.pageId === page.id);
 
+        const newComponentIdsMap = {};
+
+        for (const component of pageComponents) {
+          newComponentIdsMap[component.id] = uuid();
+        }
+
         for (const component of pageComponents) {
           let skipComponent = false;
           const newComponent = new Component();
@@ -706,18 +712,19 @@ export class AppImportExportService {
           if (isParentTabOrCalendar) {
             const childTabId = component.parent.split('-')[component.parent.split('-').length - 1];
             const _parentId = component?.parent?.split('-').slice(0, -1).join('-');
-            const mappedParentId = appResourceMappings.componentsMapping[_parentId];
+            const mappedParentId = newComponentIdsMap[_parentId];
 
             parentId = `${mappedParentId}-${childTabId}`;
           } else {
-            if (component.parent && !appResourceMappings.componentsMapping[parentId]) {
+            if (component.parent && !newComponentIdsMap[parentId]) {
               skipComponent = true;
             }
 
-            parentId = appResourceMappings.componentsMapping[parentId];
+            parentId = newComponentIdsMap[parentId];
           }
 
           if (!skipComponent) {
+            newComponent.id = newComponentIdsMap[component.id];
             newComponent.name = component.name;
             newComponent.type = component.type;
             newComponent.properties = component.properties;
@@ -1611,6 +1618,10 @@ function transformComponentData(
     }
   }
 
+  // if (skippedComponents.length) {
+
+  // }
+
   return transformedComponents;
 }
 

server/src/services/apps.service.ts

@@ -540,7 +540,7 @@ export class AppsService {
         newComponent.general = component.general;
         newComponent.generalStyles = component.generalStyles;
         newComponent.displayPreferences = component.displayPreferences;
-        newComponent.parent = component.parent ? parentId : null;
+        newComponent.parent = component.parent;
         newComponent.page = savedPage;
 
         newComponents.push(newComponent);
@@ -575,6 +575,26 @@ export class AppsService {
         });
       });
 
+      newComponents.forEach((component) => {
+        let parentId = component.parent ? component.parent : null;
+
+        if (!parentId) return;
+
+        const isParentTabOrCalendar = isChildOfTabsOrCalendar(component, page.components, parentId);
+
+        if (isParentTabOrCalendar) {
+          const childTabId = component.parent.split('-')[component.parent.split('-').length - 1];
+          const _parentId = component?.parent?.split('-').slice(0, -1).join('-');
+          const mappedParentId = oldComponentToNewComponentMapping[_parentId];
+
+          parentId = `${mappedParentId}-${childTabId}`;
+        } else {
+          parentId = oldComponentToNewComponentMapping[parentId];
+        }
+
+        component.parent = parentId;
+      });
+
       await manager.save(newComponents);
       await manager.save(newComponentLayouts);
     }