Merge pull request #19 from magento-commerce/imported-magento-magento2-page-builder-659

[Page Builder] Stories bundle

Author: omiroshnichenko

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

@@ -45,7 +45,6 @@ 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)
@@ -64,10 +63,8 @@ public function __construct(
         array $config = [],
         PageBuilderConfig $pageBuilderConfig = null,
         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'] : [];
 
@@ -97,10 +94,6 @@ 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) {

app/code/Magento/PageBuilder/Model/Config/ContentType/Converter.php

@@ -52,6 +52,7 @@ public function convert($source): array
      *
      * @param \DOMDocument $source
      * @return array
+     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      */
     private function convertTypes(\DOMDocument $source): array
     {
@@ -83,6 +84,8 @@ private function convertTypes(\DOMDocument $source): array
                             'defaultPolicy' => $this->getAttributeValue($childNode, 'default_policy'),
                             'types' => $this->convertParentChildData($childNode, 'child')
                         ];
+                    } elseif ('breakpoints' === $childNode->nodeName) {
+                        $typesData[$name][$childNode->nodeName] = $this->convertBreakpoints($childNode);
                     } else {
                         $typesData[$name][$childNode->nodeName] = $childNode->nodeValue;
                     }
@@ -99,6 +102,40 @@ private function convertTypes(\DOMDocument $source): array
         return array_merge_recursive($typesData, $allowedParents);
     }
 
+    /**
+     * Convert breakpoints data
+     *
+     * @param \DOMElement $childNode
+     * @return array
+     * @throws \InvalidArgumentException
+     */
+    private function convertBreakpoints(\DOMElement $childNode): array
+    {
+        $breakpointsData = [];
+        foreach ($childNode->getElementsByTagName('breakpoint') as $breakpointNode) {
+            $breakpointName = $breakpointNode->attributes->getNamedItem('name')->nodeValue;
+            $breakpointsData[$breakpointName] = $this->convertBreakpointData($breakpointNode);
+        }
+        return $breakpointsData;
+    }
+
+    /**
+     * Convert breakpoint data
+     *
+     * @param \DOMElement $childNode
+     * @return array
+     * @throws \InvalidArgumentException
+     */
+    private function convertBreakpointData(\DOMElement $childNode): array
+    {
+        $breakpointsData = [];
+        $formNode = $childNode->getElementsByTagName('form')->item(0);
+        if ($formNode && $formNode->nodeValue) {
+            $breakpointsData['form'] = $formNode->nodeValue;
+        }
+        return $breakpointsData;
+    }
+
     /**
      * Convert appearances data
      *
@@ -139,10 +176,19 @@ private function convertAppearanceData(\DOMElement $appearanceNode): array
         $appearanceData['master_template'] = $this->getAttributeValue($appearanceNode, 'master_template');
         $appearanceData['reader'] = $this->getAttributeValue($appearanceNode, 'reader');
         $appearanceData['default'] = $this->getAttributeValue($appearanceNode, 'default');
-        $formNode = $appearanceNode->getElementsByTagName('form')->item(0);
-        if ($formNode && $formNode->nodeValue) {
+
+        foreach ($appearanceNode->childNodes as $node) {
+            if ($node->nodeName === 'form') {
+                $formNode = $node;
+            }
+        }
+        if (isset($formNode) && $formNode->nodeValue) {
             $appearanceData['form'] = $formNode->nodeValue;
         }
+        $breakpointsNode = $appearanceNode->getElementsByTagName('breakpoints')->item(0);
+        if ($breakpointsNode && $breakpointsNode->nodeValue) {
+            $appearanceData['breakpoints'] = $this->convertBreakpoints($breakpointsNode);
+        }
         return $appearanceData;
     }
 

app/code/Magento/PageBuilder/Model/Config/ContentType/Reader.php

@@ -19,9 +19,11 @@ class Reader extends \Magento\Framework\Config\Reader\Filesystem
      */
     protected $_idAttributes = [
         self::TYPE_PATH => 'name',
+        self::TYPE_PATH . '/breakpoints/breakpoint' => 'name',
         self::TYPE_PATH . '/parents/parent' => 'name',
         self::TYPE_PATH . '/children/child' => 'name',
         self::TYPE_PATH . '/appearances/appearance' => 'name',
+        self::TYPE_PATH . '/appearances/appearance/breakpoints/breakpoint' => 'name',
         self::TYPE_PATH . '/appearances/appearance/data' => 'name',
         self::TYPE_PATH . '/appearances/appearance/elements/element' => 'name',
         self::TYPE_PATH . '/appearances/appearance/elements/element/style'

app/code/Magento/PageBuilder/Model/Stage/Config.php

@@ -197,6 +197,8 @@ public function getConfig()
             'can_use_inline_editing_on_stage' => $this->isWysiwygProvisionedForEditingOnStage(),
             'widgets' => $this->widgetInitializerConfig->getConfig(),
             'breakpoints' => $this->getCachedWidgetBreakpoints(),
+            'viewports' => $this->getViewports($this->getCachedWidgetBreakpoints()),
+            'defaultViewport' => $this->getDefaultViewport($this->getCachedWidgetBreakpoints()),
             'tinymce' => $this->getCachedTinyMceConfig(),
             'acl' => $this->getAcl()
         ];
@@ -312,6 +314,8 @@ private function getCachedFlattenContentTypeData(string $name, array $contentTyp
      * @param array $contentType
      *
      * @return array
+     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
+     * @SuppressWarnings(PHPMD.NPathComplexity)
      */
     private function flattenContentTypeData(string $name, array $contentType)
     {
@@ -329,21 +333,60 @@ private function flattenContentTypeData(string $name, array $contentType)
             'master_component' => $contentType['master_component'] ?? self::DEFAULT_MASTER_COMPONENT,
             'allowed_parents' => $contentType['allowed_parents'] ?? [],
             'appearances' => $contentType['appearances'] ?? [],
+            'breakpoints' => $contentType['breakpoints'] ?? [],
             'additional_data' => isset($contentType['additional_data'])
                 ? $this->additionalDataParser->toArray($contentType['additional_data'])
                 : [],
             'is_system' => isset($contentType['is_system']) && $contentType['is_system'] === 'false' ? false : true
         ];
 
+        $result['breakpoints'] = array_merge_recursive(
+            $result['breakpoints'],
+            $this->getBreakpointsFields($result['breakpoints'], 'default')
+        );
+
         foreach ($result['appearances'] as $key => $appearance) {
             if (isset($appearance['form'])) {
                 $result['fields'][$key . '-appearance'] = $this->uiComponentConfig->getFields($appearance['form']);
             }
+            if (isset($appearance['breakpoints'])) {
+                $namespace = $key . '-appearance';
+                if ($appearance['default']) {
+                    $namespace = 'default';
+                    foreach ($appearance['breakpoints'] as $name => $breakpoint) {
+                        if (isset($breakpoint['form'])) {
+                            $result['breakpoints'][$name]['form'] = $breakpoint['form'];
+                        }
+                    }
+                }
+                $result['breakpoints'] = array_replace_recursive(
+                    $result['breakpoints'],
+                    $this->getBreakpointsFields($appearance['breakpoints'], $namespace)
+                );
+            }
         }
 
         return $result;
     }
 
+    /**
+     * Get breakpoint fields.
+     *
+     * @param array $breakpoints
+     * @param string $namespace
+     * @return array
+     */
+    private function getBreakpointsFields(array $breakpoints, string $namespace): array
+    {
+        $result = [];
+        foreach ($breakpoints as $key => $breakpoint) {
+            if (isset($breakpoint['form'])) {
+                $result[$key]['fields'][$namespace] = $this->uiComponentConfig->getFields($breakpoint['form'], $key);
+            }
+        }
+        return $result;
+    }
+
     /**
      * Determine if active editor is configured to support inline editing mode
      *
@@ -412,4 +455,35 @@ private function saveCache(array $data, string $cacheIdentifier): void
     {
         $this->cache->save($this->serializer->serialize($data), $cacheIdentifier);
     }
+
+    /**
+     * Get viewports.
+     *
+     * @param array $breakpoints
+     * @return array
+     */
+    private function getViewports(array $breakpoints): array
+    {
+        $viewports = [];
+
+        foreach ($breakpoints as $name => $breakpoint) {
+            if (isset($breakpoint['stage'])) {
+                $viewports[$name] = $breakpoint;
+            }
+        }
+
+        return $viewports;
+    }
+
+    /**
+     * Get default viewport.
+     *
+     * @param array $breakpoints
+     * @return string
+     */
+    private function getDefaultViewport(array $breakpoints): string
+    {
+        $keyIndex = array_search(true, array_column($breakpoints, 'default'));
+        return $keyIndex === false ? '' : array_keys($breakpoints)[$keyIndex];
+    }
 }

app/code/Magento/PageBuilder/Model/Stage/Config/UiComponentConfig.php

@@ -35,22 +35,31 @@ public function __construct(
      * Retrieve fields for UI Component
      *
      * @param string $componentName
+     * @param string|null $breakpoint
      *
      * @return array
+     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      */
-    public function getFields($componentName) : array
+    public function getFields($componentName, $breakpoint = null) : array
     {
         $componentConfig = $this->configFactory->create(
             ['componentName' => $componentName]
         )->get($componentName);
 
         $fields = $this->iterateComponents(
             $componentConfig,
-            function ($item, $key) {
+            function ($item, $key) use ($breakpoint) {
+                $itemConfig = isset($item[Converter::DATA_ARGUMENTS_KEY]['data']['config']) ?
+                    $item[Converter::DATA_ARGUMENTS_KEY]['data']['config'] : [];
                 // Determine if this item has a formElement key
-                if (isset($item[Converter::DATA_ARGUMENTS_KEY]['data']['config']['formElement'])
-                    && !(isset($item[Converter::DATA_ARGUMENTS_KEY]['data']['config']['componentDisabled'])
-                        && $item[Converter::DATA_ARGUMENTS_KEY]['data']['config']['componentDisabled'] === true)
+                if (isset($itemConfig['formElement'])
+                    && !(isset($itemConfig['componentDisabled']) && $itemConfig['componentDisabled'] === true)
+                    && (!$breakpoint || (
+                        $breakpoint &&
+                        isset($itemConfig['breakpoints']) &&
+                        isset($itemConfig['breakpoints'][$breakpoint]) &&
+                        $itemConfig['breakpoints'][$breakpoint]
+                    ))
                 ) {
                     $elementConfig = $item[Converter::DATA_ARGUMENTS_KEY]['data']['config'];
                     // If the field has a dataScope use that for the key instead of the name

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/AdminActionGroup/SwitchToPageBuilderStageActionGroup.xml

@@ -22,8 +22,8 @@
         <waitForElementVisible time="30" selector="{{editButtonSelector}}" stepKey="waitForEditButton"/>
         <click selector="{{editButtonSelector}}" stepKey="clickEditButton"/>
         <waitForPageLoad stepKey="waitForFullScreenAnimation"/>
-        <!-- Wait for the first row to be added into the stage for it to be "ready" -->
         <waitForElementNotVisible selector="{{PageBuilderStage.stageLoading}}" stepKey="waitForStageLoadingGraphicNotVisible"/>
-        <waitForElementVisible time="30" selector="{{RowOnStage.base(rowIndex)}}" stepKey="waitForPageBuilderRow"/>
+        <waitForElementVisible time="30" selector="{{PageBuilderStage.rootContainer(rowIndex)}}" stepKey="waitForPageBuilderRootContainer"/>
+        <comment userInput="removing deprecated element" stepKey="waitForPageBuilderRow"/>
     </actionGroup>
 </actionGroups>

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/AdminActionGroup/SwitchToPageBuilderStageCMSBlockActionGroup.xml

@@ -5,9 +5,11 @@
   * 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">
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
     <actionGroup name="seeInMarginFieldsSlideOutPanel">
+        <annotations>
+            <description>Validates margin field contents.</description>
+        </annotations>
         <arguments>
             <argument name="property" defaultValue=""/>
         </arguments>

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/AdvancedConfigurationActionGroup/SeeInMarginFieldsSlideOutPanelActionGroup.xml

@@ -5,9 +5,11 @@
   * 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">
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
     <actionGroup name="seeInPaddingFieldsSlideOutPanel">
+        <annotations>
+            <description>Validates padding field contents.</description>
+        </annotations>
         <arguments>
             <argument name="property" defaultValue=""/>
         </arguments>

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/AdvancedConfigurationActionGroup/SeeInPaddingFieldsSlideOutPanelActionGroup.xml

@@ -5,22 +5,21 @@
   * 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">
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
     <actionGroup name="ValidateAdvancedConfigurationAllOptionsActionGroup">
         <annotations>
-            <description value="Validates styles from Advanced configuration in content type settings"/>
+            <description>Validates styles from Advanced Configuration in content type settings.</description>
         </annotations>
         <arguments>
             <argument name="page" defaultValue=""/>
             <argument name="alignment" defaultValue="PageBuilderAdvancedAlignmentPropertyDefault"/>
             <argument name="border" defaultValue="PageBuilderAdvancedBorderPropertyNone"/>
             <argument name="borderColor" defaultValue=""/>
-            <argument name="borderWidth" defaultValue="PageBuilderAdvancedBorderWidthPropertyDefault"/>
-            <argument name="borderRadius" defaultValue="PageBuilderAdvancedBorderRadiusDefaultProperty"/>
+            <argument name="borderWidth" defaultValue="PageBuilderAdvancedBorderWidthProperty0"/>
+            <argument name="borderRadius" defaultValue="PageBuilderAdvancedBorderRadiusProperty0"/>
             <argument name="cssClasses" defaultValue=""/>
-            <argument name="margin" defaultValue="PageBuilderMarginsPropertyDefault"/>
-            <argument name="padding" defaultValue="PageBuilderPaddingPropertyDefault"/>
+            <argument name="margin" defaultValue="PageBuilderMarginsProperty0"/>
+            <argument name="padding" defaultValue="PageBuilderPaddingProperty0"/>
             <argument name="index" defaultValue="1" type="string"/>
         </arguments>
         <waitForElementVisible selector="{{page.base(index)}}" stepKey="waitForElementVisible"/>