feat(FTM): New UVE Toolbar - Implement "API" button (#30830)

This pull request includes several changes to the `DotUveToolbarComponent` and related files to enhance the functionality and testing of the API URL link. The most important changes include updating the toolbar component to use an anchor tag for the API URL link, adding a computed property for the API URL, and enhancing the tests to verify the correct behavior of the API URL link. Changes to `DotUveToolbarComponent`: * Updated the toolbar component to use an anchor (`<a>`) tag instead of a button for the API URL link, and added attributes such as `title`, `target`, and `href` to improve accessibility and functionality. (`[core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.htmlL19-R26](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bL19-R26)`) Enhancements to testing: * Added a constant `$apiURL` and updated the `DotUveToolbarComponent` tests to include this constant and verify the presence and correctness of the API URL link. (`[[1]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R38-R39)`, `[[2]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R123)`, `[[3]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L177-L180)`, `[[4]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R195-R205)`) Computed property for API URL: * Added a computed property `$apiURL` in the `DotUveToolbarComponent` to dynamically generate the API URL based on the page parameters. (`[[1]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R34)`, `[[2]](diffhunk://#diff-e6d3fb6319626fa85a4fc6894b57935843713366be593de6dd1dc5ed68bf6afcR119-R127)`) New test for `withUVEToolbar`: * Added a new test file `withUVEToolbar.spec.ts` to verify the computed property `$apiURL` and ensure it returns the correct API URL based on given page parameters. (`[core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.spec.tsR1-R83](diffhunk://#diff-7a5de702ac1dc81304f4c31816f5c0363aa56141f8afa583a87856e7a0d8482dR1-R83)`) ### Videos #### Traditional https://github.com/user-attachments/assets/3042d0d0-c964-4d1c-b454-736e71542f21 #### Headless https://github.com/user-attachments/assets/25fc13b6-5101-47e0-871a-feea0b65156a
dotCMS · Dec 4, 2024 · 3b866d6 · 3b866d6
1 parent 9a5d196
commit 3b866d6
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 5 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
@@ -16,10 +16,14 @@
                 [cdkCopyToClipboard]="$toolbar().editor.copyUrl"
                 data-testId="uve-toolbar-copy-url" />
 
-            <p-button
+            <a
+                title="Page API URL"
+                pButton
                 label="API"
-                styleClass="p-button-text p-button-sm"
-                data-testId="uve-toolbar-api-link" />
+                class="p-button-text"
+                target="_blank"
+                data-testId="uve-toolbar-api-link"
+                [href]="$apiURL()"></a>
         } @else if ($toolbar().preview) {
             <div>PREVIEW MODE CONTENT</div>
             <button (click)="togglePreviewMode(false)">Back</button>

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
@@ -37,6 +37,8 @@ import {
 import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
 import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component';
 
+const $apiURL = '/api/v1/page/json/123-xyz-567-xxl?host_id=123-xyz-567-xxl&language_id=1';
+
 describe('DotUveToolbarComponent', () => {
     let spectator: Spectator<DotUveToolbarComponent>;
     let messageService: MessageService;
@@ -125,6 +127,7 @@ describe('DotUveToolbarComponent', () => {
         setSocialMedia: jest.fn(),
         pageParams: signal(params),
         pageAPIResponse: signal(MOCK_RESPONSE_VTL),
+        $apiURL: signal($apiURL),
         reloadCurrentPage: jest.fn(),
         loadPageAsset: jest.fn()
     };
@@ -187,8 +190,8 @@ describe('DotUveToolbarComponent', () => {
             });
         });
 
-        it('should have api link button', () => {
-            expect(spectator.query(byTestId('uve-toolbar-api-link'))).toBeTruthy();
+        it('should have not experiments button if experiment is not running', () => {
+            expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeFalsy();
         });
 
         it('should have language selector', () => {
@@ -202,6 +205,17 @@ describe('DotUveToolbarComponent', () => {
         it('should have workflows button', () => {
             expect(spectator.query(byTestId('uve-toolbar-workflow-actions'))).toBeTruthy();
         });
+
+        describe('API URL', () => {
+            it('should have api link button', () => {
+                expect(spectator.query(byTestId('uve-toolbar-api-link'))).toBeTruthy();
+            });
+
+            it('should have api link button with correct href', () => {
+                const btn = spectator.query(byTestId('uve-toolbar-api-link'));
+                expect(btn.getAttribute('href')).toBe($apiURL);
+            });
+        });
     });
 
     describe('State changes', () => {

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
@@ -33,6 +33,7 @@ export class DotUveToolbarComponent {
     readonly #dotMessageService = inject(DotMessageService);
 
     readonly $toolbar = this.#store.$uveToolbar;
+    readonly $apiURL = this.#store.$apiURL;
 
     togglePreviewMode(preview: boolean) {
         this.#store.togglePreviewMode(preview);

diff --git a/...bs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.spec.ts b/...bs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.spec.ts
@@ -0,0 +1,83 @@
+import { describe } from '@jest/globals';
+import { createServiceFactory, mockProvider, SpectatorService } from '@ngneat/spectator/jest';
+import { signalStore, withState } from '@ngrx/signals';
+import { of } from 'rxjs';
+
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { withUVEToolbar } from './withUVEToolbar';
+
+import { DotPageApiService } from '../../../../services/dot-page-api.service';
+import { UVE_STATUS } from '../../../../shared/enums';
+import { MOCK_RESPONSE_HEADLESS } from '../../../../shared/mocks';
+import { UVEState } from '../../../models';
+
+const pageParams = {
+    url: 'test-url',
+    language_id: '1',
+    'com.dotmarketing.persona.id': 'dot:persona',
+    variantName: 'DEFAULT',
+    clientHost: 'http://localhost:3000'
+};
+
+const initialState: UVEState = {
+    isEnterprise: true,
+    languages: [],
+    pageAPIResponse: MOCK_RESPONSE_HEADLESS,
+    currentUser: null,
+    experiment: null,
+    errorCode: null,
+    pageParams,
+    status: UVE_STATUS.LOADED,
+    isTraditionalPage: false,
+    canEditPage: true,
+    pageIsLocked: true,
+    isClientReady: false
+};
+
+export const uveStoreMock = signalStore(withState<UVEState>(initialState), withUVEToolbar());
+
+describe('withEditor', () => {
+    let spectator: SpectatorService<InstanceType<typeof uveStoreMock>>;
+    let store: InstanceType<typeof uveStoreMock>;
+
+    const createService = createServiceFactory({
+        service: uveStoreMock,
+        providers: [
+            mockProvider(Router),
+            mockProvider(ActivatedRoute),
+            mockProvider(Router),
+            mockProvider(ActivatedRoute),
+            {
+                provide: DotPageApiService,
+                useValue: {
+                    get() {
+                        return of(MOCK_RESPONSE_HEADLESS);
+                    },
+                    getClientPage() {
+                        return of(MOCK_RESPONSE_HEADLESS);
+                    },
+                    save: jest.fn()
+                }
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        spectator = createService();
+        store = spectator.service;
+    });
+
+    describe('Computed', () => {
+        it('should return the right API URL', () => {
+            const params = { ...pageParams };
+            // Delete the url from the params to test the function
+            delete params.url;
+
+            const queryParams = new URLSearchParams(params).toString();
+            const expectURL = `/api/v1/page/json/test-url?${queryParams}`;
+
+            expect(store.$apiURL()).toBe(expectURL);
+        });
+    });
+});
diff --git a/...eb/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.ts b/...eb/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.ts
@@ -116,6 +116,15 @@ export function withUVEToolbar() {
                     unlockButton: shouldShowUnlock ? unlockButton : null,
                     showInfoDisplay: shouldShowInfoDisplay
                 };
+            }),
+            $apiURL: computed<string>(() => {
+                const pageParams = store.pageParams();
+                const url = sanitizeURL(pageParams?.url);
+                const params = createPageApiUrlWithQueryParams(url, pageParams);
+                const pageType = store.isTraditionalPage() ? 'render' : 'json';
+                const pageAPI = `/api/v1/page/${pageType}/${params}`;
+
+                return pageAPI;
             })
         })),
         withMethods((store) => ({