From 57bf6ae9f3a9d528c27d7554ba7aa3c7af99f732 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 10 Sep 2024 14:13:34 +0200
Subject: [PATCH 1/3] chore: add changeset

Signed-off-by: blam <ben@blam.sh>
---
 .changeset/orange-trainers-allow.md    |  5 +++++
 plugins/app/src/extensions/AppRoot.tsx | 16 +++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/orange-trainers-allow.md

diff --git a/.changeset/orange-trainers-allow.md b/.changeset/orange-trainers-allow.md
new file mode 100644
index 0000000000..9e2b148908
--- /dev/null
+++ b/.changeset/orange-trainers-allow.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app': patch
+---
+
+chore: need to render additional root components outside of SignInWrapper
diff --git a/plugins/app/src/extensions/AppRoot.tsx b/plugins/app/src/extensions/AppRoot.tsx
index 014f9a1354..0b2546f199 100644
--- a/plugins/app/src/extensions/AppRoot.tsx
+++ b/plugins/app/src/extensions/AppRoot.tsx
@@ -16,7 +16,6 @@
 
 import React, {
   ComponentType,
-  Fragment,
   PropsWithChildren,
   ReactNode,
   useState,
@@ -96,14 +95,7 @@ export const AppRoot = createExtension({
     }
 
     let content: React.ReactNode = (
-      <>
-        {inputs.elements.map(el => (
-          <Fragment key={el.node.spec.id}>
-            {el.get(coreExtensionData.reactElement)}
-          </Fragment>
-        ))}
-        {inputs.children.get(coreExtensionData.reactElement)}
-      </>
+      <>{inputs.children.get(coreExtensionData.reactElement)}</>
     );
 
     for (const wrapper of inputs.wrappers) {
@@ -120,6 +112,9 @@ export const AppRoot = createExtension({
           RouterComponent={inputs.router?.get(
             RouterBlueprint.dataRefs.component,
           )}
+          extraElements={inputs.elements?.map(el =>
+            el.get(coreExtensionData.reactElement),
+          )}
         >
           {content}
         </AppRouter>,
@@ -187,6 +182,7 @@ export interface AppRouterProps {
   children?: ReactNode;
   SignInPageComponent?: ComponentType<SignInPageProps>;
   RouterComponent?: ComponentType<PropsWithChildren<{}>>;
+  extraElements?: Array<React.JSX.Element>;
 }
 
 function DefaultRouter(props: PropsWithChildren<{}>) {
@@ -210,6 +206,7 @@ export function AppRouter(props: AppRouterProps) {
     children,
     SignInPageComponent,
     RouterComponent = DefaultRouter,
+    extraElements = [],
   } = props;
 
   const configApi = useApi(configApiRef);
@@ -260,6 +257,7 @@ export function AppRouter(props: AppRouterProps) {
 
   return (
     <RouterComponent>
+      {...extraElements}
       <RouteTracker routeObjects={routeObjects} />
       <SignInPageWrapper
         component={SignInPageComponent}

From 4cff487d6aa17930aa6fddbcd4d71846f6ad5918 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 10 Sep 2024 14:14:56 +0200
Subject: [PATCH 2/3] chore: fix

Signed-off-by: blam <ben@blam.sh>
---
 .changeset/orange-trainers-allow.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/orange-trainers-allow.md b/.changeset/orange-trainers-allow.md
index 9e2b148908..e24b4e66ad 100644
--- a/.changeset/orange-trainers-allow.md
+++ b/.changeset/orange-trainers-allow.md
@@ -2,4 +2,4 @@
 '@backstage/plugin-app': patch
 ---
 
-chore: need to render additional root components outside of SignInWrapper
+Fix issue with `AlertDisplay` and other components defined with `AppRootElementBlueprint` not being rendered when at the `SignInWrapper`

From 41fc130a26a5c0fc6ebb2075ff19bca8d914131f Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 10 Sep 2024 14:20:01 +0200
Subject: [PATCH 3/3] chore: remove superfluous wrapping

Signed-off-by: blam <ben@blam.sh>
---
 plugins/app/src/extensions/AppRoot.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/app/src/extensions/AppRoot.tsx b/plugins/app/src/extensions/AppRoot.tsx
index 0b2546f199..b973178e3a 100644
--- a/plugins/app/src/extensions/AppRoot.tsx
+++ b/plugins/app/src/extensions/AppRoot.tsx
@@ -94,8 +94,8 @@ export const AppRoot = createExtension({
       });
     }
 
-    let content: React.ReactNode = (
-      <>{inputs.children.get(coreExtensionData.reactElement)}</>
+    let content: React.ReactNode = inputs.children.get(
+      coreExtensionData.reactElement,
     );
 
     for (const wrapper of inputs.wrappers) {