diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html index bc71d713e5ca..835d9a334eab 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html @@ -27,7 +27,12 @@
- Experiments + @if ($toolbar().runningExperiment; as runningExperiment) { + + } + Language Persona Workflows diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts index c65e5925b441..a87708cecd5f 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts @@ -14,7 +14,8 @@ import { LoginService } from '@dotcms/dotcms-js'; import { DotExperimentsServiceMock, DotLanguagesServiceMock, - DotLicenseServiceMock + DotLicenseServiceMock, + getRunningExperimentMock } from '@dotcms/utils-testing'; import { DotUveToolbarComponent } from './dot-uve-toolbar.component'; @@ -34,6 +35,7 @@ import { sanitizeURL } from '../../../utils'; import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component'; +import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component'; describe('DotUveToolbarComponent', () => { let spectator: Spectator; @@ -41,7 +43,11 @@ describe('DotUveToolbarComponent', () => { const createComponent = createComponentFactory({ component: DotUveToolbarComponent, - imports: [HttpClientTestingModule, MockComponent(DotEmaBookmarksComponent)], + imports: [ + HttpClientTestingModule, + MockComponent(DotEmaBookmarksComponent), + MockComponent(DotEmaRunningExperimentComponent) + ], providers: [ UVEStore, provideHttpClientTesting(), @@ -94,38 +100,39 @@ describe('DotUveToolbarComponent', () => { siteId: pageAPIResponse?.site.identifier }); + const baseUVEToolbarState = { + editor: { + bookmarksUrl, + copyUrl: createFullURL(params, pageAPIResponse?.site.identifier), + apiUrl: `${'http://localhost'}${pageAPI}` + }, + preview: null, + currentLanguage: pageAPIResponse?.viewAs.language, + urlContentMap: null, + runningExperiment: null, + workflowActionsInode: pageAPIResponse?.page.inode, + unlockButton: null, + showInfoDisplay: shouldShowInfoDisplay, + personaSelector: { + pageId: pageAPIResponse?.page.identifier, + value: pageAPIResponse?.viewAs.persona ?? DEFAULT_PERSONA + } + }; + + const baseUVEState = { + $uveToolbar: signal(baseUVEToolbarState), + setDevice: jest.fn(), + setSocialMedia: jest.fn(), + pageParams: signal(params), + pageAPIResponse: signal(MOCK_RESPONSE_VTL), + reloadCurrentPage: jest.fn(), + loadPageAsset: jest.fn() + }; + describe('base state', () => { beforeEach(() => { spectator = createComponent({ - providers: [ - mockProvider(UVEStore, { - $uveToolbar: signal({ - editor: { - bookmarksUrl, - copyUrl: createFullURL(params, pageAPIResponse?.site.identifier), - apiUrl: `${'http://localhost'}${pageAPI}` - }, - preview: null, - - currentLanguage: pageAPIResponse?.viewAs.language, - urlContentMap: null, - runningExperiment: null, - workflowActionsInode: pageAPIResponse?.page.inode, - unlockButton: null, - showInfoDisplay: shouldShowInfoDisplay, - personaSelector: { - pageId: pageAPIResponse?.page.identifier, - value: pageAPIResponse?.viewAs.persona ?? DEFAULT_PERSONA - } - }), - setDevice: jest.fn(), - setSocialMedia: jest.fn(), - pageParams: signal(params), - pageAPIResponse: signal(MOCK_RESPONSE_VTL), - reloadCurrentPage: jest.fn(), - loadPageAsset: jest.fn() - }) - ] + providers: [mockProvider(UVEStore, { ...baseUVEState })] }); messageService = spectator.inject(MessageService); @@ -139,6 +146,12 @@ describe('DotUveToolbarComponent', () => { }); }); + describe('dot-ema-running-experiment', () => { + it('should be null', () => { + expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeNull(); + }); + }); + it('should have preview button', () => { expect(spectator.query(byTestId('uve-toolbar-preview'))).toBeTruthy(); }); @@ -178,10 +191,6 @@ describe('DotUveToolbarComponent', () => { expect(spectator.query(byTestId('uve-toolbar-api-link'))).toBeTruthy(); }); - it('should have experiments button', () => { - expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeTruthy(); - }); - it('should have language selector', () => { expect(spectator.query(byTestId('uve-toolbar-language-selector'))).toBeTruthy(); }); @@ -194,4 +203,26 @@ describe('DotUveToolbarComponent', () => { expect(spectator.query(byTestId('uve-toolbar-workflow-actions'))).toBeTruthy(); }); }); + + describe('State changes', () => { + describe('Experiment is running', () => { + beforeEach(() => { + const state = { + ...baseUVEState, + $uveToolbar: signal({ + ...baseUVEToolbarState, + runningExperiment: getRunningExperimentMock() + }) + }; + + spectator = createComponent({ + providers: [mockProvider(UVEStore, { ...state })] + }); + }); + + it('should have experiment running component', () => { + expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeTruthy(); + }); + }); + }); }); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts index f35b0b432f3f..5e3869e11e1e 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts @@ -10,6 +10,7 @@ import { DotMessageService } from '@dotcms/data-access'; import { UVEStore } from '../../../store/dot-uve.store'; import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component'; import { DotEmaInfoDisplayComponent } from '../dot-ema-info-display/dot-ema-info-display.component'; +import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component'; @Component({ selector: 'dot-uve-toolbar', @@ -19,6 +20,7 @@ import { DotEmaInfoDisplayComponent } from '../dot-ema-info-display/dot-ema-info ToolbarModule, DotEmaBookmarksComponent, DotEmaInfoDisplayComponent, + DotEmaRunningExperimentComponent, ClipboardModule ], templateUrl: './dot-uve-toolbar.component.html', diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts index 1d9975d5b4cd..40f867dab0e5 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts @@ -36,6 +36,7 @@ export interface DotPageApiResponse { containers: DotPageContainerStructure; urlContentMap?: DotCMSContentlet; vanityUrl?: VanityUrl; + runningExperimentId?: string; } export interface DotPageApiParams { 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 index a6823605dbea..ee3944fcec67 100644 --- 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 @@ -100,10 +100,13 @@ export function withLoad() { }); } }), - switchMap(({ pageAsset, isEnterprise, currentUser }) => - forkJoin({ + switchMap(({ pageAsset, isEnterprise, currentUser }) => { + const experimentId = + pageParams?.experimentId ?? pageAsset?.runningExperimentId; + + return forkJoin({ experiment: dotExperimentsService.getById( - pageParams?.experimentId || DEFAULT_VARIANT_ID + experimentId ?? DEFAULT_VARIANT_ID ), languages: dotLanguagesService.getLanguagesUsedPage( pageAsset.page.identifier @@ -145,8 +148,8 @@ export function withLoad() { }); } }) - ) - ) + ); + }) ); }) )