Merge branch 'MC-10833-typescript-errors' into cms-team-1-delivery

# Conflicts:
#	app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/read/configurable.js
#	app/code/Magento/PageBuilder/view/adminhtml/web/js/stage-builder.js
#	app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/stage-builder.ts
#	ts-errors.json

Author: davemacaulay

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "page-builder-types"]
+	path = page-builder-types
+	url = git@github.com:magento-obsessive-owls/page-builder-types.git

README.md

@@ -23,6 +23,31 @@ We will push new beta releases once a week, including work from the backlog. We
 
 To participate in technical discussions and ask questions, join us in [Slack], where a number of Page Builder team members are present.
 
+## TypeScript
+This module utilises TypeScript within our adminhtml web directory. This requires an additional build step or watch command to be running during development on this module.
+
+We use a combination of `tsc` from TypeScript and Babel 7.* with the TypeScript env. This enables us to have fast build times for the large TypeScript code base we have.
+
+#### `npx ts:build`
+Runs a single build of all TypeScript files within the defined directory. This utilises Babel with the TypeScript present.
+
+#### `npx ts:watch`
+Runs a continuous watch of files and builds them as it detects file changes.
+
+#### `npx ts:lint`
+Runs TSLint to verify linting of all TypeScript files
+
+#### `npx ts:defs`
+Generates TypeScript definitions for the whole module to be published as a types package.
+
+#### `npx ts:errors`
+Displays any TypeScript errors currently within the code base. This utilises `tsc` with the no emit flag.
+
+#### `npx ts:errors:watch`
+Same as above but watches for file changes.
+
+#### `npx start`
+Command used to start development on this module, uses `concurrently` to spawn instances of `npx ts:watch` and `npx ts:errors:watch`.
 
 [Contribution Guide]: CONTRIBUTING.md
 [Slack]: https://magentocommeng.slack.com/messages/GANS1R4C9

app/code/Magento/PageBuilder/Block/GoogleMapsApi.php

@@ -58,7 +58,7 @@ public function getStyle(): ?string
     public function getInvalidApiKeyMessage(): \Magento\Framework\Phrase
     {
         return __(
-            "You must provide a valid <a href='%1'>Google Maps API key</a> to use a map.",
+            "You must provide a valid <a href='%1' target='_blank'>Google Maps API key</a> to use a map.",
             $this->_urlBuilder->getUrl('adminhtml/system_config/edit/section/cms', ['_fragment' => 'cms_pagebuilder'])
         );
     }

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

@@ -23,6 +23,8 @@ class Config
     const XML_PATH_COLUMN_GRID_DEFAULT = 'cms/pagebuilder/column_grid_default';
     const XML_PATH_COLUMN_GRID_MAX = 'cms/pagebuilder/column_grid_max';
 
+    const ROOT_CONTAINER_NAME = 'root-container';
+
     /**
      * @var \Magento\PageBuilder\Model\ConfigInterface
      */
@@ -73,8 +75,14 @@ class Config
      */
     private $widgetInitializerConfig;
 
+    /**
+     * @var array
+     */
+    private $rootContainerConfig;
+
     /**
      * Config constructor.
+     *
      * @param \Magento\PageBuilder\Model\ConfigInterface $config
      * @param Config\UiComponentConfig $uiComponentConfig
      * @param UrlInterface $urlBuilder
@@ -84,6 +92,7 @@ class Config
      * @param \Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor
      * @param \Magento\PageBuilder\Model\Wysiwyg\InlineEditingSupportedAdapterList $inlineEditingChecker
      * @param \Magento\PageBuilder\Model\WidgetInitializerConfig $widgetInitializerConfig
+     * @param array $rootContainerConfig
      * @param array $data
      *
      * @SuppressWarnings(PHPMD.ExcessiveParameterList)
@@ -98,6 +107,7 @@ public function __construct(
         \Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor,
         \Magento\PageBuilder\Model\Wysiwyg\InlineEditingSupportedAdapterList $inlineEditingChecker,
         \Magento\PageBuilder\Model\WidgetInitializerConfig $widgetInitializerConfig,
+        array $rootContainerConfig = [],
         array $data = []
     ) {
         $this->config = $config;
@@ -109,6 +119,7 @@ public function __construct(
         $this->activeEditor = $activeEditor;
         $this->inlineEditingChecker = $inlineEditingChecker;
         $this->widgetInitializerConfig = $widgetInitializerConfig;
+        $this->rootContainerConfig = $rootContainerConfig;
         $this->data = $data;
     }
 
@@ -159,6 +170,12 @@ private function getContentTypes()
             );
         }
 
+        // The stage requires a root container to house it's children
+        $contentTypeData[self::ROOT_CONTAINER_NAME] = $this->flattenContentTypeData(
+            self::ROOT_CONTAINER_NAME,
+            $this->rootContainerConfig
+        );
+
         return $contentTypeData;
     }
 
@@ -169,32 +186,24 @@ private function getContentTypes()
      * @param array $contentType
      *
      * @return array
-     *
-     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
      */
     private function flattenContentTypeData(string $name, array $contentType)
     {
         return [
             'name' => $name,
             'label' => $contentType['label'],
-            'icon' => $contentType['icon'],
-            'form' => $contentType['form'],
-            'contentType' => '',
+            'icon' => isset($contentType['icon']) ? $contentType['icon'] : '',
+            'form' => isset($contentType['form']) ? $contentType['form'] : '',
             'group' => $contentType['group'] ?? 'general',
-            'fields' => $this->uiComponentConfig->getFields($contentType['form']),
-            'preview_template' => $contentType['preview_template'] ?? '',
-            'render_template' => $contentType['render_template'] ?? '',
+            'fields' => isset($contentType['form']) ? $this->uiComponentConfig->getFields($contentType['form']) : [],
             'component' => $contentType['component'],
             'preview_component' => $contentType['preview_component'] ?? self::DEFAULT_PREVIEW_COMPONENT,
             'master_component' => $contentType['master_component'] ?? self::DEFAULT_MASTER_COMPONENT,
             'allowed_parents' => $contentType['allowed_parents'] ?? [],
-            'readers' => $contentType['readers'] ?? [],
             'appearances' => $contentType['appearances'] ?? [],
             'additional_data' => isset($contentType['additional_data'])
                 ? $this->additionalDataParser->toArray($contentType['additional_data'])
                 : [],
-            'elements' => $contentType['elements'] ?? [],
-            'converters' => $contentType['converters'] ?? [],
             'is_visible' => isset($contentType['is_visible']) && $contentType['is_visible'] === 'false' ? false : true
         ];
     }

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeMapActionGroup.xml

@@ -409,9 +409,12 @@
         </arguments>
         <waitForElementVisible selector="{{section.warningMessageLink('1')}}" stepKey="waitForWarningMessageLink"/>
         <click selector="{{section.warningMessageLink('1')}}" stepKey="clickLink"/>
+        <waitForPageLoad stepKey="waitForLinkClick"/>
+        <switchToNextTab stepKey="switchToOpenedLink" />
         <waitForPageLoad stepKey="waitForPageLoad"/>
         <seeInCurrentUrl url="{{AdminContentManagementPage.url}}#cms_pagebuilder" stepKey="validateURL"/>
         <seeElement selector="{{ContentManagementSection.GoogleMapsAPIKeyInputField}}" stepKey="seeGoogleMapsAPIKeyInputField"/>
+        <closeTab stepKey="closeOpenedTab" />
     </actionGroup>
     <actionGroup name="validateAdvancedStyleWithAllUpdatedMapWithErrorOverlay" extends="validateAdvancedStyleWithAllUpdatedNotVisible">
         <waitForElementVisible selector="{{page.warningMessageLink(index)}}" stepKey="dontSeeElement"/>

app/code/Magento/PageBuilder/Test/Mftf/Data/ContentTypeData.xml

@@ -12,8 +12,9 @@
         <data key="index">1</data>
         <data key="pageName" unique="suffix">testcmspage</data>
     </entity>
-    <entity name="PageBuilderStage" type="pagebuilder_content_type">
-        <data key="role">stage</data>
+    <!-- Root Container -->
+    <entity name="PageBuilderRootContainerContentType" type="pagebuilder_content_type">
+        <data key="role">root-container</data>
     </entity>
     <!-- Layout -->
     <entity name="PageBuilderRowContentType" type="pagebuilder_content_type">

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

@@ -17,7 +17,7 @@
         <element name="enabled" type="button" selector="//div[not(contains(@class, '_disabled'))]/div[contains(@class, 'pagebuilder-wysiwyg-wrapper')]/div[@class='pagebuilder-stage-wrapper']"/>
         <element name="disabled" type="button" selector="//div[contains(@class, '_disabled')]/div[contains(@class, 'pagebuilder-wysiwyg-wrapper')]/div[@class='pagebuilder-stage-wrapper']"/>
         <element name="stageWrapperFullScreen" type="button" selector="div.pagebuilder-stage-wrapper.stage-full-screen"/>
-        <element name="stageWidthJS" type="button" selector="document.querySelector('div[class~=\'stage-container\']').clientWidth"/>
+        <element name="stageWidthJS" type="button" selector="document.querySelector('div[class~=\'root-container-container\']').clientWidth"/>
         <element name="modal" type="text" selector='aside.modal-popup._show'/>
         <element name="modalOk" type="button" selector="aside.modal-popup._show button.action-primary.action-accept"/>
         <element name="modalCancel" type="button" selector="aside.modal-popup._show button.action-secondary.action-dismiss"/>
@@ -45,9 +45,6 @@
         <element name="leftPanel" type="input" selector='#pagebuilder-panel'/>
         <element name="searchField" type="input" selector='//*[@id="pagebuilder-panel"]/div[1]/a'/>
         <element name="clearSearch" type="button" selector='//*[@id="pagebuilder-panel"]/div[1]/a'/>
-        <element name="collapsePanel" type="button" selector='//div[contains(@class, "panel-controls")]//a[contains(@class, "collapse")]'/>
-        <element name="panelCollapsed" type="button" selector='(//div[contains(@class, "pagebuilder-stage") and contains(@class, "panel-collapsed")])'/>
-        <element name="expandPanel" type="button" selector='//div[contains(@class, "expand")]//a'/>
         <element name="firstSection" type="button" selector='//*[@id="pagebuilder-panel-groups"]/li[1]' timeout="30"/>
         <element name="allPanelGroups" type="button" selector="#pagebuilder-panel-groups .group-title"/>
         <element name="allGroupContentTypes" type="button" selector="#pagebuilder-panel-groups #group-{{arg1}} .pagebuilder-draggable-content-type" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminCatalogProductPageBuilder.xml

@@ -97,7 +97,7 @@
         <actionGroup ref="dragContentTypeToDropZone" stepKey="dragRowToStage">
             <argument name="contentType" value="PageBuilderRowContentType"/>
             <argument name="contentTypeIndex" value="2"/>
-            <argument name="containerTargetType" value="PageBuilderStage"/>
+            <argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
             <argument name="dropZoneIndex" value="2"/>
         </actionGroup>
         <!-- Edit 2nd Row -->

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerCommonTest.xml

@@ -1228,7 +1228,7 @@
         </actionGroup>
         <actionGroup ref="cannotDragContentTypeToTarget" stepKey="dragBannerIntoStage">
             <argument name="contentType" value="PageBuilderBannerContentType"/>
-            <argument name="containerTargetType" value="PageBuilderStage"/>
+            <argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
         </actionGroup>
         <dontSeeElementInDOM selector="{{BannerOnBackend.base('1')}}" stepKey="dontSeeBanner"/>
     </test>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBlockTest.xml

@@ -964,7 +964,7 @@
         </actionGroup>
         <actionGroup ref="cannotDragContentTypeToTarget" stepKey="dragBlockIntoStage">
             <argument name="contentType" value="PageBuilderBlockContentType"/>
-            <argument name="containerTargetType" value="PageBuilderStage"/>
+            <argument name="containerTargetType" value="PageBuilderRootContainerContentType"/>
         </actionGroup>
         <dontSeeElementInDOM selector="{{BlockOnStage.base('1')}}" stepKey="dontSeeBlock"/>
     </test>