feat(app-defaults): replace drawer context with global store (#2691)

Author: rohitkrai03

workspaces/app-defaults/.changeset/giant-geese-occur.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-app-react': patch
+---
+
+Replace context based state with global store.

workspaces/app-defaults/packages/app/src/modules/nav/Sidebar.tsx

@@ -23,21 +23,41 @@ import {
 } from '@backstage/core-components';
 import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import { SidebarLogo } from './SidebarLogo';
+import { useAppDrawer } from '@red-hat-developer-hub/backstage-plugin-app-react';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
+import ChatIcon from '@material-ui/icons/Chat';
+import HelpIcon from '@material-ui/icons/Help';
 import { SidebarSearchModal } from '@backstage/plugin-search';
 import { UserSettingsSignInAvatar } from '@backstage/plugin-user-settings';
 import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
 
+const DrawerDemoItems = () => {
+  const { toggleDrawer } = useAppDrawer();
+  return (
+    <>
+      <SidebarItem
+        icon={() => <ChatIcon />}
+        text="Chat"
+        onClick={() => toggleDrawer('demo-chat')}
+      />
+      <SidebarItem
+        icon={() => <HelpIcon />}
+        text="Help"
+        onClick={() => toggleDrawer('demo-help')}
+      />
+    </>
+  );
+};
+
 export const SidebarContent = NavContentBlueprint.make({
   params: {
     component: ({ navItems }) => {
       const nav = navItems.withComponent(item => (
         <SidebarItem icon={() => item.icon} to={item.href} text={item.title} />
       ));
 
-      // Skipped items
-      nav.take('page:search'); // Using search modal instead
+      nav.take('page:search');
 
       return (
         <Sidebar>
@@ -56,6 +76,7 @@ export const SidebarContent = NavContentBlueprint.make({
           </SidebarGroup>
           <SidebarSpace />
           <SidebarDivider />
+          <DrawerDemoItems />
           <NotificationsSidebarItem />
           <SidebarDivider />
           <SidebarGroup

workspaces/app-defaults/plugins/app-react/README.md

@@ -28,10 +28,11 @@ export default createApp({
 });
 ```
 
-This registers two extensions:
-
-- `app-root-wrapper:app/drawer-provider` -- wraps the app with `AppDrawerProvider` context
-- `app-root-element:app/drawer` -- renders the `ApplicationDrawer` outside the app layout
+This registers a single wrapper extension (`app-root-wrapper:app/drawer`) that
+renders the `ApplicationDrawer` around the app content and accepts drawer
+content contributions via inputs. Drawer state is managed by a global singleton
+store, so `useAppDrawer()` works from anywhere in the React tree without a
+wrapping provider.
 
 ## Plugin Author Guide
 
@@ -138,13 +139,12 @@ function MyDrawerContent() {
 ### Main entry (`@red-hat-developer-hub/backstage-plugin-app-react`)
 
 - `useAppDrawer` -- hook to control drawers
-- `AppDrawerProvider` -- context provider (used by the module internally)
 - `ApplicationDrawer` -- drawer renderer component
 - `DrawerPanel` -- low-level MUI drawer wrapper
-- `AppDrawerContent` / `AppDrawerApi` types
+- `AppDrawerContent` / `AppDrawerApi` / `ApplicationDrawerProps` / `DrawerPanelProps` types
 
 ### Alpha entry (`@red-hat-developer-hub/backstage-plugin-app-react/alpha`)
 
 - `appDrawerContentDataRef` -- extension data ref
 - `AppDrawerContentBlueprint` -- blueprint for contributing drawers
-- `appDrawerModule` -- frontend module (registers provider + renderer)
+- `appDrawerModule` -- frontend module (registers the drawer wrapper extension)

workspaces/app-defaults/plugins/app-react/package.json

@@ -49,6 +49,7 @@
     "@backstage/core-plugin-api": "^1.12.4",
     "@backstage/frontend-plugin-api": "^0.15.1",
     "@backstage/plugin-app-react": "^0.2.1",
+    "@backstage/version-bridge": "^1.0.12",
     "@mui/material": "5.18.0"
   },
   "peerDependencies": {

workspaces/app-defaults/plugins/app-react/report-alpha.api.md

@@ -70,11 +70,6 @@ export const appDrawerContentDataRef: ConfigurableExtensionDataRef<
 // @alpha
 export const appDrawerModule: FrontendModule;
 
-// @public
-export const AppDrawerProvider: (input: {
-  children: React.ReactNode;
-}) => JSX_2.Element;
-
 // @public
 export const ApplicationDrawer: (
   input: ApplicationDrawerProps,

workspaces/app-defaults/plugins/app-react/report.api.md

@@ -25,11 +25,6 @@ export interface AppDrawerContent {
   resizable?: boolean;
 }
 
-// @public
-export const AppDrawerProvider: (input: {
-  children: React.ReactNode;
-}) => JSX_2.Element;
-
 // @public
 export const ApplicationDrawer: (
   input: ApplicationDrawerProps,

workspaces/app-defaults/plugins/app-react/src/alpha.ts

@@ -15,10 +15,9 @@
  */
 
 /**
- * New Frontend System extension APIs for the RHDH app drawer.
+ * New Frontend System extension APIs for the RHDH app shell.
  *
  * @packageDocumentation
  */
 
-export * from './extensions';
-export type * from './drawer';
+export * from './drawer';

workspaces/app-defaults/plugins/app-react/src/drawer/AppDrawerContext.tsx

@@ -16,9 +16,10 @@
 
 import { render, screen, act } from '@testing-library/react';
 
-import { AppDrawerProvider, useAppDrawer } from './AppDrawerContext';
+import { useAppDrawer } from '../hooks/useAppDrawer';
+import { drawerStore } from '../utils/drawerStore';
 import { ApplicationDrawer } from './ApplicationDrawer';
-import type { AppDrawerContent } from './types';
+import type { AppDrawerContent } from '../types';
 
 function OpenButton({ id }: { id: string }) {
   const { openDrawer } = useAppDrawer();
@@ -32,16 +33,15 @@ function CloseButton({ id }: { id: string }) {
 
 function renderWithProvider(contents: AppDrawerContent[]) {
   return render(
-    <AppDrawerProvider>
-      <ApplicationDrawer contents={contents}>
-        <OpenButton id="test-drawer" />
-        <CloseButton id="test-drawer" />
-      </ApplicationDrawer>
-    </AppDrawerProvider>,
+    <ApplicationDrawer contents={contents}>
+      <OpenButton id="test-drawer" />
+      <CloseButton id="test-drawer" />
+    </ApplicationDrawer>,
   );
 }
 
 describe('ApplicationDrawer', () => {
+  beforeEach(() => drawerStore.reset());
   afterEach(() => {
     document.body.classList.remove('docked-drawer-open');
     document.body.style.removeProperty('--docked-drawer-width');

…ct/src/drawer/ApplicationDrawer.test.tsx …er/components/ApplicationDrawer.test.tsxworkspaces/app-defaults/plugins/app-react/src/drawer/ApplicationDrawer.test.tsx renamed to workspaces/app-defaults/plugins/app-react/src/drawer/components/ApplicationDrawer.test.tsx workspaces/app-defaults/plugins/app-react/src/drawer/ApplicationDrawer.test.tsx renamed to workspaces/app-defaults/plugins/app-react/src/drawer/components/ApplicationDrawer.test.tsx

@@ -16,9 +16,9 @@
 
 import { useEffect, useRef } from 'react';
 
-import { useAppDrawer } from './AppDrawerContext';
+import { useAppDrawer } from '../hooks/useAppDrawer';
 import { DrawerPanel } from './DrawerPanel';
-import type { AppDrawerContent } from './types';
+import type { AppDrawerContent } from '../types';
 
 const DEFAULT_WIDTH = 500;