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],
 });