feat: create collect legacy components

Signed-off-by: Camila Belo <camilaibs@gmail.com>

packages/app-next/src/App.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { createApp } from '@backstage/frontend-app-api';
 import { pagesPlugin } from './examples/pagesPlugin';
-import customNotFoundErrorPage from './examples/notFoundErrorPageExtension';
+import { CustomNotFoundErrorPage } from './examples/notFoundErrorPageExtension';
 import graphiqlPlugin from '@backstage/plugin-graphiql/alpha';
 import techRadarPlugin from '@backstage/plugin-tech-radar/alpha';
 import userSettingsPlugin from '@backstage/plugin-user-settings/alpha';
@@ -33,7 +33,10 @@ import {
 } from '@backstage/frontend-plugin-api';
 import techdocsPlugin from '@backstage/plugin-techdocs/alpha';
 import { homePage } from './HomePage';
-import { collectLegacyRoutes } from '@backstage/core-compat-api';
+import {
+  collectLegacyComponents,
+  collectLegacyRoutes,
+} from '@backstage/core-compat-api';
 import { FlatRoutes } from '@backstage/core-app-api';
 import { Route } from 'react-router';
 import { CatalogImportPage } from '@backstage/plugin-catalog-import';
@@ -115,6 +118,10 @@ const collectedLegacyPlugins = collectLegacyRoutes(
   </FlatRoutes>,
 );
 
+const legacyAppComponents = collectLegacyComponents({
+  NotFoundErrorPage: CustomNotFoundErrorPage,
+});
+
 const app = createApp({
   features: [
     graphiqlPlugin,
@@ -130,7 +137,7 @@ const app = createApp({
         scmAuthExtension,
         scmIntegrationApi,
         signInPage,
-        customNotFoundErrorPage,
+        ...legacyAppComponents,
       ],
     }),
   ],

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

@@ -22,7 +22,7 @@ import {
 import { Box, Typography } from '@material-ui/core';
 import { Button } from '@backstage/core-components';
 
-function CustomNotFoundErrorPage() {
+export function CustomNotFoundErrorPage() {
   return (
     <Box
       component="article"

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

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { collectLegacyComponents } from './collectLegacyComponents';
+
+describe('collectLegacyComponents', () => {
+  const components = {
+    Progress: () => <div>Progress</div>,
+    BootErrorPage: () => <div>BootErrorPage</div>,
+    NotFoundErrorPage: () => <div>NotFoundErrorPage</div>,
+    ErrorBoundaryFallback: () => <div>ErrorBoundaryFallback</div>,
+  };
+
+  it('should collect legacy routes', () => {
+    const collected = collectLegacyComponents(components);
+
+    expect(
+      collected.map(p => ({
+        id: p.id,
+        attachTo: p.attachTo,
+        disabled: p.disabled,
+      })),
+    ).toEqual([
+      {
+        id: 'core.components.progress',
+        attachTo: { id: 'core', input: 'components' },
+        disabled: false,
+      },
+      {
+        id: 'core.components.bootErrorPage',
+        attachTo: { id: 'core', input: 'components' },
+        disabled: false,
+      },
+      {
+        id: 'core.components.notFoundErrorPage',
+        attachTo: { id: 'core', input: 'components' },
+        disabled: false,
+      },
+      {
+        id: 'core.components.errorBoundaryFallback',
+        attachTo: { id: 'core', input: 'components' },
+        disabled: false,
+      },
+    ]);
+  });
+});

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

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Extension,
+  ComponentRef,
+  createComponentExtension,
+  coreProgressComponentRef,
+  coreBootErrorPageComponentRef,
+  coreNotFoundErrorPageComponentRef,
+  coreErrorBoundaryFallbackComponentRef,
+} from '@backstage/frontend-plugin-api';
+import { AppComponents } from '@backstage/core-plugin-api';
+
+type ComponentTypes<T = AppComponents> = T[keyof T];
+
+const refs: Record<string, ComponentRef<ComponentTypes>> = {
+  Progress: coreProgressComponentRef,
+  BootErrorPage: coreBootErrorPageComponentRef,
+  NotFoundErrorPage: coreNotFoundErrorPageComponentRef,
+  ErrorBoundaryFallback: coreErrorBoundaryFallbackComponentRef,
+};
+
+/** @public */
+export function collectLegacyComponents(components: Partial<AppComponents>) {
+  return Object.entries(components).reduce<Extension<unknown>[]>(
+    (extensions, [componentName, componentFunction]) => {
+      const ref = refs[componentName];
+      return ref
+        ? extensions.concat(
+            createComponentExtension({
+              ref,
+              component: async () => componentFunction,
+            }),
+          )
+        : extensions;
+    },
+    [],
+  );
+}

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

@@ -14,5 +14,6 @@
  * limitations under the License.
  */
 export { collectLegacyRoutes } from './collectLegacyRoutes';
+export { collectLegacyComponents } from './collectLegacyComponents';
 export { convertLegacyApp } from './convertLegacyApp';
 export { convertLegacyRouteRef } from './convertLegacyRouteRef';