Merge pull request #589 from magento/514_1_content-snapshot-category-admin-page

#514:  User sees content snapshot on Category page in Admin Panel #1 …

Author: omiroshnichenko

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StageActionGroup/ValidatePageBuilderPreviewActionGroup.xml

@@ -16,7 +16,7 @@
         </arguments>
         <waitForElementVisible selector="{{pageBuilderArea}}{{PageBuilderStage.editWithPageBuilderButton}}" stepKey="waitForEditWithPageBuilderButton"/>
         <see userInput="Edit with Page Builder" selector="{{pageBuilderArea}}{{PageBuilderStage.editWithPageBuilderButton}}" stepKey="seeEditWithPageBuilderButton"/>
-        <dontSeeElementInDOM selector="{{PageBuilderPanel.leftPanel}}" stepKey="dontSeePageBuilderContentTypePanel"/>
+        <dontSeeElement selector="{{PageBuilderPanel.leftPanel}}" stepKey="dontSeePageBuilderContentTypePanel"/>
         <dontSeeElementInDOM selector="{{pageBuilderArea}}{{PageBuilderStage.applyTemplateButton}}" stepKey="dontSeePageBuilderApplyTemplateButton"/>
         <dontSeeElementInDOM selector="{{pageBuilderArea}}{{PageBuilderStage.saveAsTemplateButton}}" stepKey="dontSeePageBuilderSaveAsTemplateButton"/>
         <waitForElementVisible selector="{{PageBuilderStage.stageOverlay}}" stepKey="waitForStageOverlay"/>

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

@@ -17,7 +17,7 @@
            attr="{title: isFullScreen() ? $t('Close Full Screen') : $t('Open in Full Screen')}">
         </i>
     </div>
-    <with args="panel" if="!isSnapshot()">
+    <with args="panel">
         <render/>
     </with>
     <if args="isStageReady">

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

@@ -5,9 +5,9 @@
  */
 -->
 
-<div id="pagebuilder-panel-wrapper" class="pagebuilder-panel-wrapper"
-    css="visible: isVisible, 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom, 'transition-out': pageBuilder.isSnapshotTransition"
-    afterRender="afterRender">
+<div id="pagebuilder-panel-wrapper" class="pagebuilder-panel-wrapper" visible="!pageBuilder.isSnapshot()"
+     css="visible: isVisible(), 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom, 'transition-out': pageBuilder.isSnapshotTransition"
+     afterRender="afterRender">
     <div id="pagebuilder-panel" class="pagebuilder-panel">
         <div class="search-content-types">
             <label for="search-content-types-input"></label>

app/code/Magento/PageBuilder/view/adminhtml/web/template/panel.html

@@ -49,9 +49,9 @@ export default class PageBuilder implements PageBuilderInterface {
         this.preloadTemplates(config);
         this.initialValue = initialValue;
         this.isFullScreen(config.isFullScreen);
-        this.isSnapshot(config.pagebuilder_content_snapshot);
+        this.isSnapshot(!!config.pagebuilder_content_snapshot);
         this.isSnapshotTransition(false);
-        this.snapshot = config.pagebuilder_content_snapshot;
+        this.snapshot = !!config.pagebuilder_content_snapshot;
         this.config = config;
 
         this.isAllowedTemplateApply = isAllowed(resources.TEMPLATE_APPLY);
@@ -109,8 +109,6 @@ export default class PageBuilder implements PageBuilderInterface {
 
         if (!this.isFullScreen()) {
             pageBuilderWrapper.css("height", pageBuilderWrapper.outerHeight());
-            this.previousPanelHeight = panel.outerHeight();
-            panel.css("height", this.previousPanelHeight + "px");
             /**
              * Fix the stage in the exact place it is when it's part of the content and allow it to transition to full
              * screen.
@@ -130,6 +128,8 @@ export default class PageBuilder implements PageBuilderInterface {
                 this.isSnapshot(false);
                 this.stageStyles(this.previousStyles);
             } else {
+                this.previousPanelHeight = panel.outerHeight();
+                panel.css("height", this.previousPanelHeight + "px");
                 this.wrapperStyles(this.previousStyles);
             }