diff --git a/.changeset/component-refs-breaking-frontend-plugin-api.md b/.changeset/component-refs-breaking-frontend-plugin-api.md index 6d43547d21..47c40865d3 100644 --- a/.changeset/component-refs-breaking-frontend-plugin-api.md +++ b/.changeset/component-refs-breaking-frontend-plugin-api.md @@ -7,6 +7,12 @@ - Removed: `createComponentRef`, `createComponentExtension`, `ComponentRef`, `ComponentsApi`, `componentsApiRef`, `useComponentRef`, `coreComponentRefs` - Added: `createSwappableComponent`, `SwappableComponentBlueprint`, `SwappableComponentRef`, `SwappableComponentsApi`, `swappableComponentsApiRef` +**BREAKING**: The default `componentRefs` and exported `Core*Props` have been removed and have replacement `SwappableComponents` and revised type names instead. + +- The `errorBoundaryFallback` component and `CoreErrorBoundaryFallbackProps` type have been replaced with `ErrorDisplay` swappable component and `CoreErrorDisplayProps` respectively. +- The `progress` component and `CoreProgressProps` type have been replaced with `Progress` swappable component and `ProgressProps` respectively. +- The `notFoundErrorPage` component and `CoreNotFoundErrorPageProps` type have been replaced with `NotFoundErrorPage` swappable component and `NotFoundErrorPageProps` respectively. + **Migration for creating swappable components:** ```tsx @@ -88,5 +94,3 @@ import { Progress, NotFoundErrorPage, ErrorDisplay } from '@backstage/frontend-p ``` - -**BREAKING**: The `errorBoundaryFallback` component and `CoreErrorBoundaryFallbackProps` type have been replaced with `ErrorDisplay` swappable component and `CoreErrorDisplayProps` respectively. diff --git a/.changeset/fuzzy-ducks-jump.md b/.changeset/fuzzy-ducks-jump.md index 5f5930a8dc..9aa2288598 100644 --- a/.changeset/fuzzy-ducks-jump.md +++ b/.changeset/fuzzy-ducks-jump.md @@ -1,5 +1,5 @@ --- -'@backstage/core-compat-api': patch +'@backstage/core-compat-api': minor --- -This is primarily an internal change that ensures legacy plugins continue to work with the new component system without requiring immediate migration. +**BREAKING**: The `componentsApi` implementation has been removed from the plugin and replaced with the new `SwappableComponentsApi` instead. Which means that the `componentsApi` is not longer backwards compatible with legacy plugins. diff --git a/.github/vale/config/vocabularies/Backstage/accept.txt b/.github/vale/config/vocabularies/Backstage/accept.txt index aa6de7c545..5eba84e61d 100644 --- a/.github/vale/config/vocabularies/Backstage/accept.txt +++ b/.github/vale/config/vocabularies/Backstage/accept.txt @@ -467,7 +467,7 @@ Superfences superset supertype SVGs -Swappable +swappable talkdesk Talkdesk Tanzu diff --git a/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx b/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx index a5b7d31141..6464032673 100644 --- a/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx +++ b/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx @@ -24,9 +24,9 @@ import { AnyRouteRefParams, SwappableComponentRef, SwappableComponentsApi, - CoreErrorDisplayProps, - CoreNotFoundErrorPageProps, - CoreProgressProps, + ErrorDisplayProps, + NotFoundErrorPageProps, + ProgressProps, ExternalRouteRef, IconComponent, IconsApi, @@ -52,13 +52,13 @@ import { type RouteResolver } from '../../../core-plugin-api/src/routing/useRout import { convertLegacyRouteRef } from '../convertLegacyRouteRef'; class CompatComponentsApi implements SwappableComponentsApi { - readonly #Progress: ComponentType; - readonly #NotFoundErrorPage: ComponentType; - readonly #ErrorBoundaryFallback: ComponentType; + readonly #Progress: ComponentType; + readonly #NotFoundErrorPage: ComponentType; + readonly #ErrorBoundaryFallback: ComponentType; constructor(app: AppContext) { const components = app.getComponents(); - const ErrorBoundaryFallback = (props: CoreErrorDisplayProps) => ( + const ErrorBoundaryFallback = (props: ErrorDisplayProps) => ( + const WrappedErrorBoundaryFallback = (props: ErrorDisplayProps) => compatWrapper( ; } -// @public (undocumented) -export type CoreErrorDisplayProps = { - plugin?: FrontendPlugin; - error: Error; - resetError: () => void; -}; - // @public (undocumented) export const coreExtensionData: { reactElement: ConfigurableExtensionDataRef< @@ -396,14 +389,6 @@ export const coreExtensionData: { >; }; -// @public (undocumented) -export type CoreNotFoundErrorPageProps = { - children?: ReactNode; -}; - -// @public (undocumented) -export type CoreProgressProps = {}; - export { createApiFactory }; export { createApiRef }; @@ -872,9 +857,16 @@ export { errorApiRef }; // @public (undocumented) export const ErrorDisplay: (( - props: CoreErrorDisplayProps, + props: ErrorDisplayProps, ) => JSX.Element | null) & { - ref: SwappableComponentRef; + ref: SwappableComponentRef; +}; + +// @public (undocumented) +export type ErrorDisplayProps = { + plugin?: FrontendPlugin; + error: Error; + resetError: () => void; }; // @public (undocumented) @@ -1534,12 +1526,14 @@ export const NavItemBlueprint: ExtensionBlueprint<{ // @public (undocumented) export const NotFoundErrorPage: (( - props: CoreNotFoundErrorPageProps, + props: NotFoundErrorPageProps, ) => JSX.Element | null) & { - ref: SwappableComponentRef< - CoreNotFoundErrorPageProps, - CoreNotFoundErrorPageProps - >; + ref: SwappableComponentRef; +}; + +// @public (undocumented) +export type NotFoundErrorPageProps = { + children?: ReactNode; }; export { OAuthApi }; @@ -1627,10 +1621,13 @@ export { ProfileInfo }; export { ProfileInfoApi }; // @public (undocumented) -export const Progress: ((props: CoreProgressProps) => JSX.Element | null) & { - ref: SwappableComponentRef; +export const Progress: ((props: ProgressProps) => JSX.Element | null) & { + ref: SwappableComponentRef; }; +// @public (undocumented) +export type ProgressProps = {}; + // @public export type ResolvedExtensionInput< TExtensionInput extends ExtensionInput, diff --git a/packages/frontend-plugin-api/src/components/DefaultSwappableComponents.tsx b/packages/frontend-plugin-api/src/components/DefaultSwappableComponents.tsx index 6684dafce6..e9a4220142 100644 --- a/packages/frontend-plugin-api/src/components/DefaultSwappableComponents.tsx +++ b/packages/frontend-plugin-api/src/components/DefaultSwappableComponents.tsx @@ -15,16 +15,16 @@ */ import { - CoreErrorDisplayProps, - CoreNotFoundErrorPageProps, - CoreProgressProps, + ErrorDisplayProps, + NotFoundErrorPageProps, + ProgressProps, } from '../types'; import { createSwappableComponent } from './createSwappableComponent'; /** * @public */ -export const Progress = createSwappableComponent({ +export const Progress = createSwappableComponent({ id: 'core.components.progress', }); @@ -32,14 +32,14 @@ export const Progress = createSwappableComponent({ * @public */ export const NotFoundErrorPage = - createSwappableComponent({ + createSwappableComponent({ id: 'core.components.notFoundErrorPage', }); /** * @public */ -export const ErrorDisplay = createSwappableComponent({ +export const ErrorDisplay = createSwappableComponent({ id: 'core.components.errorDisplay', loader: () => props =>
{props.error.message}
, diff --git a/packages/frontend-plugin-api/src/index.ts b/packages/frontend-plugin-api/src/index.ts index 7d519a79da..9117dc0ef9 100644 --- a/packages/frontend-plugin-api/src/index.ts +++ b/packages/frontend-plugin-api/src/index.ts @@ -32,7 +32,7 @@ export * from './translation'; export * from './wiring'; export type { - CoreProgressProps, - CoreNotFoundErrorPageProps, - CoreErrorDisplayProps, + ProgressProps, + NotFoundErrorPageProps, + ErrorDisplayProps, } from './types'; diff --git a/packages/frontend-plugin-api/src/types.ts b/packages/frontend-plugin-api/src/types.ts index 5a8f6db7a7..a8ddf43cad 100644 --- a/packages/frontend-plugin-api/src/types.ts +++ b/packages/frontend-plugin-api/src/types.ts @@ -18,15 +18,15 @@ import { ReactNode } from 'react'; import { FrontendPlugin } from './wiring'; /** @public */ -export type CoreProgressProps = {}; +export type ProgressProps = {}; /** @public */ -export type CoreNotFoundErrorPageProps = { +export type NotFoundErrorPageProps = { children?: ReactNode; }; /** @public */ -export type CoreErrorDisplayProps = { +export type ErrorDisplayProps = { plugin?: FrontendPlugin; error: Error; resetError: () => void;