migrate core-compat-api

Signed-off-by: blam <ben@blam.sh>

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

@@ -70,7 +70,7 @@ describe('collectLegacyRoutes', () => {
             id: 'page:score-card',
             attachTo: { id: 'app/routes', input: 'routes' },
             disabled: false,
-            defaultConfig: { path: 'score-board' },
+            defaultConfig: {},
           },
           {
             id: 'api:plugin.scoringdata.service',
@@ -86,7 +86,7 @@ describe('collectLegacyRoutes', () => {
             id: 'page:stackstorm',
             attachTo: { id: 'app/routes', input: 'routes' },
             disabled: false,
-            defaultConfig: { path: 'stackstorm' },
+            defaultConfig: {},
           },
           {
             id: 'api:plugin.stackstorm.service',
@@ -102,13 +102,13 @@ describe('collectLegacyRoutes', () => {
             id: 'page:puppetDb',
             attachTo: { id: 'app/routes', input: 'routes' },
             disabled: false,
-            defaultConfig: { path: 'puppetdb' },
+            defaultConfig: {},
           },
           {
             id: 'page:puppetDb/1',
             attachTo: { id: 'app/routes', input: 'routes' },
             disabled: false,
-            defaultConfig: { path: 'puppetdb' },
+            defaultConfig: {},
           },
           {
             id: 'api:plugin.puppetdb.service',
@@ -173,12 +173,12 @@ describe('collectLegacyRoutes', () => {
             id: 'page:catalog',
             attachTo: { id: 'app/routes', input: 'routes' },
             disabled: false,
-            defaultConfig: { path: 'catalog' },
+            defaultConfig: {},
           },
           {
             id: 'page:catalog/1',
             attachTo: { id: 'app/routes', input: 'routes' },
-            defaultConfig: { path: 'catalog/:namespace/:kind/:name' },
+            defaultConfig: {},
             disabled: false,
           },
           {

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

@@ -29,6 +29,8 @@ import {
   createExtensionInput,
   createPageExtension,
   createFrontendPlugin,
+  ApiBlueprint,
+  PageBlueprint,
 } from '@backstage/frontend-plugin-api';
 import React, { Children, ReactNode, isValidElement } from 'react';
 import { Route, Routes } from 'react-router-dom';
@@ -80,19 +82,24 @@ function makeRoutingShimExtension(options: {
     name,
     attachTo: { id: parentExtensionId, input: 'childRoutingShims' },
     inputs: {
-      childRoutingShims: createExtensionInput({
-        routePath: coreExtensionData.routePath.optional(),
-        routeRef: coreExtensionData.routeRef.optional(),
-      }),
+      childRoutingShims: createExtensionInput([
+        coreExtensionData.routePath.optional(),
+        coreExtensionData.routeRef.optional(),
+      ]),
     },
-    output: {
-      routePath: coreExtensionData.routePath.optional(),
-      routeRef: coreExtensionData.routeRef.optional(),
+    output: [
+      coreExtensionData.routePath.optional(),
+      coreExtensionData.routeRef.optional(),
+    ],
+    *factory() {
+      if (routePath) {
+        yield coreExtensionData.routePath(routePath);
+      }
+
+      if (routeRef) {
+        yield coreExtensionData.routeRef(convertLegacyRouteRef(routeRef));
+      }
     },
-    factory: () => ({
-      routePath,
-      routeRef: routeRef ? convertLegacyRouteRef(routeRef) : undefined,
-    }),
   });
 }
 
@@ -214,28 +221,33 @@ export function collectLegacyRoutes(
       }`;
 
       extensions.push(
-        createPageExtension({
+        PageBlueprint.makeWithOverrides({
           name: pageExtensionName,
-          defaultPath: path[0] === '/' ? path.slice(1) : path,
-          routeRef: routeRef ? convertLegacyRouteRef(routeRef) : undefined,
           inputs: {
-            childRoutingShims: createExtensionInput({
-              routePath: coreExtensionData.routePath.optional(),
-              routeRef: coreExtensionData.routeRef.optional(),
-            }),
+            childRoutingShims: createExtensionInput([
+              coreExtensionData.routePath.optional(),
+              coreExtensionData.routeRef.optional(),
+            ]),
+          },
+          factory(originalFactory, { inputs: _inputs }) {
+            // todo(blam): why do we not use the inputs here?
+            return originalFactory({
+              defaultPath: path[0] === '/' ? path.slice(1) : path,
+              routeRef: routeRef ? convertLegacyRouteRef(routeRef) : undefined,
+              loader: async () =>
+                compatWrapper(
+                  route.props.children ? (
+                    <Routes>
+                      <Route path="*" element={routeElement}>
+                        <Route path="*" element={route.props.children} />
+                      </Route>
+                    </Routes>
+                  ) : (
+                    routeElement
+                  ),
+                ),
+            });
           },
-          loader: async () =>
-            compatWrapper(
-              route.props.children ? (
-                <Routes>
-                  <Route path="*" element={routeElement}>
-                    <Route path="*" element={route.props.children} />
-                  </Route>
-                </Routes>
-              ) : (
-                routeElement
-              ),
-            ),
         }),
       );
 
@@ -258,7 +270,7 @@ export function collectLegacyRoutes(
       extensions: [
         ...extensions,
         ...Array.from(plugin.getApis()).map(factory =>
-          createApiExtension({ factory }),
+          ApiBlueprint.make({ namespace: factory.api.id, params: { factory } }),
         ),
       ],
       routes: convertLegacyRouteRefs(plugin.routes ?? {}),

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

@@ -45,9 +45,7 @@ describe('BackwardsCompatProvider', () => {
     createExtensionTester(
       createExtension({
         attachTo: { id: 'ignored', input: 'ignored' },
-        output: {
-          element: coreExtensionData.reactElement,
-        },
+        output: [coreExtensionData.reactElement],
         factory() {
           function Component() {
             const app = useApp();
@@ -66,9 +64,7 @@ describe('BackwardsCompatProvider', () => {
             );
           }
 
-          return {
-            element: compatWrapper(<Component />),
-          };
+          return [coreExtensionData.reactElement(compatWrapper(<Component />))];
         },
       }),
     ).render();

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

@@ -62,7 +62,7 @@ describe('convertLegacyApp', () => {
             id: 'page:score-card',
             attachTo: { id: 'app/routes', input: 'routes' },
             disabled: false,
-            defaultConfig: { path: 'score-board' },
+            defaultConfig: {},
           },
           {
             id: 'api:plugin.scoringdata.service',
@@ -78,7 +78,7 @@ describe('convertLegacyApp', () => {
             id: 'page:stackstorm',
             attachTo: { id: 'app/routes', input: 'routes' },
             disabled: false,
-            defaultConfig: { path: 'stackstorm' },
+            defaultConfig: {},
           },
           {
             id: 'api:plugin.stackstorm.service',
@@ -94,13 +94,13 @@ describe('convertLegacyApp', () => {
             id: 'page:puppetDb',
             attachTo: { id: 'app/routes', input: 'routes' },
             disabled: false,
-            defaultConfig: { path: 'puppetdb' },
+            defaultConfig: {},
           },
           {
             id: 'page:puppetDb/1',
             attachTo: { id: 'app/routes', input: 'routes' },
             disabled: false,
-            defaultConfig: { path: 'puppetdb' },
+            defaultConfig: {},
           },
           {
             id: 'api:plugin.puppetdb.service',

packages/core-compat-api/src/convertLegacyApp.ts

@@ -107,33 +107,30 @@ export function convertLegacyApp(
     name: 'layout',
     attachTo: { id: 'app', input: 'root' },
     inputs: {
-      content: createExtensionInput(
-        {
-          element: coreExtensionData.reactElement,
-        },
-        { singleton: true },
-      ),
-    },
-    output: {
-      element: coreExtensionData.reactElement,
+      content: createExtensionInput([coreExtensionData.reactElement], {
+        singleton: true,
+      }),
     },
+    output: [coreExtensionData.reactElement],
     factory({ inputs }) {
       // Clone the root element, this replaces the FlatRoutes declared in the app with out content input
-      return {
-        element: React.cloneElement(
-          rootEl,
-          undefined,
-          inputs.content.output.element,
+      return [
+        coreExtensionData.reactElement(
+          React.cloneElement(
+            rootEl,
+            undefined,
+            inputs.content.get(coreExtensionData.reactElement),
+          ),
         ),
-      };
+      ];
     },
   });
   const CoreNavOverride = createExtension({
     namespace: 'app',
     name: 'nav',
     attachTo: { id: 'app/layout', input: 'nav' },
-    output: {},
-    factory: () => ({}),
+    output: [],
+    factory: () => [],
     disabled: true,
   });