feat(quickstart): add quickstart menu item to header (#2898)

Signed-off-by: Rohit Rai <rohitkrai03@gmail.com>

Author: rohitkrai03

workspaces/app-defaults/.changeset/twelve-ants-flow.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-app-react': patch
+---
+
+Removed the header specific style overrides for drawer

workspaces/app-defaults/packages/app/package.json

@@ -50,6 +50,8 @@
     "@red-hat-developer-hub/backstage-plugin-app-auth": "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",
+    "material-icons": "^1.13.14",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router": "^6.30.2",

workspaces/app-defaults/packages/app/src/App.tsx

@@ -19,6 +19,10 @@ 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 {
+  globalHeaderModule,
+  globalHeaderTranslationsModule,
+} from '@red-hat-developer-hub/backstage-plugin-global-header/alpha';
 import { navModule } from './modules/nav';
 import { drawerDemoModule } from './modules/drawer-demo';
 
@@ -30,5 +34,7 @@ export default createApp({
     appIntegrationsModule,
     appDrawerModule,
     drawerDemoModule,
+    globalHeaderModule,
+    globalHeaderTranslationsModule,
   ],
 });

workspaces/app-defaults/packages/app/src/index.tsx

@@ -15,8 +15,23 @@
  */
 
 import '@backstage/cli/asset-types';
+import 'material-icons/iconfont/outlined.css';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import '@backstage/ui/css/styles.css';
 
+// TODO: Remove once @red-hat-developer-hub/backstage-plugin-global-header
+// publishes a version with built-in drawer support (width: auto + margin-right
+// on the AppBar). Tracked by the GlobalHeader.tsx change in the global-header
+// workspace.
+const style = document.createElement('style');
+style.textContent = `
+  #global-header {
+    width: auto;
+    margin-right: var(--docked-drawer-width, 0px);
+    transition: margin-right 225ms cubic-bezier(0, 0, 0.2, 1);
+  }
+`;
+document.head.appendChild(style);
+
 ReactDOM.createRoot(document.getElementById('root')!).render(App.createRoot());

workspaces/app-defaults/packages/app/src/modules/drawer-demo/DrawerDemoContent.tsx

@@ -15,6 +15,7 @@
  */
 
 import { useAppDrawer } from '@red-hat-developer-hub/backstage-plugin-app-react';
+import { GlobalHeaderMenuItem } from '@red-hat-developer-hub/backstage-plugin-global-header/alpha';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
@@ -121,3 +122,24 @@ export const HelpDrawerContent = () => {
     </Box>
   );
 };
+
+export const HelpDrawerMenuItem = ({
+  handleClose,
+}: {
+  handleClose?: () => void;
+}) => {
+  const { toggleDrawer } = useAppDrawer();
+
+  const handleClick = () => {
+    toggleDrawer('demo-help');
+    handleClose?.();
+  };
+
+  return (
+    <GlobalHeaderMenuItem
+      title="Help"
+      icon="help_outline"
+      onClick={handleClick}
+    />
+  );
+};

workspaces/app-defaults/packages/app/src/modules/drawer-demo/index.tsx

@@ -16,7 +16,12 @@
 
 import { createFrontendModule } from '@backstage/frontend-plugin-api';
 import { AppDrawerContentBlueprint } from '@red-hat-developer-hub/backstage-plugin-app-react/alpha';
-import { ChatDrawerContent, HelpDrawerContent } from './DrawerDemoContent';
+import { GlobalHeaderMenuItemBlueprint } from '@red-hat-developer-hub/backstage-plugin-global-header/alpha';
+import {
+  ChatDrawerContent,
+  HelpDrawerContent,
+  HelpDrawerMenuItem,
+} from './DrawerDemoContent';
 
 const chatDrawer = AppDrawerContentBlueprint.make({
   name: 'demo-chat',
@@ -37,7 +42,16 @@ const helpDrawer = AppDrawerContentBlueprint.make({
   },
 });
 
+const helpMenuItem = GlobalHeaderMenuItemBlueprint.make({
+  name: 'demo-help',
+  params: {
+    target: 'help',
+    component: HelpDrawerMenuItem,
+    priority: 50,
+  },
+});
+
 export const drawerDemoModule = createFrontendModule({
   pluginId: 'app',
-  extensions: [chatDrawer, helpDrawer],
+  extensions: [chatDrawer, helpDrawer, helpMenuItem],
 });

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

@@ -27,26 +27,18 @@ 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 ChatDrawerItem = () => {
   const { toggleDrawer } = useAppDrawer();
   return (
-    <>
-      <SidebarItem
-        icon={() => <ChatIcon />}
-        text="Chat"
-        onClick={() => toggleDrawer('demo-chat')}
-      />
-      <SidebarItem
-        icon={() => <HelpIcon />}
-        text="Help"
-        onClick={() => toggleDrawer('demo-help')}
-      />
-    </>
+    <SidebarItem
+      icon={() => <ChatIcon />}
+      text="Chat"
+      onClick={() => toggleDrawer('demo-chat')}
+    />
   );
 };
 
@@ -76,7 +68,7 @@ export const SidebarContent = NavContentBlueprint.make({
           </SidebarGroup>
           <SidebarSpace />
           <SidebarDivider />
-          <DrawerDemoItems />
+          <ChatDrawerItem />
           <NotificationsSidebarItem />
           <SidebarDivider />
           <SidebarGroup

workspaces/app-defaults/plugins/app-react/src/drawer/components/DrawerPanel.tsx

@@ -110,11 +110,9 @@ export const DrawerPanel = (props: DrawerPanelProps) => {
       open={isDrawerOpen}
       PaperProps={{
         style: { width: drawerWidth },
-      }}
-      sx={{
-        '& .MuiDrawer-paper': {
+        sx: {
           boxSizing: 'border-box',
-          backgroundColor: theme => {
+          backgroundColor: (theme: Record<string, any>) => {
             const palette = theme.palette as Record<string, any>;
             return (
               palette?.rhdh?.general?.sidebarBackgroundColor ||
@@ -123,12 +121,6 @@ export const DrawerPanel = (props: DrawerPanelProps) => {
           },
           justifyContent: 'space-between',
         },
-        'body:has(#global-header) &': {
-          '& .MuiDrawer-paper': {
-            top: '64px !important',
-            height: 'calc(100vh - 64px) !important',
-          },
-        },
       }}
     >
       {isResizable && (