MC-4057: Fix attached mftf skipped tests

- Fixed failing test due to scrollto event
- Updated panel sticky logic to use subscription to prevent errors

Author: Hwashiang Yu

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

@@ -48,6 +48,7 @@
             <argument name="offsetXCoordinate" defaultValue="null" type="string"/>
             <argument name="offsetYCoordinate" defaultValue="null" type="string"/>
         </arguments>
+        <scrollTo selector="{{CmsNewPagePageActionsSection.pageTitle}}" stepKey="scrollToTop"/>
         <click selector="{{PageBuilderPanel.searchPanel}}" stepKey="lostFocus"/>
         <waitForElementVisible time="30" selector="{{PageBuilderPanel.draggableContentTypeInPanel(contentType.name)}}" stepKey="waitForContentTypeInPanel"/>
         <dragAndDrop selector1="{{PageBuilderPanel.draggableContentTypeInPanel(contentType.name)}}" selector2="{{PageBuilderStage.contentTypeContainer(containerTargetType.role, containerTargetIndex)}}" x="{{offsetXCoordinate}}" y="{{offsetYCoordinate}}" stepKey="dropContentTypeIntoStage"/>

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

@@ -324,7 +324,7 @@
         <actionGroup ref="fillSlideOutPanelField" stepKey="enterMinHeightPropertySecondRow">
             <argument name="property" value="PageBuilderMinHeightProperty_300"/>
         </actionGroup>
-        <actionGroup ref="chooseVisualSelectOption" stepKey="enterVerticalAlignmenCenterProperty">
+        <actionGroup ref="chooseVisualSelectOption" stepKey="enterVerticalAlignmentCenterProperty">
             <argument name="property" value="PageBuilderVerticalAlignmentPropertyCenter"/>
         </actionGroup>
         <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettingsSecondRow"/>
@@ -351,7 +351,7 @@
             <argument name="property" value="PageBuilderVerticalAlignmentPropertyBottom"/>
         </actionGroup>
         <actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettingsThirdColumn"/>
-        <scrollTo selector="{{PageBuilderPanel.searchPanel}}" stepKey="scrollToSearchPanel"/>
+        <scrollTo selector="{{CmsNewPagePageActionsSection.pageTitle}}" stepKey="scrollToTop2"/>
         <actionGroup ref="dragContentTypeToContainer" stepKey="dragHeadingToThirdRow">
             <argument name="contentType" value="PageBuilderHeadingContentType"/>
             <argument name="containerTargetType" value="PageBuilderRowContentType"/>

app/code/Magento/PageBuilder/view/adminhtml/web/js/panel.js

@@ -17,11 +17,13 @@ import PageBuilder from "./page-builder";
 import PanelInterface from "./panel.d";
 import {Group} from "./panel/group";
 import {ContentType as GroupContentType} from "./panel/group/content-type";
+import {DataObject} from "./data-store";
 
 /**
  * @api
  */
 export default class Panel implements PanelInterface {
+    public stageReady: KnockoutObservable<boolean> = ko.observable(false);
     public groups: KnockoutObservableArray<any> = ko.observableArray([]);
     public searchResults: KnockoutObservableArray<any> = ko.observableArray([]);
     public isCollapsed: KnockoutObservable<boolean> = ko.observable(false);
@@ -52,6 +54,13 @@ export default class Panel implements PanelInterface {
      */
     public afterRender(element: Element): void {
         this.element = element;
+        this.stageReady.subscribe(
+            (data: boolean) => {
+                if (data) {
+                    this.onScroll();
+                }
+            },
+        );
     }
 
     /**
@@ -60,7 +69,7 @@ export default class Panel implements PanelInterface {
     public initListeners(): void {
         events.on("stage:" + this.id + ":readyAfter", () => {
             this.populateContentTypes();
-            this.onScroll();
+            this.stageReady(true);
             this.isVisible(true);
         });
     }