From ff72f0feee179c54ac5c48f1d17aea9299360643 Mon Sep 17 00:00:00 2001 From: fullsend-code <278716306+fullsend-ai-coder[bot]@users.noreply.github.com> Date: Mon, 24 Aug 2026 09:38:58 +0000 Subject: [PATCH] feat(#4037): move app drawer extension and module into app-defaults Move appDrawerExtension and appDrawerModule from the app-react plugin into the app-defaults plugin, where default module registrations belong. The app-react plugin retains the reusable building blocks (AppDrawerContentBlueprint, appDrawerContentDataRef, useAppDrawer, ApplicationDrawer, and all drawer types). Changes: - Create appDrawerModule.tsx in app-defaults with the extension and module definitions, importing UI components from app-react. - Export appDrawerExtension and appDrawerModule from the app-defaults main entry point. - Add ./app-drawer-module subpath that default-exports appDrawerModule for Scalprum / module-federation dynamic loading. - Update appDefaultsModule to import appDrawerExtension locally. - Remove appDrawerExtension, appDrawerModule, and ./app-drawer-module subpath from app-react. - Update the sample app to import appDrawerModule from app-defaults and add app-defaults as a dependency of the app package. - Regenerate API reports for both packages. Note: Pre-commit hook (lint-staged eslint --fix) failed because the @backstage/no-undeclared-imports rule's auto-fixer attempted yarn add in the sandbox. The lint errors are resolved by the package.json dependency addition included in this commit. Tests, linting, tsc, prettier, and API reports all pass independently. Closes #4037 --- .../.changeset/move-drawer-to-app-defaults.md | 24 +++++++++++++ .../app-defaults/packages/app/package.json | 1 + .../app-defaults/packages/app/src/App.tsx | 6 ++-- .../plugins/app-defaults/package.json | 5 +++ .../report-app-drawer-module.api.md | 2 +- .../plugins/app-defaults/report.api.md | 36 +++++++++++++++++++ .../app-defaults/src/appDefaultsModule.ts | 7 ++-- .../src}/appDrawerModule.tsx | 5 ++- .../src/appDrawerModuleExport.ts | 2 +- .../plugins/app-defaults/src/index.ts | 1 + .../plugins/app-react/package.json | 4 --- .../plugins/app-react/report.api.md | 31 ---------------- .../plugins/app-react/src/drawer/index.ts | 4 --- .../plugins/app-react/src/index.ts | 1 - workspaces/app-defaults/yarn.lock | 4 ++- 15 files changed, 79 insertions(+), 54 deletions(-) create mode 100644 workspaces/app-defaults/.changeset/move-drawer-to-app-defaults.md rename workspaces/app-defaults/plugins/{app-react => app-defaults}/report-app-drawer-module.api.md (96%) rename workspaces/app-defaults/plugins/{app-react/src/drawer/extensions => app-defaults/src}/appDrawerModule.tsx (91%) rename workspaces/app-defaults/plugins/{app-react => app-defaults}/src/appDrawerModuleExport.ts (90%) diff --git a/workspaces/app-defaults/.changeset/move-drawer-to-app-defaults.md b/workspaces/app-defaults/.changeset/move-drawer-to-app-defaults.md new file mode 100644 index 00000000000..2306b14f9de --- /dev/null +++ b/workspaces/app-defaults/.changeset/move-drawer-to-app-defaults.md @@ -0,0 +1,24 @@ +--- +'@red-hat-developer-hub/backstage-plugin-app-defaults': minor +'@red-hat-developer-hub/backstage-plugin-app-react': major +--- + +Move `appDrawerExtension` and `appDrawerModule` from `app-react` to +`app-defaults`. + +- `@red-hat-developer-hub/backstage-plugin-app-defaults` now exports + `appDrawerExtension` and `appDrawerModule` from its main entry point, + and adds a `./app-drawer-module` subpath that default-exports + `appDrawerModule` for Scalprum / module-federation dynamic loading. + +- **BREAKING**: `@red-hat-developer-hub/backstage-plugin-app-react` no + longer exports `appDrawerExtension` or `appDrawerModule`. The + `./app-drawer-module` subpath has been removed. Update imports: + + ```diff + -import { appDrawerModule } from '@red-hat-developer-hub/backstage-plugin-app-react'; + +import { appDrawerModule } from '@red-hat-developer-hub/backstage-plugin-app-defaults'; + ``` + + `AppDrawerContentBlueprint`, `appDrawerContentDataRef`, `useAppDrawer`, + and all drawer types remain in `app-react`. diff --git a/workspaces/app-defaults/packages/app/package.json b/workspaces/app-defaults/packages/app/package.json index b8071fbabce..e7f995d22b8 100644 --- a/workspaces/app-defaults/packages/app/package.json +++ b/workspaces/app-defaults/packages/app/package.json @@ -44,6 +44,7 @@ "@mui/icons-material": "^5.18.0", "@mui/material": "^5.18.0", "@red-hat-developer-hub/backstage-plugin-app-auth": "workspace:^", + "@red-hat-developer-hub/backstage-plugin-app-defaults": "workspace:^", "@red-hat-developer-hub/backstage-plugin-app-integrations": "workspace:^", "@red-hat-developer-hub/backstage-plugin-app-react": "workspace:^", "@red-hat-developer-hub/backstage-plugin-global-header": "^1.21.0", diff --git a/workspaces/app-defaults/packages/app/src/App.tsx b/workspaces/app-defaults/packages/app/src/App.tsx index bcc187c2006..3be0661f1a7 100644 --- a/workspaces/app-defaults/packages/app/src/App.tsx +++ b/workspaces/app-defaults/packages/app/src/App.tsx @@ -19,10 +19,8 @@ import catalogPlugin from '@backstage/plugin-catalog/alpha'; import scaffolderPlugin from '@backstage/plugin-scaffolder/alpha'; import { appAuthModule } from '@red-hat-developer-hub/backstage-plugin-app-auth'; import { appIntegrationsModule } from '@red-hat-developer-hub/backstage-plugin-app-integrations'; -import { - appDrawerModule, - templateCardModule, -} from '@red-hat-developer-hub/backstage-plugin-app-react'; +import { appDrawerModule } from '@red-hat-developer-hub/backstage-plugin-app-defaults'; +import { templateCardModule } from '@red-hat-developer-hub/backstage-plugin-app-react'; import { globalHeaderModule, globalHeaderTranslationsModule, diff --git a/workspaces/app-defaults/plugins/app-defaults/package.json b/workspaces/app-defaults/plugins/app-defaults/package.json index 8c4eb0f1235..8db2929d4e7 100644 --- a/workspaces/app-defaults/plugins/app-defaults/package.json +++ b/workspaces/app-defaults/plugins/app-defaults/package.json @@ -7,10 +7,14 @@ "types": "src/index.ts", "exports": { ".": "./src/index.ts", + "./app-drawer-module": "./src/appDrawerModuleExport.ts", "./package.json": "./package.json" }, "typesVersions": { "*": { + "app-drawer-module": [ + "src/appDrawerModuleExport.ts" + ], "package.json": [ "package.json" ] @@ -44,6 +48,7 @@ }, "dependencies": { "@backstage/frontend-plugin-api": "^0.17.2", + "@backstage/plugin-app-react": "^0.2.4", "@red-hat-developer-hub/backstage-plugin-app-react": "workspace:^" }, "peerDependencies": { diff --git a/workspaces/app-defaults/plugins/app-react/report-app-drawer-module.api.md b/workspaces/app-defaults/plugins/app-defaults/report-app-drawer-module.api.md similarity index 96% rename from workspaces/app-defaults/plugins/app-react/report-app-drawer-module.api.md rename to workspaces/app-defaults/plugins/app-defaults/report-app-drawer-module.api.md index f25a8faed46..03a95b0cd7e 100644 --- a/workspaces/app-defaults/plugins/app-react/report-app-drawer-module.api.md +++ b/workspaces/app-defaults/plugins/app-defaults/report-app-drawer-module.api.md @@ -1,4 +1,4 @@ -## API Report File for "@red-hat-developer-hub/backstage-plugin-app-react" +## API Report File for "@red-hat-developer-hub/backstage-plugin-app-defaults" > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). diff --git a/workspaces/app-defaults/plugins/app-defaults/report.api.md b/workspaces/app-defaults/plugins/app-defaults/report.api.md index 5463d2b2442..66a5d645a25 100644 --- a/workspaces/app-defaults/plugins/app-defaults/report.api.md +++ b/workspaces/app-defaults/plugins/app-defaults/report.api.md @@ -3,10 +3,46 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +import { AppDrawerContent } from '@red-hat-developer-hub/backstage-plugin-app-react'; +import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api'; +import { ExtensionDataRef } from '@backstage/frontend-plugin-api'; +import { ExtensionInput } from '@backstage/frontend-plugin-api'; import { FrontendModule } from '@backstage/frontend-plugin-api'; +import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api'; +import { ReactNode } from 'react'; // @public const appDefaultsModule: FrontendModule; export { appDefaultsModule }; export default appDefaultsModule; + +// @public +export const appDrawerExtension: OverridableExtensionDefinition<{ + config: {}; + configInput: {}; + output: ExtensionDataRef< + (props: { children: ReactNode }) => JSX.Element | null, + 'app.root.wrapper', + {} + >; + inputs: { + drawers: ExtensionInput< + ConfigurableExtensionDataRef, + { + singleton: false; + optional: false; + internal: false; + } + >; + }; + kind: 'app-root-wrapper'; + name: 'drawer'; + params: { + Component?: [error: 'Use the `component` parameter instead']; + component: (props: { children: ReactNode }) => JSX.Element | null; + }; +}>; + +// @public +export const appDrawerModule: FrontendModule; ``` diff --git a/workspaces/app-defaults/plugins/app-defaults/src/appDefaultsModule.ts b/workspaces/app-defaults/plugins/app-defaults/src/appDefaultsModule.ts index 68185ed1d07..0041721ff53 100644 --- a/workspaces/app-defaults/plugins/app-defaults/src/appDefaultsModule.ts +++ b/workspaces/app-defaults/plugins/app-defaults/src/appDefaultsModule.ts @@ -15,10 +15,9 @@ */ import { createFrontendModule } from '@backstage/frontend-plugin-api'; -import { - appDrawerExtension, - templateCardExtension, -} from '@red-hat-developer-hub/backstage-plugin-app-react'; +import { templateCardExtension } from '@red-hat-developer-hub/backstage-plugin-app-react'; + +import { appDrawerExtension } from './appDrawerModule'; /** * RHDH app module for `pluginId: 'app'`. diff --git a/workspaces/app-defaults/plugins/app-react/src/drawer/extensions/appDrawerModule.tsx b/workspaces/app-defaults/plugins/app-defaults/src/appDrawerModule.tsx similarity index 91% rename from workspaces/app-defaults/plugins/app-react/src/drawer/extensions/appDrawerModule.tsx rename to workspaces/app-defaults/plugins/app-defaults/src/appDrawerModule.tsx index 8981b56e4fe..9b16da6b051 100644 --- a/workspaces/app-defaults/plugins/app-react/src/drawer/extensions/appDrawerModule.tsx +++ b/workspaces/app-defaults/plugins/app-defaults/src/appDrawerModule.tsx @@ -19,9 +19,8 @@ import { createFrontendModule, } from '@backstage/frontend-plugin-api'; import { AppRootWrapperBlueprint } from '@backstage/plugin-app-react'; - -import { ApplicationDrawer } from '../../legacy/ApplicationDrawer'; -import { appDrawerContentDataRef } from './appDrawerContentDataRef'; +import { appDrawerContentDataRef } from '@red-hat-developer-hub/backstage-plugin-app-react'; +import { ApplicationDrawer } from '@red-hat-developer-hub/backstage-plugin-app-react/legacy'; /** * Wrapper extension that renders the ApplicationDrawer around the app content. diff --git a/workspaces/app-defaults/plugins/app-react/src/appDrawerModuleExport.ts b/workspaces/app-defaults/plugins/app-defaults/src/appDrawerModuleExport.ts similarity index 90% rename from workspaces/app-defaults/plugins/app-react/src/appDrawerModuleExport.ts rename to workspaces/app-defaults/plugins/app-defaults/src/appDrawerModuleExport.ts index cbce1675ca4..0fcd614232b 100644 --- a/workspaces/app-defaults/plugins/app-react/src/appDrawerModuleExport.ts +++ b/workspaces/app-defaults/plugins/app-defaults/src/appDrawerModuleExport.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { appDrawerModule as default } from './drawer'; +export { appDrawerModule as default } from './appDrawerModule'; diff --git a/workspaces/app-defaults/plugins/app-defaults/src/index.ts b/workspaces/app-defaults/plugins/app-defaults/src/index.ts index 1ec5454f7e6..9198d2f80f9 100644 --- a/workspaces/app-defaults/plugins/app-defaults/src/index.ts +++ b/workspaces/app-defaults/plugins/app-defaults/src/index.ts @@ -21,5 +21,6 @@ */ export { appDefaultsModule } from './appDefaultsModule'; +export { appDrawerExtension, appDrawerModule } from './appDrawerModule'; export { appDefaultsModule as default } from './appDefaultsModule'; diff --git a/workspaces/app-defaults/plugins/app-react/package.json b/workspaces/app-defaults/plugins/app-react/package.json index ccc6afe82ea..6d423c563a6 100644 --- a/workspaces/app-defaults/plugins/app-react/package.json +++ b/workspaces/app-defaults/plugins/app-react/package.json @@ -8,7 +8,6 @@ "exports": { ".": "./src/index.ts", "./legacy": "./src/legacy/index.ts", - "./app-drawer-module": "./src/appDrawerModuleExport.ts", "./package.json": "./package.json" }, "typesVersions": { @@ -16,9 +15,6 @@ "legacy": [ "src/legacy/index.ts" ], - "app-drawer-module": [ - "src/appDrawerModuleExport.ts" - ], "package.json": [ "package.json" ] diff --git a/workspaces/app-defaults/plugins/app-react/report.api.md b/workspaces/app-defaults/plugins/app-react/report.api.md index b2365ae0b2d..fcdac61449c 100644 --- a/workspaces/app-defaults/plugins/app-react/report.api.md +++ b/workspaces/app-defaults/plugins/app-react/report.api.md @@ -10,7 +10,6 @@ import { ExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionInput } from '@backstage/frontend-plugin-api'; import { FrontendModule } from '@backstage/frontend-plugin-api'; import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api'; -import { ReactNode } from 'react'; import { SwappableComponentRef } from '@backstage/frontend-plugin-api'; // @public @@ -71,36 +70,6 @@ export const appDrawerContentDataRef: ConfigurableExtensionDataRef< {} >; -// @public -export const appDrawerExtension: OverridableExtensionDefinition<{ - config: {}; - configInput: {}; - output: ExtensionDataRef< - (props: { children: ReactNode }) => JSX.Element | null, - 'app.root.wrapper', - {} - >; - inputs: { - drawers: ExtensionInput< - ConfigurableExtensionDataRef, - { - singleton: false; - optional: false; - internal: false; - } - >; - }; - kind: 'app-root-wrapper'; - name: 'drawer'; - params: { - Component?: [error: 'Use the `component` parameter instead']; - component: (props: { children: ReactNode }) => JSX.Element | null; - }; -}>; - -// @public -export const appDrawerModule: FrontendModule; - // @public export interface ApplicationDrawerProps { children: React.ReactNode; diff --git a/workspaces/app-defaults/plugins/app-react/src/drawer/index.ts b/workspaces/app-defaults/plugins/app-react/src/drawer/index.ts index d316ca04a8f..43479079c39 100644 --- a/workspaces/app-defaults/plugins/app-react/src/drawer/index.ts +++ b/workspaces/app-defaults/plugins/app-react/src/drawer/index.ts @@ -20,10 +20,6 @@ export { DrawerPanel } from '../legacy/DrawerPanel'; export { appDrawerContentDataRef } from './extensions/appDrawerContentDataRef'; export { AppDrawerContentBlueprint } from './extensions/AppDrawerContentBlueprint'; -export { - appDrawerExtension, - appDrawerModule, -} from './extensions/appDrawerModule'; export type { ApplicationDrawerProps } from '../legacy/ApplicationDrawer'; export type { DrawerPanelProps } from '../legacy/DrawerPanel'; diff --git a/workspaces/app-defaults/plugins/app-react/src/index.ts b/workspaces/app-defaults/plugins/app-react/src/index.ts index 189a5f03614..1028249c1a0 100644 --- a/workspaces/app-defaults/plugins/app-react/src/index.ts +++ b/workspaces/app-defaults/plugins/app-react/src/index.ts @@ -22,7 +22,6 @@ export { AppDrawerContentBlueprint } from './drawer'; export { appDrawerContentDataRef } from './drawer'; -export { appDrawerExtension, appDrawerModule } from './drawer'; export { useAppDrawer } from './drawer'; export type { AppDrawerContent, AppDrawerApi } from './drawer'; diff --git a/workspaces/app-defaults/yarn.lock b/workspaces/app-defaults/yarn.lock index 75cee91ba64..b4b4b4b0ca6 100644 --- a/workspaces/app-defaults/yarn.lock +++ b/workspaces/app-defaults/yarn.lock @@ -9481,12 +9481,13 @@ __metadata: languageName: unknown linkType: soft -"@red-hat-developer-hub/backstage-plugin-app-defaults@workspace:plugins/app-defaults": +"@red-hat-developer-hub/backstage-plugin-app-defaults@workspace:^, @red-hat-developer-hub/backstage-plugin-app-defaults@workspace:plugins/app-defaults": version: 0.0.0-use.local resolution: "@red-hat-developer-hub/backstage-plugin-app-defaults@workspace:plugins/app-defaults" dependencies: "@backstage/cli": "npm:^0.36.3" "@backstage/frontend-plugin-api": "npm:^0.17.2" + "@backstage/plugin-app-react": "npm:^0.2.4" "@backstage/test-utils": "npm:^1.7.19" "@red-hat-developer-hub/backstage-plugin-app-react": "workspace:^" "@testing-library/jest-dom": "npm:^6.0.0" @@ -14283,6 +14284,7 @@ __metadata: "@mui/material": "npm:^5.18.0" "@playwright/test": "npm:1.62.1" "@red-hat-developer-hub/backstage-plugin-app-auth": "workspace:^" + "@red-hat-developer-hub/backstage-plugin-app-defaults": "workspace:^" "@red-hat-developer-hub/backstage-plugin-app-integrations": "workspace:^" "@red-hat-developer-hub/backstage-plugin-app-react": "workspace:^" "@red-hat-developer-hub/backstage-plugin-global-header": "npm:^1.21.0"