frontend-app-api: add support for external route bindings

Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/app-next/src/App.tsx

@@ -16,7 +16,11 @@
 
 import React from 'react';
 import { createApp } from '@backstage/frontend-app-api';
-import { pagesPlugin } from './examples/pagesPlugin';
+import {
+  externalPageXRouteRef,
+  pageXRouteRef,
+  pagesPlugin,
+} from './examples/pagesPlugin';
 import graphiqlPlugin from '@backstage/plugin-graphiql/alpha';
 import techRadarPlugin from '@backstage/plugin-tech-radar/alpha';
 import userSettingsPlugin from '@backstage/plugin-user-settings/alpha';
@@ -72,14 +76,9 @@ const app = createApp({
       extensions: [entityPageExtension],
     }),
   ],
-  // bindRoutes({ bind }) {
-  //   bind(catalogPlugin.externalRoutes, {
-  //     createComponent: scaffolderPlugin.routes.root,
-  //   });
-  //   bind(scaffolderPlugin.externalRoutes, {
-  //     registerComponent: catalogImportPlugin.routes.importPage,
-  //   });
-  // },
+  bindRoutes({ bind }) {
+    bind({ x: externalPageXRouteRef }, { x: pageXRouteRef });
+  },
 });
 
 // const legacyApp = createLegacyApp({ plugins: [legacyGraphiqlPlugin] });

packages/app-next/src/examples/pagesPlugin.tsx

@@ -20,11 +20,17 @@ import {
   createPageExtension,
   createPlugin,
 } from '@backstage/frontend-plugin-api';
-import { useRouteRef, createRouteRef } from '@backstage/core-plugin-api';
+import {
+  useRouteRef,
+  createRouteRef,
+  createExternalRouteRef,
+} from '@backstage/core-plugin-api';
 import { Route, Routes } from 'react-router-dom';
 
 const indexRouteRef = createRouteRef({ id: 'index' });
 const page1RouteRef = createRouteRef({ id: 'page1' });
+export const externalPageXRouteRef = createExternalRouteRef({ id: 'pageX' });
+export const pageXRouteRef = createRouteRef({ id: 'pageX' });
 // const page2RouteRef = createSubRouteRef({
 //   id: 'page2',
 //   parent: page1RouteRef,
@@ -67,6 +73,7 @@ const Page1 = createPageExtension({
   loader: async () => {
     const Component = () => {
       const indexLink = useRouteRef(indexRouteRef);
+      const xLink = useRouteRef(externalPageXRouteRef);
       // const page2Link = useRouteRef(page2RouteRef);
 
       return (
@@ -75,6 +82,7 @@ const Page1 = createPageExtension({
           <Link to={indexLink()}>Go back</Link>
           <Link to="./page2">Page 2</Link>
           {/* <Link to={page2Link()}>Page 2</Link> */}
+          <Link to={xLink()}>Page X</Link>
 
           <div>
             Sub-page content:
@@ -92,6 +100,26 @@ const Page1 = createPageExtension({
   },
 });
 
+const ExternalPage = createPageExtension({
+  id: 'pageX',
+  defaultPath: '/pageX',
+  routeRef: pageXRouteRef,
+  loader: async () => {
+    const Component = () => {
+      const indexLink = useRouteRef(indexRouteRef);
+      // const pageXLink = useRouteRef(pageXRouteRef);
+
+      return (
+        <div>
+          <h1>This is page X</h1>
+          <Link to={indexLink()}>Go back</Link>
+        </div>
+      );
+    };
+    return <Component />;
+  },
+});
+
 export const pagesPlugin = createPlugin({
   id: 'pages',
   // routes: {
@@ -101,5 +129,5 @@ export const pagesPlugin = createPlugin({
   //   //     OR
   //   //   'page1'
   // },
-  extensions: [IndexPage, Page1],
+  extensions: [IndexPage, Page1, ExternalPage],
 });

packages/frontend-app-api/api-report.md

@@ -3,6 +3,7 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+import { AppRouteBinder } from '@backstage/core-app-api';
 import { BackstagePlugin } from '@backstage/frontend-plugin-api';
 import { Config } from '@backstage/config';
 import { ConfigApi } from '@backstage/core-plugin-api';
@@ -14,6 +15,7 @@ import { JSX as JSX_2 } from 'react';
 export function createApp(options: {
   features?: (BackstagePlugin | ExtensionOverrides)[];
   configLoader?: () => Promise<ConfigApi>;
+  bindRoutes?(context: { bind: AppRouteBinder }): void;
   featureLoader?: (ctx: {
     config: ConfigApi;
   }) => Promise<(BackstagePlugin | ExtensionOverrides)[]>;

packages/frontend-app-api/src/wiring/createApp.tsx

@@ -57,6 +57,7 @@ import {
   ApiFactoryRegistry,
   ApiProvider,
   ApiResolver,
+  AppRouteBinder,
   AppThemeSelector,
 } from '@backstage/core-app-api';
 
@@ -76,6 +77,8 @@ import { overrideBaseUrlConfigs } from '../../../core-app-api/src/app/overrideBa
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { RoutingProvider } from '../../../core-app-api/src/routing/RoutingProvider';
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { resolveRouteBindings } from '../../../core-app-api/src/app/resolveRouteBindings';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { AppLanguageSelector } from '../../../core-app-api/src/apis/implementations/AppLanguageApi/AppLanguageSelector';
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { I18nextTranslationApi } from '../../../core-app-api/src/apis/implementations/TranslationApi/I18nextTranslationApi';
@@ -269,6 +272,7 @@ export function createInstances(options: {
 export function createApp(options: {
   features?: (BackstagePlugin | ExtensionOverrides)[];
   configLoader?: () => Promise<ConfigApi>;
+  bindRoutes?(context: { bind: AppRouteBinder }): void;
   featureLoader?: (ctx: {
     config: ConfigApi;
   }) => Promise<(BackstagePlugin | ExtensionOverrides)[]>;
@@ -309,7 +313,7 @@ export function createApp(options: {
           <AppThemeProvider>
             <RoutingProvider
               {...extractRouteInfoFromInstanceTree(coreInstance)}
-              routeBindings={new Map(/* TODO */)}
+              routeBindings={resolveRouteBindings(options.bindRoutes)}
             >
               {/* TODO: set base path using the logic from AppRouter */}
               <BrowserRouter>