fix: render CMS content based on component templates correctly (#1608)

* necessary to save pagelet information to the ngrx store with context information, plain id based normalization does not work for component templates

src/app/core/models/content-pagelet-entry-point/content-pagelet-entry-point.mapper.spec.ts

@@ -77,7 +77,7 @@ describe('Content Pagelet Entry Point Mapper', () => {
     const [pageletEntryPoint, pagelets] = contentPageletEntryPointMapper.fromData(input);
 
     expect(pagelets).toHaveLength(3);
-    expect(pagelets.map(p => p.id)).toIncludeAllMembers(['pagelet1', 'pagelet11', 'pagelet2']);
+    expect(pagelets.map(p => p.id)).toIncludeAllMembers(['pagelet1', 'pagelet11#0$0@pagelet1', 'pagelet2']);
     expect(pageletEntryPoint).not.toBeEmpty();
     expect(pageletEntryPoint).toMatchInlineSnapshot(`
       {

src/app/core/models/content-pagelet/__snapshots__/content-pagelet.mapper.spec.ts.snap

@@ -16,7 +16,7 @@ exports[`Content Pagelet Mapper should convert pagelet with slots and additional
         "definitionQualifiedName": "quali-slot",
         "displayName": "slot1",
         "pageletIDs": [
-          "pagelet-nested",
+          "pagelet-nested#0$0@pagelet",
         ],
       },
       {
@@ -30,7 +30,7 @@ exports[`Content Pagelet Mapper should convert pagelet with slots and additional
         "definitionQualifiedName": "quali-slot",
         "displayName": "slot2",
         "pageletIDs": [
-          "pagelet-nested2",
+          "pagelet-nested2#0$1@pagelet",
         ],
       },
     ],
@@ -40,7 +40,7 @@ exports[`Content Pagelet Mapper should convert pagelet with slots and additional
     "definitionQualifiedName": "fq",
     "displayName": "name-nested",
     "domain": "domain",
-    "id": "pagelet-nested",
+    "id": "pagelet-nested#0$0@pagelet",
     "slots": [],
   },
   {
@@ -50,14 +50,14 @@ exports[`Content Pagelet Mapper should convert pagelet with slots and additional
     "definitionQualifiedName": "domain-pagelet",
     "displayName": "name1",
     "domain": "domain",
-    "id": "pagelet-nested2",
+    "id": "pagelet-nested2#0$1@pagelet",
     "slots": [
       {
         "configurationParameters": {},
         "definitionQualifiedName": "fq-2",
         "displayName": "slot11",
         "pageletIDs": [
-          "pagelet-deeply-nested",
+          "pagelet-deeply-nested#0$0@pagelet-nested2#0$1@pagelet",
         ],
       },
     ],
@@ -69,7 +69,7 @@ exports[`Content Pagelet Mapper should convert pagelet with slots and additional
     "definitionQualifiedName": "fq",
     "displayName": "name-nested",
     "domain": "domain",
-    "id": "pagelet-deeply-nested",
+    "id": "pagelet-deeply-nested#0$0@pagelet-nested2#0$1@pagelet",
     "slots": [],
   },
 ]

src/app/core/models/content-pagelet/content-pagelet.mapper.spec.ts

@@ -156,9 +156,9 @@ describe('Content Pagelet Mapper', () => {
     expect(result).toHaveLength(4);
     expect(result.map(p => p.id)).toIncludeAllMembers([
       'pagelet',
-      'pagelet-nested',
-      'pagelet-nested2',
-      'pagelet-deeply-nested',
+      'pagelet-nested#0$0@pagelet',
+      'pagelet-nested2#0$1@pagelet',
+      'pagelet-deeply-nested#0$0@pagelet-nested2#0$1@pagelet',
     ]);
     expect(result).toMatchSnapshot();
   });

src/app/core/models/content-pagelet/content-pagelet.mapper.ts

@@ -11,7 +11,7 @@ import { ContentPagelet } from './content-pagelet.model';
 export class ContentPageletMapper {
   constructor(private contentConfigurationParameterMapper: ContentConfigurationParameterMapper) {}
 
-  fromData(data: ContentPageletData): ContentPagelet[] {
+  fromData(data: ContentPageletData, context?: string): ContentPagelet[] {
     if (!data) {
       throw new Error('falsy input');
     }
@@ -22,7 +22,9 @@ export class ContentPageletMapper {
     let slots: ContentSlot[] = [];
     let pagelets: ContentPagelet[] = [];
     if (data.slots) {
-      const deep = Object.values(data.slots).map(x => this.fromSlotData(x));
+      const deep = Object.values(data.slots).map((slot, index) =>
+        this.fromSlotData(slot, this.appendContext(`$${index}@${id}`, context))
+      );
       slots = deep.map(val => val.slot);
       pagelets = deep.map(val => val.pagelets).reduce((acc, val) => [...acc, ...val]);
     }
@@ -31,7 +33,7 @@ export class ContentPageletMapper {
       {
         configurationParameters,
         definitionQualifiedName,
-        id,
+        id: this.appendContext(id, context),
         slots,
         domain,
         displayName,
@@ -40,14 +42,16 @@ export class ContentPageletMapper {
     ];
   }
 
-  private fromSlotData(data: ContentSlotData): { slot: ContentSlot; pagelets: ContentPagelet[] } {
+  private fromSlotData(data: ContentSlotData, context: string): { slot: ContentSlot; pagelets: ContentPagelet[] } {
     if (!data) {
       throw new Error('falsy input');
     }
 
     const definitionQualifiedName = data.definitionQualifiedName;
     const configurationParameters = this.contentConfigurationParameterMapper.fromData(data.configurationParameters);
-    const pageletIDs = !data.pagelets ? [] : data.pagelets.map(pagelet => pagelet.id);
+    const pageletIDs = !data.pagelets
+      ? []
+      : data.pagelets.map((pagelet, index) => this.appendContext(`${pagelet.id}#${index}`, context));
     const displayName = data.displayName;
 
     const slot: ContentSlot = {
@@ -59,8 +63,17 @@ export class ContentPageletMapper {
 
     const pagelets = !data.pagelets
       ? []
-      : data.pagelets.map(x => this.fromData(x)).reduce((acc, val) => [...acc, ...val], []);
+      : data.pagelets
+          .map((pagelet, index) => this.fromData(pagelet, this.appendContext(`#${index}`, context)))
+          .reduce((acc, val) => [...acc, ...val], []);
 
     return { slot, pagelets };
   }
+
+  /**
+   * Append the context string to the id if given (needed for normalizing of component templates).
+   */
+  private appendContext(id: string, context?: string): string {
+    return context ? `${id}${context}` : id;
+  }
 }