Merge remote-tracking branch 'origin/MAGETWO-87048-Extensible-Grid-System' into MAGETWO-87048-Extensible-Grid-System

Author: Cari Spruiell

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

@@ -291,9 +291,6 @@
         <actionGroup ref="dragContentTypeToStage" stepKey="dragAdditionalRow">
             <argument name="contentType" value="PageBuilderRowContentType"/>
         </actionGroup>
-        <actionGroup ref="dragContentTypeToStage" stepKey="dragAdditionalRow2">
-            <argument name="contentType" value="PageBuilderRowContentType"/>
-        </actionGroup>
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragColumnIntoStage">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
             <argument name="containerTargetType" value="PageBuilderRowContentType"/>
@@ -324,6 +321,7 @@
         <!-- Close grid form and check options are restored -->
         <comment userInput="Close grid form and check options are restored" stepKey="commentCloseAndValidateOptionsAreRestored"/>
         <actionGroup ref="closeGridSizeForm" stepKey="closeGridForm" />
+        <scrollTo selector="{{CmsNewPagePageActionsSection.pageTitle}}" stepKey="scrollToTop"/>
         <moveMouseOver selector="{{PageBuilderActionsSection.contentTypeInStage(PageBuilderRowContentType.role)}}" x="10" y="0" stepKey="onMouseOverContentTypeStage"/>
         <waitForPageLoad stepKey="waitForPageLoad"/>
         <waitForElementVisible time="10" selector="{{PageBuilderActionsSection.contentTypeOptionsMenu(PageBuilderRowContentType.role)}}" stepKey="waitForOptions"/>
@@ -438,14 +436,23 @@
         </actionGroup>
         <seeNumberOfElements selector="{{PageBuilderColumnSection.allColumns}}" userInput="3" stepKey="seeNumberOfColumnsStill3"/>
         <actionGroup ref="closeGridSizeForm" stepKey="closeGridSizeForm"/>
+        <!-- Verify Initial Column Sizes -->
+        <comment userInput="Verify Initial Column Sizes " stepKey="context0"/>
+        <seeElement selector="{{PageBuilderColumnSection.displayLabel('1','2/7')}}" stepKey="checkWidthFirstColumn"/>
+        <seeElement selector="{{PageBuilderColumnSection.displayLabel('2','2/7')}}" stepKey="checkWidthSecondColumn"/>
+        <seeElement selector="{{PageBuilderColumnSection.displayLabel('3','3/7')}}" stepKey="checkWidthThirdColumn"/>
         <!-- Grab grid guide location for column 1 -->
-        <comment userInput="Grab grid guide width" stepKey="context0"/>
-        <executeJS function="return document.querySelector('{{PageBuilderColumnSection.columnResizeGridLine('5')}}').clientWidth" stepKey="guideWidth"/>
+        <comment userInput="Grab grid guide width" stepKey="context1"/>
+        <executeJS function="return document.querySelector('{{PageBuilderColumnSection.columnResizeGridLine('1')}}').clientWidth" stepKey="guideWidth"/>
         <!-- Resize Column 1 -->
-        <comment userInput="Resize Column 1" stepKey="comment1"/>
-        <dragAndDrop selector1="{{PageBuilderColumnSection.columnX('1')}} {{PageBuilderColumnSection.columnResizeHandle}}" selector2="{{PageBuilderColumnSection.columnResizeGridLine('5')}}" x="$guideWidth" stepKey="resizeColumn1"/>
+        <comment userInput="Resize Column 1" stepKey="context2"/>
+        <dragAndDrop selector1="{{PageBuilderColumnSection.columnX('1')}} {{PageBuilderColumnSection.columnResizeHandle}}" selector2="{{PageBuilderColumnSection.columnResizeGridLine('1')}}" x="$guideWidth" stepKey="resizeColumn1"/>
         <seeNumberOfElements selector="{{PageBuilderColumnSection.allColumns}}" userInput="3" stepKey="seeNumberOfColumnsStill32"/>
-        <seeElement selector="{{PageBuilderColumnSection.displayLabel('1','5/7')}}" stepKey="checkWidthFirstColumn"/>
+        <!-- Verify New Column Sizes -->
+        <comment userInput="Verify New Column Sizes " stepKey="context3"/>
+        <seeElement selector="{{PageBuilderColumnSection.displayLabel('1','1/7')}}" stepKey="checkWidthFirstColumn2"/>
+        <seeElement selector="{{PageBuilderColumnSection.displayLabel('2','3/7')}}" stepKey="checkWidthSecondColumn2"/>
+        <seeElement selector="{{PageBuilderColumnSection.displayLabel('3','3/7')}}" stepKey="checkWidthThirdColumn2"/>
     </test>
     <test name="ValidateResizeHistory">
         <annotations>

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

@@ -729,7 +729,6 @@
             <argument name="contentType" value="PageBuilderColumnContentType"/>
             <argument name="contentTypeNumber" value="1"/>
         </actionGroup>
-        <actionGroup ref="confirmRemovalModal" stepKey="confirmRemovalModal"/>
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragIntoStage1">
             <argument name="contentType" value="PageBuilderDividerContentType"/>
             <argument name="containerTargetType" value="PageBuilderColumnContentType"/>

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

@@ -86,7 +86,7 @@
         </actionGroup>
         <seeNumberOfElements selector="{{PageBuilderColumnSection.columnGroupColumns('1')}}" userInput="1" stepKey="seeOneColumnInGroup" />
         <!-- As the removal of the first column caused this ones width to change we have to confirm the removal -->
-        <actionGroup ref="removeContentTypeFromStage" stepKey="removeColumn2">
+        <actionGroup ref="removeEmptyContentTypeFromStage" stepKey="removeColumn2">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
         </actionGroup>
         <dontSeeElement selector="{{PageBuilderColumnSection.column}}" stepKey="dontSeeColumn"/>
@@ -927,7 +927,7 @@
         <waitForElementVisible selector="{{PageBuilderColumnSection.columnStyle(PageBuilderFirstColumnInStage.index, PageBuilderColumnStyles.widthOneTwelfth)}}" stepKey="seeFirstColumnWidth"/>
         <seeElement selector="{{PageBuilderColumnSection.columnStyle(PageBuilderSecondColumnInStage.index, PageBuilderColumnStyles.widthFiveTwelfth)}}" stepKey="seeSecondColumnWidth"/>
         <seeElement selector="{{PageBuilderColumnSection.columnStyle(PageBuilderThirdColumnInStage.index, PageBuilderColumnStyles.widthHalf)}}" stepKey="seeThirdColumnWidth"/>
-        <actionGroup ref="removeContentTypeFromStage" stepKey="removeColumn1">
+        <actionGroup ref="removeEmptyContentTypeFromStage" stepKey="removeColumn1">
             <argument name="contentType" value="PageBuilderColumnContentType"/>
         </actionGroup>
         <waitForElementVisible selector="{{PageBuilderColumnSection.columnStyle(PageBuilderFirstColumnInStage.index, PageBuilderColumnStyles.widthHalf)}}" stepKey="seeFirstColumnWidthDistributed"/>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-group/preview.js

@@ -21,7 +21,7 @@ import {default as ColumnGroupPreview} from "../column-group/preview";
 import BindResizeHandleEventParamsInterface from "../column/bind-resize-handle-event-params";
 import InitElementEventParamsInterface from "../column/init-element-event-params";
 import ColumnPreview from "../column/preview";
-import ResizeUtils, {
+import Resize, {
     comparator, determineMaxGhostWidth, getAdjacentColumn, getColumnIndexInGroup,
     getRoundedColumnWidth, updateColumnWidth,
 } from "../column/resize";
@@ -73,7 +73,7 @@ export default class Preview extends PreviewCollection {
     private dropPosition: DropPosition;
     private movePosition: DropPosition;
     private groupPositionCache: GroupPositionCache;
-    private resizeUtils: ResizeUtils;
+    private resizeUtils: Resize;
     private gridSizeHistory: Map<number, number[]> = new Map();
 
     /**
@@ -88,7 +88,7 @@ export default class Preview extends PreviewCollection {
         observableUpdater: ObservableUpdater,
     ) {
         super(parent, config, observableUpdater);
-        this.resizeUtils = new ResizeUtils(this.parent);
+        this.resizeUtils = new Resize(this.parent);
 
         // Keep track of the grid size in an observable
         this.parent.dataStore.subscribe((state: DataObject) => {
@@ -131,9 +131,9 @@ export default class Preview extends PreviewCollection {
     /**
      * Retrieve the resize utils
      *
-     * @returns {ResizeUtils}
+     * @returns {Resize}
      */
-    public getResizeUtils(): ResizeUtils {
+    public getResizeUtils(): Resize {
         return this.resizeUtils;
     }
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column/resize.js

@@ -8,7 +8,7 @@ import {outwardSearch} from "../../utils/array";
 import {ColumnWidth, GroupPositionCache, MaxGhostWidth, ResizeHistory} from "../column-group/preview";
 import ColumnPreview from "./preview";
 
-export default class ResizeUtils {
+export default class Resize {
     private columnGroup: ContentTypeCollectionInterface;
 
     constructor(columnGroup: ContentTypeCollectionInterface) {