feat(edit-ema): Add copy url and api link buttons (#26905) #26846

* dev (dot-ema): add language selector to toolbar * dev (edit ema language selector): small styles tweaks * Update edit-ema-toolbar.component.scss * test (dot ema toolbar): add missing test cases * dev (dot ema language selector): add iso to language * dev (overlay panel): fix shadow * fix format for languages that doesn't have country code * dev (dot ema): refactor to change the approach of changing languages * fix broken test * dev (dot-ema): solve feedback * dev (dot-ema): add const * Update edit-ema-language-selector.component.ts * dev (general): move dot avatar and use it in new persona selector * dev (dot-ema): add basic flow for changing personas * dev (dot-ema): add flow for persona change and save * dev (dot-ema): get persona tag from nextJS * just styling dummy buttons * dev (dot-ema): Refactor to have a better handling in persona selection * dev (persona selector): selected item is just used for autocomplete in multiple mode * dev (persona-selector): add tests cases * update mocked buttons * Update core-web/libs/portlets/dot-ema/src/lib/components/edit-ema-persona-selector/edit-ema-persona-selector.component.spec.ts Co-authored-by: Freddy Montes <[email protected]> * Update core-web/libs/portlets/dot-ema/src/lib/components/edit-ema-persona-selector/edit-ema-persona-selector.component.spec.ts Co-authored-by: Freddy Montes <[email protected]> * Update core-web/libs/portlets/dot-ema/src/lib/components/edit-ema-persona-selector/edit-ema-persona-selector.component.spec.ts Co-authored-by: Freddy Montes <[email protected]> * Update core-web/libs/portlets/dot-ema/src/lib/components/edit-ema-persona-selector/edit-ema-persona-selector.component.ts Co-authored-by: Freddy Montes <[email protected]> * Update core-web/libs/portlets/dot-ema/src/lib/components/edit-ema-persona-selector/edit-ema-persona-selector.component.ts Co-authored-by: Freddy Montes <[email protected]> * Update core-web/libs/portlets/dot-ema/src/lib/services/dot-page-api.service.ts Co-authored-by: Freddy Montes <[email protected]> * solve feedback * make vm$ null unless we have data to prevent bad requests * solve feedback * dev (persona selector): cleaning * dev (persona selector): reset the value when rejecting * remove todos from scoped PR * Update toolbar styles and button size * Update persona selector * Imported necessary modules and fixed imports * Update tests * Fix tests * Fix cd in listbox * fix avatar bug on persona selector * fix avatar bug on persona selector * language selector now works as persona selector * last cleanup * dev (dot-ema): Add button to copy page url and to go to api response * fix race condition on personalization * solve feedback --------- Co-authored-by: Freddy Montes <[email protected]>
dotCMS · Dec 11, 2023 · 0b95007 · 0b95007
1 parent 8adeb8c
commit 0b95007
Show file tree

Hide file tree

Showing 10 changed files with 221 additions and 73 deletions.
diff --git a/...ema/src/lib/components/edit-ema-language-selector/edit-ema-language-selector.component.ts b/...ema/src/lib/components/edit-ema-language-selector/edit-ema-language-selector.component.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
     Component,
     EventEmitter,
     Input,
@@ -27,7 +28,8 @@ interface DotLanguageWithLabel extends DotLanguage {
     standalone: true,
     imports: [CommonModule, OverlayPanelModule, ListboxModule, ButtonModule],
     templateUrl: './edit-ema-language-selector.component.html',
-    styleUrls: ['./edit-ema-language-selector.component.scss']
+    styleUrls: ['./edit-ema-language-selector.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EmaLanguageSelectorComponent implements AfterViewInit {
     @ViewChild('listbox') listbox: Listbox;

diff --git a/...t-ema/src/lib/components/edit-ema-persona-selector/edit-ema-persona-selector.component.ts b/...t-ema/src/lib/components/edit-ema-persona-selector/edit-ema-persona-selector.component.ts
@@ -3,6 +3,7 @@ import { Observable, of } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
     Component,
     EventEmitter,
     Input,
@@ -41,7 +42,8 @@ import { DotPageApiService } from '../../services/dot-page-api.service';
         FormsModule
     ],
     templateUrl: './edit-ema-persona-selector.component.html',
-    styleUrls: ['./edit-ema-persona-selector.component.scss']
+    styleUrls: ['./edit-ema-persona-selector.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EditEmaPersonaSelectorComponent implements OnInit, AfterViewInit {
     @ViewChild('listbox') listbox: Listbox;

diff --git a/core-web/libs/portlets/dot-ema/src/lib/feature/dot-ema.component.html b/core-web/libs/portlets/dot-ema/src/lib/feature/dot-ema.component.html
@@ -1,20 +1,35 @@
-<ng-container *ngIf="vm$ | async as vm">
+<ng-container *ngIf="editorState$ | async as es">
     <dot-edit-ema-toolbar>
         <ng-container left>
             <p-button label="Preview" icon="pi pi-desktop" styleClass="p-button-text p-button-sm" />
             <p-button label="Bookmark" icon="pi pi-star" styleClass="p-button-text p-button-sm" />
-            <p-button label="Copy ID" icon="pi pi-copy" styleClass="p-button-text p-button-sm" />
-            <p-button label="API" icon="pi pi-link" styleClass="p-button-text p-button-sm" />
+            <p-button
+                [cdkCopyToClipboard]="es.iframeURL"
+                [label]="'editpage.header.copy' | dm"
+                (cdkCopyToClipboardCopied)="triggerCopyToast()"
+                icon="pi pi-copy"
+                styleClass="p-button-text p-button-sm"
+                data-testId="ema-copy-url" />
+            <a
+                class="p-button-sm p-button-text"
+                [href]="es.apiURL"
+                [title]="es.apiURL"
+                pButton
+                target="_blank"
+                data-testId="ema-api-link"
+                icon="pi pi-link"
+                label="API">
+            </a>
         </ng-container>
         <ng-container right>
             <dot-edit-ema-language-selector
-                [language]="vm.editor.viewAs.language"
+                [language]="es.editor.viewAs.language"
                 (selected)="onLanguageSelected($event)"
                 data-testId="language-selector" />
             <dot-edit-ema-persona-selector
                 #personaSelector
-                [pageID]="vm.editor.page.identifier"
-                [value]="vm.selectedPersona"
+                [pageID]="es.editor.page.identifier"
+                [value]="es.editor.viewAs.persona"
                 (selected)="onPersonaSelected($event)"
                 data-testId="persona-selector" />
             <p-button class="p-button-sm" label="Save" />
@@ -23,18 +38,20 @@
     <div class="iframe-wrapper">
         <iframe
             #iframe
-            [src]="vm.iframeUrl | safeUrl"
+            [src]="es.iframeURL | safeUrl"
             [title]="host"
             data-testId="iframe"
             style="border: none"
             width="100%"
             height="100%"></iframe>
     </div>
+</ng-container>
+<ng-container *ngIf="dialogState$ | async as ds">
     <p-dialog
         #dialog
-        [visible]="vm.dialogVisible"
+        [visible]="ds.dialogVisible"
         [style]="{ height: '90vh', width: '90vw' }"
-        [header]="vm.dialogHeader"
+        [header]="ds.dialogHeader"
         [draggable]="false"
         [resizable]="false"
         [maximizable]="true"
@@ -43,14 +60,14 @@
         data-testId="dialog">
         <iframe
             #dialogIframe
-            [style]="{ border: 'none', display: vm.dialogIframeLoading ? 'none' : 'block' }"
-            [src]="vm.dialogIframeURL | safeUrl"
+            [style]="{ border: 'none', display: ds.dialogIframeLoading ? 'none' : 'block' }"
+            [src]="ds.dialogIframeURL | safeUrl"
             (load)="onIframeLoad($event)"
             title="dialog"
             data-testId="dialog-iframe"
             width="100%"
             height="100%"></iframe>
-        <dot-spinner *ngIf="vm.dialogIframeLoading" data-testId="spinner"></dot-spinner>
+        <dot-spinner *ngIf="ds.dialogIframeLoading" data-testId="spinner"></dot-spinner>
     </p-dialog>
 
     <p-confirmDialog
@@ -62,3 +79,4 @@
         rejectButtonStyleClass="p-button-outlined"
         data-testId="confirm-dialog"></p-confirmDialog>
 </ng-container>
+<p-toast position="top-center" data-testId="ema-toast"></p-toast>
diff --git a/core-web/libs/portlets/dot-ema/src/lib/feature/dot-ema.component.scss b/core-web/libs/portlets/dot-ema/src/lib/feature/dot-ema.component.scss
@@ -11,6 +11,12 @@
         padding-top: $spacing-3;
     }
 
+    a,
+    a:focus,
+    a:active {
+        text-decoration: none;
+    }
+
     ::ng-deep {
         .p-dialog {
             .p-dialog-content {

diff --git a/core-web/libs/portlets/dot-ema/src/lib/feature/dot-ema.component.spec.ts b/core-web/libs/portlets/dot-ema/src/lib/feature/dot-ema.component.spec.ts
@@ -8,7 +8,7 @@ import { By } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { ConfirmationService } from 'primeng/api';
+import { ConfirmationService, MessageService } from 'primeng/api';
 
 import { DotLanguagesService, DotMessageService, DotPersonalizeService } from '@dotcms/data-access';
 import {
@@ -23,7 +23,7 @@ import { EditEmaStore } from './store/dot-ema.store';
 import { EmaLanguageSelectorComponent } from '../components/edit-ema-language-selector/edit-ema-language-selector.component';
 import { EditEmaPersonaSelectorComponent } from '../components/edit-ema-persona-selector/edit-ema-persona-selector.component';
 import { DotPageApiService } from '../services/dot-page-api.service';
-import { DEFAULT_PERSONA, WINDOW } from '../shared/consts';
+import { DEFAULT_PERSONA, HOST, WINDOW } from '../shared/consts';
 import { NG_CUSTOM_EVENTS } from '../shared/enums';
 import { AddContentletPayload } from '../shared/models';
 
@@ -45,6 +45,7 @@ describe('DotEmaComponent', () => {
         imports: [RouterTestingModule, HttpClientTestingModule],
         detectChanges: false,
         componentProviders: [
+            MessageService,
             EditEmaStore,
             ConfirmationService,
             { provide: DotLanguagesService, useValue: new DotLanguagesServiceMock() },
@@ -141,6 +142,58 @@ describe('DotEmaComponent', () => {
             expect(store.load).toHaveBeenCalledWith(mockQueryParams);
         });
 
+        describe('toast', () => {
+            it('should trigger messageService when clicking on ema-copy-url', () => {
+                spectator.detectChanges();
+
+                const messageService = spectator.inject(MessageService, true);
+                const messageServiceSpy = jest.spyOn(messageService, 'add');
+                spectator.detectChanges();
+
+                const button = spectator.debugElement.query(By.css('[data-testId="ema-copy-url"]'));
+
+                spectator.triggerEventHandler(button, 'cdkCopyToClipboardCopied', {});
+
+                expect(messageServiceSpy).toHaveBeenCalledWith({
+                    severity: 'success',
+                    summary: 'Copied',
+                    life: 3000
+                });
+            });
+
+            it("should open a toast when messageService's add is called", () => {
+                spectator.detectChanges();
+
+                const button = spectator.debugElement.query(By.css('[data-testId="ema-copy-url"]'));
+
+                spectator.triggerEventHandler(button, 'cdkCopyToClipboardCopied', {});
+
+                const toastItem = spectator.query('p-toastitem');
+
+                expect(toastItem).not.toBeNull();
+            });
+        });
+
+        describe('API URL', () => {
+            it('should have the url setted with the current language and persona', () => {
+                spectator.detectChanges();
+
+                const button = spectator.debugElement.query(By.css('[data-testId="ema-api-link"]'));
+
+                expect(button.nativeElement.href).toBe(
+                    'http://localhost/api/v1/page/json/page-one?language_id=1&com.dotmarketing.persona.id=modes.persona.no.persona'
+                );
+            });
+
+            it('should open a new tab', () => {
+                spectator.detectChanges();
+
+                const button = spectator.debugElement.query(By.css('[data-testId="ema-api-link"]'));
+
+                expect(button.nativeElement.target).toBe('_blank');
+            });
+        });
+
         describe('language selector', () => {
             it('should have a language selector', () => {
                 spectator.detectChanges();
@@ -223,7 +276,8 @@ describe('DotEmaComponent', () => {
             });
 
             expect(iframe.nativeElement.src).toBe(
-                'http://localhost:3000/my-awesome-route?language_id=2&com.dotmarketing.persona.id=modes.persona.no.persona'
+                HOST +
+                    '/my-awesome-route?language_id=2&com.dotmarketing.persona.id=modes.persona.no.persona'
             );
         });
 
@@ -238,7 +292,7 @@ describe('DotEmaComponent', () => {
 
                     window.dispatchEvent(
                         new MessageEvent('message', {
-                            origin: 'http://localhost:3000',
+                            origin: HOST,
                             data: {
                                 action: 'delete-contentlet',
                                 payload: {
@@ -292,7 +346,7 @@ describe('DotEmaComponent', () => {
 
                     window.dispatchEvent(
                         new MessageEvent('message', {
-                            origin: 'http://localhost:3000',
+                            origin: HOST,
                             data: {
                                 action: 'add-contentlet',
                                 payload: {
@@ -361,7 +415,7 @@ describe('DotEmaComponent', () => {
 
                     window.dispatchEvent(
                         new MessageEvent('message', {
-                            origin: 'http://localhost:3000',
+                            origin: HOST,
                             data: {
                                 action: 'edit-contentlet',
                                 payload: {
@@ -434,7 +488,7 @@ describe('DotEmaComponent', () => {
 
                 window.dispatchEvent(
                     new MessageEvent('message', {
-                        origin: 'http://localhost:3000',
+                        origin: HOST,
                         data: {
                             action: 'edit-contentlet',
                             payload: {
@@ -481,7 +535,7 @@ describe('DotEmaComponent', () => {
 
                 window.dispatchEvent(
                     new MessageEvent('message', {
-                        origin: 'http://localhost:3000',
+                        origin: HOST,
                         data: {
                             action: 'edit-contentlet',
                             payload: {
@@ -502,7 +556,7 @@ describe('DotEmaComponent', () => {
 
                 window.dispatchEvent(
                     new MessageEvent('message', {
-                        origin: 'http://localhost:3000',
+                        origin: HOST,
                         data: {
                             action: 'edit-contentlet',
                             payload: {
@@ -536,7 +590,7 @@ describe('DotEmaComponent', () => {
 
                 window.dispatchEvent(
                     new MessageEvent('message', {
-                        origin: 'http://localhost:3000',
+                        origin: HOST,
                         data: {
                             action: 'edit-contentlet',
                             payload: {
@@ -587,7 +641,7 @@ describe('DotEmaComponent', () => {
 
                 window.dispatchEvent(
                     new MessageEvent('message', {
-                        origin: 'http://localhost:3000',
+                        origin: HOST,
                         data: {
                             action: 'set-url',
                             payload: {
@@ -608,7 +662,7 @@ describe('DotEmaComponent', () => {
 
                 window.dispatchEvent(
                     new MessageEvent('message', {
-                        origin: 'http://localhost:3000',
+                        origin: HOST,
                         data: {
                             action: 'edit-contentlet',
                             payload: {