message: dev-utils: add .registerPage for use with extensions
diff: @@ -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>
  );
  