Merge pull request #26602 from backstage/blam/sign-in

NFS: Fixing issue with `AlertDisplay` not being rendered

.changeset/orange-trainers-allow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app': patch
+---
+
+Fix issue with `AlertDisplay` and other components defined with `AppRootElementBlueprint` not being rendered when at the `SignInWrapper`

plugins/app/src/extensions/AppRoot.tsx

@@ -16,7 +16,6 @@
 
 import React, {
   ComponentType,
-  Fragment,
   PropsWithChildren,
   ReactNode,
   useState,
@@ -95,15 +94,8 @@ 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)}
-      </>
+    let content: React.ReactNode = 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}