Merge branch 'develop' into MC-4014-performance

# Conflicts:
#	app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js
#	app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slider/preview.js
#	app/code/Magento/PageBuilder/view/adminhtml/web/js/stage.js
#	app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slider/preview.ts
#	app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/stage.ts

Author: davemacaulay

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

@@ -839,6 +839,7 @@
         <actionGroup ref="dragContentTypeToStage" stepKey="dragTabsIntoStage">
             <argument name="contentType" value="PageBuilderTabsContentType"/>
         </actionGroup>
+        <actionGroup ref="addTab" stepKey="addSecondTab"/>
         <!-- User sees tabs displayed with 1st default tab item created by default -->
         <comment userInput="User sees tabs displayed with 1st default tab item created by default" stepKey="AC1"/>
         <actionGroup ref="openPageBuilderEditPanelSmallByIndex" stepKey="openEditPanel1">
@@ -859,9 +860,13 @@
             <argument name="property" value="PageBuilderTabBackgroundColorPink"/>
         </actionGroup>
         <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
+        <seeElement selector="{{TabOnStage.tabHeaderItemActive('1')}}" stepKey="seeFirstTabActiveAdminPreview"/>
         <comment userInput="User updates tab settings and saves configuration" stepKey="saveBlock"/>
         <click selector="{{BlockNewPagePageActionsSection.saveBlock}}" stepKey="clickSaveBlock"/>
         <waitForPageLoad stepKey="waitForPageToLoad"/>
+        <!--Verify stage after save-->
+        <comment userInput="Verify stage after save" stepKey="commentVerifyStageAfterSave"/>
+        <seeElement selector="{{TabOnStage.tabHeaderItemActive('1')}}" stepKey="seeFirstTabActiveAdminPreviewAfterSave"/>
         <!--User goes to created CMS page-->
         <comment userInput="User goes to created CMS page" stepKey="NavigateToCMSPage"/>
         <actionGroup ref="navigateToCreatedCMSPage" stepKey="navigateToCreatedCMSPage">
@@ -883,6 +888,7 @@
         <!--Check that tab was rendered on the stage-->
         <comment userInput="Check that tab was rendered on the stage" stepKey="commentCheckingThatTabAreRenderedOnTHeStage"/>
         <see selector="{{TabOnStorefront.tabHeader('1')}}" userInput="{{PageBuilderTabNameRandom1.value}}" stepKey="seeTab1TitleStorefront2"/>
+        <seeElement selector="{{TabOnStorefront.tabHeaderItemActive('1')}}" stepKey="seeFirstTabActiveStorefront2"/>
         <seeElement selector="{{TabOnStorefront.backgroundColor('1', PageBuilderTabBackgroundColorPink.rgb)}}" stepKey="seeTab1BackgroundColor2"/>
         <actionGroup ref="openOptionsMenu" stepKey="openEditMenuOnStage3">
             <argument name="contentType" value="PageBuilderBlockContentType"/>
@@ -894,6 +900,7 @@
         <comment userInput="Verify Block On Store front" stepKey="commentCheckingThatImageIsNotRenderedOnTheStoreFront"/>
         <amOnPage url="$$createCMSPage.identifier$$" stepKey="amOnPageTestPage"/>
         <see selector="{{TabOnStorefront.tabHeader('1')}}" userInput="{{PageBuilderTabNameRandom1.value}}" stepKey="seeTab1TitleStorefront"/>
+        <seeElement selector="{{TabOnStorefront.tabHeaderItemActive('1')}}" stepKey="seeFirstTabActiveStorefront"/>
         <seeElement selector="{{TabOnStorefront.backgroundColor('1', PageBuilderTabBackgroundColorPink.rgb)}}" stepKey="seeTab1BackgroundColor"/>
         <see userInput="$$createPreReqBlock.content$$" stepKey="seeBlockContentOnCmsStage1"/>
     </test>

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

@@ -943,9 +943,6 @@
         <seeElement selector="{{SliderOnStage.padding('2', PageBuilderPaddingPropertyUnique.value)}}" stepKey="seePaddingStage"/>
         <!-- Show Content -->
         <comment userInput="Show Content" stepKey="commentShowContent"/>
-        <!-- Must save since slide breaks after duplication -->
-        <actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
-        <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
         <actionGroup ref="showContentType" stepKey="showContentTypeFirstSlider">
             <argument name="section" value="SliderOnStage"/>
             <argument name="contentType" value="PageBuilderSliderContentType"/>

app/code/Magento/PageBuilder/docs/activation-deactivation.md

@@ -0,0 +1,82 @@
+## Activate and Deactivate PageBuilder
+
+## Navigation
+
+1. [Introduction]
+2. [Installation guide]
+3. **Activate and Deactivate PageBuilder**
+4. [Contribution guide]
+5. [Developer documentation]
+    1. [Architecture overview]
+    1. [BlueFoot to PageBuilder data migration]
+    1. [Third-party content type migration]
+    1. [Iconography]
+    1. [Add image uploader to content type]
+    1. [Module integration]
+    1. [Additional data configuration]
+    1. [Content type configuration]
+    1. [How to add a new content type]
+    1. [Events]
+    1. [Bindings]
+    1. [Master format]
+    1. [Visual select] 
+    1. [Reuse product conditions in content types]
+    1. [Store component master format as widget directive]
+    1. [Use the block chooser UI component]
+    1. [Use the inline text editing component]
+    1. [Render a backend content type preview]
+    1. [Custom Toolbar]
+    1. [Full width page layouts]
+    1. [Add custom logic to content types]
+6. [Roadmap and known issues]
+7. [How to create custom PageBuilder content type container]
+
+[Introduction]: introduction.md
+[Contribution guide]: ../CONTRIBUTING.md
+[Installation guide]: install.md
+[Developer documentation]: developer-documentation.md
+[Architecture overview]: architecture-overview.md
+[BlueFoot to PageBuilder data migration]: bluefoot-data-migration.md
+[Third-party content type migration]: new-content-type-example.md
+[Iconography]: iconography.md
+[Add image uploader to content type]: image-uploader.md
+[Module integration]: module-integration.md
+[Additional data configuration]: custom-configuration.md
+[Content type configuration]: content-type-configuration.md
+[How to add a new content type]: how-to-add-new-content-type.md
+[Events]: events.md
+[Bindings]: bindings.md
+[Master format]: master-format.md
+[Visual select]: visual-select.md
+[Reuse product conditions in content types]: product-conditions.md
+[Store component master format as widget directive]: widget-directive.md
+[Use the block chooser UI component]: block-chooser-component.md
+[Use the inline text editing component]: inline-editing-component.md
+[Render a backend content type preview]: content-type-preview.md
+[Custom Toolbar]: toolbar.md
+[Full width page layouts]: full-width-page-layouts.md
+[Add custom logic to content types]: add-custom-logic.md
+[Roadmap and Known Issues]: roadmap.md
+[How to create custom PageBuilder content type container]: how-to-create-custom-content-type-container.md
+[Activate and Deactivate PageBuilder]: activation-deactivation.md
+
+
+## Activate PageBuilder
+
+Follow these steps to activate PageBuilder in the Admin:
+
+1. Navigate to the Admin section of you Magento instance.
+2. In the **Stores** tab, select **Configuration** under the Settings group.
+3. In the **General** group on the page, select **Content Management**.
+4. Under **Advanced Content Tools**, select **Yes** for **Enable Page Builder**.
+5. Click **Save Config**
+
+## Deactivate PageBuilder
+
+We recommend you deactivate the PageBuilder editor through the Admin instead of disabling the module itself.
+This allows the PageBuilder module to continue rendering the content on the storefront even if the editor is not used in the Admin.
+
+If you disabled or uninstalled the entire PageBuilder module instead of just the editor, you need to do the following to continue using PageBuilder-built content:
+
+1. Implement PageBuilder widgets and initialize them on dynamic blocks since JavaScript functionality provided by PageBuilder will no longer work.
+2. Change the layout in the database for entities that use the full width layout to prevent blank layout content.

app/code/Magento/PageBuilder/docs/events.md

@@ -133,6 +133,7 @@ All events starting with `contentType:` can also be called for specific content
 {
     id: string;
     contentType: ContentTypeInterface & ContentTypeCollectionInterface;
+    expectedChildren: number;
 }
 ```
 
@@ -224,6 +225,7 @@ All events starting with `contentType:` can also be called for specific content
     originalContentType: ContentTypeInterface & ContentTypeCollectionInterface;
     duplicateContentType: ContentTypeInterface & ContentTypeCollectionInterface;
     index: number;
+    direct: boolean;
 }
 ```
 

app/code/Magento/PageBuilder/docs/images/support-downloads-tab.png

@@ -23,23 +23,14 @@
 
 ## Overview
 
-PageBuilder has two installation paths, one through Composer and the other through GitHub.
-
-If you want to evaluate the PageBuilder module, follow the Composer installation path.
-
-If you want to contribute to the development of PageBuilder, follow the GitHub installation path.
-
-## Composer installation
-
-This installation method uses Composer to install PageBuilder into Magento.
-Use this method if you are testing and evaluating PageBuilder for your Magento store.
+Follow these steps to install Page Builder.
 
 ### Prerequisites
 
 * You submitted your MAGEID and github username and received access to 2.3 alpha and PageBuilder 100.0.0 alpha.
   If you didn't submit this information, send us an email to request access.
 
-### Installation steps
+### Steps
 
 1. If you already have 2.3.0 alpha or Page Builder 100.0.0 alpha version installed, run the following command before installing again:
     ``` sh
@@ -49,45 +40,23 @@ Use this method if you are testing and evaluating PageBuilder for your Magento s
 2. Navigate to the directory where you want to install Magento and Page Builder.
 3. Install the 2.3.0 alpha Commerce package using the following command: 
     ``` sh
-    composer create-project --repository-url=https://repo.magento.com/ magento/project-enterprise-edition=2.3.0-alpha
+    composer create-project --repository-url=https://repo.magento.com/ magento/project-enterprise-edition:^2.3.0-alpha72
     ```
 
     Enter the access keys for your account (Marketplace / My Profile / Access Keys)
-4. Install Page Builder
-    ``` sh
-    composer require magento/module-page-builder-commerce
-    ```
-5. Enable Page Builder module using the following command:
-    ``` sh
-    bin/magento setup:upgrade
-    ```
-
-## GitHub installation
-
-This installation method checks out the PageBuilder repository from GitHub and installs it into a development instance of Magento.
-Do not use this installation method for evaluation or production instances. 
-
-### Prerequisites
-
-* A local development installation of Magento 2.3.0 alpha
-* Access to the PageBuilder repository
-* [Yarn package manager]
-
-[Yarn package manager]: https://yarnpkg.com/en/
-
-### Installation steps
-
-1. Navigate to the root directory of your Magento application
-2. Clone the PageBuilder repository as a sub-directory using the following command:
+4. Clone Page Builder repos
     ``` sh
-    git clone git@github.com:magento/magento2-page-builder.git pagebuilder
+    git clone https://github.com/magento/magento2-page-builder
+    git clone https://github.com/magento/magento2-page-builder-ee
     ```
-3. Return to the root directory of your Magento application and navigate to `app/code/Magento`
-4. In the Magento modules directory, link the PageBuilder module code to the application code using the following command:
+5. Copy dev and app directories in magento2-page-builder and magento2-page-builder-ee to the directory with Magento Commerce 2.3 alpha
     ``` sh
-    ln -s ../../../pagebuilder/app/code/Magento/PageBuilder
+    cp -r magento2-page-builder/app project-enterprise-edition/
+    cp -r magento2-page-builder/dev project-enterprise-edition/
+    cp -r magento2-page-builder-ee/app project-enterprise-edition/
+    cp -r magento2-page-builder-ee/dev project-enterprise-edition/
     ```
-5. Return to the root directory of your Magento application and install the PageBuilder module using the following command:
+6. Enable Page Builder module using the following command:
     ``` sh
     bin/magento setup:upgrade
     ```
@@ -96,60 +65,13 @@ Do not use this installation method for evaluation or production instances.
 
 When a new version of Page Builder is available, destroy your existing 2.3.0-alpha instance and follow the [composer](install.md#composer-installation) or [GitHub](install.md#github-installation) installation steps.
 
-## Installing Node.js dependencies
-
-If you plan to contribute to Page Builder, you need to install Node.js dependencies to compile TypeScript.
-
-Navigate to the `pagebuilder` directory and install PageBuilder dependencies using the following command:
-``` sh
-cd pagebuilder && yarn install
-```
-
-Then you can run `npx gulp` to watch changes to TypeScript files and compile.
-
-To check for TypeScript errors, you can run `npx tslint --fix -p tsconfig.json`.
-
-## Activation
-
-Follow these steps to activate PageBuilder in the Admin:
-
-1. Navigate to the Admin section of you Magento instance.
-2. In the **Stores** tab, select **Configuration** under the Settings group.
-3. In the **General** group on the page, select **Content Management**.
-4. Under **Advanced Content Tools**, select **Yes** for **Enable Page Builder**.
-5. Click **Save Config**
-
-## Disable PageBuilder
-
-We recommend you deactivate the PageBuilder editor through the Admin instead of disabling the module itself.
-This allows the PageBuilder module to continue rendering the content on the storefront even if the editor is not used in the Admin.
-
-If you disabled or uninstalled the entire PageBuilder module instead of just the editor, you need to do the following to continue using PageBuilder-built content:
-
-1. Implement PageBuilder widgets and initialize them on dynamic blocks since JavaScript functionality provided by PageBuilder will no longer work.
-2. Change the layout in the database for entities that use the full width layout to prevent blank layout content.
-
 ## Troubleshooting
 
-### Common access problems
-
-If you are having trouble installing PageBuilder, please verify that the `MAGEID` account you provided for the Early Access Program (EAP) belongs to an active Magento partner account.
-
-**Note:**
-*Your company may have multiple Magento accounts, and only one or two may be active.*
-*Ask your company to provide you with an active Magento account.*
-
-Log into www.magento.com and see if the **Support** and **Downloads** tabs are available.
-
-![Support and downloads tabs](images/support-downloads-tab.png)
-
-If these tabs do not appear in your Magento account, it is not an active Magento partner account, and
-you will not be able to access PageBuilder.
+### Page Builder repositories access problems
 
-If you provided incorrect `MAGEID` by mistake and have another one that is valid, please resubmit this form:
-https://goo.gl/forms/unvuDikl9wydmKt12
+If you are having trouble accessing PageBuilder repositories, please contact [Igor Melnykov] or [Olena Tkacheva].
 
-### Errors
+### 2.3 alpha installation problems
 
 If you run into any of the following errors:
 
@@ -161,6 +83,6 @@ Could not find a matching version of package magento/module-page-builder-commerc
 ```
 
 Check your composer keys in the `auth.json` file.
-If these keys are correct and you still encounter these errors, please contact [Olena Tkacheva].
+If these keys are correct and you still encounter these errors, please contact [Igor Melnykov] or [Olena Tkacheva].
 
 [Olena Tkacheva]: https://magentocommeng.slack.com/messages/@UAFV915FB

app/code/Magento/PageBuilder/docs/install.md

@@ -4,35 +4,20 @@
  */
 
 var config = {
-    paths: {
-        'pagebuilder/async': 'Magento_PageBuilder/js/resource/requirejs/async',
-
-        /* Extra Resources Needed */
-        'pagebuilder/html2canvas': 'Magento_PageBuilder/js/resource/html2canvas',
-        'hyperscript': 'Magento_PageBuilder/js/resource/hyperscript/hyperscript',
-        'xyperscript': 'Magento_PageBuilder/js/resource/xyperscript/xyperscript',
-        'google-map': 'Magento_PageBuilder/js/utils/map',
-
-        /* Include our Knockout Sortable wrapper */
-        'pagebuilder/ko-dropzone': 'Magento_PageBuilder/js/resource/dropzone/knockout-dropzone',
-        'pagebuilder/ko-redactor': 'Magento_PageBuilder/js/resource/redactor/knockout-redactor',
-        'pagebuilder/ko-liveedit': 'Magento_PageBuilder/js/resource/live-edit/knockout-liveedit'
-    },
     map: {
         '*': {
-            /* Map the abstract widget to the input type widget */
-            'pagebuilder/widget/abstract': 'pagebuilder/field/abstract',
+            /* Include our Knockout Sortable wrapper */
+            'pagebuilder/ko-dropzone': 'Magento_PageBuilder/js/resource/dropzone/knockout-dropzone',
 
             /* Utilities */
-            'pagebuilder/utils': 'Magento_PageBuilder/js/utils',
-            'pagebuilder/config': 'Magento_PageBuilder/js/component/config'
+            'google-map': 'Magento_PageBuilder/js/utils/map'
         }
     },
     shim: {
         'pagebuilder/ko-sortable': {
-            deps: ['jquery', 'jquery/ui', 'Magento_PageBuilder/js/resource/jquery-ui/jquery.ui.touch-punch.min']
+            deps: ['jquery', 'jquery/ui', 'Magento_PageBuilder/js/resource/jquery-ui/jquery.ui.touch-punch']
         },
-        'Magento_PageBuilder/js/resource/jquery/ui/jquery.ui.touch-punch.min': {
+        'Magento_PageBuilder/js/resource/jquery/ui/jquery.ui.touch-punch': {
             deps: ['jquery/ui']
         }
     },

app/code/Magento/PageBuilder/view/adminhtml/requirejs-config.js

@@ -177,7 +177,7 @@
         transition: opacity 200ms, top 200ms, visibility 200ms;
         visibility: hidden;
         width: 100%;
-        z-index: 15;
+        z-index: 20;
     }
 }
 

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less

@@ -154,8 +154,12 @@ div[data-role='tabs'],
             min-height: inherit;
             padding: 0;
 
-            > .pagebuilder-content-type-wrapper:not(:first-child) {
-                display: none;
+            > .pagebuilder-content-type-wrapper {
+                display: block;
+
+                ~ .pagebuilder-content-type-wrapper {
+                    display: none;
+                }
             }
         }
     }