Fix drag-n-drop in dashboard visualisation settings modal (#18031)

* Add a prop to bubble mouse events on SandboxedPortal

* Fix drag-n-drop on dashoboard's viz settings modal

* Enable repro test

frontend/src/metabase/components/Modal.jsx

@@ -29,6 +29,7 @@ function getModalContent(props) {
 export class WindowModal extends Component {
   static propTypes = {
     isOpen: PropTypes.bool,
+    enableMouseEvents: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -77,12 +78,15 @@ export class WindowModal extends Component {
   }
 
   render() {
-    const { backdropClassName, isOpen, style } = this.props;
+    const { enableMouseEvents, backdropClassName, isOpen, style } = this.props;
     const backdropClassnames =
       "flex justify-center align-center fixed top left bottom right";
 
     return (
-      <SandboxedPortal container={this._modalElement}>
+      <SandboxedPortal
+        container={this._modalElement}
+        enableMouseEvents={enableMouseEvents}
+      >
         <CSSTransitionGroup
           transitionName="Modal"
           transitionAppear={true}

frontend/src/metabase/components/SandboxedPortal.jsx

-import React from "react";
+import React, { useMemo } from "react";
 import ReactDOM from "react-dom";
 
 function stop(event) {
   event.stopPropagation();
 }
 
+const mouseEventBlockers = {
+  onMouseDown: stop,
+  onMouseEnter: stop,
+  onMouseLeave: stop,
+  onMouseMove: stop,
+  onMouseOver: stop,
+  onMouseOut: stop,
+  onMouseUp: stop,
+};
+
 // Prevent DOM events from bubbling through the React component tree
 // See https://reactjs.org/docs/portals.html#event-bubbling-through-portals
-function SandboxedPortal({ children, container }) {
+function SandboxedPortal({ children, container, enableMouseEvents = false }) {
+  const extraProps = useMemo(() => {
+    return enableMouseEvents ? {} : mouseEventBlockers;
+  }, [enableMouseEvents]);
+
   return ReactDOM.createPortal(
     <div
       onClick={stop}
@@ -21,13 +35,6 @@ function SandboxedPortal({ children, container }) {
       onDragOver={stop}
       onDragStart={stop}
       onDrop={stop}
-      onMouseDown={stop}
-      onMouseEnter={stop}
-      onMouseLeave={stop}
-      onMouseMove={stop}
-      onMouseOver={stop}
-      onMouseOut={stop}
-      onMouseUp={stop}
       onKeyDown={stop}
       onKeyPress={stop}
       onKeyUp={stop}
@@ -37,6 +44,7 @@ function SandboxedPortal({ children, container }) {
       onInput={stop}
       onInvalid={stop}
       onSubmit={stop}
+      {...extraProps}
     >
       {children}
     </div>,

frontend/src/metabase/dashboard/components/DashCard.jsx

@@ -390,6 +390,7 @@ const ChartSettingsButton = ({ series, onReplaceAllVisualizationSettings }) => (
       </Tooltip>
     }
     triggerClasses="text-dark-hover cursor-pointer flex align-center flex-no-shrink mr1 drag-disabled"
+    enableMouseEvents
   >
     <ChartSettingsWithState
       className="spread"

frontend/test/metabase/scenarios/dashboard/visualizaiton-options.cy.spec.js

@@ -6,7 +6,7 @@ describe("scenarios > dashboard > visualization options", () => {
     cy.signInAsAdmin();
   });
 
-  it.skip("column reordering should work (metabase#16229)", () => {
+  it("column reordering should work (metabase#16229)", () => {
     cy.visit("/dashboard/1");
     cy.icon("pencil").click();
     cy.get(".Card").realHover();