fix(uve): Save variant content correctly (#30556)

This pull request involves several changes across different files, primarily focusing on the removal of `DotSessionStorageService` from various components and the addition of `UVEStore` to handle variant names in the `dot-ema-dialog` component. Below are the most important changes grouped by theme: ### Removal of `DotSessionStorageService`: * Removed `DotSessionStorageService` import and its usage from `dot-experiments-configuration-variants.component.spec.ts` [[1]](diffhunk://#diff-28158d1e413714e3873c21ce3e9aeca29043b1bda1652a58bfe883ccd1a1e8abL21-R21) [[2]](diffhunk://#diff-28158d1e413714e3873c21ce3e9aeca29043b1bda1652a58bfe883ccd1a1e8abL80) [[3]](diffhunk://#diff-28158d1e413714e3873c21ce3e9aeca29043b1bda1652a58bfe883ccd1a1e8abL100) [[4]](diffhunk://#diff-28158d1e413714e3873c21ce3e9aeca29043b1bda1652a58bfe883ccd1a1e8abL115) [[5]](diffhunk://#diff-28158d1e413714e3873c21ce3e9aeca29043b1bda1652a58bfe883ccd1a1e8abL250) [[6]](diffhunk://#diff-28158d1e413714e3873c21ce3e9aeca29043b1bda1652a58bfe883ccd1a1e8abL264). * Removed `DotSessionStorageService` import and its usage from `dot-experiments-configuration-variants.component.ts` [[1]](diffhunk://#diff-474ea846c597331705596804e9f966ceb814a6855f3ad5b1c68e40dcd09f7d1dL18-R18) [[2]](diffhunk://#diff-474ea846c597331705596804e9f966ceb814a6855f3ad5b1c68e40dcd09f7d1dL88) [[3]](diffhunk://#diff-474ea846c597331705596804e9f966ceb814a6855f3ad5b1c68e40dcd09f7d1dL160). ### Addition of `UVEStore` for handling variant names: * Added `UVEStore` import and mock provider in `dot-ema-dialog.component.spec.ts` [[1]](diffhunk://#diff-74bc5b082cc3e4a13573517796b104be728b49d58d3cede278110b75cd7944f4R46) [[2]](diffhunk://#diff-74bc5b082cc3e4a13573517796b104be728b49d58d3cede278110b75cd7944f4R90-R97). * Added `UVEStore` import and mock provider in `dot-ema-dialog.store.spec.ts` [[1]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eR18-R20) [[2]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eR29-R37) [[3]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eL111-R126) [[4]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eL144-R160) [[5]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eL176-R193) [[6]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eL205-R224) [[7]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eL249-R270) [[8]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eL274-R298) [[9]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eL297-R324) [[10]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eL373-R401) [[11]](diffhunk://#diff-30064cf2e49d8544c8ed19f040b93774175d47edff3b01ce2b7782c3bbcd506eL418-R447). * Added `UVEStore` import and its usage in `dot-ema-dialog.store.ts` to include `variantName` in URLs [[1]](diffhunk://#diff-d585898896316007a8f7a5a162ead4a376c6ee8816d9a3aecdc5cb816ffee4a7R23) [[2]](diffhunk://#diff-d585898896316007a8f7a5a162ead4a376c6ee8816d9a3aecdc5cb816ffee4a7R45-R46) [[3]](diffhunk://#diff-d585898896316007a8f7a5a162ead4a376c6ee8816d9a3aecdc5cb816ffee4a7R103-R109) [[4]](diffhunk://#diff-d585898896316007a8f7a5a162ead4a376c6ee8816d9a3aecdc5cb816ffee4a7L298-R306) [[5]](diffhunk://#diff-d585898896316007a8f7a5a162ead4a376c6ee8816d9a3aecdc5cb816ffee4a7L325-R334).
dotCMS · Nov 8, 2024 · 1e14290 · 1e14290
1 parent 8f9083f
commit 1e14290
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 38 deletions.
diff --git a/...periments-configuration-variants/dot-experiments-configuration-variants.component.spec.ts b/...periments-configuration-variants/dot-experiments-configuration-variants.component.spec.ts
@@ -18,8 +18,7 @@ import { Tooltip } from 'primeng/tooltip';
 import {
     DotExperimentsService,
     DotHttpErrorManagerService,
-    DotMessageService,
-    DotSessionStorageService
+    DotMessageService
 } from '@dotcms/data-access';
 import {
     DEFAULT_VARIANT_ID,
@@ -77,7 +76,6 @@ describe('DotExperimentsConfigurationVariantsComponent', () => {
     let dotExperimentsService: SpyObject<DotExperimentsService>;
     let router: Router;
 
-    let dotSessionStorageService: DotSessionStorageService;
     let confirmationService: ConfirmationService;
 
     const createComponent = createComponentFactory({
@@ -97,7 +95,6 @@ describe('DotExperimentsConfigurationVariantsComponent', () => {
             mockProvider(DotExperimentsService),
             mockProvider(MessageService),
             mockProvider(DotHttpErrorManagerService),
-            mockProvider(DotSessionStorageService),
             mockProvider(Router)
         ]
     });
@@ -112,7 +109,6 @@ describe('DotExperimentsConfigurationVariantsComponent', () => {
         store = spectator.inject(DotExperimentsConfigurationStore);
         router = spectator.inject(Router);
 
-        dotSessionStorageService = spectator.inject(DotSessionStorageService);
         confirmationService = spectator.inject(ConfirmationService);
 
         dotExperimentsService = spectator.inject(DotExperimentsService);
@@ -247,7 +243,6 @@ describe('DotExperimentsConfigurationVariantsComponent', () => {
         it('should goToEditPage emit a variant and mode(preview) when View button is clicked', () => {
             spectator.click(byTestId('variant-preview-button'));
 
-            expect(dotSessionStorageService.setVariationId).toHaveBeenCalledWith(variants[0].id);
             expect(router.navigate).toHaveBeenCalledWith(['edit-page/content'], {
                 queryParams: {
                     mode: DotPageMode.PREVIEW,
@@ -261,7 +256,6 @@ describe('DotExperimentsConfigurationVariantsComponent', () => {
         it('should goToEditPage emit a variant and mode(edit) when edit button is clicked', () => {
             spectator.click(byTestId('variant-edit-button'));
 
-            expect(dotSessionStorageService.setVariationId).toHaveBeenCalledWith(variants[1].id);
             expect(router.navigate).toHaveBeenCalledWith(['edit-page/content'], {
                 queryParams: {
                     mode: DotPageMode.EDIT,

diff --git a/...ot-experiments-configuration-variants/dot-experiments-configuration-variants.component.ts b/...ot-experiments-configuration-variants/dot-experiments-configuration-variants.component.ts
@@ -15,7 +15,7 @@ import { TooltipModule } from 'primeng/tooltip';
 
 import { tap } from 'rxjs/operators';
 
-import { DotMessageService, DotSessionStorageService } from '@dotcms/data-access';
+import { DotMessageService } from '@dotcms/data-access';
 import {
     ComponentStatus,
     DEFAULT_VARIANT_NAME,
@@ -85,7 +85,6 @@ export class DotExperimentsConfigurationVariantsComponent {
     constructor(
         private readonly dotExperimentsConfigurationStore: DotExperimentsConfigurationStore,
         private readonly confirmationService: ConfirmationService,
-        private readonly dotSessionStorageService: DotSessionStorageService,
         private readonly dotMessageService: DotMessageService,
         private readonly router: Router,
         private readonly route: ActivatedRoute
@@ -157,7 +156,6 @@ export class DotExperimentsConfigurationVariantsComponent {
      * @memberof DotExperimentsConfigurationVariantsComponent
      */
     goToEditPageVariant(variant: Variant, mode: DotPageMode) {
-        this.dotSessionStorageService.setVariationId(variant.id);
         this.router.navigate(['edit-page/content'], {
             queryParams: {
                 variantName: variant.id,

diff --git a/...tlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/dot-ema-dialog.component.spec.ts b/...tlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/dot-ema-dialog.component.spec.ts
@@ -10,6 +10,7 @@ import { of } from 'rxjs';
 
 import { HttpClient } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { signal } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
 import { MessageService } from 'primeng/api';
@@ -42,6 +43,7 @@ import { DotEmaWorkflowActionsService } from '../../services/dot-ema-workflow-ac
 import { FormStatus, NG_CUSTOM_EVENTS } from '../../shared/enums';
 import { MOCK_RESPONSE_HEADLESS, PAYLOAD_MOCK } from '../../shared/mocks';
 import { DotPage } from '../../shared/models';
+import { UVEStore } from '../../store/dot-uve.store';
 
 describe('DotEmaDialogComponent', () => {
     let spectator: Spectator<DotEmaDialogComponent>;
@@ -85,6 +87,14 @@ describe('DotEmaDialogComponent', () => {
             HttpClient,
             DotWorkflowActionsFireService,
             MessageService,
+            {
+                provide: UVEStore,
+                useValue: {
+                    params: signal({
+                        variantName: 'DEFAULT' // Is the only thing we need to test the component
+                    })
+                }
+            },
             {
                 provide: DotcmsConfigService,
                 useValue: new DotcmsConfigServiceMock()

diff --git a/...ets/edit-ema/portlet/src/lib/components/dot-ema-dialog/store/dot-ema-dialog.store.spec.ts b/...ets/edit-ema/portlet/src/lib/components/dot-ema-dialog/store/dot-ema-dialog.store.spec.ts
@@ -2,6 +2,8 @@ import { expect, it, describe } from '@jest/globals';
 import { SpectatorService, createServiceFactory } from '@ngneat/spectator/jest';
 import { of } from 'rxjs';
 
+import { signal } from '@angular/core';
+
 import { CLIENT_ACTIONS } from '@dotcms/client';
 import { DotMessageService } from '@dotcms/data-access';
 import { MockDotMessageService } from '@dotcms/utils-testing';
@@ -13,6 +15,9 @@ import { LAYOUT_URL } from '../../../shared/consts';
 import { DialogStatus, FormStatus } from '../../../shared/enums';
 import { PAYLOAD_MOCK } from '../../../shared/mocks';
 import { DotPage } from '../../../shared/models';
+import { UVEStore } from '../../../store/dot-uve.store';
+
+const TEST_VARIANT = 'my-test-variant';
 
 describe('DotEmaDialogStoreService', () => {
     let spectator: SpectatorService<DotEmaDialogStore>;
@@ -21,6 +26,15 @@ describe('DotEmaDialogStoreService', () => {
         service: DotEmaDialogStore,
         mocks: [DotActionUrlService],
         providers: [
+            {
+                provide: UVEStore,
+                useValue: {
+                    params: signal({
+                        variantName: TEST_VARIANT // Is the only thing we need to test the component
+                    })
+                }
+            },
+
             {
                 provide: DotMessageService,
                 useValue: new MockDotMessageService({
@@ -108,7 +122,8 @@ describe('DotEmaDialogStoreService', () => {
             p_p_mode: 'view',
             _content_struts_action: '/ext/contentlet/edit_contentlet',
             _content_cmd: 'edit',
-            inode: '123'
+            inode: '123',
+            variantName: TEST_VARIANT
         });
 
         spectator.service.dialogState$.subscribe((state) => {
@@ -141,7 +156,8 @@ describe('DotEmaDialogStoreService', () => {
             p_p_mode: 'view',
             _content_struts_action: '/ext/contentlet/edit_contentlet',
             _content_cmd: 'edit',
-            inode: '123'
+            inode: '123',
+            variantName: TEST_VARIANT
         });
 
         spectator.service.dialogState$.subscribe((state) => {
@@ -173,7 +189,8 @@ describe('DotEmaDialogStoreService', () => {
             p_p_mode: 'view',
             _content_struts_action: '/ext/contentlet/edit_contentlet',
             _content_cmd: 'edit',
-            inode: '123'
+            inode: '123',
+            variantName: TEST_VARIANT
         });
 
         spectator.service.dialogState$.subscribe((state) => {
@@ -202,7 +219,9 @@ describe('DotEmaDialogStoreService', () => {
 
         spectator.service.dialogState$.subscribe((state) => {
             expect(state).toEqual({
-                url: '/html/ng-contentlet-selector.jsp?ng=true&container_id=1234&add=test&language_id=1',
+                url:
+                    '/html/ng-contentlet-selector.jsp?ng=true&container_id=1234&add=test&language_id=1&' +
+                    new URLSearchParams({ variantName: TEST_VARIANT }).toString(),
                 header: 'Search Content',
                 type: 'content',
                 status: DialogStatus.LOADING,
@@ -246,7 +265,9 @@ describe('DotEmaDialogStoreService', () => {
 
         spectator.service.dialogState$.subscribe((state) => {
             expect(state).toEqual({
-                url: 'some/really/long/url',
+                url:
+                    'http://localhost/some/really/long/url?' +
+                    new URLSearchParams({ variantName: TEST_VARIANT }).toString(),
                 status: DialogStatus.LOADING,
                 header: 'Create test',
                 type: 'content',
@@ -271,7 +292,10 @@ describe('DotEmaDialogStoreService', () => {
         spectator.service.dialogState$.subscribe((state) => {
             expect(state.header).toBe('Create Blog Posts');
             expect(state.status).toBe(DialogStatus.LOADING);
-            expect(state.url).toBe('some/really/long/url');
+            expect(state.url).toBe(
+                'http://localhost/some/really/long/url?' +
+                    new URLSearchParams({ variantName: TEST_VARIANT }).toString()
+            );
             expect(state.type).toBe('content');
             expect(state.actionPayload).toEqual(PAYLOAD_MOCK);
             done();
@@ -294,7 +318,10 @@ describe('DotEmaDialogStoreService', () => {
             expect(state.header).toBe('Create Blog');
             expect(state.status).toBe(DialogStatus.LOADING);
 
-            expect(state.url).toBe('https://demo.dotcms.com/jsp.jsp');
+            expect(state.url).toBe(
+                'https://demo.dotcms.com/jsp.jsp?' +
+                    new URLSearchParams({ variantName: TEST_VARIANT }).toString()
+            );
             expect(state.type).toBe('content');
             expect(state.actionPayload).toEqual(PAYLOAD_MOCK);
             done();
@@ -370,7 +397,8 @@ describe('DotEmaDialogStoreService', () => {
                 inode: '',
                 lang: '2',
                 populateaccept: 'true',
-                reuseLastLang: 'true'
+                reuseLastLang: 'true',
+                variantName: TEST_VARIANT
             });
 
             spectator.service.dialogState$.subscribe((state) => {
@@ -415,7 +443,8 @@ describe('DotEmaDialogStoreService', () => {
                 inode: '',
                 lang: '2',
                 populateaccept: 'true',
-                reuseLastLang: 'true'
+                reuseLastLang: 'true',
+                variantName: TEST_VARIANT
             });
 
             spectator.service.dialogState$.subscribe((state) => {

diff --git a/...portlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/store/dot-ema-dialog.store.ts b/...portlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/store/dot-ema-dialog.store.ts
@@ -20,6 +20,7 @@ import {
     EditContentletPayload,
     EditEmaDialogState
 } from '../../../shared/models';
+import { UVEStore } from '../../../store/dot-uve.store';
 
 @Injectable()
 export class DotEmaDialogStore extends ComponentStore<EditEmaDialogState> {
@@ -41,6 +42,8 @@ export class DotEmaDialogStore extends ComponentStore<EditEmaDialogState> {
 
     private dotMessageService = inject(DotMessageService);
 
+    private uveStore = inject(UVEStore);
+
     readonly dialogState$ = this.select((state) => state);
 
     /**
@@ -97,9 +100,13 @@ export class DotEmaDialogStore extends ComponentStore<EditEmaDialogState> {
      */
     readonly createContentlet = this.updater(
         (state, { url, contentType, actionPayload }: CreateContentletAction) => {
+            const completeURL = new URL(url, window.location.origin);
+
+            completeURL.searchParams.set('variantName', this.uveStore.params().variantName);
+
             return {
                 ...state,
-                url,
+                url: completeURL.toString(),
                 actionPayload,
                 header: this.dotMessageService.get(
                     'contenttypes.content.create.contenttype',
@@ -295,7 +302,8 @@ export class DotEmaDialogStore extends ComponentStore<EditEmaDialogState> {
             p_p_mode: 'view',
             _content_struts_action: '/ext/contentlet/edit_contentlet',
             _content_cmd: 'edit',
-            inode: inode
+            inode: inode,
+            variantName: this.uveStore.params().variantName
         });
 
         return `${LAYOUT_URL}?${queryParams.toString()}`;
@@ -322,7 +330,8 @@ export class DotEmaDialogStore extends ComponentStore<EditEmaDialogState> {
             ng: 'true',
             container_id: containerId,
             add: acceptTypes,
-            language_id
+            language_id,
+            variantName: this.uveStore.params().variantName
         });
 
         return `${CONTENTLET_SELECTOR_URL}?${queryParams.toString()}`;
@@ -344,7 +353,8 @@ export class DotEmaDialogStore extends ComponentStore<EditEmaDialogState> {
             inode: '',
             lang: newLanguage.toString(),
             populateaccept: 'true',
-            reuseLastLang: 'true'
+            reuseLastLang: 'true',
+            variantName: this.uveStore.params().variantName
         });
 
         return `${LAYOUT_URL}?${queryParams.toString()}`;

diff --git a/...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts b/...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
@@ -322,7 +322,7 @@ describe('DotEmaShellComponent', () => {
                 });
 
                 spectator.detectChanges();
-                expect(store.init).not.toHaveBeenCalledTimes(2); // The first call is on the beforeEach
+                expect(store.init).toHaveBeenCalled();
             });
 
             it('should trigger a load when changing the clientHost and it is on the allowedDevURLs', () => {

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/load/withLoad.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/load/withLoad.ts
@@ -11,6 +11,7 @@ import { switchMap, shareReplay, catchError, tap, take, map } from 'rxjs/operato
 
 import { DotLanguagesService, DotLicenseService, DotExperimentsService } from '@dotcms/data-access';
 import { LoginService } from '@dotcms/dotcms-js';
+import { DEFAULT_VARIANT_ID } from '@dotcms/dotcms-models';
 
 import { DotPageApiService, DotPageApiParams } from '../../../services/dot-page-api.service';
 import { UVE_STATUS } from '../../../shared/enums';
@@ -140,7 +141,11 @@ export function withLoad() {
                                                     currentUser,
                                                     experiment,
                                                     languages,
-                                                    params,
+                                                    params: {
+                                                        ...params,
+                                                        variantName:
+                                                            params.variantName || DEFAULT_VARIANT_ID
+                                                    },
                                                     canEditPage,
                                                     pageIsLocked,
                                                     isTraditionalPage,

diff --git a/dotCMS/src/main/webapp/WEB-INF/jsp/lucene/lucene_search.jsp b/dotCMS/src/main/webapp/WEB-INF/jsp/lucene/lucene_search.jsp
@@ -96,8 +96,9 @@ query = Xss.strip(query);
 	}
 
 	function setContentletItem(contentlet, index) {
+
 		return `<tr><th><strong>${index}.</th><th><strong><%= LanguageUtil.get(pageContext, "Title") %></strong></th>
-				<th><a onclick="return openContent(event, '${contentlet.inode}')" href="/dotAdmin/#/c/content/${contentlet.inode}">
+				<th><a onclick="return openContent(event, '${contentlet.inode}', '${contentlet.variant}')" href="/dotAdmin/#/c/content/${contentlet.inode}&variantName=${contentlet.variant ?? 'DEFAULT'}">
 				${contentlet.title}</a></th></tr><tr><td></td>
 				<td><strong><%= LanguageUtil.get(pageContext, "ContentType") %>:</strong></td>
 				<td width="90%">${contentlet.contentType}</td>
@@ -159,9 +160,9 @@ query = Xss.strip(query);
 		luceneResultTable.innerHTML = `<tr><td><div style="text-align:center; padding: 40px;"><%= LanguageUtil.get(pageContext, "No-Results") %></div></td></tr>`;
 	}
 
-	function openContent(event, inode)	{
+	function openContent(event, inode, variantName)	{
 		if (! hastModifiers(event)){
-			window.parent.location = `/dotAdmin/#/c/content/${inode}`;
+			window.parent.location = `/dotAdmin/#/c/content/${inode}&variantName=${variantName ?? 'DEFAULT'}`;
 			return false;
 		}
 		return true;

diff --git a/dotCMS/src/main/webapp/html/ng-contentlet-selector.jsp b/dotCMS/src/main/webapp/html/ng-contentlet-selector.jsp
@@ -27,6 +27,8 @@
 <%
     String containerIdentifier = request.getParameter("container_id");
     String language_id = request.getParameter("language_id");
+    String variantName = request.getParameter("variantName") != null ? request.getParameter("variantName") : "DEFAULT";
+
     User user = PortalUtil.getUser(request);
     Container container = null;
     if (FileAssetContainerUtil.getInstance().isFolderAssetContainerId(containerIdentifier)) {
@@ -139,7 +141,7 @@
         function addNewContentlet(iNode, contentType) {
             var href = "/c/portal/layout?p_l_id=<%=contentLayout.getId()%>&p_p_id=content&p_p_action=1&p_p_state=maximized&p_p_mode=view";
             href += "&_content_struts_action=%2Fext%2Fcontentlet%2Fedit_contentlet&_content_cmd=new";
-            href += "&selectedStructure=" + (iNode || _dotSelectedStructure) + "&lang=" + getCurrentUrlLanguageId();
+            href += "&selectedStructure=" + (iNode || _dotSelectedStructure) + "&lang=" + getCurrentUrlLanguageId() + "&variantName=" + '<%=variantName%>';
             createContentlet(href, contentType ||  _dotSelectedStructureVariable);
         }