MC-4057: Fix attached mftf skipped tests

- Updated logic to check for panel state for onScroll event

Author: Hwashiang Yu

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

@@ -22,7 +22,6 @@ import {ContentType as GroupContentType} from "./panel/group/content-type";
  * @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);
@@ -53,13 +52,6 @@ export default class Panel implements PanelInterface {
      */
     public afterRender(element: Element): void {
         this.element = element;
-        this.stageReady.subscribe(
-            (data: boolean) => {
-                if (data) {
-                    this.onScroll();
-                }
-            },
-        );
     }
 
     /**
@@ -68,7 +60,7 @@ export default class Panel implements PanelInterface {
     public initListeners(): void {
         events.on("stage:" + this.id + ":readyAfter", () => {
             this.populateContentTypes();
-            this.stageReady(true);
+            this.onScroll();
             this.isVisible(true);
         });
     }
@@ -148,34 +140,36 @@ export default class Panel implements PanelInterface {
         const panel = $(this.element);
         const stage = panel.siblings(".pagebuilder-stage");
         $(window).scroll(function() {
-            const panelOffsetTop = panel.offset().top;
-            const stageOffsetTop = stage.offset().top;
-            const panelHeight = panel.outerHeight();
-            const stageHeight = stage.outerHeight();
-            const currentPanelBottom = Math.round(panelOffsetTop + panel.outerHeight(true) - $(this).scrollTop());
-            const currentStageBottom = Math.round(stageOffsetTop + stage.outerHeight(true) - $(this).scrollTop());
-            const currentPanelTop = Math.round(panelOffsetTop - $(this).scrollTop());
-            const currentStageTop = Math.round(stageOffsetTop - $(this).scrollTop());
-            // When panel height is less than stage, begin stickiness
-            if (panelHeight <= stageHeight && pageActions.hasClass("_fixed")) {
-                const pageActionsHeight = pageActions.outerHeight() + 15;
-                // When scroll reaches top of stage, stick panel to top
-                if (currentStageTop <= pageActionsHeight) {
-                    // When panel reaches bottom of stage, stick panel to bottom of stage
-                    if (currentPanelBottom >= currentStageBottom && currentPanelTop <= pageActionsHeight) {
-                        self.isStickyBottom(true);
-                        self.isStickyTop(false);
+            if (panel && panel.offset()) {
+                const panelOffsetTop = panel.offset().top;
+                const stageOffsetTop = stage.offset().top;
+                const panelHeight = panel.outerHeight();
+                const stageHeight = stage.outerHeight();
+                const currentPanelBottom = Math.round(panelOffsetTop + panel.outerHeight(true) - $(this).scrollTop());
+                const currentStageBottom = Math.round(stageOffsetTop + stage.outerHeight(true) - $(this).scrollTop());
+                const currentPanelTop = Math.round(panelOffsetTop - $(this).scrollTop());
+                const currentStageTop = Math.round(stageOffsetTop - $(this).scrollTop());
+                // When panel height is less than stage, begin stickiness
+                if (panelHeight <= stageHeight && pageActions.hasClass("_fixed")) {
+                    const pageActionsHeight = pageActions.outerHeight() + 15;
+                    // When scroll reaches top of stage, stick panel to top
+                    if (currentStageTop <= pageActionsHeight) {
+                        // When panel reaches bottom of stage, stick panel to bottom of stage
+                        if (currentPanelBottom >= currentStageBottom && currentPanelTop <= pageActionsHeight) {
+                            self.isStickyBottom(true);
+                            self.isStickyTop(false);
+                        } else {
+                            self.isStickyBottom(false);
+                            self.isStickyTop(true);
+                        }
                     } else {
                         self.isStickyBottom(false);
-                        self.isStickyTop(true);
+                        self.isStickyTop(false);
                     }
                 } else {
                     self.isStickyBottom(false);
                     self.isStickyTop(false);
                 }
-            } else {
-                self.isStickyBottom(false);
-                self.isStickyTop(false);
             }
         });
     }