Release 22.02 to master (#1864)

* update release version for dotcms-ui & dotcms-webcomponents * CI: bumps version to 22.2.0-rc.2 [skip ci] * #21504 Template designer: container selector breaks while there are "Unsave Changes" * CI: bumps version to 22.2.0-rc.2 [skip ci] * #21436 Enable the bring back button (#1846) * CI: bumps version to 22.2.0-rc.3 [skip ci] * #21540 Add a form from the Contentlet palette in edit page is not working * CI: bumps version to 22.2.0-rc.4 [skip ci] * #21122 Replace What's changed with the htmldiff js library (#1855) * replace backend library * cleanup * tests * cleanup * error handler * CI: bumps version to 22.2.0-rc.5 [skip ci] * #21600 Remove "Unsaved changes" from auto saving * #21240 Show global message on inline editing (#1861) * dotCMS/core #21436 Prevent the redirect of the page when we are in edit mode * CI: bumps version to 22.2.0-rc.6 [skip ci] * Fix tests * CI: bumps version to 22.3.0-next.9 [skip ci] Co-authored-by: victoralfaro-dotcms <[email protected]> Co-authored-by: Rafael Velazco <[email protected]> Co-authored-by: Humberto Morera <[email protected]>
dotCMS · Jan 31, 2022 · 4563fb0 · 4563fb0
1 parent fea05b6
commit 4563fb0
Show file tree

Hide file tree

Showing 31 changed files with 302 additions and 181 deletions.
diff --git a/apps/dotcms-ui/src/app/api/services/dot-edit-layout/dot-edit-layout.service.spec.ts b/apps/dotcms-ui/src/app/api/services/dot-edit-layout/dot-edit-layout.service.spec.ts
@@ -258,12 +258,12 @@ describe('DotEditLayoutService', () => {
         })
     });
 
-    it('Should set _showMessage to true', (done) => {
-        dotEditLayoutService.showMessage$.subscribe((resp) =>{
+    it('Should set _closeEditLayout to true', (done) => {
+        dotEditLayoutService.closeEditLayout$.subscribe((resp) =>{
             expect(resp).toBeTruthy();
             done();
         })
-        dotEditLayoutService.changeMessageState(true);
+        dotEditLayoutService.changeCloseEditLayoutState(true);
     });
 
 });
diff --git a/apps/dotcms-ui/src/app/api/services/dot-edit-layout/dot-edit-layout.service.ts b/apps/dotcms-ui/src/app/api/services/dot-edit-layout/dot-edit-layout.service.ts
@@ -26,7 +26,7 @@ import { DotPageContainer } from '@models/dot-page-container/dot-page-container.
 export class DotEditLayoutService {
     private _addGridBox: Subject<boolean> = new Subject();
 
-    private _showMessage: Subject<boolean> = new Subject();
+    private _closeEditLayout: Subject<boolean> = new Subject();
     private _canBeDesactivated = new BehaviorSubject(true);
 
     constructor(private templateContainersCacheService: DotTemplateContainersCacheService) {}
@@ -36,8 +36,8 @@ export class DotEditLayoutService {
      * @readonly
      * @memberof DotEditLayoutService
      */
-     get showMessage$() {
-        return this._showMessage;
+     get closeEditLayout$() {
+        return this._closeEditLayout;
     }
 
     /**
@@ -63,8 +63,8 @@ export class DotEditLayoutService {
      * @param {boolean} next
      * @memberof DotEditLayoutService
      */
-    changeMessageState(next: boolean) {
-        this._showMessage.next(next);
+    changeCloseEditLayoutState(next: boolean) {
+        this._closeEditLayout.next(next);
     }
 
     /**

diff --git a/apps/dotcms-ui/src/app/api/services/dot-edit-page/dot-edit-page.service.spec.ts b/apps/dotcms-ui/src/app/api/services/dot-edit-page/dot-edit-page.service.spec.ts
@@ -46,6 +46,17 @@ describe('DotEditPageService', () => {
         req.flush({});
     });
 
+    it('should do a request for see whatChanged', () => {
+        const pageId = '123-456';
+        const languageId = '1';
+
+        dotEditPageService.whatChange(pageId, languageId).subscribe();
+
+        const req = httpMock.expectOne(`v1/page/${pageId}/render/versions?langId=${languageId}`);
+        expect(req.request.method).toBe('GET');
+        req.flush({});
+    });
+
     afterEach(() => {
         httpMock.verify();
     });

diff --git a/apps/dotcms-ui/src/app/api/services/dot-edit-page/dot-edit-page.service.ts b/apps/dotcms-ui/src/app/api/services/dot-edit-page/dot-edit-page.service.ts
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { CoreWebService } from '@dotcms/dotcms-js';
 import { DotPageContainer } from '@models/dot-page-container/dot-page-container.model';
 import { Observable } from 'rxjs';
+import { DotWhatChanged } from '@models/dot-what-changed/dot-what-changed.model';
 
 @Injectable()
 export class DotEditPageService {
@@ -14,7 +15,7 @@ export class DotEditPageService {
      * @param string pageId
      * @param DotPageContainer[] content
      * @returns Observable<string>
-     * @memberof DotContainerContentletService
+     * @memberof DotEditPageService
      */
     save(pageId: string, content: DotPageContainer[]): Observable<string> {
         return this.coreWebService
@@ -25,4 +26,20 @@ export class DotEditPageService {
             })
             .pipe(pluck('entity'));
     }
+
+    /**
+     * Get the live and working version markup of specific page.
+     *
+     * @param string pageId
+     * @param string language
+     * @returns Observable<DotWhatChanged>
+     * @memberof DotEditPageService
+     */
+    whatChange(pageId: string, languageId: string): Observable<DotWhatChanged> {
+        return this.coreWebService
+            .requestView({
+                url: `v1/page/${pageId}/render/versions?langId=${languageId}`
+            })
+            .pipe(pluck('entity'));
+    }
 }
diff --git a/.../dotcms-ui/src/app/api/services/guards/layout-editor-can-deactivate-guard.service.spec.ts b/.../dotcms-ui/src/app/api/services/guards/layout-editor-can-deactivate-guard.service.spec.ts
@@ -34,8 +34,8 @@ describe('LayoutEditorCanDeactivateGuardService', () => {
         });
     });
 
-    it('should set _showMessage when canBeDesactivated is false', (done) => {
-        dotEditLayoutService.showMessage$.subscribe((resp) => {
+    it('should set _closeEditLayout when canBeDesactivated is false', (done) => {
+        dotEditLayoutService.closeEditLayout$.subscribe((resp) => {
             expect(resp).toBeTruthy();
             done();
         });

diff --git a/apps/dotcms-ui/src/app/api/services/guards/layout-editor-can-deactivate-guard.service.ts b/apps/dotcms-ui/src/app/api/services/guards/layout-editor-can-deactivate-guard.service.ts
@@ -35,7 +35,7 @@ export class LayoutEditorCanDeactivateGuardService implements CanDeactivate<CanD
         return this.dotEditLayoutService.canBeDesactivated$.pipe(
             filter((res) => {
                 if(!res) {
-                    this.dotEditLayoutService.changeMessageState(!res);
+                    this.dotEditLayoutService.changeCloseEditLayoutState(!res);
                 }
                 return res;
             })

diff --git a/...dot-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.ts b/...dot-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.ts
@@ -8,14 +8,8 @@ import {
     OnDestroy
 } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
-
 import { DotLicenseService } from '@services/dot-license/dot-license.service';
 import { DotPageRenderState } from '@portlets/dot-edit-page/shared/models';
-import { DotMessageDisplayService } from '@components/dot-message-display/services';
-import { DotEventsService } from '@services/dot-events/dot-events.service';
-import { DotEvent } from '@shared/models/dot-event/dot-event';
-import { DotMessageSeverity, DotMessageType } from '@components/dot-message-display/model';
 import { DotPageMode } from '@models/dot-page/dot-page-mode.enum';
 import { DotCMSContentlet } from '@dotcms/dotcms-models';
 
@@ -39,11 +33,7 @@ export class DotEditPageToolbarComponent implements OnInit, OnChanges, OnDestroy
 
     private destroy$: Subject<boolean> = new Subject<boolean>();
 
-    constructor(
-        private dotLicenseService: DotLicenseService,
-        private dotEventsService: DotEventsService,
-        private dotMessageDisplayService: DotMessageDisplayService
-    ) {}
+    constructor(private dotLicenseService: DotLicenseService) {}
 
     ngOnInit() {
         this.isEnterpriseLicense$ = this.dotLicenseService.isEnterprise();

diff --git a/...tlets/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.html b/...tlets/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.html
@@ -1 +1,10 @@
-<dot-iframe [src]="url"></dot-iframe>
+<dot-iframe *ngIf="whatsChanged.diff else noChanges" #dotIframe></dot-iframe>
+<ng-template #noChanges>
+    <span class='whats-changed__empty-state'>
+        {{'nothing-changed' | dm}}
+    </span>
+</ng-template>
+
+
+
+
diff --git a/...tlets/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.scss b/...tlets/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.scss
@@ -1,3 +1,5 @@
+@use "variables" as *;
+
 :host {
     display: flex;
     flex-direction: column;
@@ -11,4 +13,10 @@
             flex-grow: 1;
         }
     }
+
+    .whats-changed__empty-state {
+        text-align: center;
+        margin-top: $spacing-9;
+        font-size: $font-size-xx-large;
+    }
 }
diff --git a/...ts/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.spec.ts b/...ts/dot-edit-page/content/components/dot-whats-changed/dot-whats-changed.component.spec.ts
@@ -1,12 +1,13 @@
-/* tslint:disable:no-unused-variable */
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { DebugElement, Input, Component } from '@angular/core';
-
-import { DotWhatsChangedComponent } from './dot-whats-changed.component';
-import { LoginService } from '@dotcms/dotcms-js';
-import { LoginServiceMock } from '../../../../../test/login-service.mock';
+import { DebugElement, Component, ViewChild, ElementRef } from '@angular/core';
+import { DotWhatsChangedComponent, SHOW_DIFF_STYLES } from './dot-whats-changed.component';
 import { IframeComponent } from '@components/_common/iframe/iframe-component';
+import { DotEditPageService } from '@services/dot-edit-page/dot-edit-page.service';
+import { of } from 'rxjs';
+import { DotDOMHtmlUtilService } from '@portlets/dot-edit-page/content/services/html/dot-dom-html-util.service';
+import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
+import { DotHttpErrorManagerService } from '@services/dot-http-error-manager/dot-http-error-manager.service';
 
 @Component({
     selector: 'dot-test',
@@ -19,70 +20,85 @@ class TestHostComponent {
 
 @Component({
     selector: 'dot-iframe',
-    template: ''
+    template: '<iframe #iframeElement></iframe>'
 })
 class TestDotIframeComponent {
-    @Input()
-    src: string;
+    @ViewChild('iframeElement') iframeElement: ElementRef;
 }
 
 describe('DotWhatsChangedComponent', () => {
     let component: DotWhatsChangedComponent;
     let fixture: ComponentFixture<TestHostComponent>;
     let de: DebugElement;
     let dotIframe: IframeComponent;
+    let dotEditPageService: DotEditPageService;
+    let dotDOMHtmlUtilService: DotDOMHtmlUtilService;
 
-    beforeEach(
-        waitForAsync(() => {
-            TestBed.configureTestingModule({
-                declarations: [DotWhatsChangedComponent, TestDotIframeComponent, TestHostComponent],
-                providers: [
-                    {
-                        provide: LoginService,
-                        useClass: LoginServiceMock
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [DotWhatsChangedComponent, TestDotIframeComponent, TestHostComponent],
+            providers: [
+                {
+                    provide: DotEditPageService,
+                    useValue: {
+                        whatChange: jasmine
+                            .createSpy()
+                            .and.returnValue(
+                                of({ diff: true, renderLive: 'ABC', renderWorking: 'ABC DEF' })
+                            )
+                    }
+                },
+                {
+                    provide: DotDOMHtmlUtilService,
+                    useValue: {
+                        createStyleElement: jasmine
+                            .createSpy()
+                            .and.returnValue(document.createElement('style'))
                     }
-                ]
-            }).compileComponents();
-        })
-    );
+                },
+                {
+                    provide: DotHttpErrorManagerService,
+                    useValue: {
+                        handle: jasmine.createSpy()
+                    }
+                }
+            ],
+            imports: [DotMessagePipeModule]
+        });
 
-    beforeEach(() => {
         fixture = TestBed.createComponent(TestHostComponent);
 
         de = fixture.debugElement.query(By.css('dot-whats-changed'));
         component = de.componentInstance;
+        dotEditPageService = TestBed.inject(DotEditPageService);
+        dotDOMHtmlUtilService = TestBed.inject(DotDOMHtmlUtilService);
+        fixture.detectChanges();
+        dotIframe = de.query(By.css('dot-iframe')).componentInstance;
 
         fixture.componentInstance.pageId = '123';
-        fixture.componentInstance.languageId = '321';
-        dotIframe = de.query(By.css('dot-iframe')).componentInstance;
+        fixture.componentInstance.languageId = '1';
         fixture.detectChanges();
     });
 
-    it('should have dot-iframe', () => {
-        expect(dotIframe).toBeTruthy();
-    });
-
-    it('should set url based on the page id', () => {
-        expect(dotIframe.src).toEqual(
-            `/html/portlet/ext/htmlpages/view_live_working_diff.jsp?id=${component.pageId}&pageLang=${component.languageId}`
+    it('should load content based on the pageId and URL', () => {
+        expect(dotDOMHtmlUtilService.createStyleElement).toHaveBeenCalledOnceWith(SHOW_DIFF_STYLES);
+        expect(dotEditPageService.whatChange).toHaveBeenCalledWith('123', '1');
+        expect(dotIframe.iframeElement.nativeElement.contentDocument.body.innerHTML).toContain(
+            'ABC<ins class="diffins">&nbsp;DEF</ins>'
         );
     });
 
-    it('should reset url when languageId is change', () => {
-        fixture.componentInstance.languageId = '123';
+    it('should load content when languageId is change', () => {
+        fixture.componentInstance.languageId = '2';
         fixture.detectChanges();
 
-        expect(dotIframe.src).toEqual(
-            `/html/portlet/ext/htmlpages/view_live_working_diff.jsp?id=123&pageLang=123`
-        );
+        expect(dotEditPageService.whatChange).toHaveBeenCalledWith('123', '2');
     });
 
-    it('should reset url when pageId is change', () => {
-        fixture.componentInstance.pageId = '321';
+    it('should load content when pageId is change', () => {
+        fixture.componentInstance.pageId = 'abc-123';
         fixture.detectChanges();
 
-        expect(dotIframe.src).toEqual(
-            `/html/portlet/ext/htmlpages/view_live_working_diff.jsp?id=321&pageLang=321`
-        );
+        expect(dotEditPageService.whatChange).toHaveBeenCalledWith('abc-123', '1');
     });
 });