redhat-developer · its-mitesh-kumar · Jun 18, 2026 · Jun 18, 2026 · Jun 20, 2026
@@ -16,14 +16,13 @@
 | @backstage/plugin-techdocs                       | package.json:40:6 | error    |
 | @backstage/plugin-signals                        | package.json:39:6 | error    |
 | @backstage/plugin-org                            | package.json:36:6 | error    |
-| react-router                                     | package.json:50:6 | error    |
+| react-router                                     | package.json:55:6 | error    |
 
-## Unused devDependencies (4)
+## Unused devDependencies (3)
 
 | Name                           | Location          | Severity |
 | :----------------------------- | :---------------- | :------- |
-| @backstage/frontend-test-utils | package.json:54:6 | error    |
-| @testing-library/user-event    | package.json:59:6 | error    |
-| @testing-library/dom           | package.json:56:6 | error    |
-| cross-env                      | package.json:61:6 | error    |
+| @backstage/frontend-test-utils | package.json:59:6 | error    |
+| @testing-library/user-event    | package.json:64:6 | error    |
+| cross-env                      | package.json:66:6 | error    |
 
@@ -45,6 +45,7 @@
     "@material-ui/icons": "^4.9.1",
     "@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",

@@ -18,7 +18,7 @@ import { createApp } from '@backstage/frontend-defaults';
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
 import { appAuthModule } from '@red-hat-developer-hub/backstage-plugin-app-auth/alpha';
 import { appIntegrationsModule } from '@red-hat-developer-hub/backstage-plugin-app-integrations/alpha';
-import { appDrawerModule } from '@red-hat-developer-hub/backstage-plugin-app-react/alpha';
+import appDefaultsModule from '@red-hat-developer-hub/backstage-plugin-app-defaults';
 import {
   globalHeaderModule,
   globalHeaderTranslationsModule,
@@ -32,7 +32,7 @@ export default createApp({
     navModule,
     appAuthModule,
     appIntegrationsModule,
-    appDrawerModule,
+    appDefaultsModule,
     drawerDemoModule,
     globalHeaderModule,
     globalHeaderTranslationsModule,

@@ -15,7 +15,7 @@
  */
 
 import { createFrontendModule } from '@backstage/frontend-plugin-api';
-import { AppDrawerContentBlueprint } from '@red-hat-developer-hub/backstage-plugin-app-react/alpha';
+import { AppDrawerContentBlueprint } from '@red-hat-developer-hub/backstage-plugin-app-react';
 import { GlobalHeaderMenuItemBlueprint } from '@red-hat-developer-hub/backstage-plugin-global-header/alpha';
 import {
   ChatDrawerContent,

@@ -0,0 +1,9 @@
+# Knip report
+
+## Unused devDependencies (2)
+
+| Name                   | Location          | Severity |
+| :--------------------- | :---------------- | :------- |
+| @testing-library/react | package.json:64:6 | error    |
+| @backstage/test-utils  | package.json:62:6 | error    |
+
@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
@@ -0,0 +1,79 @@
+# @red-hat-developer-hub/backstage-plugin-app-defaults
+
+Defaults app plugin extensions for RHDH. Provides the application drawer system
+that lets plugins contribute persistent side panels with host-owned state.
+
+## Installation
+
+Add the package as a dependency in your app:
+
+```bash
+yarn add @red-hat-developer-hub/backstage-plugin-app-default
+```
+
+## App Integration
+
+Register the `appDefaults` module, or just the drawer module in your app's `createApp` call:
+
+```typescript
+import { createApp } from '@backstage/frontend-defaults';
+import appDefaultsModule from '@red-hat-developer-hub/backstage-plugin-app-defaults';
+
+export default createApp({
+  features: [
+    appDefaultsModule,
+    // ...other plugins and modules
+  ],
+});
+```
+
+Alternative you can install exported extensions yourself:
+
+```typescript
+import { createApp } from '@backstage/frontend-defaults';
+import { appDrawerExtensions } from '@red-hat-developer-hub/backstage-plugin-app-defaults';
+
+export const appExtensions = createFrontendModule({
+  pluginId: 'app',
+  extensions: [...appDrawerExtensions],
+});
+
+export default createApp({
+  features: [
+    appExtensions,
+    // ...other plugins and modules
+  ],
+});
+```
+
+## Drawer
+
+### Added extension
+
+This app module registers an app wrapper extension (`app-root-wrapper:app/drawer`)
+that renders the `ApplicationDrawer` around the app content and accepts drawer
+content contributions via inputs.
+
+The drawer state is managed by a global singleton store. `useAppDrawer()` from
+`@red-hat-developer-hub/backstage-plugin-app-react` will work from anywhere
+in the React tree without a wrapping provider.
+
+See `@red-hat-developer-hub/backstage-plugin-app-react` for more information
+how to contribute a plugin drawer and how to control (open, close, toggle)
+drawers.
+
+### App-Config Overrides
+
+Deployers can override `defaultWidth`, `resizable`, and `priority` per-drawer in
+`app-config.yaml` without changing plugin code. Config values take precedence
+over the `params` set in code:
+
+```yaml
+app:
+  extensions:
+    - app-drawer-content:my-plugin/my-drawer:
+        config:
+          defaultWidth: 600
+          resizable: false
+          priority: 10
+```
@@ -0,0 +1,2 @@
+# Knip report
+
@@ -0,0 +1,45 @@
+{
+  "name": "@red-hat-developer-hub/backstage-plugin-app-defaults",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "description": "Defaults app plugin extensions for RHDH (for now just a Drawer extension).",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin-module",
+    "pluginId": "app",
+    "pluginPackage": "@backstage/plugin-app"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/frontend-plugin-api": "^0.15.0",
+    "@backstage/plugin-app-react": "^0.2.1",
+    "@mui/material": "5.18.0",
+    "@red-hat-developer-hub/backstage-plugin-app-react": "workspace:^"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.36.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}
@@ -0,0 +1,56 @@
+## 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/).
+
+```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';
+
+// Warning: (ae-missing-release-tag) "appDefaults" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+const appDefaults: FrontendModule;
+export { appDefaults };
+export default appDefaults;
+
+// Warning: (ae-missing-release-tag) "appDrawerExtensions" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const appDrawerExtensions: OverridableExtensionDefinition<{
+  config: {};
+  configInput: {};
+  output: ExtensionDataRef<
+    (props: { children: ReactNode }) => JSX.Element | null,
+    'app.root.wrapper',
+    {}
+  >;
+  inputs: {
+    drawers: ExtensionInput<
+      ConfigurableExtensionDataRef<AppDrawerContent, 'app.drawer.content', {}>,
+      {
+        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;
+  };
+}>[];
+
+// Warnings were encountered during analysis:
+//
+// src/drawer/extensions.d.ts:30:22 - (ae-undocumented) Missing documentation for "appDrawerExtensions".
+// src/module.d.ts:2:22 - (ae-undocumented) Missing documentation for "appDefaults".
+
+// (No @packageDocumentation comment for this package)
+```
@@ -16,10 +16,13 @@
 
 import { render, screen, act } from '@testing-library/react';
 
-import { useAppDrawer } from '../hooks/useAppDrawer';
-import { drawerStore } from '../utils/drawerStore';
+import {
+  useAppDrawer,
+  drawerStore,
+} from '@red-hat-developer-hub/backstage-plugin-app-react';
+import type { AppDrawerContent } from '@red-hat-developer-hub/backstage-plugin-app-react';
+
 import { ApplicationDrawer } from './ApplicationDrawer';
-import type { AppDrawerContent } from '../types';
 
 function OpenButton({ id }: { id: string }) {
   const { openDrawer } = useAppDrawer();

@@ -16,9 +16,10 @@
 
 import { useEffect, useRef } from 'react';
 
-import { useAppDrawer } from '../hooks/useAppDrawer';
+import { useAppDrawer } from '@red-hat-developer-hub/backstage-plugin-app-react';
+import type { AppDrawerContent } from '@red-hat-developer-hub/backstage-plugin-app-react';
+
 import { DrawerPanel } from './DrawerPanel';
-import type { AppDrawerContent } from '../types';
 
 const DEFAULT_WIDTH = 500;
 

@@ -14,24 +14,23 @@
  * limitations under the License.
  */
 
-import {
-  createExtensionInput,
-  createFrontendModule,
-} from '@backstage/frontend-plugin-api';
+import { createExtensionInput } from '@backstage/frontend-plugin-api';
 import { AppRootWrapperBlueprint } from '@backstage/plugin-app-react';
 
-import { ApplicationDrawer } from '../components/ApplicationDrawer';
-import { appDrawerContentDataRef } from './appDrawerContentDataRef';
+import { appDrawerContentDataRef } from '@red-hat-developer-hub/backstage-plugin-app-react';
+
+import { ApplicationDrawer } from './components/ApplicationDrawer';
 
 /**
  * Wrapper extension that renders the ApplicationDrawer around the app content.
  *
  * Uses AppRootWrapperBlueprint.makeWithOverrides to stay aligned with the
  * blueprint API while adding a custom `drawers` input for content extensions.
- * Drawer state is managed by a global singleton store (see drawerStore.ts)
- * rather than a React context provider.
+ * Drawer state is managed by a global singleton store.
+ *
+ * @public
  */
-const appDrawerExtension = AppRootWrapperBlueprint.makeWithOverrides({
+export const appDrawerExtension = AppRootWrapperBlueprint.makeWithOverrides({
   name: 'drawer',
   inputs: {
     drawers: createExtensionInput([appDrawerContentDataRef]),
@@ -46,14 +45,4 @@ const appDrawerExtension = AppRootWrapperBlueprint.makeWithOverrides({
   },
 });
 
-/**
- * Frontend module that provides the app drawer system.
- * Registers a wrapper extension that renders the drawer and accepts
- * drawer content contributions via inputs.
- *
- * @alpha
- */
-export const appDrawerModule = createFrontendModule({
-  pluginId: 'app',
-  extensions: [appDrawerExtension],
-});
+export const appDrawerExtensions = [appDrawerExtension];
@@ -14,10 +14,4 @@
  * limitations under the License.
  */
 
-/**
- * New Frontend System extension APIs for the RHDH app shell.
- *
- * @packageDocumentation
- */
-
-export * from './drawer';
+export { appDrawerExtensions } from './extensions';
@@ -0,0 +1,18 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * 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.
+ */
+export * from './module';
+
+export { appDefaults as default } from './module';
@@ -0,0 +1,25 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * 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 { createFrontendModule } from '@backstage/frontend-plugin-api';
+
+import { appDrawerExtensions } from './drawer';
+
+export { appDrawerExtensions } from './drawer';
+
+export const appDefaults = createFrontendModule({
+  pluginId: 'app',
+  extensions: [...appDrawerExtensions],
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);