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 => ( - - {el.get(coreExtensionData.reactElement)} - - ))} - {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} , @@ -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}