Remove deletion of modalRoot node (#1779)

Remove deletion of empty modalRoot node to allow a different modal to continue to exist

gradle/changelog/nested_modal.yaml

@@ -0,0 +1,2 @@
+- type: Fixed
+  description: Remove deletion of empty modalRoot node to allow a different modal to continue to exist ([#1779](https://github.com/scm-manager/scm-manager/pull/1779))

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -72244,6 +72244,8 @@ exports[`Storyshots Modal|Modal Default 1`] = `null`;
 
 exports[`Storyshots Modal|Modal Long content 1`] = `null`;
 
+exports[`Storyshots Modal|Modal Nested 1`] = `null`;
+
 exports[`Storyshots Modal|Modal With form elements 1`] = `null`;
 
 exports[`Storyshots Modal|Modal With long tooltips 1`] = `null`;

scm-ui/ui-components/src/modals/Modal.stories.tsx

@@ -72,7 +72,7 @@ const withFormElementsFooter = (
 );
 
 storiesOf("Modal|Modal", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => (
     <NonCloseableModal>
       <p>{text}</p>
@@ -83,6 +83,11 @@ storiesOf("Modal|Modal", module)
       <p>{text}</p>
     </CloseableModal>
   ))
+  .add("Nested", () => (
+    <NestedModal>
+      <p>{text}</p>
+    </NestedModal>
+  ))
   .add("With form elements", () => (
     <Modal
       body={withFormElementsBody}
@@ -221,3 +226,35 @@ const CloseableModal: FC = ({ children }) => {
 
   return <Modal body={children} closeFunction={toggleModal} active={show} title={"Hitchhiker Modal"} />;
 };
+
+const NestedModal: FC = ({ children }) => {
+  const [showOuter, setShowOuter] = useState(true);
+  const [showInner, setShowInner] = useState(false);
+  const outerBody = (
+    <Button title="Open inner modal" className="button" action={() => setShowInner(true)}>
+      Open inner modal
+    </Button>
+  );
+
+  return (
+    <>
+      {showOuter && (
+        <Modal
+          body={outerBody}
+          closeFunction={() => setShowOuter(!showOuter)}
+          active={showOuter}
+          title="Outer Hitchhiker Modal"
+          size="M"
+        />
+      )}
+      {showInner && (
+        <Modal
+          body={children}
+          closeFunction={() => setShowInner(!showInner)}
+          active={showInner}
+          title="Inner Hitchhiker Modal"
+        />
+      )}
+    </>
+  );
+};

scm-ui/ui-components/src/usePortalRootElement.ts

@@ -44,9 +44,6 @@ const usePortalRootElement = (id: string) => {
     }
     setRootElement(element);
     return () => {
-      if (element) {
-        element.remove();
-      }
       setRootElement(undefined);
     };
   }, [id]);