From 5c9b270e6e075477dd3e41f8e661b37df374aaa7 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 24 Aug 2021 11:26:16 +0200
Subject: [PATCH] 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            |  2 +
 .../src/__snapshots__/storyshots.test.ts.snap |  2 +
 .../src/modals/Modal.stories.tsx              | 39 ++++++++++++++++++-
 .../ui-components/src/usePortalRootElement.ts |  3 --
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 gradle/changelog/nested_modal.yaml

diff --git a/gradle/changelog/nested_modal.yaml b/gradle/changelog/nested_modal.yaml
new file mode 100644
index 0000000000..c95e7e30de
--- /dev/null
+++ b/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))
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index b7e41bfa8c..78f3a9a8de 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/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`;
diff --git a/scm-ui/ui-components/src/modals/Modal.stories.tsx b/scm-ui/ui-components/src/modals/Modal.stories.tsx
index bc760e8c47..7a3bc33020 100644
--- a/scm-ui/ui-components/src/modals/Modal.stories.tsx
+++ b/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"
+        />
+      )}
+    </>
+  );
+};
diff --git a/scm-ui/ui-components/src/usePortalRootElement.ts b/scm-ui/ui-components/src/usePortalRootElement.ts
index 053ac0517e..1d690b31bd 100644
--- a/scm-ui/ui-components/src/usePortalRootElement.ts
+++ b/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]);