From 2347505e01d0aa3097441d4a9b1db17b0b2bb494 Mon Sep 17 00:00:00 2001
From: robertSt7 <104770750+robertSt7@users.noreply.github.com>
Date: Mon, 17 Jun 2024 15:20:30 +0200
Subject: [PATCH] [Bug] JS Errors on Bricks with many-to-many relation and
 specific configuration (#462)

* Fix: drag and drop validation

* Fix: drag and drop validation
---
 public/js/pimcore/helpers.js               | 19 +++++++++++++++-
 public/js/pimcore/object/helpers/layout.js | 26 +++++++++++++---------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/public/js/pimcore/helpers.js b/public/js/pimcore/helpers.js
index 25dd1cca53..58df6a399e 100644
--- a/public/js/pimcore/helpers.js
+++ b/public/js/pimcore/helpers.js
@@ -3359,15 +3359,32 @@ pimcore.helpers.treeDragDropValidate = function (node, oldParent, newParent) {
         if (disabledLayoutTypes.includes(newParent.data.editor.type)) {
             return false;
         }
+
+        return this.isComponentAsChildAllowed(newParent, node);
     }
 
-    if (newParent.data.root) {
+    if (newParent.data.root && node.data.type !== 'layout') {
         return false;
     }
 
     return true;
 };
 
+pimcore.helpers.isComponentAsChildAllowed = function (parentNode, childNode) {
+    const parentType = parentNode.data.editor.type;
+    const childType = childNode.data.editor.type;
+    const allowedChildren = pimcore.object.helpers.layout.getRawAllowedTypes();
+
+    if (allowedChildren[parentType] &&
+        allowedChildren[parentType].includes(childType) ||
+        (allowedChildren[parentType].includes('data') && childNode.data.type === 'data')
+    ) {
+        return true
+    }
+
+    return false;
+}
+
 /**
  * Building menu with priority
  * @param items
diff --git a/public/js/pimcore/object/helpers/layout.js b/public/js/pimcore/object/helpers/layout.js
index 29899f86df..ac23df74b4 100644
--- a/public/js/pimcore/object/helpers/layout.js
+++ b/public/js/pimcore/object/helpers/layout.js
@@ -23,20 +23,24 @@ pimcore.object.helpers.layout = {
      * specify which children a layout can have
      * @param source
     */
-    getAllowedTypes : function (source) {
-        var allowedTypes = {
-            accordion: ["panel","region","tabpanel","text","iframe"],
-            fieldset: ["data","text","iframe"],
-            fieldcontainer: ["data","text","iframe"],
-            panel: ["data","region","tabpanel","button","accordion","fieldset", "fieldcontainer","panel","text","html", "iframe"],
-            region: ["panel","accordion","tabpanel","text","localizedfields","iframe"],
-            tabpanel: ["panel", "region", "accordion","text","localizedfields","iframe", "tabpabel"],
+    getRawAllowedTypes : function () {
+        return {
+            accordion: ["panel", "region", "tabpanel", "text", "iframe"],
+            fieldset: ["data", "text", "iframe"],
+            fieldcontainer: ["data", "text", "iframe"],
+            panel: ["data", "region", "tabpanel", "button", "accordion", "fieldset", "fieldcontainer", "panel", "text", "html", "iframe"],
+            region: ["panel", "accordion", "tabpanel", "text", "localizedfields", "iframe"],
+            tabpanel: ["panel", "region", "accordion", "text", "localizedfields", "iframe", "tabpabel"],
             button: [],
             text: [],
-            root: ["panel","region","tabpanel","accordion","text","iframe", "button","fieldcontainer", "fieldset"],
-            localizedfields: ["panel","tabpanel","accordion","fieldset", "fieldcontainer", "text","region","button","iframe"],
-            block: ["panel","tabpanel","accordion","fieldset", "fieldcontainer", "text","region","button","iframe"]
+            root: ["panel", "region", "tabpanel", "accordion", "text", "iframe", "button", "fieldcontainer", "fieldset"],
+            localizedfields: ["panel", "tabpanel", "accordion", "fieldset", "fieldcontainer", "text", "region", "button", "iframe"],
+            block: ["panel", "tabpanel", "accordion", "fieldset", "fieldcontainer", "text", "region", "button", "iframe"]
         };
+    },
+
+    getAllowedTypes : function (source) {
+        const allowedTypes = this.getRawAllowedTypes();
 
         const prepareClassLayoutContextMenu = new CustomEvent(pimcore.events.prepareClassLayoutContextMenu, {
             detail: {