dev-utils: add .registerPage for use with extensions

Co-authored-by: blam <ben@blam.sh>

packages/dev-utils/src/devApp/render.tsx

@@ -29,9 +29,25 @@ import {
   AlertDisplay,
   OAuthRequestDialog,
   AnyApiFactory,
+  IconComponent,
+  BackstageRoutes,
+  attachComponentData,
 } from '@backstage/core';
 import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied';
-import { Routes } from 'react-router';
+import { Outlet } from 'react-router';
+
+const GatheringRoute: (props: {
+  path: string;
+  children: JSX.Element;
+}) => JSX.Element = () => <Outlet />;
+
+attachComponentData(GatheringRoute, 'core.gatherMountPoints', true);
+
+type RegisterPageOptions = {
+  element: JSX.Element;
+  title?: string;
+  icon?: IconComponent;
+};
 
 // TODO(rugvip): export proper plugin type from core that isn't the plugin class
 type BackstagePlugin = ReturnType<typeof createPlugin>;
@@ -44,6 +60,8 @@ class DevAppBuilder {
   private readonly plugins = new Array<BackstagePlugin>();
   private readonly apis = new Array<AnyApiFactory>();
   private readonly rootChildren = new Array<ReactNode>();
+  private readonly routes = new Array<JSX.Element>();
+  private readonly sidebarItems = new Array<JSX.Element>();
 
   /**
    * Register one or more plugins to render in the dev app
@@ -75,6 +93,21 @@ class DevAppBuilder {
     return this;
   }
 
+  addPage({ element, title, icon }: RegisterPageOptions): DevAppBuilder {
+    const path = `/page-${this.routes.length + 1}`;
+    this.sidebarItems.push(
+      <SidebarItem
+        key={path}
+        to={path}
+        text={title ?? path}
+        icon={icon ?? BookmarkIcon}
+      />,
+    );
+    this.routes.push(
+      <GatheringRoute key={path} path={path} children={element} />,
+    );
+    return this;
+  }
   /**
    * Build a DevApp component using the resources registered so far
    */
@@ -100,7 +133,10 @@ class DevAppBuilder {
           <AppRouter>
             <SidebarPage>
               {sidebar}
-              <Routes>{deprecatedAppRoutes}</Routes>
+              <BackstageRoutes>
+                {this.routes}
+                {deprecatedAppRoutes}
+              </BackstageRoutes>
             </SidebarPage>
           </AppRouter>
         </AppProvider>
@@ -166,6 +202,7 @@ class DevAppBuilder {
     return (
       <Sidebar>
         <SidebarSpacer />
+        {this.sidebarItems}
         {sidebarItems}
       </Sidebar>
     );
@@ -199,7 +236,7 @@ class DevAppBuilder {
 // this to provide their own plugin dev wrappers.
 
 /**
- * Creates a dev app for rendering one or more plugins and exposing the touchpoints of the plugin.
+ * Creates a dev app for rendering one or more plugins and exposing the touch points of the plugin.
  */
 export function createDevApp() {
   return new DevAppBuilder();