diff --git a/.changeset/brave-beers-happen.md b/.changeset/brave-beers-happen.md index 8a16ed4824..34bbb95666 100644 --- a/.changeset/brave-beers-happen.md +++ b/.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. diff --git a/.changeset/good-wolves-leave.md b/.changeset/good-wolves-leave.md index c2cde8bfed..51ac99a55a 100644 --- a/.changeset/good-wolves-leave.md +++ b/.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. diff --git a/.changeset/sharp-dingos-learn.md b/.changeset/sharp-dingos-learn.md index 9dbb7ed8f4..9447ca9698 100644 --- a/.changeset/sharp-dingos-learn.md +++ b/.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. diff --git a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx b/packages/app-next/src/examples/notFoundErrorPageExtension.tsx index 6cdaff978f..06e9b50bb8 100644 --- a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx +++ b/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 }, }); diff --git a/packages/frontend-app-api/src/extensions/CoreRoutes.tsx b/packages/frontend-app-api/src/extensions/CoreRoutes.tsx index 1b79231699..155a5b60fa 100644 --- a/packages/frontend-app-api/src/extensions/CoreRoutes.tsx +++ b/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([ diff --git a/packages/frontend-app-api/src/extensions/components.tsx b/packages/frontend-app-api/src/extensions/components.tsx index e13c1b2f3b..44d479f170 100644 --- a/packages/frontend-app-api/src/extensions/components.tsx +++ b/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; diff --git a/packages/frontend-app-api/src/wiring/createApp.test.tsx b/packages/frontend-app-api/src/wiring/createApp.test.tsx index 2713a9743e..32773de7e1 100644 --- a/packages/frontend-app-api/src/wiring/createApp.test.tsx +++ b/packages/frontend-app-api/src/wiring/createApp.test.tsx @@ -201,10 +201,9 @@ describe('createApp', () => { ] components [ - - - - + + + ] themes [ diff --git a/packages/frontend-app-api/src/wiring/createApp.tsx b/packages/frontend-app-api/src/wiring/createApp.tsx index f58dfb3159..dcfbd1faf2 100644 --- a/packages/frontend-app-api/src/wiring/createApp.tsx +++ b/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, diff --git a/packages/frontend-plugin-api/api-report.md b/packages/frontend-plugin-api/api-report.md index 7342558560..38f6583519 100644 --- a/packages/frontend-plugin-api/api-report.md +++ b/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; - notFoundErrorPage: ComponentRef<{ - children?: ReactNode; - }>; +export const coreComponentRefs: { + progress: ComponentRef; + notFoundErrorPage: ComponentRef; errorBoundaryFallback: ComponentRef; }; // @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( + ref: ComponentRef, +): ComponentType; + // @public export function useRouteRef< TOptional extends boolean, diff --git a/packages/frontend-plugin-api/src/apis/definitions/ComponentsApi.ts b/packages/frontend-plugin-api/src/apis/definitions/ComponentsApi.ts index dee17e7d97..c5e9d2c44f 100644 --- a/packages/frontend-plugin-api/src/apis/definitions/ComponentsApi.ts +++ b/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({ id: 'core.components', }); + +/** + * @public + * Returns the component associated with the given ref. + */ +export function useComponentRef( + ref: ComponentRef, +): ComponentType { + const componentsApi = useApi(componentsApiRef); + return componentsApi.getComponent(ref); +} diff --git a/packages/frontend-plugin-api/src/components/ComponentRef.tsx b/packages/frontend-plugin-api/src/components/ComponentRef.tsx index dd2e65a61f..50df9552ec 100644 --- a/packages/frontend-plugin-api/src/components/ComponentRef.tsx +++ b/packages/frontend-plugin-api/src/components/ComponentRef.tsx @@ -15,7 +15,6 @@ */ import { - CoreBootErrorPageProps, CoreErrorBoundaryFallbackProps, CoreNotFoundErrorPageProps, CoreProgressProps, @@ -41,11 +40,6 @@ const coreProgressComponentRef = createComponentRef({ id: 'core.components.progress', }); -const coreBootErrorPageComponentRef = - createComponentRef({ - id: 'core.components.bootErrorPage', - }); - const coreNotFoundErrorPageComponentRef = createComponentRef({ 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, }; diff --git a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx b/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx index d830f665f0..db5c911cef 100644 --- a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx +++ b/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 = { diff --git a/packages/frontend-plugin-api/src/components/index.ts b/packages/frontend-plugin-api/src/components/index.ts index a7d947599f..893918059b 100644 --- a/packages/frontend-plugin-api/src/components/index.ts +++ b/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, diff --git a/packages/frontend-plugin-api/src/index.ts b/packages/frontend-plugin-api/src/index.ts index 04cbddd336..72ebe34795 100644 --- a/packages/frontend-plugin-api/src/index.ts +++ b/packages/frontend-plugin-api/src/index.ts @@ -32,7 +32,6 @@ export * from './wiring'; export type { CoreProgressProps, - CoreBootErrorPageProps, CoreNotFoundErrorPageProps, CoreErrorBoundaryFallbackProps, } from './types'; diff --git a/packages/frontend-plugin-api/src/types.ts b/packages/frontend-plugin-api/src/types.ts index a69c483b5c..4d0fb1ac4b 100644 --- a/packages/frontend-plugin-api/src/types.ts +++ b/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 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; -}>; +}; diff --git a/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts b/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts index 47a77414a0..d52a672679 100644 --- a/packages/frontend-plugin-api/src/wiring/coreExtensionData.ts +++ b/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'), }; diff --git a/yarn.lock b/yarn.lock index 0d8d076b45..9759cf8787 100644 --- a/yarn.lock +++ b/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: