Fix #25375: Template Builder Fix Autosave Feature (#25389)

* remove auto publish and save from template portlet

* fix save triggering on init

* fix autosave on leave for new template builder

* add test case

* fix broken tests

* enhance emit of changes

* solve feedback

* add destroy subject

* add test for emit changes

* fix console error

* solve feedback

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/layout/dot-edit-layout/dot-edit-layout.component.spec.ts

@@ -266,6 +266,34 @@ describe('DotEditLayoutComponent', () => {
                 expect(component.pageState).toEqual(new DotPageRender(mockDotRenderedPage()));
             }));
 
+            it('should save the layout instantly when closeEditLayout is true', () => {
+                const res: DotPageRender = new DotPageRender(mockDotRenderedPage());
+                spyOn(dotPageLayoutService, 'save').and.returnValue(of(res));
+
+                layoutDesignerDe.triggerEventHandler('updateTemplate', {
+                    themeId: '123',
+                    layout: fakeLayout,
+                    title: null
+                });
+
+                dotEditLayoutService.changeCloseEditLayoutState(true);
+
+                expect(dotGlobalMessageService.loading).toHaveBeenCalledWith('Saving');
+                expect(dotGlobalMessageService.success).toHaveBeenCalledWith('Saved');
+                expect(dotGlobalMessageService.error).not.toHaveBeenCalled();
+
+                expect(dotPageLayoutService.save).toHaveBeenCalledWith('123', {
+                    themeId: '123',
+                    layout: fakeLayout,
+                    title: null
+                });
+                expect(dotTemplateContainersCacheService.set).toHaveBeenCalledWith({
+                    '/default/': processedContainers[0].container,
+                    '/banner/': processedContainers[1].container
+                });
+                expect(component.pageState).toEqual(new DotPageRender(mockDotRenderedPage()));
+            });
+
             it('should not save the layout when observable is destroy', fakeAsync(() => {
                 const res: DotPageRender = new DotPageRender(mockDotRenderedPage());
                 spyOn(dotPageLayoutService, 'save').and.returnValue(of(res));

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/layout/dot-edit-layout/dot-edit-layout.component.ts

@@ -41,6 +41,8 @@ export class DotEditLayoutComponent implements OnInit, OnDestroy {
 
     @HostBinding('style.minWidth') width = '100%';
 
+    private lastLayout: DotTemplateDesigner;
+
     constructor(
         private route: ActivatedRoute,
         private dotRouterService: DotRouterService,
@@ -69,6 +71,7 @@ export class DotEditLayoutComponent implements OnInit, OnDestroy {
 
         this.saveTemplateDebounce();
         this.apiLink = `api/v1/page/render${this.pageState.page.pageURI}?language_id=${this.pageState.page.languageId}`;
+        this.subscribeOnChangeBeforeLeaveHandler();
     }
 
     ngOnDestroy() {
@@ -122,6 +125,7 @@ export class DotEditLayoutComponent implements OnInit, OnDestroy {
     nextUpdateTemplate(value: DotTemplateDesigner) {
         this.canRouteBeDesativated(false);
         this.updateTemplate.next(value);
+        this.lastLayout = value;
     }
 
     /**
@@ -215,4 +219,20 @@ export class DotEditLayoutComponent implements OnInit, OnDestroy {
             {}
         );
     }
+
+    /**
+     * Handle save changes before leave
+     *
+     * @private
+     * @memberof DotEditLayoutComponent
+     */
+    private subscribeOnChangeBeforeLeaveHandler(): void {
+        this.dotEditLayoutService.closeEditLayout$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((res) => {
+                if (res) {
+                    this.onSave(this.lastLayout);
+                }
+            });
+    }
 }

core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-create-edit.component.html

@@ -1,14 +1,14 @@
 <ng-container *ngIf="vm$ | async as vm">
-    <dot-portlet-base [boxed]="false" *ngIf="vm.working.identifier">
+    <dot-portlet-base *ngIf="vm.working.identifier" [boxed]="false">
         <dot-portlet-toolbar [title]="vm.working.title">
-            <ng-container left *ngIf="vm.working.title">
+            <ng-container *ngIf="vm.working.title" left>
                 <button
-                    data-testId="editTemplateButton"
-                    pButton
                     class="p-button-text"
-                    icon="pi pi-pencil"
                     [label]="'templates.edit' | dm"
                     (click)="editTemplateProps()"
+                    data-testId="editTemplateButton"
+                    pButton
+                    icon="pi pi-pencil"
                 ></button>
                 <dot-api-link [href]="vm.apiLink"></dot-api-link>
             </ng-container>
@@ -20,7 +20,6 @@
                 [item]="vm.working"
                 (updateTemplate)="updateWorkingTemplate($event)"
                 (saveAndPublish)="saveAndPublishTemplate($event)"
-                (save)="saveTemplate($event)"
                 (cancel)="cancelTemplate()"
                 (custom)="onCustomEvent($event)"
             ></dot-template-builder>

core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-create-edit.component.spec.ts

@@ -253,7 +253,10 @@ describe('DotTemplateCreateEditComponent', () => {
             goToEditTemplate: jasmine.createSpy(),
             goToTemplateList: jasmine.createSpy(),
             saveTemplate: jasmine.createSpy(),
-            saveWorkingTemplate: jasmine.createSpy()
+            saveWorkingTemplate: jasmine.createSpy(),
+            saveAndPublishTemplate: jasmine.createSpy(),
+            updateTemplate: jasmine.createSpy(),
+            updateWorkingTemplate: jasmine.createSpy()
         };
     });
 
@@ -493,43 +496,7 @@ describe('DotTemplateCreateEditComponent', () => {
             });
 
             describe('edit layout', () => {
-                it('should save', () => {
-                    const builder = de.query(By.css('dot-template-builder'));
-                    builder.triggerEventHandler('save', {
-                        layout: {
-                            title: '',
-                            width: '',
-                            footer: true,
-                            header: false,
-                            sidebar: {},
-                            body: {
-                                rows: []
-                            }
-                        },
-                        themeId: '123'
-                    });
-
-                    expect(store.saveTemplate).toHaveBeenCalledWith({
-                        type: 'design',
-                        title: 'Some template',
-                        layout: {
-                            title: '',
-                            width: '',
-                            footer: true,
-                            header: false,
-                            sidebar: {},
-                            body: {
-                                rows: []
-                            }
-                        },
-                        identifier: '123',
-                        friendlyName: '',
-                        theme: '123',
-                        image: ''
-                    });
-                });
-
-                it('should call saveWorkingTemplate when updateTemplate', () => {
+                it('should call updateWorkingTemplate from store when updateTemplate', () => {
                     const builder = de.query(By.css('dot-template-builder'));
                     builder.triggerEventHandler('updateTemplate', {
                         layout: {
@@ -564,7 +531,7 @@ describe('DotTemplateCreateEditComponent', () => {
                         image: ''
                     };
 
-                    expect(store.saveWorkingTemplate).toHaveBeenCalledWith(template);
+                    expect(store.updateWorkingTemplate).toHaveBeenCalledWith(template);
                 });
 
                 it('should saveAndPublishTemplate', () => {
@@ -695,13 +662,13 @@ describe('DotTemplateCreateEditComponent', () => {
             });
 
             describe('edit layout', () => {
-                it('should save', () => {
+                it('should save and publish', () => {
                     const builder = de.query(By.css('dot-template-builder'));
-                    builder.triggerEventHandler('save', {
+                    builder.triggerEventHandler('saveAndPublish', {
                         body: `<h1>##Container and stuff</h1>`
                     });
 
-                    expect(store.saveTemplate).toHaveBeenCalledWith({
+                    expect(store.saveAndPublishTemplate).toHaveBeenCalledWith({
                         type: 'advanced',
                         title: 'Some template',
                         body: '<h1>##Container and stuff</h1>',
@@ -711,13 +678,13 @@ describe('DotTemplateCreateEditComponent', () => {
                     });
                 });
 
-                it('should call saveWorkingTemplate when updateTemplate', () => {
+                it('should call updateWorkingTemplate from store when updateTemplate', () => {
                     const builder = de.query(By.css('dot-template-builder'));
                     builder.triggerEventHandler('updateTemplate', {
                         body: `<h1>##Container and stuff</h1>`
                     });
 
-                    expect(store.saveWorkingTemplate).toHaveBeenCalledWith({
+                    expect(store.updateWorkingTemplate).toHaveBeenCalledWith({
                         type: 'advanced',
                         title: 'Some template',
                         body: '<h1>##Container and stuff</h1>',

core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-create-edit.component.ts

@@ -98,26 +98,13 @@ export class DotTemplateCreateEditComponent implements OnInit, OnDestroy {
     }
 
     /**
-     * Update Working Template
+     * Format template item to be updated on store
      *
-     * @param DotTemplate template
+     * @param {DotTemplate} template
      * @memberof DotTemplateCreateEditComponent
      */
     updateWorkingTemplate(template: DotTemplate): void {
-        this.store.saveWorkingTemplate({
-            ...this.form.value,
-            ...this.formatTemplateItem(template)
-        });
-    }
-
-    /**
-     * Save template to store
-     *
-     * @param DotTemplate template
-     * @memberof DotTemplateCreateEditComponent
-     */
-    saveTemplate(template: DotTemplate): void {
-        this.store.saveTemplate({
+        this.store.updateWorkingTemplate({
             ...this.form.value,
             ...this.formatTemplateItem(template)
         });

core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/dot-edit-layout-designer.component.spec.ts

@@ -88,7 +88,6 @@ const messageServiceMock = new MockDotMessageService({
 let component: DotEditLayoutDesignerComponent;
 let fixture: ComponentFixture<DotEditLayoutDesignerComponent>;
 let dotThemesService: DotThemesService;
-let dotEditLayoutService: DotEditLayoutService;
 
 describe('DotEditLayoutDesignerComponent', () => {
     beforeEach(() => {
@@ -158,7 +157,6 @@ describe('DotEditLayoutDesignerComponent', () => {
         fixture = TestBed.createComponent(DotEditLayoutDesignerComponent);
         component = fixture.componentInstance;
         dotThemesService = TestBed.inject(DotThemesService);
-        dotEditLayoutService = TestBed.inject(DotEditLayoutService);
     });
 
     describe('edit layout', () => {
@@ -222,13 +220,6 @@ describe('DotEditLayoutDesignerComponent', () => {
             );
         });
 
-        it('should save changes when closeEditLayout is true', () => {
-            spyOn(component.save, 'emit');
-            dotEditLayoutService.changeCloseEditLayoutState(true);
-            fixture.detectChanges();
-            expect(component.save.emit).toHaveBeenCalledTimes(1);
-        });
-
         it('should save changes when editing the form.', () => {
             spyOn(component.updateTemplate, 'emit');
             component.form.get('title').setValue('Hello');

core-web/apps/dotcms-ui/src/app/view/components/dot-edit-layout-designer/dot-edit-layout-designer.component.ts

@@ -104,7 +104,6 @@ export class DotEditLayoutDesignerComponent implements OnInit, OnDestroy, OnChan
 
     ngOnInit(): void {
         this.setupLayout();
-        this.saveChangesBeforeLeave();
     }
 
     ngOnChanges(changes: SimpleChanges): void {
@@ -297,14 +296,4 @@ export class DotEditLayoutDesignerComponent implements OnInit, OnDestroy, OnChan
             })
         );
     }
-
-    private saveChangesBeforeLeave(): void {
-        this.dotEditLayoutService.closeEditLayout$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((res) => {
-                if (res) {
-                    this.onSave();
-                }
-            });
-    }
 }

core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-sidebar/template-builder-sidebar.component.spec.ts

@@ -12,7 +12,7 @@ import { DotContainersServiceMock } from '@dotcms/utils-testing';
 import { TemplateBuilderSidebarComponent } from './template-builder-sidebar.component';
 
 import { DotTemplateBuilderStore } from '../../store/template-builder.store';
-import { DOT_MESSAGE_SERVICE_TB_MOCK } from '../../utils/mocks';
+import { DOT_MESSAGE_SERVICE_TB_MOCK, GRIDSTACK_DATA_MOCK } from '../../utils/mocks';
 import { TemplateBuilderBoxComponent } from '../template-builder-box/template-builder-box.component';
 
 describe('TemplateBuilderSidebarComponent', () => {
@@ -48,7 +48,7 @@ describe('TemplateBuilderSidebarComponent', () => {
             {
                 hostProps: {
                     sidebarProperties: {
-                        postion: 'left',
+                        location: 'left',
                         width: 'medium',
                         containers: []
                     }
@@ -60,6 +60,21 @@ describe('TemplateBuilderSidebarComponent', () => {
 
         boxComponent = spectator.query(TemplateBuilderBoxComponent);
 
+        store.init({
+            items: GRIDSTACK_DATA_MOCK,
+            layoutProperties: {
+                header: true,
+                footer: true,
+                sidebar: {
+                    location: 'left',
+                    width: 'medium',
+                    containers: []
+                }
+            },
+            resizingRowID: '',
+            containerMap: {}
+        });
+
         spectator.detectChanges();
     });
 

core-web/libs/template-builder/src/lib/components/template-builder/store/template-builder.store.ts

@@ -39,7 +39,7 @@ export class DotTemplateBuilderStore extends ComponentStore<DotTemplateBuilderSt
     constructor() {
         super({
             items: [],
-            layoutProperties: { header: true, footer: true, sidebar: {} },
+            layoutProperties: undefined,
             resizingRowID: '',
             containerMap: {}
         });

core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.spec.ts

@@ -90,6 +90,12 @@ describe('TemplateBuilderComponent', () => {
         store = spectator.inject(DotTemplateBuilderStore);
         dialog = spectator.inject(DialogService);
         openDialogMock = jest.spyOn(dialog, 'open');
+        spectator.detectChanges();
+    });
+    it('should not trigger a template change when store is initialized', () => {
+        // Store init is called on init
+        const changeMock = jest.spyOn(spectator.component.templateChange, 'emit');
+        expect(changeMock).not.toHaveBeenCalled();
     });
 
     it('should have a Add Row Button', () => {