diff --git a/.changeset/orange-trainers-allow.md b/.changeset/orange-trainers-allow.md new file mode 100644 index 0000000000..e24b4e66ad --- /dev/null +++ b/.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` diff --git a/plugins/app/src/extensions/AppRoot.tsx b/plugins/app/src/extensions/AppRoot.tsx index 014f9a1354..b973178e3a 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, @@ -95,15 +94,8 @@ export const AppRoot = createExtension({ }); } - let content: React.ReactNode = ( - <> - {inputs.elements.map(el => ( - - {el.get(coreExtensionData.reactElement)} - - ))} - {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} , @@ -187,6 +182,7 @@ export interface AppRouterProps { children?: ReactNode; SignInPageComponent?: ComponentType; RouterComponent?: ComponentType>; + extraElements?: Array; } 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 ( + {...extraElements}