[MDS-5329] Fixed error when opening the ESUP creation modal (#2557)

Co-authored-by: simensma-fresh <[email protected]>

services/core-web/src/components/common/wrappers/ModalWrapper.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
@@ -47,6 +47,8 @@ export const ModalWrapper = (props) => {
     content,
   } = props;
 
+  const containerRef = useRef(null);
+
   const onBrowserButtonEvent = () => {
     handleCloseModal();
   };
@@ -73,50 +75,60 @@ export const ModalWrapper = (props) => {
   };
 
   return (
-    <Modal
-      width={width}
-      title={childProps.title}
-      visible={isModalOpen}
-      closable={false}
-      footer={null}
-    >
-      {isViewOnly ? (
-        <Button ghost className="modal__close" onClick={(event) => closeModal(event)}>
-          <CloseOutlined className="icon-sm" />
-        </Button>
-      ) : (
-        <Popconfirm
-          placement="bottomRight"
-          title="Are you sure you want to cancel?"
-          okText="Yes"
-          cancelText="No"
-          onConfirm={(event) => closeModal(event)}
-        >
-          <Button ghost className="modal__close">
+    <>
+      {/*
+        This will make sure the modal has a container 
+        referenced on first render that will prevent issues with
+        some libraries (e.g. leaflet)
+       */}
+      <div ref={containerRef}></div>
+
+      <Modal
+        width={width}
+        title={childProps.title}
+        open={isModalOpen}
+        closable={false}
+        footer={null}
+        getContainer={() => containerRef?.current}
+      >
+        {isViewOnly ? (
+          <Button ghost className="modal__close" onClick={(event) => closeModal(event)}>
             <CloseOutlined className="icon-sm" />
           </Button>
-        </Popconfirm>
-      )}
-      <LoadingBar
-        scope="modal"
-        style={{
-          position: "absolute",
-          top: "54px",
-          left: 0,
-          backgroundColor: Styles.COLOR.violet,
-          height: "3px",
-          zIndex: 100,
-        }}
-      />
-      {content && (
-        <AddPartyComponentWrapper
-          closeModal={handleCloseModal}
-          clearOnSubmit={clearOnSubmit}
-          content={content}
-          childProps={childProps}
+        ) : (
+          <Popconfirm
+            placement="bottomRight"
+            title="Are you sure you want to cancel?"
+            okText="Yes"
+            cancelText="No"
+            onConfirm={(event) => closeModal(event)}
+          >
+            <Button ghost className="modal__close">
+              <CloseOutlined className="icon-sm" />
+            </Button>
+          </Popconfirm>
+        )}
+        <LoadingBar
+          scope="modal"
+          style={{
+            position: "absolute",
+            top: "54px",
+            left: 0,
+            backgroundColor: Styles.COLOR.violet,
+            height: "3px",
+            zIndex: 100,
+          }}
         />
-      )}
-    </Modal>
+        {content && (
+          <AddPartyComponentWrapper
+            closeModal={handleCloseModal}
+            clearOnSubmit={clearOnSubmit}
+            content={content}
+            childProps={childProps}
+          />
+        )}
+      </Modal>
+    </>
   );
 };
 

services/core-web/src/tests/components/common/wrappers/__snapshots__/ModalWrapper.spec.js.snap

@@ -1,51 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ModalWrapper renders properly 1`] = `
-<Modal
-  closable={false}
-  footer={null}
-  title="mockTitle"
-  visible={false}
-  width={520}
->
-  <ForwardRef
-    cancelText="No"
-    okText="Yes"
-    onConfirm={[Function]}
-    placement="bottomRight"
-    title="Are you sure you want to cancel?"
+<Fragment>
+  <div />
+  <Modal
+    closable={false}
+    footer={null}
+    getContainer={[Function]}
+    open={false}
+    title="mockTitle"
+    width={520}
   >
-    <Button
-      className="modal__close"
-      ghost={true}
+    <ForwardRef
+      cancelText="No"
+      okText="Yes"
+      onConfirm={[Function]}
+      placement="bottomRight"
+      title="Are you sure you want to cancel?"
     >
-      <ForwardRef(CloseOutlined)
-        className="icon-sm"
-      />
-    </Button>
-  </ForwardRef>
-  <Connect(LoadingBar)
-    scope="modal"
-    style={
-      Object {
-        "backgroundColor": "#5e46a1",
-        "height": "3px",
-        "left": 0,
-        "position": "absolute",
-        "top": "54px",
-        "zIndex": 100,
+      <Button
+        className="modal__close"
+        ghost={true}
+      >
+        <ForwardRef(CloseOutlined)
+          className="icon-sm"
+        />
+      </Button>
+    </ForwardRef>
+    <Connect(LoadingBar)
+      scope="modal"
+      style={
+        Object {
+          "backgroundColor": "#5e46a1",
+          "height": "3px",
+          "left": 0,
+          "position": "absolute",
+          "top": "54px",
+          "zIndex": 100,
+        }
       }
-    }
-  />
-  <Connect(AddPartyComponentWrapper)
-    childProps={
-      Object {
-        "title": "mockTitle",
+    />
+    <Connect(AddPartyComponentWrapper)
+      childProps={
+        Object {
+          "title": "mockTitle",
+        }
       }
-    }
-    clearOnSubmit={false}
-    closeModal={[MockFunction]}
-    content={[MockFunction]}
-  />
-</Modal>
+      clearOnSubmit={false}
+      closeModal={[MockFunction]}
+      content={[MockFunction]}
+    />
+  </Modal>
+</Fragment>
 `;

services/minespace-web/src/components/common/wrappers/ModalWrapper.js

@@ -35,6 +35,7 @@ export class ModalWrapper extends Component {
     super(props);
     // Closes modal on browser forward/back actions
     window.onpopstate = this.onBrowserButtonEvent;
+    this.containerRef = React.createRef();
   }
 
   onBrowserButtonEvent = () => {
@@ -44,33 +45,42 @@ export class ModalWrapper extends Component {
   render() {
     const ChildComponent = this.props.content;
     return (
-      <Modal
-        title={this.props.props.title}
-        visible={this.props.isModalOpen}
-        width={this.props.width}
-        footer={null}
-        closable={false}
-      >
-        <LoadingBar
-          scope="modal"
-          className="color-primary"
-          style={{
-            position: "absolute",
-            top: "50px",
-            left: 0,
-            width: "100%",
-            height: "8px",
-            zIndex: 1001,
-          }}
-        />
-        {ChildComponent && (
-          <ChildComponent
-            closeModal={this.props.closeModal}
-            clearOnSubmit={this.props.clearOnSubmit}
-            {...this.props.props}
+      <>
+        {/*
+          This will make sure the modal has a container 
+          referenced on first render that will prevent issues with
+          some libraries (e.g. leaflet)
+         */}
+        <div ref={this.containerRef}></div>
+        <Modal
+          title={this.props.props.title}
+          open={this.props.isModalOpen}
+          width={this.props.width}
+          footer={null}
+          closable={false}
+          getContainer={() => this.containerRef?.current}
+        >
+          <LoadingBar
+            scope="modal"
+            className="color-primary"
+            style={{
+              position: "absolute",
+              top: "50px",
+              left: 0,
+              width: "100%",
+              height: "8px",
+              zIndex: 1001,
+            }}
           />
-        )}
-      </Modal>
+          {ChildComponent && (
+            <ChildComponent
+              closeModal={this.props.closeModal}
+              clearOnSubmit={this.props.clearOnSubmit}
+              {...this.props.props}
+            />
+          )}
+        </Modal>
+      </>
     );
   }
 }

services/minespace-web/src/tests/components/common/wrappers/__snapshots__/ModalWrapper.spec.js.snap

@@ -1,29 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ModalWrapper renders properly 1`] = `
-<Modal
-  closable={false}
-  footer={null}
-  title="mockTitle"
-  visible={false}
->
-  <Connect(LoadingBar)
-    className="color-primary"
-    scope="modal"
-    style={
-      Object {
-        "height": "8px",
-        "left": 0,
-        "position": "absolute",
-        "top": "50px",
-        "width": "100%",
-        "zIndex": 1001,
-      }
-    }
-  />
-  <mockConstructor
-    closeModal={[MockFunction]}
+<Fragment>
+  <div />
+  <Modal
+    closable={false}
+    footer={null}
+    getContainer={[Function]}
+    open={false}
     title="mockTitle"
-  />
-</Modal>
+  >
+    <Connect(LoadingBar)
+      className="color-primary"
+      scope="modal"
+      style={
+        Object {
+          "height": "8px",
+          "left": 0,
+          "position": "absolute",
+          "top": "50px",
+          "width": "100%",
+          "zIndex": 1001,
+        }
+      }
+    />
+    <mockConstructor
+      closeModal={[MockFunction]}
+      title="mockTitle"
+    />
+  </Modal>
+</Fragment>
 `;