PB-390: Nested Page Builder content can fail to save when action is performed quickly

- Ensure template manager obeys rendering locks
- Remove content from PageBuilder instance

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -34,7 +34,6 @@ export default class PageBuilder implements PageBuilderInterface {
     public isFullScreen: KnockoutObservable<boolean> = ko.observable(false);
     public loading: KnockoutObservable<boolean> = ko.observable(true);
     public wrapperStyles: KnockoutObservable<{[key: string]: string}> = ko.observable({});
-    public content: string;
     public isAllowedTemplateSave: boolean;
     public isAllowedTemplateApply: boolean;
     private previousWrapperStyles: {[key: string]: string} = {};
@@ -77,9 +76,6 @@ export default class PageBuilder implements PageBuilderInterface {
      */
     public initListeners() {
         events.on(`stage:${ this.id }:toggleFullscreen`, this.toggleFullScreen.bind(this));
-        events.on(`stage:${ this.id }:masterFormatRenderAfter`, (content: {value: string}) => {
-            this.content = content.value;
-        });
         this.isFullScreen.subscribe(() => this.onFullScreenChange());
     }
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/stage.js

@@ -18,5 +18,4 @@ export default interface PageBuilderInterface  {
     isFullScreen: KnockoutObservable<boolean>;
     loading: KnockoutObservable<boolean>;
     wrapperStyles: KnockoutObservable<{[key: string]: string}>;
-    content: string;
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/template-manager.js

@@ -36,7 +36,7 @@ export default class Stage {
      * We always complete a single render when the stage is first loaded, so we can set the lock when the stage is
      * created. The lock is used to halt the parent forms submission when Page Builder is rendering.
      */
-    public renderingLocks: Array<JQueryDeferred<void>> = [];
+    public renderingLocks: Array<JQueryDeferred<string>> = [];
     private template: string = "Magento_PageBuilder/content-type/preview";
     private render: Render;
     private collection: Collection = new Collection();
@@ -48,11 +48,12 @@ export default class Stage {
      */
     private applyBindingsDebounce = _.debounce(() => {
         this.render.applyBindings(this.rootContainer)
-            .then((renderedOutput: string) => events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
-                value: renderedOutput,
-            })).then(() => {
+            .then((renderedOutput: string) => {
+                events.trigger(`stage:${ this.id }:masterFormatRenderAfter`, {
+                    value: renderedOutput,
+                });
                 this.renderingLocks.forEach((lock) => {
-                    lock.resolve();
+                    lock.resolve(renderedOutput);
                 });
             }).catch((error: Error) => {
                 if (error) {

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/page-builder.ts

@@ -59,12 +59,16 @@ export function saveAsTemplate(stage: Stage) {
              */
             confirm(name: string, createdFor: string) {
                 return new Promise((resolve, reject) => {
-                    capture.then((imageSrc: string) => {
+                    // Retrieve the rendering lock from the stage
+                    const renderingLock = stage.renderingLocks[stage.renderingLocks.length - 1];
+
+                    // Wait for the screenshot and the rendering lock to complete before making the request
+                    $.when(capture, renderingLock).then((imageSrc: string, content: string) => {
                         $.ajax({
                             url: Config.getConfig("template_save_url"),
                             data: {
                                 name,
-                                template: stage.pageBuilder.content,
+                                template: content,
                                 previewImage: imageSrc,
                                 createdFor,
                             },