Merge pull request #22133 from backstage/rugvip/warpper

core-compat-api: wrap discovered elements with compatWrapper

.changeset/brave-queens-crash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-compat-api': patch
+---
+
+Make `convertLegacyApp` wrap discovered routes with `compatWrapper`.

packages/core-compat-api/package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",
+    "@backstage/frontend-app-api": "workspace:^",
     "@backstage/frontend-test-utils": "workspace:^",
     "@backstage/plugin-catalog": "workspace:^",
     "@backstage/plugin-puppetdb": "workspace:^",

packages/core-compat-api/src/collectLegacyRoutes.test.tsx

@@ -32,6 +32,14 @@ import { Route, Routes } from 'react-router-dom';
 import { collectLegacyRoutes } from './collectLegacyRoutes';
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { toInternalBackstagePlugin } from '../../frontend-plugin-api/src/wiring/createPlugin';
+import {
+  createPlugin,
+  createRoutableExtension,
+  createRouteRef,
+  useApp,
+} from '@backstage/core-plugin-api';
+import { createSpecializedApp } from '@backstage/frontend-app-api';
+import { render, screen } from '@testing-library/react';
 
 describe('collectLegacyRoutes', () => {
   it('should collect legacy routes', () => {
@@ -241,4 +249,34 @@ describe('collectLegacyRoutes', () => {
       },
     ]);
   });
+
+  it('should make legacy APIs available', async () => {
+    const plugin = createPlugin({
+      id: 'test',
+    });
+    const routeRef = createRouteRef({ id: 'test' });
+    const Page = plugin.provide(
+      createRoutableExtension({
+        name: 'Test',
+        mountPoint: routeRef,
+        component: () =>
+          Promise.resolve(() => {
+            const app = useApp();
+            return <div>plugins: {app.getPlugins().map(p => p.getId())}</div>;
+          }),
+      }),
+    );
+
+    const features = collectLegacyRoutes(
+      <FlatRoutes>
+        <Route path="/" element={<Page />} />
+      </FlatRoutes>,
+    );
+
+    render(createSpecializedApp({ features }).createRoot());
+
+    await expect(
+      screen.findByText('plugins: test'),
+    ).resolves.toBeInTheDocument();
+  });
 });

packages/core-compat-api/src/collectLegacyRoutes.tsx

@@ -33,6 +33,7 @@ import {
 import React, { Children, ReactNode, isValidElement } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { convertLegacyRouteRef } from './convertLegacyRouteRef';
+import { compatWrapper } from './compatWrapper';
 
 /*
 
@@ -207,14 +208,16 @@ export function collectLegacyRoutes(
             }),
           },
           loader: async () =>
-            route.props.children ? (
-              <Routes>
-                <Route path="*" element={routeElement}>
-                  <Route path="*" element={route.props.children} />
-                </Route>
-              </Routes>
-            ) : (
-              routeElement
+            compatWrapper(
+              route.props.children ? (
+                <Routes>
+                  <Route path="*" element={routeElement}>
+                    <Route path="*" element={route.props.children} />
+                  </Route>
+                </Routes>
+              ) : (
+                routeElement
+              ),
             ),
         }),
       );

yarn.lock

@@ -3797,6 +3797,7 @@ __metadata:
     "@backstage/cli": "workspace:^"
     "@backstage/core-app-api": "workspace:^"
     "@backstage/core-plugin-api": "workspace:^"
+    "@backstage/frontend-app-api": "workspace:^"
     "@backstage/frontend-plugin-api": "workspace:^"
     "@backstage/frontend-test-utils": "workspace:^"
     "@backstage/plugin-catalog": "workspace:^"