MC-5423: Scheduled Update slide out issues

- Restrict drag and drop operations to individual stage instances

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/drag-drop/drop-indicators.js

@@ -14,15 +14,16 @@ let headDropIndicatorStyles: HTMLStyleElement;
  * CSS engine to display these for us than manually iterating through the DOM and applying a class to the elements.
  *
  * @param {string} contentType
+ * @param {string} stageId
  * @returns {HTMLStyleElement}
  */
-export function showDropIndicators(contentType: string) {
+export function showDropIndicators(contentType: string, stageId: string) {
     const acceptedContainers = getContainersFor(contentType);
     if (acceptedContainers.length > 0) {
         const classNames = acceptedContainers.map((container: string) => {
-            return ".content-type-container." + container + "-container > .pagebuilder-drop-indicator, " +
-                ".pagebuilder-content-type.type-container.empty-container > .content-type-container." +
-                container + "-container:before";
+            return `#${stageId} .content-type-container.${container}-container > .pagebuilder-drop-indicator, ` +
+                `#${stageId} .pagebuilder-content-type.type-container.empty-container > .content-type-container.` +
+                `${container}-container:before`;
         });
         const styles = createStyleSheet({
             [classNames.join(", ")]: {

app/code/Magento/PageBuilder/view/adminhtml/web/js/drag-drop/matrix.js

@@ -37,9 +37,12 @@ export function getContainersFor(contentType: string): string[] {
  * Generate classes of containers the content type is allowed within
  *
  * @param {string} contentType
+ * @param {string} stageId
  * @returns {string}
  */
-export function getAllowedContainersClasses(contentType: string) {
+export function getAllowedContainersClasses(contentType: string, stageId: string) {
+    console.log(getContainersFor(contentType)
+        .map((value) => `#${stageId} .content-type-container.${value}-container`).join(", "));
     return getContainersFor(contentType)
-        .map((value) => ".content-type-container." + value + "-container").join(", ");
+        .map((value) => `#${stageId} .content-type-container.${value}-container`).join(", ");
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/drag-drop/sortable.js

@@ -120,12 +120,18 @@ function onSortStart(preview: Preview, event: Event, ui: JQueryUI.SortableUIPara
                 ui.item.prev(".pagebuilder-drop-indicator").css("display", "none").addClass("hidden-drop-indicator");
             }
 
-            showDropIndicators(contentTypeInstance.config.name);
+            showDropIndicators(contentTypeInstance.config.name, preview.parent.stageId);
 
             sortedContentType = contentTypeInstance;
 
             // Dynamically change the connect with option to restrict content types
-            $(this).sortable("option", "connectWith", getAllowedContainersClasses(contentTypeInstance.config.name));
+            $(this).sortable(
+                "option", "connectWith",
+                getAllowedContainersClasses(
+                    contentTypeInstance.config.name,
+                    preview.parent.stageId
+                )
+            );
             $(this).sortable("refresh");
         }
     }

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

@@ -102,7 +102,7 @@ export default class Panel implements PanelInterface {
                 ),
                 (contentType, identifier: string) => {
                     // Create a new instance of GroupContentType for each result
-                    return new GroupContentType(identifier, contentType);
+                    return new GroupContentType(identifier, contentType, this.parent.stage.id);
                 }),
             );
         }
@@ -216,7 +216,7 @@ export default class Panel implements PanelInterface {
                             $(this).sortable("option", "tolerance", "intersect");
                         }
                     });
-                    showDropIndicators(block.config.name);
+                    showDropIndicators(block.config.name, self.parent.stage.id);
                     setDraggedContentTypeConfig(block.config);
                     events.trigger("stage:interactionStart", {stage: self.parent.stage});
                 }
@@ -255,10 +255,14 @@ export default class Panel implements PanelInterface {
                             is_visible: true,
                         }), /* Retrieve content types with group id */
                         (contentType: ContentTypeConfigInterface, identifier: string) => {
-                            const groupContentType = new GroupContentType(identifier, contentType);
-                            return groupContentType;
+                            return new GroupContentType(
+                                identifier,
+                                contentType,
+                                this.parent.stage.id
+                            );
                         },
                     ),
+                    this.parent.stage.id
                 ));
             });
 
@@ -271,7 +275,7 @@ export default class Panel implements PanelInterface {
             }
 
         } else {
-            console.warn( "Configuration is not properly initialized, please check the Ajax response." );
+            console.warn("Configuration is not properly initialized, please check the Ajax response.");
         }
     }
 }