fix(sm-import): handle eds url domain (#431)

js/import/import.ui.js

@@ -29,9 +29,8 @@ import {
 import * as fragmentUI from '../sections-mapping/sm.ui.js';
 import { buildTransformationRulesFromMapping } from './import.rules.js';
 import TransformFactory from '../shared/transformfactory.js';
-import detectSections from '../sections-mapping/utils.js';
+import detectSections, { getFragmentSectionsMappingData } from '../sections-mapping/utils.js';
 import { preparePagePreview } from '../express/free-mapping/preview-selectors.js';
-import { getFragmentSectionsMappingData } from '../sections-mapping/import/sections-mapping.import.js';
 
 const PARENT_SELECTOR = '.import';
 const CONFIG_PARENT_SELECTOR = `${PARENT_SELECTOR} form`;
@@ -703,13 +702,13 @@ const attachListeners = () => {
               processNext();
             }
             const saveMappingsForAssistant = async () => {
-              let sectionsMapping = getFragmentSectionsMappingData(url);
-              sectionsMapping = JSON.stringify(sectionsMapping, null, 2);
-              if (sectionsMapping) {
+              const sectionsData = getFragmentSectionsMappingData(url);
+
+              if (sectionsData) {
                 if (sessionStorage.getItem(DEMO_TOOL_MODE_SESSION_STORAGE_KEY)) {
-                  await saveBlob(new Blob([sectionsMapping]), 'sections-mapping.json');
+                  await saveBlob(new Blob([JSON.stringify(sectionsData, null, 2)]), 'sections-mapping.json');
                 } else if (dirHandle) {
-                  await saveFile(dirHandle, 'sections-mapping.json', sectionsMapping);
+                  await saveFile(dirHandle, 'sections-mapping.json', JSON.stringify(sectionsData, null, 2));
                 }
               }
             };

js/sections-mapping/import/sections-mapping.import.js

@@ -2,8 +2,8 @@
  * GENERIC IMPORT SCRIPT FOR SECTIONS MAPPING DATA
  */
 /* global WebImporter */
-
 import { getElementByXpath } from '../../shared/utils.js';
+import { generateDocumentPath, getFragmentSectionsMappingData } from '../utils.js';
 import * as parsers from './parsers/parsers.js';
 
 /**
@@ -39,40 +39,6 @@ function getImgFromBackground(element, document, originalURL) {
   return null;
 }
 
-export function generateDocumentPath({ url }) {
-  let p = new URL(url).pathname;
-  if (p.endsWith('/')) {
-    p = `${p}index`;
-  }
-  p = decodeURIComponent(p)
-    .toLowerCase()
-    .replace(/\.html$/, '')
-    .replace(/[^a-z0-9/]/gm, '-');
-  return WebImporter.FileUtils.sanitizePath(p);
-}
-
-export function getFragmentSectionsMappingData(url) {
-  const item = localStorage.getItem('helix-importer-sections-mapping');
-
-  if (item) {
-    const mData = JSON.parse(item);
-
-    // return manual mapping first
-    let found = mData.find((m) => m.url === url && m.autoDetect === false);
-    if (found) {
-      return found.mapping;
-    }
-
-    // return auto-detected mapping
-    found = mData.find((m) => m.url === url && m.autoDetect === true);
-    if (found) {
-      return found.mapping;
-    }
-  }
-
-  return null;
-}
-
 /**
  * constants
  */
@@ -168,18 +134,20 @@ export default {
      * get sections mapping data
      */
 
-    const mapping = getFragmentSectionsMappingData(params.originalURL);
+    const { mapping } = getFragmentSectionsMappingData(params.originalURL);
     if (!mapping) {
       throw new Error('No sections mapping data found, aborting');
     }
 
     // get import target
     const target = sessionStorage.getItem('demo-tool-aem-importer-target') || IMPORT_TARGETS.AEM_BLOCK_COLLECTION;
-
     const importedElements = mapping.map((m) => {
+      // sanitize path
+      const sanitizedPath = generateDocumentPath({ url: `http://domain.com${m.path}` });
+
       const importedEl = {
         element: null,
-        path: m.path,
+        path: sanitizedPath,
         report: {},
       };
 
@@ -313,13 +281,4 @@ export default {
 
     return importedElements;
   },
-
-  /**
-   * Return a path that describes the document being transformed (file name, nesting...).
-   * The path is then used to create the corresponding Word document.
-   * @param {String} url The url of the document being transformed.
-   * @param {HTMLDocument} document The document
-   */
-  generateDocumentPath,
-
 };

js/sections-mapping/sm.ui.js

@@ -1,6 +1,7 @@
 import alert from '../shared/alert.js';
 import { getContentFrame } from '../shared/ui.js';
 import { getElementByXpath } from '../shared/utils.js';
+import { generateDocumentPath } from './utils.js';
 
 const ADD_FRAGMENT_BTN = document.getElementById('sm-add-fragment');
 const SM_FRAGMENTS_CONTAINER = document.getElementById('sm-fragments-container');
@@ -89,6 +90,7 @@ export function getSMCache() {
 
 export function saveSMCache() {
   const url = importerConfig.fields['import-url'];
+  const sanitizedPath = generateDocumentPath({ url });
   const autoDetect = importerConfig.fields['import-sm-auto-detect'];
   const cache = getSMCache();
   const mapping = getSMData();
@@ -101,6 +103,7 @@ export function saveSMCache() {
     } else {
       cache.push({
         url,
+        sanitizedPath,
         autoDetect,
         mapping,
       });
@@ -392,12 +395,7 @@ export function addBlockInSection(row, target) {
  */
 
 function getMainFragmentPath(url) {
-  const u = new URL(url);
-  let mainPath = u.pathname.replace(/\.[^/.]+$/, '');
-  if (mainPath === '/') {
-    mainPath = '/index';
-  }
-  return mainPath;
+  return generateDocumentPath({ url });
 }
 
 export function addFragmentAccordionElement(path) {

js/sections-mapping/utils.js

@@ -1,3 +1,4 @@
+/* global WebImporter */
 import * as fragmentUI from './sm.ui.js';
 
 export default async function detectSections(src, frame, autoDetect) {
@@ -52,3 +53,37 @@ export default async function detectSections(src, frame, autoDetect) {
     console.error(`Error loading sections mapping data for url ${originalURL}`, e);
   }
 }
+
+export function generateDocumentPath({ url }) {
+  let p = new URL(url).pathname;
+  if (p.endsWith('/')) {
+    p = `${p}index`;
+  }
+  p = decodeURIComponent(p)
+    .toLowerCase()
+    .replace(/\.html$/, '')
+    .replace(/[^a-z0-9/]/gm, '-');
+  return WebImporter.FileUtils.sanitizePath(p);
+}
+
+export function getFragmentSectionsMappingData(url) {
+  const item = localStorage.getItem('helix-importer-sections-mapping');
+
+  if (item) {
+    const mData = JSON.parse(item);
+
+    // return manual mapping first
+    let found = mData.find((m) => m.url === url && m.autoDetect === false);
+    if (found) {
+      return found;
+    }
+
+    // return auto-detected mapping
+    found = mData.find((m) => m.url === url && m.autoDetect === true);
+    if (found) {
+      return found;
+    }
+  }
+
+  return null;
+}

js/shared/utils.js

@@ -13,7 +13,7 @@ import { getContentFrame, IS_EXPRESS, IS_FRAGMENTS } from './ui.js';
 // eslint-disable-next-line import/no-cycle
 import {
   getFragmentSectionsMappingData,
-} from '../sections-mapping/import/sections-mapping.import.js';
+} from '../sections-mapping/utils.js';
 import {
   getFreeSelectionsMapping,
 } from '../express/free-mapping/free.mapping.utils.js';
@@ -113,7 +113,7 @@ const getXPath = (elm, document, withDetails = false) => {
 
 function getSectionsMappingData(url) {
   if (IS_FRAGMENTS) {
-    return getFragmentSectionsMappingData(url);
+    return getFragmentSectionsMappingData(url).mapping;
   }
   if (IS_EXPRESS) {
     return getFreeSelectionsMapping(url);