From 83de9e0d06cfdab51021c7e25897465eb8805121 Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Tue, 3 Dec 2024 12:26:20 -0300 Subject: [PATCH] chore(uve): Add Running Experiments Badge to new toolbar (#30824) This pull request introduces several changes to the `dot-uve-toolbar` component and its associated files to support displaying running experiments. The most important changes include updating the HTML template, modifying the component's TypeScript file, and adjusting the related tests to accommodate the new functionality. Changes to `dot-uve-toolbar` component: * [`core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html`](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bL28-R33): Updated the template to conditionally display the `dot-ema-running-experiment` component if there is a running experiment. * [`core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts`](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R9-R20): Imported the `DotEmaRunningExperimentComponent` and included it in the component's imports array. Updates to tests: * `core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts`: * Imported `DotEmaRunningExperimentComponent` and `getRunningExperimentMock`. [[1]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L14-R15) [[2]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R35-R45) * Refactored the base state setup and added tests for the new running experiment functionality. [[1]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L86-L98) [[2]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L109-R124) [[3]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R136-R141) [[4]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L141-L144) [[5]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R166-R187) Backend support: * [`core-web/libs/portlets/edit-ema/portlet/src/lib/services/dot-page-api.service.ts`](diffhunk://#diff-9acb0e7dc2619395c49047164381778d2b6d6c41f58b30aa3cd6a798044007c6R39): Added `runningExperimentId` to the `DotPageApiResponse` interface. * [`core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/load/withLoad.ts`](diffhunk://#diff-0cbc04b5047422551dde0970e4ea1d0e1fcce3d9d8f4e0b4612fbc30b1658487L106-R108): Updated the `withLoad` function to use `runningExperimentId` if available. ## Screenshot https://github.com/user-attachments/assets/97d92935-93cf-4198-9db7-36cc38f9f394 --- .../dot-uve-toolbar.component.html | 7 +- .../dot-uve-toolbar.component.spec.ts | 101 ++++++++++++------ .../dot-uve-toolbar.component.ts | 2 + .../src/lib/services/dot-page-api.service.ts | 1 + .../src/lib/store/features/load/withLoad.ts | 13 ++- 5 files changed, 83 insertions(+), 41 deletions(-) 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() { }); } }) - ) - ) + ); + }) ); }) )