Merge branch 'develop' of github.com:magento/magento2-page-builder into 635_user-access-column-action-panel

 Conflicts:
	app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column/full-height/preview.html

Author: omiroshnichenko

app/code/Magento/PageBuilder/Component/Form/Element/Wysiwyg.php

@@ -9,14 +9,15 @@
 
 use Magento\Framework\App\ObjectManager;
 use Magento\Framework\Data\FormFactory;
+use Magento\Framework\View\Asset\Repository;
 use Magento\Framework\View\Element\UiComponent\ContextInterface;
-use Magento\PageBuilder\Model\View\File\Collector\PageBuilder;
 use Magento\Ui\Component\Wysiwyg\ConfigInterface;
 use Magento\Catalog\Api\CategoryAttributeRepositoryInterface;
 use Magento\Framework\Exception\NoSuchEntityException;
 use Magento\PageBuilder\Model\Config as PageBuilderConfig;
 use Magento\PageBuilder\Model\State as PageBuilderState;
 use Magento\PageBuilder\Model\Stage\Config as Config;
+use Magento\Framework\View\ConfigInterface as ViewConfigInterface;
 
 /**
  * Updates wysiwyg element with Page Builder specific config
@@ -25,6 +26,11 @@
  */
 class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
 {
+    /**
+     * @var Repository
+     */
+    private $assetRepo;
+
     /**
      * WYSIWYG Constructor
      *
@@ -39,8 +45,11 @@ class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
      * @param array $config
      * @param PageBuilderConfig|null $pageBuilderConfig
      * @param bool $overrideSnapshot
+     * @param ViewConfigInterface $viewConfig
+     * @param Repository $assetRepo
      * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      * @SuppressWarnings(PHPMD.ExcessiveParameterList)
+     * @SuppressWarnings(PHPMD.NPathComplexity)
      * @throws \Magento\Framework\Exception\NoSuchEntityException
      */
     public function __construct(
@@ -54,8 +63,12 @@ public function __construct(
         array $data = [],
         array $config = [],
         PageBuilderConfig $pageBuilderConfig = null,
-        bool $overrideSnapshot = false
+        bool $overrideSnapshot = false,
+        ViewConfigInterface $viewConfig = null,
+        Repository $assetRepo = null
     ) {
+        $viewConfig = $viewConfig ?: ObjectManager::getInstance()->get(ViewConfigInterface::class);
+        $this->assetRepo = $assetRepo ?: ObjectManager::getInstance()->get(Repository::class);
         $wysiwygConfigData = isset($config['wysiwygConfigData']) ? $config['wysiwygConfigData'] : [];
 
         // If a dataType is present we're dealing with an attribute
@@ -84,6 +97,11 @@ public function __construct(
             $wysiwygConfigData = $stageConfig->getConfig();
             $wysiwygConfigData['pagebuilder_button'] = true;
             $wysiwygConfigData['pagebuilder_content_snapshot'] = true;
+            $wysiwygConfigData['viewports'] = $viewConfig->getViewConfig()->getVarValue(
+                'Magento_PageBuilder',
+                'breakpoints'
+            );
+            $wysiwygConfigData = $this->processBreakpointsIcons($wysiwygConfigData);
 
             if ($overrideSnapshot) {
                 $pageBuilderConfig = $pageBuilderConfig ?: ObjectManager::getInstance()->get(PageBuilderConfig::class);
@@ -108,4 +126,24 @@ public function __construct(
 
         parent::__construct($context, $formFactory, $wysiwygConfig, $components, $data, $config);
     }
+
+    /**
+     * Process viewport icon paths
+     *
+     * @param array $wysiwygConfigData
+     * @return array
+     */
+    private function processBreakpointsIcons(array $wysiwygConfigData): array
+    {
+        if ($wysiwygConfigData && isset($wysiwygConfigData['viewports'])) {
+            foreach ($wysiwygConfigData['viewports'] as $breakpoint => $attributes) {
+                if (isset($attributes['icon'])) {
+                    $wysiwygConfigData['viewports'][$breakpoint]['icon'] = $this->assetRepo->getUrl(
+                        $attributes['icon']
+                    );
+                }
+            }
+        }
+        return $wysiwygConfigData;
+    }
 }

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeBlockActionGroup/VerifyBlockOnStageActionGroup.xml

@@ -12,8 +12,8 @@
             <argument name="block"/>
             <argument name="index" defaultValue="1" type="string"/>
         </arguments>
-        <moveMouseOver selector="{{PageBuilderStage.contentTypeInStageByIndex(PageBuilderBlockContentType.role, index)}}" stepKey="onMouseOverContentTypeStage"/>
         <waitForPageLoad stepKey="waitForPageLoad"/>
+        <moveMouseOver selector="{{PageBuilderStage.contentTypeInStageByIndex(PageBuilderBlockContentType.role, index)}}" stepKey="onMouseOverContentTypeStage"/>
         <waitForElementVisible selector="{{BlockOnStage.title(index, block.title)}}" stepKey="wait"/>
         <seeElement selector="{{BlockOnStage.title(index,block.title)}}" stepKey="seeOptionMenuTitle"/>
         <see selector="{{BlockOnStage.content(index)}}" userInput="{{block.content}}" stepKey="seeBlockContentOnStage"/>

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

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="AdminSwitchPageBuilderViewportActionGroup">
+        <annotations>
+            <description>Switches the Page Builder stage in admin to the specified viewport</description>
+        </annotations>
+        <arguments>
+            <argument name="viewportButton" defaultValue="desktop" type="string"/>
+            <argument name="viewportStage" defaultValue="desktop" type="string"/>
+        </arguments>
+        <waitForElement selector="{{PageBuilderViewportSwitcherSection.viewportSwitcherButton(viewportButton)}}" stepKey="waitForElementViewportButton"/>
+        <conditionalClick selector="{{PageBuilderViewportSwitcherSection.viewportSwitcherButton(viewportButton)}}"
+                          dependentSelector="{{PageBuilderViewportSwitcherSection.viewportStage(viewportStage)}}"
+                          visible="false"
+                          stepKey="clickViewportSwitcherButton"/>
+        <waitForElementVisible selector="{{PageBuilderViewportSwitcherSection.viewportStage(viewportStage)}}" stepKey="waitForElementViewportStage"/>
+    </actionGroup>
+</actionGroups>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBannerSection/BannerOnBackendSection.xml

@@ -41,7 +41,7 @@
         <element name="backgroundColorElement" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-color:')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-color:'))]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: url(') and contains(@style,'{{backgroundImage}}')]" parameterized="true"/>
-        <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-image:'))]" parameterized="true"/>
+        <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: none')]" parameterized="true"/>
         <element name="backgroundPath" type="button" selector="(//div[contains(@class,&quot;pagebuilder-banner&quot;) and @data-element=&quot;main&quot;])[{{bannerIndex}}]//div[@data-element=&quot;wrapper&quot;]" parameterized="true"/>
         <element name="invalidUploadTitle" type="text" selector="//aside[contains(@class,'modal-popup')]//header/h1[contains(.,'Attention')]"/>
         <element name="invalidUploadMessage" type="text" selector="//aside[contains(@class,'modal-popup')]//div[@class='modal-content']//div[.=&quot;{{arg1}}&quot;]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderColumnSection/ColumnOnBackendSection.xml

@@ -50,7 +50,7 @@
         <element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true" deprecated="Styles are not inline"/>
+        <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][contains(@style,'background-image: none')]" parameterized="true" deprecated="Styles are not inline"/>
         <!-- Advanced Configuration -->
         <element name="advancedConfigurationPath" type="button" selector="((//div[contains(@class, &quot;pagebuilder-column-group&quot;)])[{{arg1}}]/descendant::div[contains(@class, &quot;pagebuilder-content-type&quot;) and contains(@class, &quot;pagebuilder-column&quot;)])[{{arg2}}]//div[contains(@class, &quot;pagebuilder-column-inner&quot;)]" parameterized="true"/>
         <element name="alignment" type="button" selector="((//div[contains(@class, 'pagebuilder-column-group')])[{{arg1}}]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')])[{{arg2}}][contains(@style, 'text-align: {{arg3}};')]" parameterized="true" deprecated="Styles are not inline"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderRowSection/RowOnStageSection.xml

@@ -35,7 +35,7 @@
         <element name="backgroundColorElement" type="button" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-color:')]" deprecated="Styles are not inline"/>
         <element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true" deprecated="Styles are not inline"/>
+        <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-image: none')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundPosition" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-position: {{arg2}};')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundSize" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-size: {{arg2}};')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundRepeat" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-repeat: {{arg2}};')]" parameterized="true" deprecated="Styles are not inline"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection/SlideOnBackendSection.xml

@@ -44,7 +44,7 @@
         <element name="backgroundColor" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-color: {{backgroundColor}};')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="noBackgroundColor" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-color:'))]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundImage" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: url(') and contains(@style,'{{backgroundImage}}')]" parameterized="true" deprecated="Styles are not inline"/>
-        <element name="noBackgroundImage" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-image:'))]" parameterized="true" deprecated="Styles are not inline"/>
+        <element name="noBackgroundImage" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: none')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundPosition" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-position: {{backgroundPosition}};')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundSize" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-size: {{backgroundSize}};')]" parameterized="true" deprecated="Styles are not inline"/>
         <element name="backgroundRepeat" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-repeat: {{backgroundRepeat}};')]" parameterized="true" deprecated="Styles are not inline"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTabsSection/TabOnStageSection.xml

@@ -64,6 +64,6 @@
         <element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
         <element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
         <element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
-        <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true"/>
+        <element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][contains(@style,'background-image: none')]" parameterized="true"/>
     </section>
 </sections>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderViewportSwitcherSection.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+          xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
+    <section name="PageBuilderViewportSwitcherSection">
+        <!-- Viewport Switcher Buttons -->
+        <element name="viewportSwitcherButton" type="button" selector="//span[@class='viewport-buttons']//span[@class='tooltip']//button[contains(@class, 'page-builder-viewport') and contains(@class, '{{viewport}}-switcher')]" parameterized="true"/>
+        <!-- Viewport Switcher Icons -->
+        <element name="viewportSwitcherIcon" parameterized="true" type="text" selector="//span[@class='viewport-buttons']//span[@class='tooltip']//button[contains(@class, 'page-builder-viewport') and contains(@class, '{{viewport}}-switcher')]//img[contains(@src, 'switcher-{{viewport}}.svg')]"/>
+        <!-- Viewport Switcher Tooltip -->
+        <element name="viewportTooltipLabel" type="text" parameterized="true" selector="//span[@class='tooltip'][{{index}}]//span[@class='tooltip-content']//span[@class='tooltip-label' and text()='{{viewport}}']"/>
+        <element name="viewportTooltipContent" type="text" parameterized="true" selector="//span[@class='tooltip'][{{index}}]//span[@class='tooltip-content']"/>
+        <!-- Viewport Stages -->
+        <element name="viewportStage" type="block" parameterized="true" selector="//div[contains(@class,'stage-is-active') and contains(@class, '{{viewport}}-viewport')]"/>
+    </section>
+</sections>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBackgroundFormAttributeTest/BackgroundImageInvalidFileSizeTest.xml

@@ -27,6 +27,7 @@
         </before>
         <after>
             <actionGroup ref="NavigateToMediaGalleryActionGroup" stepKey="navigateToMediaGallery"/>
+            <waitForPageLoad stepKey="waitForPageLoad"/>
             <actionGroup ref="NavigateToMediaFolderActionGroup" stepKey="NavigateToFolder">
                 <argument name="FolderName" value="{{PageBuilderBackgroundImage_JPG.path}}"/>
             </actionGroup>