frontend-plugin-api: initial support for subpages

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/app/src/extensions/AppRoutes.tsx

@@ -57,6 +57,19 @@ export const AppRoutes = createExtension({
       return element;
     };
 
-    return [coreExtensionData.reactElement(<Routes />)];
+    return [
+      coreExtensionData.reactElement(
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            overflow: 'auto',
+          }}
+        >
+          <Routes />
+        </div>,
+      ),
+    ];
   },
 });

plugins/app/src/extensions/components.tsx

@@ -17,6 +17,8 @@ import {
   NotFoundErrorPage as SwappableNotFoundErrorPage,
   Progress as SwappableProgress,
   ErrorDisplay as SwappableErrorDisplay,
+  PageLayout as SwappablePageLayout,
+  type PageLayoutProps,
 } from '@backstage/frontend-plugin-api';
 import { SwappableComponentBlueprint } from '@backstage/plugin-app-react';
 import {
@@ -24,6 +26,7 @@ import {
   ErrorPanel,
   Progress as ProgressComponent,
 } from '@backstage/core-components';
+import { Header, Flex } from '@backstage/ui';
 import Button from '@material-ui/core/Button';
 
 export const Progress = SwappableComponentBlueprint.make({
@@ -63,3 +66,22 @@ export const ErrorDisplay = SwappableComponentBlueprint.make({
       },
     }),
 });
+
+export const PageLayout = SwappableComponentBlueprint.make({
+  name: 'core-page-layout',
+  params: define =>
+    define({
+      component: SwappablePageLayout,
+      loader: () => (props: PageLayoutProps) => {
+        const { title, tabs, children } = props;
+        return (
+          <Flex direction="column" style={{ flexGrow: 1, minHeight: 0 }}>
+            <Header title={title} tabs={tabs} />
+            <Flex direction="column" style={{ flexGrow: 1, minHeight: 0 }}>
+              {children}
+            </Flex>
+          </Flex>
+        );
+      },
+    }),
+});

plugins/app/src/extensions/index.ts

@@ -31,5 +31,10 @@ export {
   oauthRequestDialogAppRootElement,
   alertDisplayAppRootElement,
 } from './elements';
-export { Progress, NotFoundErrorPage, ErrorDisplay } from './components';
+export {
+  Progress,
+  NotFoundErrorPage,
+  ErrorDisplay,
+  PageLayout,
+} from './components';
 export { PluginWrapperApi } from './PluginWrapperApi';

plugins/app/src/plugin.ts

@@ -37,6 +37,7 @@ import {
   Progress,
   NotFoundErrorPage,
   ErrorDisplay,
+  PageLayout,
   LegacyComponentsApi,
 } from './extensions';
 import { apis } from './defaultApis';
@@ -68,6 +69,7 @@ export const appPlugin = createFrontendPlugin({
     Progress,
     NotFoundErrorPage,
     ErrorDisplay,
+    PageLayout,
     LegacyComponentsApi,
   ],
 });