refactor: apply review suggestions

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

.changeset/brave-beers-happen.md

@@ -2,4 +2,4 @@
 '@backstage/frontend-plugin-api': patch
 ---
 
-**_BREAKING_**: update alpha component ref type to be more specific than any and use new plugin type for error boundary component extensions.
+Update alpha component ref type to be more specific than any, delete boot page component and use new plugin type for error boundary component extensions.

.changeset/good-wolves-leave.md

@@ -2,4 +2,4 @@
 '@backstage/frontend-app-api': patch
 ---
 
-**_BREAKING_**: Use the new plugin type for error boundary components.
+Use the new plugin type for error boundary components.

.changeset/sharp-dingos-learn.md

@@ -2,4 +2,4 @@
 '@backstage/core-compat-api': patch
 ---
 
-**_BREAKING_**: delete alpha DI compatibility helper for components, migrating components should be simple without an helper.
+Delete alpha DI compatibility helper for components, migrating components should be simple without a helper.

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

@@ -17,7 +17,7 @@
 import React from 'react';
 import {
   createComponentExtension,
-  coreComponentsRefs,
+  coreComponentRefs,
 } from '@backstage/frontend-plugin-api';
 import { Box, Typography } from '@material-ui/core';
 import { Button } from '@backstage/core-components';
@@ -51,6 +51,6 @@ export function CustomNotFoundErrorPage() {
 }
 
 export default createComponentExtension({
-  ref: coreComponentsRefs.notFoundErrorPage,
+  ref: coreComponentRefs.notFoundErrorPage,
   component: { sync: () => CustomNotFoundErrorPage },
 });

packages/frontend-app-api/src/extensions/CoreRoutes.tsx

@@ -19,9 +19,8 @@ import {
   createExtension,
   coreExtensionData,
   createExtensionInput,
-  coreComponentsRefs,
-  useApi,
-  componentsApiRef,
+  coreComponentRefs,
+  useComponentRef,
 } from '@backstage/frontend-plugin-api';
 import { useRoutes } from 'react-router-dom';
 
@@ -41,9 +40,8 @@ export const CoreRoutes = createExtension({
   },
   factory({ inputs }) {
     const Routes = () => {
-      const componentsApi = useApi(componentsApiRef);
-      const NotFoundErrorPage = componentsApi.getComponent(
-        coreComponentsRefs.notFoundErrorPage,
+      const NotFoundErrorPage = useComponentRef(
+        coreComponentRefs.notFoundErrorPage,
       );
 
       const element = useRoutes([

packages/frontend-app-api/src/extensions/components.tsx

@@ -20,7 +20,7 @@ import { Button } from '@material-ui/core';
 
 import {
   createComponentExtension,
-  coreComponentsRefs,
+  coreComponentRefs,
 } from '@backstage/frontend-plugin-api';
 import { ErrorPanel } from '@backstage/core-components';
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
@@ -28,22 +28,17 @@ import { components as defaultComponents } from '../../../app-defaults/src/defau
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
 
 export const DefaultProgressComponent = createComponentExtension({
-  ref: coreComponentsRefs.progress,
+  ref: coreComponentRefs.progress,
   component: { sync: () => defaultComponents.Progress },
 });
 
-export const DefaultBootErrorPageComponent = createComponentExtension({
-  ref: coreComponentsRefs.bootErrorPage,
-  component: { sync: () => defaultComponents.BootErrorPage },
-});
-
 export const DefaultNotFoundErrorPageComponent = createComponentExtension({
-  ref: coreComponentsRefs.notFoundErrorPage,
+  ref: coreComponentRefs.notFoundErrorPage,
   component: { sync: () => defaultComponents.NotFoundErrorPage },
 });
 
 export const DefaultErrorBoundaryComponent = createComponentExtension({
-  ref: coreComponentsRefs.errorBoundaryFallback,
+  ref: coreComponentRefs.errorBoundaryFallback,
   component: {
     sync: () => props => {
       const { plugin, error, resetError } = props;

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

@@ -201,10 +201,9 @@ describe('createApp', () => {
           </core/router>
         ]
         components [
-          <component:core.components.progress out=[component.ref] />
-          <component:core.components.errorBoundaryFallback out=[component.ref] />
-          <component:core.components.bootErrorPage out=[component.ref] />
-          <component:core.components.notFoundErrorPage out=[component.ref] />
+          <component:core.components.progress out=[core.component] />
+          <component:core.components.errorBoundaryFallback out=[core.component] />
+          <component:core.components.notFoundErrorPage out=[core.component] />
         ]
         themes [
           <theme:app/light out=[core.theme] />

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

@@ -96,7 +96,6 @@ import { createAppTree } from '../tree';
 import {
   DefaultProgressComponent,
   DefaultErrorBoundaryComponent,
-  DefaultBootErrorPageComponent,
   DefaultNotFoundErrorPageComponent,
 } from '../extensions/components';
 import { AppNode } from '@backstage/frontend-plugin-api';
@@ -117,7 +116,6 @@ export const builtinExtensions = [
   CoreLayout,
   DefaultProgressComponent,
   DefaultErrorBoundaryComponent,
-  DefaultBootErrorPageComponent,
   DefaultNotFoundErrorPageComponent,
   LightTheme,
   DarkTheme,

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

@@ -64,7 +64,6 @@ import { OpenIdConnectApi } from '@backstage/core-plugin-api';
 import { PendingOAuthRequest } from '@backstage/core-plugin-api';
 import { ProfileInfo } from '@backstage/core-plugin-api';
 import { ProfileInfoApi } from '@backstage/core-plugin-api';
-import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { SessionApi } from '@backstage/core-plugin-api';
@@ -321,29 +320,18 @@ export interface ConfigurableExtensionDataRef<
 }
 
 // @public (undocumented)
-export type CoreBootErrorPageProps = PropsWithChildren<{
-  step: 'load-config' | 'load-chunk';
-  error: Error;
-}>;
-
-// @public (undocumented)
-export const coreComponentsRefs: {
-  progress: ComponentRef<{
-    children?: ReactNode;
-  }>;
-  bootErrorPage: ComponentRef<CoreBootErrorPageProps>;
-  notFoundErrorPage: ComponentRef<{
-    children?: ReactNode;
-  }>;
+export const coreComponentRefs: {
+  progress: ComponentRef<CoreProgressProps>;
+  notFoundErrorPage: ComponentRef<CoreNotFoundErrorPageProps>;
   errorBoundaryFallback: ComponentRef<CoreErrorBoundaryFallbackProps>;
 };
 
 // @public (undocumented)
-export type CoreErrorBoundaryFallbackProps = PropsWithChildren<{
+export type CoreErrorBoundaryFallbackProps = {
   plugin?: BackstagePlugin;
   error: Error;
   resetError: () => void;
-}>;
+};
 
 // @public (undocumented)
 export const coreExtensionData: {
@@ -364,10 +352,12 @@ export const coreExtensionData: {
 };
 
 // @public (undocumented)
-export type CoreNotFoundErrorPageProps = PropsWithChildren<{}>;
+export type CoreNotFoundErrorPageProps = {
+  children?: ReactNode;
+};
 
 // @public (undocumented)
-export type CoreProgressProps = PropsWithChildren<{}>;
+export type CoreProgressProps = {};
 
 // @public (undocumented)
 export function createApiExtension<
@@ -952,6 +942,11 @@ export { useApi };
 
 export { useApiHolder };
 
+// @public
+export function useComponentRef<T extends {}>(
+  ref: ComponentRef<T>,
+): ComponentType<T>;
+
 // @public
 export function useRouteRef<
   TOptional extends boolean,

packages/frontend-plugin-api/src/apis/definitions/ComponentsApi.ts

@@ -15,7 +15,7 @@
  */
 
 import { ComponentType } from 'react';
-import { createApiRef } from '@backstage/core-plugin-api';
+import { createApiRef, useApi } from '@backstage/core-plugin-api';
 import { ComponentRef } from '../../components';
 
 /**
@@ -36,3 +36,14 @@ export interface ComponentsApi {
 export const componentsApiRef = createApiRef<ComponentsApi>({
   id: 'core.components',
 });
+
+/**
+ * @public
+ * Returns the component associated with the given ref.
+ */
+export function useComponentRef<T extends {}>(
+  ref: ComponentRef<T>,
+): ComponentType<T> {
+  const componentsApi = useApi(componentsApiRef);
+  return componentsApi.getComponent<T>(ref);
+}

packages/frontend-plugin-api/src/components/ComponentRef.tsx

@@ -15,7 +15,6 @@
  */
 
 import {
-  CoreBootErrorPageProps,
   CoreErrorBoundaryFallbackProps,
   CoreNotFoundErrorPageProps,
   CoreProgressProps,
@@ -41,11 +40,6 @@ const coreProgressComponentRef = createComponentRef<CoreProgressProps>({
   id: 'core.components.progress',
 });
 
-const coreBootErrorPageComponentRef =
-  createComponentRef<CoreBootErrorPageProps>({
-    id: 'core.components.bootErrorPage',
-  });
-
 const coreNotFoundErrorPageComponentRef =
   createComponentRef<CoreNotFoundErrorPageProps>({
     id: 'core.components.notFoundErrorPage',
@@ -57,9 +51,8 @@ const coreErrorBoundaryFallbackComponentRef =
   });
 
 /** @public */
-export const coreComponentsRefs = {
+export const coreComponentRefs = {
   progress: coreProgressComponentRef,
-  bootErrorPage: coreBootErrorPageComponentRef,
   notFoundErrorPage: coreNotFoundErrorPageComponentRef,
   errorBoundaryFallback: coreErrorBoundaryFallbackComponentRef,
 };

packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx

@@ -20,16 +20,12 @@ import React, {
   Suspense,
   useEffect,
 } from 'react';
-import {
-  AnalyticsContext,
-  useAnalytics,
-  useApi,
-} from '@backstage/core-plugin-api';
+import { AnalyticsContext, useAnalytics } from '@backstage/core-plugin-api';
 import { ErrorBoundary } from './ErrorBoundary';
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { routableExtensionRenderedEvent } from '../../../core-plugin-api/src/analytics/Tracker';
-import { AppNode, componentsApiRef } from '../apis';
-import { coreComponentsRefs } from './ComponentRef';
+import { AppNode, useComponentRef } from '../apis';
+import { coreComponentRefs } from './ComponentRef';
 
 type RouteTrackerProps = PropsWithChildren<{
   disableTracking?: boolean;
@@ -61,13 +57,10 @@ export interface ExtensionBoundaryProps {
 /** @public */
 export function ExtensionBoundary(props: ExtensionBoundaryProps) {
   const { node, routable, children } = props;
-  const componentsApi = useApi(componentsApiRef);
 
   const plugin = node.spec.source;
-  const Progress = componentsApi.getComponent(coreComponentsRefs.progress);
-  const fallback = componentsApi.getComponent(
-    coreComponentsRefs.errorBoundaryFallback,
-  );
+  const Progress = useComponentRef(coreComponentRefs.progress);
+  const fallback = useComponentRef(coreComponentRefs.errorBoundaryFallback);
 
   // Skipping "routeRef" attribute in the new system, the extension "id" should provide more insight
   const attributes = {

packages/frontend-plugin-api/src/components/index.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export { coreComponentsRefs, type ComponentRef } from './ComponentRef';
+export { coreComponentRefs, type ComponentRef } from './ComponentRef';
 
 export {
   ExtensionBoundary,

packages/frontend-plugin-api/src/index.ts

@@ -32,7 +32,6 @@ export * from './wiring';
 
 export type {
   CoreProgressProps,
-  CoreBootErrorPageProps,
   CoreNotFoundErrorPageProps,
   CoreErrorBoundaryFallbackProps,
 } from './types';

packages/frontend-plugin-api/src/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import { BackstagePlugin } from './wiring';
 
 // TODO(Rugvip): This might be a quite useful utility type, maybe add to @backstage/types?
@@ -25,20 +25,16 @@ import { BackstagePlugin } from './wiring';
 export type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
 /** @public */
-export type CoreProgressProps = PropsWithChildren<{}>;
+export type CoreProgressProps = {};
 
 /** @public */
-export type CoreBootErrorPageProps = PropsWithChildren<{
-  step: 'load-config' | 'load-chunk';
-  error: Error;
-}>;
+export type CoreNotFoundErrorPageProps = {
+  children?: ReactNode;
+};
 
 /** @public */
-export type CoreNotFoundErrorPageProps = PropsWithChildren<{}>;
-
-/** @public */
-export type CoreErrorBoundaryFallbackProps = PropsWithChildren<{
+export type CoreErrorBoundaryFallbackProps = {
   plugin?: BackstagePlugin;
   error: Error;
   resetError: () => void;
-}>;
+};

packages/frontend-plugin-api/src/wiring/coreExtensionData.ts

@@ -49,5 +49,5 @@ export const coreExtensionData = {
   component: createExtensionDataRef<{
     ref: ComponentRef;
     impl: ComponentType;
-  }>('component.ref'),
+  }>('core.component'),
 };

yarn.lock

@@ -3916,7 +3916,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@backstage/core-components@npm:^0.13.7, @backstage/core-components@npm:^0.13.8":
+"@backstage/core-components@npm:^0.13.8":
   version: 0.13.8
   resolution: "@backstage/core-components@npm:0.13.8"
   dependencies:
@@ -4042,7 +4042,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@backstage/core-plugin-api@npm:^1.3.0, @backstage/core-plugin-api@npm:^1.5.0, @backstage/core-plugin-api@npm:^1.7.0, @backstage/core-plugin-api@npm:^1.8.0":
+"@backstage/core-plugin-api@npm:^1.3.0, @backstage/core-plugin-api@npm:^1.5.0, @backstage/core-plugin-api@npm:^1.8.0":
   version: 1.8.0
   resolution: "@backstage/core-plugin-api@npm:1.8.0"
   dependencies:
@@ -5950,7 +5950,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@backstage/plugin-catalog-react@npm:^1.2.4, @backstage/plugin-catalog-react@npm:^1.8.5, @backstage/plugin-catalog-react@npm:^1.9.1":
+"@backstage/plugin-catalog-react@npm:^1.2.4, @backstage/plugin-catalog-react@npm:^1.9.1":
   version: 1.9.1
   resolution: "@backstage/plugin-catalog-react@npm:1.9.1"
   dependencies: