#557: User access Row action panel with 2+ level nesting - Mftf tests fixes

Author: hannahnida

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

@@ -174,6 +174,14 @@
         <data key="name">Box Shadow</data>
         <data key="value">rgb(153, 153, 153) 0px 0px 0px 1px</data>
     </entity>
+    <entity name="PageBuilderBoxShadowProperty_Affordance" type="pagebuilder_box_shadow_property">
+        <data key="name">Box Shadow</data>
+        <data key="value">rgba(197, 197, 197, 0.34) 0px 0px 0px 1px</data>
+    </entity>
+    <entity name="PageBuilderBoxShadowOnHoverProperty_Affordance" type="pagebuilder_box_shadow_property">
+        <data key="name">Box Shadow</data>
+        <data key="value">rgb(197, 197, 197) 0px 0px 0px 1px</data>
+    </entity>
     <!-- XSS Payload -->
     <entity name="PageBuilderXSSPayloadProperty" type="pagebuilder_xss_payload">
         <data key="value">&gt;&lt;img src=x onerror=throw(1)&gt;</data>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderCommonTest/DefaultSystemBordersAppearInAdminTest.xml

@@ -30,16 +30,16 @@
         </after>
         <!-- Validate Row Box Shadow -->
         <comment userInput="Validate Row Box-Shadow" stepKey="commentValidateRowBoxShadow"/>
-        <executeJS function="return window.getComputedStyle(document.querySelector('.pagebuilder-row'),null).getPropertyValue('box-shadow')" stepKey="getDefaultRowBoxShadowStyle"/>
+        <executeJS function="return window.getComputedStyle(document.querySelector('.pagebuilder-row-affordance'),null).getPropertyValue('box-shadow')" stepKey="getDefaultRowBoxShadowStyle"/>
         <assertEquals stepKey="assertDefaultRowBoxShadowStyle" message="pass">
-            <expectedResult type="string">{{PageBuilderBoxShadowProperty_Default.value}}</expectedResult>
+            <expectedResult type="string">{{PageBuilderBoxShadowProperty_Affordance.value}}</expectedResult>
             <actualResult type="variable">getDefaultRowBoxShadowStyle</actualResult>
         </assertEquals>
         <moveMouseOver selector="{{RowOnStage.base('1')}}" stepKey="moveMouseOverRow"/>
         <waitForPageLoad stepKey="waitForRowHoverAnimation"/>
-        <executeJS function="return window.getComputedStyle(document.querySelector('.pagebuilder-row'),null).getPropertyValue('box-shadow')" stepKey="getDefaultRowHoverBoxShadowStyle"/>
+        <executeJS function="return window.getComputedStyle(document.querySelector('.pagebuilder-row-affordance'),null).getPropertyValue('box-shadow')" stepKey="getDefaultRowHoverBoxShadowStyle"/>
         <assertEquals stepKey="assertDefaultRowHoverBoxShadowStyle" message="pass">
-            <expectedResult type="string">{{PageBuilderBoxShadowOnHoverProperty_Default.value}}</expectedResult>
+            <expectedResult type="string">{{PageBuilderBoxShadowOnHoverProperty_Affordance.value}}</expectedResult>
             <actualResult type="variable">getDefaultRowHoverBoxShadowStyle</actualResult>
         </assertEquals>
         <!-- Validate Column Box Shadow -->

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_var.less

@@ -81,5 +81,5 @@
 //  Affordance
 //  ---------------------------------------------
 
-@pagebuilder-affordance-box-shadow: 0 0 0 1px rgba(197, 197, 197, 0.34);
+@pagebuilder-affordance-box-shadow: rgba(197, 197, 197, 0.34) 0 0 0 1px;
 @pagebuilder-affordance-box-shadow-active: 0 0 0 1px @color-pagebuilder-light-silver;

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

@@ -8,7 +8,7 @@
 <div attr="data.main.attributes"
      ko-style="data.main.style"
      css="data.main.css">
-    <div class="pagebuilder-content-type pagebuilder-content-type-affordance"
+    <div class="pagebuilder-content-type pagebuilder-content-type-affordance pagebuilder-row-affordance"
          ko-style="getStyle(data.inner, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
          event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
         <div class="pagebuilder-content-type no-system-border type-container pagebuilder-row children-min-height"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-content-type-affordance"
+<div class="pagebuilder-content-type pagebuilder-content-type-affordance pagebuilder-row-affordance"
      ko-style="getStyle(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div class="pagebuilder-content-type type-container no-system-border pagebuilder-row children-min-height"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-content-type-affordance"
+<div class="pagebuilder-content-type pagebuilder-content-type-affordance pagebuilder-row-affordance"
      ko-style="getStyle(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div class="pagebuilder-content-type pagebuilder-row type-container no-system-border children-min-height"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html

@@ -32,6 +32,7 @@ import {calculateDropPositions, DropPosition} from "./drag-and-drop";
 import {createColumn} from "./factory";
 import {getMaxGridSize, GridSizeError, resizeGrid} from "./grid-size";
 import {getDragColumn, removeDragColumn, setDragColumn} from "./registry";
+import pageBuilderHeaderHeight from "../../utils/pagebuilder-header-height";
 
 /**
  * @api
@@ -467,8 +468,11 @@ export default class Preview extends PreviewCollection {
             this.gridSizeHistory = new Map();
             this.recordGridResize(this.gridSize());
             // inline tooltip out of bounds
+            let tooltipClientRectTop = tooltip[0].getBoundingClientRect().top
+                                     - pageBuilderHeaderHeight(this.contentType.stageId);
+
             if (checkStageFullScreen(this.contentType.stageId)
-                && 0 > tooltip[0].getBoundingClientRect().top
+                && tooltip[0].getBoundingClientRect().height > tooltipClientRectTop
             ) {
                 this.gridToolTipOverFlow(true);
             }