Merge pull request #124 from magento-trigger/AC-106

[Trigger] jQuery-UI upgrade

Author: xmav

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/OptionsMenuActionGroup/RemoveEmptyContentTypeFromStageActionGroup.xml

@@ -15,7 +15,10 @@
             <argument name="offsetYCoordinate" defaultValue="5" type="string"/>
         </arguments>
         <waitForElementVisible time="10" selector="{{PageBuilderStage.contentTypeInStage(contentType.role)}}" stepKey="waitForContentTypeInStageVisible"/>
-        <moveMouseOver selector="{{PageBuilderStage.contentTypeInStage(contentType.role)}}" x="{{offsetXCoordinate}}" y="{{offsetYCoordinate}}" stepKey="onMouseOverContentTypeStage"/>
+        <moveMouseOver stepKey="moveMouseOverSearch" selector="{{PageBuilderPanel.searchPanel}}" />
+        <executeJS function="return ['row', 'column'].include('{{contentType.role}}') ? '//div[contains(@class, &quot;pagebuilder-display-label&quot;) and contains(.,&quot;'+'{{contentType.role}}'.toUpperCase()+'&quot;)]' : ['tabs'].include('{{contentType.role}}') ? '//ul[@data-element=&quot;navigation&quot;]' : '';" stepKey="contentTypeLabelSelector" />
+        <executeJS function="return ['row'].include('{{contentType.role}}') ? '(//div[contains(@class, &quot;pagebuilder-content-type-affordance&quot;) and contains(@class, &quot;pagebuilder-affordance-{{contentType.role}}&quot;)])' : '(//div[contains(@class, &quot;pagebuilder-content-type&quot;) and contains(@class, &quot;pagebuilder-{{contentType.role}}&quot;)])';" stepKey="contentTypeSelector" />
+        <moveMouseOver selector="{$contentTypeSelector}{$contentTypeLabelSelector}" x="{{offsetXCoordinate}}" y="{{offsetYCoordinate}}" stepKey="onMouseOverContentTypeStage"/>
         <waitForPageLoad stepKey="waitForOptionsAnimation"/>
         <waitForElementVisible time="10" selector="{{PageBuilderContentTypeOptionsMenu.contentTypeOptionsMenuByIndex(contentType.role, '1')}}" stepKey="waitForOptions"/>
         <click selector="{{PageBuilderContentTypeOptionsMenu.contentTypeRemove(contentType.role)}}" stepKey="clickRemoveContentType"/>

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

@@ -14,7 +14,7 @@
         <data key="value"/>
         <data key="rgba">rgba(0, 0, 0, 0)</data>
         <data key="rgb">rgba(0, 0, 0, 0)</data>
-        <data key="colorSwatchColor">rgba(0, 0, 0, 0)</data>
+        <data key="colorSwatchColor">transparent</data>
         <data key="colorWheelDefault">rgb(255, 0, 0)</data>
         <data key="placeholderText">No Color</data>
     </entity>

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

@@ -12,7 +12,7 @@
         <element name="baseJS" type="text" selector="document.querySelectorAll('[data-content-type=tab-item]')[{{arg1}} - 1]" parameterized="true"/>
         <element name="elementChildren" type="text" selector="(//*[@role=&quot;tabpanel&quot;])[{{arg1}}]//div[contains(@class, &quot;pagebuilder-tab-item&quot;)]//div[contains(@class, &quot;tab-item-container&quot;)]" parameterized="true"/>
         <element name="all" type="button" selector=".pagebuilder-tab-item"/>
-        <element name="moveHandle" type="button" selector="(//div[@data-content-type='tabs'])[{{arg1}}]//li[@role='tab'][{{arg2}}]//span[@class='tab-drag-handle']" parameterized="true"/>
+        <element name="moveHandle" type="button" selector="(//div[@data-content-type='tabs'])[{{arg1}}]//li[@role='tab'][{{arg2}}]//span[contains(@class, 'tab-drag-handle')]" parameterized="true"/>
         <element name="tabHeader" type="button" selector="(//ul[contains(@class, 'tabs-navigation')]//a[contains(@class, 'tab-title')])[{{arg1}}]" parameterized="true"/>
         <element name="tabHeaderCSS" type="button" selector="[data-content-type=tabs] [role=presentation]"/>
         <element name="tabHeaderEditableTitle" type="button" selector="(//ul[contains(@class, 'tabs-navigation')]//a[contains(@class, 'tab-title')])[{{arg1}}]//span[contains(@contenteditable, 'true')]" parameterized="true"/>
@@ -30,6 +30,7 @@
         <element name="optionsMenuButtonDisabled" type="button" selector="(//ul[contains(@class,'tabs-navigation')]//div[contains(@class,'pagebuilder-options-wrapper')])[{{arg1}}]//a[contains(@class,'{{arg2}}') and contains(@class,'disabled')]" parameterized="true"/>
         <element name="default" type="button" selector="(//div[contains(@class,'pagebuilder-tabs') and contains(@class,'ui-tabs')]//div[@role='tabpanel'])[{{arg1}}][not(contains(@style,'border:'))]" parameterized="true"/>
         <element name="tabTitle" type="button" selector="//*[@name='tabs[{{arg1}}][title]']" parameterized="true"/>
+        <element name="tab" type="button" selector="//*[@role='tab'][{{arg1}}]" parameterized="true"/>
         <element name="tabPanel" type="button" selector="//*[@role='tabpanel'][{{arg1}}]" parameterized="true"/>
         <element name="tabContent" type="button" selector="//*[@role=&quot;tabpanel&quot;][{{arg1}}]//div[contains(@class, &quot;pagebuilder-tab-item&quot;)]" parameterized="true"/>
         <element name="cssClasses" type="button" selector="//*[@role=&quot;tabpanel&quot;][{{arg1}}]//div[contains(@class, &quot;pagebuilder-tab-item&quot;)][contains(@class,'{{arg2}}')]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTabItemConfigurationTest/DefaultTabItemStateOnAddingNewTabTest.xml

@@ -53,7 +53,7 @@
         <!-- User sees the first tab to be active and focused. -->
         <comment userInput="User sees the first tab to be active and focused." stepKey="AC4"/>
         <assertElementContainsAttribute stepKey="assertTab1ContentFocused">
-			<expectedResult selector="{{TabOnStage.tabPanel('1')}}" attribute="aria-expanded" type="string">true</expectedResult>
+			<expectedResult selector="{{TabOnStage.tab('1')}}" attribute="aria-expanded" type="string">true</expectedResult>
         </assertElementContainsAttribute>
         <assertElementContainsAttribute stepKey="assertTab1ContentVisible">
 			<expectedResult selector="{{TabOnStage.tabPanel('1')}}" attribute="aria-hidden" type="string">false</expectedResult>

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

@@ -52,7 +52,7 @@ export default class Preview extends PreviewCollection {
         // Keeps track of number of button item to disable sortable if there is only 1.
         this.contentType.children.subscribe(() => {
             const sortableElement = $(this.wrapperElement).find(".buttons-container");
-            if (!sortableElement.data("sortable")) {
+            if (!sortableElement.data("ui-sortable")) {
                 return;
             }
             if (this.contentType.children().length <= 1) {

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

@@ -595,7 +595,7 @@ export default class Preview extends PreviewCollection {
             _.defer(() => {
                 // Re-enable any disabled sortable areas
                 group.find(".ui-sortable").each(function() {
-                    if ($(this).data("sortable")) {
+                    if ($(this).data("ui-sortable")) {
                         $(this).sortable("option", "disabled", false);
                     }
                 });
@@ -873,7 +873,7 @@ export default class Preview extends PreviewCollection {
             event.pageY < (groupPosition.top + groupPosition.outerHeight) - 20
         ) {
             // Disable the column group sortable instance
-            if (elementChildrenParent.data("sortable")) {
+            if (elementChildrenParent.data("ui-sortable")) {
                 elementChildrenParent.sortable("option", "disabled", true);
             }
 
@@ -892,7 +892,7 @@ export default class Preview extends PreviewCollection {
             }
         } else if (this.dropOverElement) {
             // Re-enable the column group sortable instance
-            if (elementChildrenParent.data("sortable")) {
+            if (elementChildrenParent.data("ui-sortable")) {
                 elementChildrenParent.sortable("option", "disabled", false);
             }
             this.dropPosition = null;
@@ -917,7 +917,7 @@ export default class Preview extends PreviewCollection {
                 _.defer(() => {
                     // Re-enable the column group sortable instance & all children sortable instances
                     group.parents(".element-children").each(function() {
-                        if ($(this).data("sortable")) {
+                        if ($(this).data("ui-sortable")) {
                             $(this).sortable("option", "disabled", false);
                         }
                     });
@@ -926,7 +926,7 @@ export default class Preview extends PreviewCollection {
             activate() {
                 if (getDraggedContentTypeConfig() === Config.getContentTypeConfig("column")) {
                     group.find(".ui-sortable").each(function() {
-                        if ($(this).data("sortable")) {
+                        if ($(this).data("ui-sortable")) {
                             $(this).sortable("option", "disabled", true);
                         }
                     });