From 6fc64919b934a18219466fd5d1f464acf6c2141b Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Fri, 8 Aug 2025 14:40:40 +0200 Subject: [PATCH] chore: added backwards support for components api and new implementation Signed-off-by: benjdlambert --- plugins/app/package.json | 8 ++- plugins/app/report.api.md | 15 +++++ .../DefaultSwappableComponentsApi.test.tsx | 0 .../DefaultSwappableComponentsApi.tsx | 0 .../src/apis}/SwappableComponentsApi/index.ts | 0 .../app/src/extensions/LegacyComponentsApi.ts | 58 +++++++++++++++++++ .../src/extensions/SwappableComponentsApi.ts | 3 +- plugins/app/src/extensions/index.ts | 1 + plugins/app/src/plugin.ts | 2 + 9 files changed, 82 insertions(+), 5 deletions(-) rename {packages/frontend-app-api/src/apis/implementations => plugins/app/src/apis}/SwappableComponentsApi/DefaultSwappableComponentsApi.test.tsx (100%) rename {packages/frontend-app-api/src/apis/implementations => plugins/app/src/apis}/SwappableComponentsApi/DefaultSwappableComponentsApi.tsx (100%) rename {packages/frontend-app-api/src/apis/implementations => plugins/app/src/apis}/SwappableComponentsApi/index.ts (100%) create mode 100644 plugins/app/src/extensions/LegacyComponentsApi.ts diff --git a/plugins/app/package.json b/plugins/app/package.json index 3fa024a2f0..a3482e57a7 100644 --- a/plugins/app/package.json +++ b/plugins/app/package.json @@ -25,6 +25,8 @@ "./alpha": "./src/alpha/index.ts", "./package.json": "./package.json" }, + "main": "src/index.ts", + "types": "src/index.ts", "typesVersions": { "*": { "alpha": [ @@ -35,8 +37,6 @@ ] } }, - "main": "src/index.ts", - "types": "src/index.ts", "files": [ "dist" ], @@ -57,11 +57,13 @@ "@backstage/plugin-permission-react": "workspace:^", "@backstage/theme": "workspace:^", "@backstage/types": "workspace:^", + "@backstage/version-bridge": "workspace:^", "@material-ui/core": "^4.9.13", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.61", "@react-hookz/web": "^24.0.0", - "react-use": "^17.2.4" + "react-use": "^17.2.4", + "zod": "^3.22.4" }, "devDependencies": { "@backstage/cli": "workspace:^", diff --git a/plugins/app/report.api.md b/plugins/app/report.api.md index 423da8ec89..8ff41a2e57 100644 --- a/plugins/app/report.api.md +++ b/plugins/app/report.api.md @@ -315,6 +315,21 @@ const appPlugin: FrontendPlugin< params: ApiFactory, ) => ExtensionBlueprintParams; }>; + 'api:app/components': ExtensionDefinition<{ + kind: 'api'; + name: 'components'; + config: {}; + configInput: {}; + output: ExtensionDataRef; + inputs: {}; + params: < + TApi, + TImpl extends TApi, + TDeps extends { [name in string]: unknown }, + >( + params: ApiFactory, + ) => ExtensionBlueprintParams; + }>; 'api:app/dialog': ExtensionDefinition<{ kind: 'api'; name: 'dialog'; diff --git a/packages/frontend-app-api/src/apis/implementations/SwappableComponentsApi/DefaultSwappableComponentsApi.test.tsx b/plugins/app/src/apis/SwappableComponentsApi/DefaultSwappableComponentsApi.test.tsx similarity index 100% rename from packages/frontend-app-api/src/apis/implementations/SwappableComponentsApi/DefaultSwappableComponentsApi.test.tsx rename to plugins/app/src/apis/SwappableComponentsApi/DefaultSwappableComponentsApi.test.tsx diff --git a/packages/frontend-app-api/src/apis/implementations/SwappableComponentsApi/DefaultSwappableComponentsApi.tsx b/plugins/app/src/apis/SwappableComponentsApi/DefaultSwappableComponentsApi.tsx similarity index 100% rename from packages/frontend-app-api/src/apis/implementations/SwappableComponentsApi/DefaultSwappableComponentsApi.tsx rename to plugins/app/src/apis/SwappableComponentsApi/DefaultSwappableComponentsApi.tsx diff --git a/packages/frontend-app-api/src/apis/implementations/SwappableComponentsApi/index.ts b/plugins/app/src/apis/SwappableComponentsApi/index.ts similarity index 100% rename from packages/frontend-app-api/src/apis/implementations/SwappableComponentsApi/index.ts rename to plugins/app/src/apis/SwappableComponentsApi/index.ts diff --git a/plugins/app/src/extensions/LegacyComponentsApi.ts b/plugins/app/src/extensions/LegacyComponentsApi.ts new file mode 100644 index 0000000000..b9b0118aaa --- /dev/null +++ b/plugins/app/src/extensions/LegacyComponentsApi.ts @@ -0,0 +1,58 @@ +/* + * Copyright 2024 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 { + ApiBlueprint, + createApiRef, + ErrorDisplay, + NotFoundErrorPage, + Progress, +} from '@backstage/frontend-plugin-api'; +import { ComponentType } from 'react'; + +/** + * This is the old component API that has been replaced by the new SwappableComponentsApi. + * + * This backwards compatibility implementation exists to avoid breaking older plugins.$ + * + * This was added for the 1.42 release, and can be removed in the future. + * + * @internal + */ +export const LegacyComponentsApi = ApiBlueprint.make({ + name: 'components', + params: defineParams => + defineParams({ + api: createApiRef<{ + getComponent(ref: { id: string }): ComponentType; + }>({ id: 'core.components' }), + deps: {}, + factory: () => ({ + getComponent(ref) { + if (ref.id === 'core.components.progress') { + return Progress; + } + if (ref.id === 'core.components.notFoundErrorPage') { + return NotFoundErrorPage; + } + if (ref.id === 'core.components.errorBoundaryFallback') { + return ErrorDisplay; + } + throw new Error(`No implementation found for component ref ${ref}`); + }, + }), + }), +}); diff --git a/plugins/app/src/extensions/SwappableComponentsApi.ts b/plugins/app/src/extensions/SwappableComponentsApi.ts index 3964fc172a..ea57a6f487 100644 --- a/plugins/app/src/extensions/SwappableComponentsApi.ts +++ b/plugins/app/src/extensions/SwappableComponentsApi.ts @@ -20,8 +20,7 @@ import { ApiBlueprint, swappableComponentsApiRef, } from '@backstage/frontend-plugin-api'; -// eslint-disable-next-line @backstage/no-relative-monorepo-imports -import { DefaultSwappableComponentsApi } from '../../../../packages/frontend-app-api/src/apis/implementations/SwappableComponentsApi'; +import { DefaultSwappableComponentsApi } from '../apis/SwappableComponentsApi'; /** * Contains the shareable components installed into the app. diff --git a/plugins/app/src/extensions/index.ts b/plugins/app/src/extensions/index.ts index 3eea920bbd..3c84cb2779 100644 --- a/plugins/app/src/extensions/index.ts +++ b/plugins/app/src/extensions/index.ts @@ -21,6 +21,7 @@ export { AppRoot } from './AppRoot'; export { AppRoutes } from './AppRoutes'; export { AppThemeApi, DarkTheme, LightTheme } from './AppThemeApi'; export { SwappableComponentsApi } from './SwappableComponentsApi'; +export { LegacyComponentsApi } from './LegacyComponentsApi'; export { IconsApi } from './IconsApi'; export { FeatureFlagsApi } from './FeatureFlagsApi'; export { TranslationsApi } from './TranslationsApi'; diff --git a/plugins/app/src/plugin.ts b/plugins/app/src/plugin.ts index c898334430..233a8be591 100644 --- a/plugins/app/src/plugin.ts +++ b/plugins/app/src/plugin.ts @@ -36,6 +36,7 @@ import { Progress, NotFoundErrorPage, ErrorBoundary, + LegacyComponentsApi, } from './extensions'; import { apis } from './defaultApis'; @@ -65,5 +66,6 @@ export const appPlugin = createFrontendPlugin({ Progress, NotFoundErrorPage, ErrorBoundary, + LegacyComponentsApi, ], });