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
dotCMS · Dec 3, 2024 · 83de9e0 · 83de9e0
1 parent 6167b8f
commit 83de9e0
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 41 deletions.
diff --git a/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html b/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
@@ -27,7 +27,12 @@
     </div>
 
     <div class="p-toolbar-group-end">
-        <span data-testId="uve-toolbar-running-experiment">Experiments</span>
+        @if ($toolbar().runningExperiment; as runningExperiment) {
+            <dot-ema-running-experiment
+                [runningExperiment]="runningExperiment"
+                data-testId="uve-toolbar-running-experiment" />
+        }
+
         <span data-testId="uve-toolbar-language-selector">Language</span>
         <span data-testId="uve-toolbar-persona-selector">Persona</span>
         <span data-testId="uve-toolbar-workflow-actions">Workflows</span>

diff --git a/...tlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts b/...tlet/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,14 +35,19 @@ 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<DotUveToolbarComponent>;
     let messageService: MessageService;
 
     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/...a/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts b/...a/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
@@ -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
@@ -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() {
                                                 });
                                             }
                                         })
-                                    )
-                                )
+                                    );
+                                })
                             );
                         })
                     )