#511: User sees content snapshot on Product Page in Admin Panel #7 - Fix for hidden panels

Author: Lukasz Borowiec

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderStageSection/PageBuilderPanelSection.xml

@@ -8,27 +8,27 @@
 <sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
     <section name="PageBuilderPanel">
-        <element name="leftPanel" type="input" selector=".stage-full-screen #pagebuilder-panel"/>
-        <element name="searchField" type="input" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;pagebuilder-panel&quot;]/div[1]/a"/>
-        <element name="clearSearch" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;pagebuilder-panel&quot;]/div[1]/a"/>
-        <element name="firstSection" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;pagebuilder-panel-menu-sections&quot;]/li[1]" timeout="30"/>
-        <element name="allPanelMenuSections" type="button" selector="//div[contains(@class,'stage-full-screen')]#pagebuilder-panel-menu-sections .menu-section-title"/>
-        <element name="allMenuSectionContentTypes" type="button" selector="//div[contains(@class,'stage-full-screen')]#pagebuilder-panel-menu-sections #menu-section-{{arg1}} .pagebuilder-draggable-content-type" parameterized="true"/>
-        <element name="panelMenuSection" type="button" selector="//div[contains(@class,'stage-full-screen')]//div[@id='pagebuilder-panel']//h4[.='{{arg1}}']" parameterized="true"/>
-        <element name="panelMenuSectionActive" type="button" selector="//div[contains(@class,'stage-full-screen')]//div[@id='pagebuilder-panel']//li[@class='active']//h4[.='{{arg1}}']" parameterized="true"/>
-        <element name="layoutMenuSection" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;menu-section-layout&quot;]" timeout="10"/>
-        <element name="layoutMenuSectionContentType" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;menu-section-layout&quot;]/div/div/ul/li/a/span[2]"/>
-        <element name="elementsMenuSection" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;menu-section-elements&quot;]"/>
-        <element name="elementsMenuSectionContentType" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;menu-section-elements&quot;]/div/div/ul/li/a/span[2]"/>
-        <element name="mediaMenuSection" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;menu-section-media&quot;]"/>
-        <element name="mediaMenuSectionContentType" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;menu-section-media&quot;]/div/div/ul/li/a/span[2]"/>
-        <element name="addContentMenuSection" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;menu-section-add_content&quot;]"/>
-        <element name="addContentMenuSectionContentType" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;menu-section-add_content&quot;]/div/div/ul/li/a/span[2]"/>
-        <element name="searchPanel" type="input" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;search-content-types-input&quot;]" timeout="30"/>
-        <element name="searchResults" type="text" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;search-results&quot;]" timeout="30"/>
-        <element name="nothingFound" type="text" selector="//div[contains(@class,'stage-full-screen')]//*[@id=&quot;pagebuilder-panel&quot;]/div[2]/div" timeout="30"/>
-        <element name="draggableContentTypeInPanel" type="button" selector="//div[contains(@class,'stage-full-screen')]//*[text()=&quot;{{arg1}}&quot;]/ancestor::*[contains(@class, &quot;ui-draggable&quot;)]" parameterized="true"/>
-        <element name="contentTypeInMenuSection" type="button" selector="//div[contains(@class,'stage-full-screen')]//ul[@class='pagebuilder-panel-menu-sections']//li[{{arg1}}]//h4[.='{{arg2}}']/../..//ul//li[{{arg3}}]//span[text()='{{arg4}}']" parameterized="true"/>
-        <element name="contentTypeWithIcon" type="button" selector="//div[contains(@class,'stage-full-screen')]//ul[@class='pagebuilder-panel-menu-sections']//span[@class='content-type-icon']//i[@class='icon-pagebuilder-{{arg2}}']/../following-sibling::span[text()='{{arg1}}']" parameterized="true"/>
+        <element name="leftPanel" type="input" selector=".stage-is-active #pagebuilder-panel"/>
+        <element name="searchField" type="input" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;pagebuilder-panel&quot;]/div[1]/a"/>
+        <element name="clearSearch" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;pagebuilder-panel&quot;]/div[1]/a"/>
+        <element name="firstSection" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;pagebuilder-panel-menu-sections&quot;]/li[1]" timeout="30"/>
+        <element name="allPanelMenuSections" type="button" selector="//div[contains(@class,'stage-is-active')]#pagebuilder-panel-menu-sections .menu-section-title"/>
+        <element name="allMenuSectionContentTypes" type="button" selector="//div[contains(@class,'stage-is-active')]#pagebuilder-panel-menu-sections #menu-section-{{arg1}} .pagebuilder-draggable-content-type" parameterized="true"/>
+        <element name="panelMenuSection" type="button" selector="//div[contains(@class,'stage-is-active')]//div[@id='pagebuilder-panel']//h4[.='{{arg1}}']" parameterized="true"/>
+        <element name="panelMenuSectionActive" type="button" selector="//div[contains(@class,'stage-is-active')]//div[@id='pagebuilder-panel']//li[@class='active']//h4[.='{{arg1}}']" parameterized="true"/>
+        <element name="layoutMenuSection" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;menu-section-layout&quot;]" timeout="10"/>
+        <element name="layoutMenuSectionContentType" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;menu-section-layout&quot;]/div/div/ul/li/a/span[2]"/>
+        <element name="elementsMenuSection" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;menu-section-elements&quot;]"/>
+        <element name="elementsMenuSectionContentType" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;menu-section-elements&quot;]/div/div/ul/li/a/span[2]"/>
+        <element name="mediaMenuSection" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;menu-section-media&quot;]"/>
+        <element name="mediaMenuSectionContentType" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;menu-section-media&quot;]/div/div/ul/li/a/span[2]"/>
+        <element name="addContentMenuSection" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;menu-section-add_content&quot;]"/>
+        <element name="addContentMenuSectionContentType" type="button" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;menu-section-add_content&quot;]/div/div/ul/li/a/span[2]"/>
+        <element name="searchPanel" type="input" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;search-content-types-input&quot;]" timeout="30"/>
+        <element name="searchResults" type="text" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;search-results&quot;]" timeout="30"/>
+        <element name="nothingFound" type="text" selector="//div[contains(@class,'stage-is-active')]//*[@id=&quot;pagebuilder-panel&quot;]/div[2]/div" timeout="30"/>
+        <element name="draggableContentTypeInPanel" type="button" selector="//div[contains(@class,'stage-is-active')]//*[text()=&quot;{{arg1}}&quot;]/ancestor::*[contains(@class, &quot;ui-draggable&quot;)]" parameterized="true"/>
+        <element name="contentTypeInMenuSection" type="button" selector="//div[contains(@class,'stage-is-active')]//ul[@class='pagebuilder-panel-menu-sections']//li[{{arg1}}]//h4[.='{{arg2}}']/../..//ul//li[{{arg3}}]//span[text()='{{arg4}}']" parameterized="true"/>
+        <element name="contentTypeWithIcon" type="button" selector="//div[contains(@class,'stage-is-active')]//ul[@class='pagebuilder-panel-menu-sections']//span[@class='content-type-icon']//i[@class='icon-pagebuilder-{{arg2}}']/../following-sibling::span[text()='{{arg1}}']" parameterized="true"/>
     </section>
 </sections>

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

@@ -5,7 +5,7 @@
  */
 -->
 <div class="pagebuilder-stage-wrapper"
-     css="'stage-full-screen': isFullScreen, 'stage-content-snapshot': isSnapshot, 'transition-out': isSnapshotTransition"
+     css="'stage-full-screen': isFullScreen, 'stage-content-snapshot': isSnapshot, 'transition-out': isSnapshotTransition, 'stage-is-active',isFullScreen || !isSnapshot"
      ko-style="wrapperStyles">
     <div class="admin__field pagebuilder-header"
          css="visible: panel.isVisible(), 'transition-out': isSnapshotTransition()"