[sitecore-jss][nextjs-xmcloud] Ensure uid is preserved when variant i…

…s hidden (#1862) (cherry picked from commit dbe4f3d)
Sitecore · Jul 29, 2024 · bdddb76 · bdddb76
1 parent 603d50a
commit bdddb76
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,7 +38,7 @@ Our versioning strategy is as follows:
 
 ### 🛠 Breaking Change
 
-* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))([#1828](https://github.com/Sitecore/jss/pull/1828))([#1835](https://github.com/Sitecore/jss/pull/1835))([#1849](https://github.com/Sitecore/jss/pull/1849))([#1831](https://github.com/Sitecore/jss/pull/1831))([#1853](https://github.com/Sitecore/jss/pull/1853))([#1854](https://github.com/Sitecore/jss/pull/1854))([#1857](https://github.com/Sitecore/jss/pull/1857))
+* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))([#1828](https://github.com/Sitecore/jss/pull/1828))([#1835](https://github.com/Sitecore/jss/pull/1835))([#1849](https://github.com/Sitecore/jss/pull/1849))([#1831](https://github.com/Sitecore/jss/pull/1831))([#1853](https://github.com/Sitecore/jss/pull/1853))([#1854](https://github.com/Sitecore/jss/pull/1854))([#1857](https://github.com/Sitecore/jss/pull/1857))([#1862](https://github.com/Sitecore/jss/pull/1862))
   * `[sitecore-jss-react]` Introduces `PlaceholderMetadata` component which supports the hydration of chromes on Pages by rendering  the components and placeholders with required metadata.
   * `[sitecore-jss]` Chromes are hydrated based on the basis of new `editMode` property derived from LayoutData, which is defined as an enum consisting of `metadata` and `chromes`.
   * `ComponentConsumerProps` is removed. You might need to reuse `WithSitecoreContextProps` type.

diff --git a/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts b/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts
@@ -360,6 +360,16 @@ describe('layout-personalizer', () => {
       });
     });
 
+    it('should return HIDDEN_RENDERING variant in metadata mode with uid preserved', () => {
+      const variant = 'mountain_bike_audience';
+      const personalizedComponentResult = personalizeComponent(
+        (variantIsHidden as unknown) as ComponentRenderingWithExperiences,
+        [variant],
+        true
+      );
+      expect(personalizedComponentResult?.uid).to.equal(variantIsHidden.uid);
+    });
+
     it('should return HIDDEN_RENDERING variant in metadata edit mode when non-default variant is hidden', () => {
       const variant = 'mountain_bike_audience';
       const personalizedComponentResult = personalizeComponent(

diff --git a/packages/sitecore-jss/src/personalize/layout-personalizer.ts b/packages/sitecore-jss/src/personalize/layout-personalizer.ts
@@ -7,10 +7,13 @@ import {
   EditMode,
 } from './../layout/models';
 
-const hiddenRenderingVariant = {
+const transformToHiddenRenderingVariant = (
+  component: ComponentRendering | HtmlElementRendering
+) => ({
+  ...component,
   componentName: HIDDEN_RENDERING_NAME,
   experiences: {},
-};
+});
 
 export type ComponentRenderingWithExperiences = ComponentRendering & {
   experiences: { [name: string]: ComponentRenderingWithExperiences };
@@ -106,14 +109,14 @@ export function personalizeComponent(
   if (!variant && !component.componentName) {
     // DEFAULT IS HIDDEN
     if (metadataEditing) {
-      component = hiddenRenderingVariant;
+      component = transformToHiddenRenderingVariant(component);
     } else {
       return null;
     }
   } else if (variant && variant.componentName === null && variant.dataSource === null) {
     // VARIANT IS HIDDEN
     if (metadataEditing) {
-      component = hiddenRenderingVariant;
+      component = transformToHiddenRenderingVariant(component);
     } else {
       return null;
     }