Rework Popover to avoid warnings from react (#33369)

frontend/src/metabase/components/Popover/Popover.jsx

@@ -10,7 +10,7 @@ import { isCypressActive } from "metabase/env";
 
 import "./Popover.css";
 
-// space we should leave berween page edge and popover edge
+// space we should leave between page edge and popover edge
 const PAGE_PADDING = 10;
 // Popover padding and border
 const POPOVER_BODY_PADDING = 2;
@@ -97,6 +97,7 @@ export default class Popover extends Component {
       this._popoverElement.className = `PopoverContainer ${this.props.containerClassName}`;
       this._popoverElement.dataset.testid = "popover";
       document.body.appendChild(this._popoverElement);
+
       this._timer = setInterval(() => {
         const { width, height } = this._popoverElement.getBoundingClientRect();
         if (this.state.width !== width || this.state.height !== height) {
@@ -201,11 +202,12 @@ export default class Popover extends Component {
       this._tether.destroy();
       delete this._tether;
     }
+
     if (this._popoverElement) {
-      ReactDOM.unmountComponentAtNode(this._popoverElement);
       if (this._popoverElement.parentNode) {
         this._popoverElement.parentNode.removeChild(this._popoverElement);
       }
+
       delete this._popoverElement;
       clearInterval(this._timer);
       delete this._timer;
@@ -350,14 +352,17 @@ export default class Popover extends Component {
 
   _getTargetElement() {
     let target;
+
     if (this.props.targetEvent) {
       // create a fake element at the event coordinates
       target = document.getElementById("popover-event-target");
+
       if (!target) {
         target = document.createElement("div");
         target.id = "popover-event-target";
         document.body.appendChild(target);
       }
+
       target.style.left = this.props.targetEvent.clientX - 3 + "px";
       target.style.top = this.props.targetEvent.clientY - 3 + "px";
     } else if (this.props.target) {
@@ -367,13 +372,33 @@ export default class Popover extends Component {
         target = this.props.target;
       }
     }
+
     if (target == null) {
       target = this._popoverElement;
     }
+
     return target;
   }
 
-  _renderPopover(isOpen) {
+  constrainPopoverToBetweenViewportAndTarget(tetherOptions, direction) {
+    const body = tetherOptions.element.querySelector(".PopoverBody");
+    const target = this._getTargetElement();
+    const bodyHeight = body.getBoundingClientRect().height;
+    const space =
+      direction === "top"
+        ? target.getBoundingClientRect().top
+        : window.innerHeight - target.getBoundingClientRect().bottom;
+    const maxHeight = space - PAGE_PADDING;
+    if (bodyHeight > maxHeight) {
+      body.style.maxHeight = maxHeight + "px";
+      body.classList.add("scroll-y");
+      body.classList.add("scroll-show");
+    }
+  }
+
+  render() {
+    const isOpen = this.props.isOpen;
+
     const popoverElement = this._getPopoverElement(isOpen);
     if (popoverElement) {
       if (isOpen) {
@@ -392,28 +417,8 @@ export default class Popover extends Component {
         <span>{isOpen ? this._popoverComponent() : null}</span>,
         popoverElement,
       );
-    } else {
-      return <span className="hide" />;
-    }
-  }
-
-  constrainPopoverToBetweenViewportAndTarget(tetherOptions, direction) {
-    const body = tetherOptions.element.querySelector(".PopoverBody");
-    const target = this._getTargetElement();
-    const bodyHeight = body.getBoundingClientRect().height;
-    const space =
-      direction === "top"
-        ? target.getBoundingClientRect().top
-        : window.innerHeight - target.getBoundingClientRect().bottom;
-    const maxHeight = space - PAGE_PADDING;
-    if (bodyHeight > maxHeight) {
-      body.style.maxHeight = maxHeight + "px";
-      body.classList.add("scroll-y");
-      body.classList.add("scroll-show");
     }
-  }
 
-  render() {
-    return this._renderPopover(this.props.isOpen);
+    return <span className="hide" />;
   }
 }