diff --git a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx b/packages/app-next/src/examples/notFoundErrorPageExtension.tsx index 67746f6c68..64572ccb62 100644 --- a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx +++ b/packages/app-next/src/examples/notFoundErrorPageExtension.tsx @@ -14,11 +14,13 @@ * limitations under the License. */ -import { AdaptableComponentBlueprint } from '@backstage/frontend-plugin-api'; +import { + AdaptableComponentBlueprint, + NotFoundErrorPage, +} from '@backstage/frontend-plugin-api'; import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import { Button } from '@backstage/core-components'; -import { NotFoundErrorPage } from '@backstage/plugin-app'; export function CustomNotFoundErrorPage() { return ( diff --git a/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx b/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx index 925d30306c..aa0b7bf556 100644 --- a/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx +++ b/packages/core-compat-api/src/compatWrapper/ForwardsCompatProvider.tsx @@ -35,7 +35,6 @@ import { RouteResolutionApi, SubRouteRef, componentsApiRef, - coreComponentRefs, iconsApiRef, routeResolutionApiRef, } from '@backstage/frontend-plugin-api'; diff --git a/packages/core-compat-api/src/convertLegacyAppOptions.tsx b/packages/core-compat-api/src/convertLegacyAppOptions.tsx index 4895f3234c..215185853a 100644 --- a/packages/core-compat-api/src/convertLegacyAppOptions.tsx +++ b/packages/core-compat-api/src/convertLegacyAppOptions.tsx @@ -38,11 +38,11 @@ import { } from '@backstage/core-plugin-api'; import { toLegacyPlugin } from './compatWrapper/BackwardsCompatProvider'; import { compatWrapper } from './compatWrapper'; -import { Progress as AdaptableProgress } from '@backstage/core-components'; import { - NotFoundErrorPage as AdaptableNotFoundErrorPage, ErrorBoundary as AdaptableErrorBoundary, -} from '@backstage/plugin-app'; + NotFoundErrorPage as AdaptableNotFoundErrorPage, + Progress as AdaptableProgress, +} from '@backstage/frontend-plugin-api'; function componentCompatWrapper( Component: ComponentType, @@ -167,6 +167,7 @@ export function convertLegacyAppOptions( }), ); } + if (NotFoundErrorPage) { extensions.push( AdaptableComponentBlueprint.make({ diff --git a/packages/core-components/src/components/Progress/Progress.tsx b/packages/core-components/src/components/Progress/Progress.tsx index 27706cb7d1..b7176a5825 100644 --- a/packages/core-components/src/components/Progress/Progress.tsx +++ b/packages/core-components/src/components/Progress/Progress.tsx @@ -21,10 +21,7 @@ import LinearProgress, { import { useTheme } from '@material-ui/core/styles'; import { PropsWithChildren, useEffect, useState } from 'react'; -// eslint-disable-next-line @backstage/no-relative-monorepo-imports -import { createAdaptableComponent } from '../../../../frontend-plugin-api/src/components/createAdaptableComponent'; - -function ProgressComponent(props: PropsWithChildren) { +export function Progress(props: PropsWithChildren) { const theme = useTheme(); const [isVisible, setIsVisible] = useState(false); @@ -42,8 +39,3 @@ function ProgressComponent(props: PropsWithChildren) { ); } - -export const Progress = createAdaptableComponent({ - id: 'core.components.progress', - loader: () => ProgressComponent, -}); diff --git a/packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.test.tsx b/packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.test.tsx index e52076896f..3eb73ca7a9 100644 --- a/packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.test.tsx +++ b/packages/frontend-plugin-api/src/blueprints/AdaptableComponentBlueprint.test.tsx @@ -54,7 +54,7 @@ describe('AdaptableComponentBlueprint', () => { params: define => define({ // todo(blam): there's a bug that this path cannot be `/`? - defaultPath: '/test', + path: '/test', loader: async () => , }), }), @@ -75,7 +75,7 @@ describe('AdaptableComponentBlueprint', () => { PageBlueprint.make({ params: define => define({ - defaultPath: '/test', + path: '/test', loader: async () => , }), }), @@ -101,7 +101,7 @@ describe('AdaptableComponentBlueprint', () => { params: define => define({ // todo(blam): there's a bug that this path cannot be `/`? - defaultPath: '/test', + path: '/test', loader: async () => , }), }), @@ -132,7 +132,7 @@ describe('AdaptableComponentBlueprint', () => { PageBlueprint.make({ params: define => define({ - defaultPath: '/test', + path: '/test', loader: async () => , }), }), diff --git a/packages/frontend-plugin-api/src/components/DefaultAdaptableComponents.ts b/packages/frontend-plugin-api/src/components/DefaultAdaptableComponents.ts new file mode 100644 index 0000000000..db8b29446c --- /dev/null +++ b/packages/frontend-plugin-api/src/components/DefaultAdaptableComponents.ts @@ -0,0 +1,28 @@ +/* + * Copyright 2025 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 { createAdaptableComponent } from '@backstage/frontend-plugin-api'; + +export const Progress = createAdaptableComponent({ + id: 'core.components.progress', +}); + +export const NotFoundErrorPage = createAdaptableComponent({ + id: 'core.components.notFoundErrorPage', +}); + +export const ErrorBoundary = createAdaptableComponent({ + id: 'core.components.errorBoundary', +}); diff --git a/packages/frontend-plugin-api/src/components/index.ts b/packages/frontend-plugin-api/src/components/index.ts index 9c50ba0c43..0c8c69c355 100644 --- a/packages/frontend-plugin-api/src/components/index.ts +++ b/packages/frontend-plugin-api/src/components/index.ts @@ -23,3 +23,4 @@ export { type ComponentRef, } from './createAdaptableComponent'; export { useAppNode } from './AppNodeProvider'; +export * from './DefaultAdaptableComponents'; diff --git a/plugins/app/src/extensions/AppRoutes.tsx b/plugins/app/src/extensions/AppRoutes.tsx index 6291f24949..5cc3c3f4b8 100644 --- a/plugins/app/src/extensions/AppRoutes.tsx +++ b/plugins/app/src/extensions/AppRoutes.tsx @@ -18,9 +18,9 @@ import { createExtension, coreExtensionData, createExtensionInput, + NotFoundErrorPage, } from '@backstage/frontend-plugin-api'; import { useRoutes } from 'react-router-dom'; -import { NotFoundErrorPage } from './components'; export const AppRoutes = createExtension({ name: 'routes', diff --git a/plugins/app/src/extensions/components.tsx b/plugins/app/src/extensions/components.tsx index 6dd46bcd6e..91cf8c7b63 100644 --- a/plugins/app/src/extensions/components.tsx +++ b/plugins/app/src/extensions/components.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2023 The Backstage Authors + * Copyright 2025 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. @@ -13,15 +13,38 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { + NotFoundErrorPage as AdaptableNotFoundErrorPage, + Progress as AdaptableProgress, + ErrorBoundary as AdaptableErrorBoundary, + AdaptableComponentBlueprint, +} from '@backstage/frontend-plugin-api'; -import { createAdaptableComponent } from '@backstage/frontend-plugin-api'; +import { Progress as ProgressComponent } from '@backstage/core-components'; -export const NotFoundErrorPage = createAdaptableComponent({ - id: 'core.components.notFoundErrorPage', - // todo: implementation +export const Progress = AdaptableComponentBlueprint.make({ + name: 'core.components.progress', + params: define => + define({ + component: AdaptableProgress, + loader: () => ProgressComponent, + }), }); -export const ErrorBoundary = createAdaptableComponent({ - id: 'core.components.errorBoundaryFallback', - // todo: implementation +export const NotFoundErrorPage = AdaptableComponentBlueprint.make({ + name: 'core.components.notFoundErrorPage', + params: define => + define({ + component: AdaptableNotFoundErrorPage, + loader: () => NotFoundErrorPageComponent, + }), +}); + +export const ErrorBoundary = AdaptableComponentBlueprint.make({ + name: 'core.components.errorBoundary', + params: define => + define({ + component: AdaptableErrorBoundary, + loader: () => ErrorBoundaryComponent, + }), }); diff --git a/plugins/app/src/extensions/index.ts b/plugins/app/src/extensions/index.ts index 487494601b..4bf77b1bb5 100644 --- a/plugins/app/src/extensions/index.ts +++ b/plugins/app/src/extensions/index.ts @@ -26,9 +26,8 @@ export { FeatureFlagsApi } from './FeatureFlagsApi'; export { TranslationsApi } from './TranslationsApi'; export { DefaultSignInPage } from './DefaultSignInPage'; export { dialogDisplayAppRootElement } from './DialogDisplay'; -// todo: move these -export { ErrorBoundary, NotFoundErrorPage } from './components'; export { oauthRequestDialogAppRootElement, alertDisplayAppRootElement, } from './elements'; +export { Progress, NotFoundErrorPage, ErrorBoundary } from './components'; diff --git a/plugins/app/src/index.ts b/plugins/app/src/index.ts index d2614dcf66..24f65df618 100644 --- a/plugins/app/src/index.ts +++ b/plugins/app/src/index.ts @@ -15,5 +15,3 @@ */ export { appPlugin as default } from './plugin'; -// todo: remove -export * from './extensions/components'; diff --git a/plugins/app/src/plugin.ts b/plugins/app/src/plugin.ts index 09596a7385..6a965216cf 100644 --- a/plugins/app/src/plugin.ts +++ b/plugins/app/src/plugin.ts @@ -33,6 +33,9 @@ import { alertDisplayAppRootElement, DefaultSignInPage, dialogDisplayAppRootElement, + Progress, + NotFoundErrorPage, + ErrorBoundary, } from './extensions'; import { apis } from './defaultApis'; @@ -59,5 +62,8 @@ export const appPlugin = createFrontendPlugin({ oauthRequestDialogAppRootElement, alertDisplayAppRootElement, dialogDisplayAppRootElement, + Progress, + NotFoundErrorPage, + ErrorBoundary, ], });