From 6fc64919b934a18219466fd5d1f464acf6c2141b Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Fri, 8 Aug 2025 14:40:40 +0200 Subject: [PATCH 1/5] 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, ], }); From 1f961874d06d33b08e142292ce39a68e6061caf3 Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Fri, 8 Aug 2025 14:46:06 +0200 Subject: [PATCH 2/5] chore: updating changeset Signed-off-by: benjdlambert --- .changeset/component-refs-app.md | 2 ++ .changeset/fuzzy-ducks-jump.md | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.changeset/component-refs-app.md b/.changeset/component-refs-app.md index 5a7b6723bf..52bfa85c58 100644 --- a/.changeset/component-refs-app.md +++ b/.changeset/component-refs-app.md @@ -3,3 +3,5 @@ --- Default implementations of core components are now provided by this package. + +A backwards compatible `componentsApi` implementation is also provided from this package which uses the `SwappableComponentsApi` as the implementation. This backwards compatible wrapper will be removed in the future. diff --git a/.changeset/fuzzy-ducks-jump.md b/.changeset/fuzzy-ducks-jump.md index 9aa2288598..1a4064dc91 100644 --- a/.changeset/fuzzy-ducks-jump.md +++ b/.changeset/fuzzy-ducks-jump.md @@ -1,5 +1,5 @@ --- -'@backstage/core-compat-api': minor +'@backstage/core-compat-api': patch --- -**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. +The `compatWrapper` has been switched to use the new `SwappableComponentsApi` instead of the old `ComponentsApi` in its bridging to the old frontend system. From 62df274d5594d967b4ba765c99de80f91046e1e9 Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Fri, 8 Aug 2025 15:10:04 +0200 Subject: [PATCH 3/5] chore: fixing yarn.lock Signed-off-by: benjdlambert --- yarn.lock | 2 ++ 1 file changed, 2 insertions(+) diff --git a/yarn.lock b/yarn.lock index b15db89924..416086b59c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3835,6 +3835,7 @@ __metadata: "@backstage/test-utils": "workspace:^" "@backstage/theme": "workspace:^" "@backstage/types": "workspace:^" + "@backstage/version-bridge": "workspace:^" "@material-ui/core": "npm:^4.9.13" "@material-ui/icons": "npm:^4.9.1" "@material-ui/lab": "npm:^4.0.0-alpha.61" @@ -3848,6 +3849,7 @@ __metadata: react-dom: "npm:^18.0.2" react-router-dom: "npm:^6.3.0" react-use: "npm:^17.2.4" + zod: "npm:^3.22.4" peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 From 65e9e53245288839b76551d805924a3c2bc99cb2 Mon Sep 17 00:00:00 2001 From: Ben Lambert Date: Fri, 8 Aug 2025 15:32:21 +0200 Subject: [PATCH 4/5] Update plugins/app/src/extensions/LegacyComponentsApi.ts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fredrik Adelöw Signed-off-by: Ben Lambert --- plugins/app/src/extensions/LegacyComponentsApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/app/src/extensions/LegacyComponentsApi.ts b/plugins/app/src/extensions/LegacyComponentsApi.ts index b9b0118aaa..aa05a52826 100644 --- a/plugins/app/src/extensions/LegacyComponentsApi.ts +++ b/plugins/app/src/extensions/LegacyComponentsApi.ts @@ -26,7 +26,7 @@ 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 backwards compatibility implementation exists to avoid breaking older plugins. * * This was added for the 1.42 release, and can be removed in the future. * From f95f5fede0b30201fa3ca2d3054149e25bd37a71 Mon Sep 17 00:00:00 2001 From: benjdlambert Date: Mon, 11 Aug 2025 11:08:42 +0200 Subject: [PATCH 5/5] chore: theres a components api now too :tada: Signed-off-by: benjdlambert --- packages/frontend-defaults/src/createApp.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/frontend-defaults/src/createApp.test.tsx b/packages/frontend-defaults/src/createApp.test.tsx index 4200cf92b8..83a0dae230 100644 --- a/packages/frontend-defaults/src/createApp.test.tsx +++ b/packages/frontend-defaults/src/createApp.test.tsx @@ -392,6 +392,7 @@ describe('createApp', () => { + ] app [