Merge pull request #352 from snehaljha-sf/flexipage_fixes

fix: flexipage issues

Author: snehaljha-sf

src/migration/related/FlexipageMigration.ts

@@ -192,7 +192,7 @@ export class FlexipageMigration extends BaseRelatedObjectMigration {
       Logger.logVerbose(this.messages.getMessage('updatedModifiedContent', [filePath]));
     }
 
-    const diff = new FileDiffUtil().getFileDiff(fileName, fileContent, modifiedContent);
+    const diff = new FileDiffUtil().getXMLDiff(fileContent, modifiedContent);
     Logger.logVerbose(this.messages.getMessage('generatedDiffForFile', [fileName]));
 
     return {

src/utils/flexipage/flexiPageTransformer.ts

@@ -21,6 +21,9 @@ const targetComponentNameOS = 'runtime_omnistudio:omniscript';
 /** Target identifier after transformation */
 const targetIdentifierOS = 'runtime_omnistudio_omniscript';
 
+let osSeq = 1;
+let fcSeq = 1;
+
 const targetComponentNameFlexCard = 'runtime_omnistudio:flexcard';
 const targetIdentifierFlexCard = 'runtime_omnistudio_flexcard';
 
@@ -46,6 +49,9 @@ export function transformFlexipageBundle(
   namespace: string,
   mode: 'assess' | 'migrate'
 ): Flexipage | boolean {
+  osSeq = 1;
+  fcSeq = 1;
+
   const bundle: Flexipage = JSON.parse(JSON.stringify(ogBundle)) as Flexipage;
   let changes = false;
 
@@ -103,9 +109,9 @@ function createNewProps(
   componentInstanceProperties: FlexiComponentInstanceProperty[]
 ): { componentName: string; identifier: string; props: Record<string, string> } {
   if (nameKey.startsWith(flexCardPrefix)) {
-    return createNewPropsForFlexCard(nameKey.substring(flexCardPrefix.length), namespace, mode);
+    return createNewPropsForFlexCard(nameKey.substring(flexCardPrefix.length).toLowerCase(), namespace, mode);
   }
-  return createNewPropsForOmniScript(nameKey, namespace, mode, componentInstanceProperties);
+  return createNewPropsForOmniScript(nameKey.toLowerCase(), namespace, mode, componentInstanceProperties);
 }
 
 function createNewPropsForOmniScript(
@@ -142,7 +148,7 @@ function createNewPropsForOmniScript(
 
   return {
     componentName: targetComponentNameOS,
-    identifier: targetIdentifierOS,
+    identifier: `${targetIdentifierOS}${osSeq++}`,
     props: newProps,
   };
 }
@@ -173,7 +179,7 @@ function createNewPropsForFlexCard(
 
   return {
     componentName: targetComponentNameFlexCard,
-    identifier: targetIdentifierFlexCard,
+    identifier: `${targetIdentifierFlexCard}${fcSeq++}`,
     props: newProps,
   };
 }

src/utils/lwcparser/fileutils/FileDiffUtil.ts

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { createPatch } from 'diff';
+import { createPatch, diffLines } from 'diff';
 import { Logger } from '../../../utils/logger';
 import { DiffPair } from '../../interfaces';
 
@@ -46,16 +46,25 @@ export class FileDiffUtil {
     let linecount = 0;
     for (const { old: original, new: modified } of diffArray) {
       if (original === modified) {
-        result += `<div style="color: black;">• Line ${modifiedLine}: ${this.escapeHtml(original)}</div>`;
+        result += `<div style="color: black;">• Line ${modifiedLine}: ${this.escapeHtml(original).replace(
+          / /g,
+          '&nbsp;'
+        )}</div>`;
         modifiedLine++;
         originalLine++;
         linecount++;
       } else if (original !== null && modified === null) {
-        result += `<div style="color: red;">- Line ${originalLine}: ${this.escapeHtml(original)}</div>`;
+        result += `<div style="color: red;">- Line ${originalLine}: ${this.escapeHtml(original).replace(
+          / /g,
+          '&nbsp;'
+        )}</div>`;
         originalLine++;
         linecount++;
       } else if (original === null && modified !== null) {
-        result += `<div style="color: green;">+ Line ${modifiedLine}: ${this.escapeHtml(modified)}</div>`;
+        result += `<div style="color: green;">+ Line ${modifiedLine}: ${this.escapeHtml(modified).replace(
+          / /g,
+          '&nbsp;'
+        )}</div>`;
         modifiedLine++;
         linecount++;
       }
@@ -147,4 +156,25 @@ export class FileDiffUtil {
       return [];
     }
   }
+
+  public getXMLDiff(originalFileContent: string, modifiedFileContent: string): DiffPair[] {
+    const diff = diffLines(originalFileContent, modifiedFileContent, { stripTrailingCr: true });
+    const result: DiffPair[] = [];
+    for (const block of diff) {
+      if (block.added) {
+        block.value.split('\n').forEach((line) => {
+          result.push({ old: null, new: line });
+        });
+      } else if (block.removed) {
+        block.value.split('\n').forEach((line) => {
+          result.push({ old: line, new: null });
+        });
+      } else {
+        block.value.split('\n').forEach((line) => {
+          result.push({ old: line, new: line });
+        });
+      }
+    }
+    return result;
+  }
 }

test/migration/related/FlexipageMigration.test.ts

@@ -29,6 +29,7 @@ interface MockXmlUtil {
 
 interface MockFileDiffUtil {
   getFileDiff: sinon.SinonStub;
+  getXMLDiff: sinon.SinonStub;
 }
 
 interface MockTransformFlexipageBundle extends sinon.SinonStub {
@@ -104,6 +105,7 @@ describe('FlexipageMigration', () => {
     // Mock FileDiffUtil
     mockFileDiffUtil = {
       getFileDiff: sandbox.stub().returns('mock-diff'),
+      getXMLDiff: sandbox.stub().returns('mock-diff'),
     };
 
     // Mock transformFlexipageBundle