[release-1.5] feat(global-header): update header plugin and enable it by default

.github/workflows/link-checker.yaml

@@ -18,6 +18,7 @@ jobs:
       with:
         config-file: '.github/workflows/link-checker.config.json'
         folder-path: 'docs/'
+        ignore: "https://code.visualstudio.com/docs/nodejs/nodejs-debugging"  # Ignores known false positives
 
     - name: Check markdown files in root
       uses: gaurav-nelson/github-action-markdown-link-check@v1

.ibm/pipelines/value_files/values_showcase-rbac.yaml

@@ -96,6 +96,9 @@ global:
         disabled: false
       - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
         disabled: false
+      # Disable global header plugin for now. See https://issues.redhat.com/browse/RHIDP-5474
+      - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
+        disabled: true
       - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-dynamic-home-page
         disabled: false
       # Enable tech-radar plugin.

.ibm/pipelines/value_files/values_showcase.yaml

@@ -94,6 +94,9 @@ global:
         disabled: false
       - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
         disabled: false
+      # Disable global header plugin for now. See https://issues.redhat.com/browse/RHIDP-5474
+      - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
+        disabled: true
       # Enable tech-radar plugins.
       - package: ./dynamic-plugins/dist/backstage-community-plugin-tech-radar
         disabled: false

app-config.dynamic-plugins.yaml

@@ -256,8 +256,7 @@ dynamicPlugins:
         - mountPoint: application/header
           importName: GlobalHeader
           config:
-            layout:
-              position: above-main-content
+            position: above-main-content # above-main-content | above-sidebar
     red-hat-developer-hub.backstage-plugin-global-floating-action-button:
       mountPoints:
         - mountPoint: application/listener

docs/dynamic-plugins/frontend-plugin-wiring.md

@@ -386,15 +386,14 @@ dynamicPlugins:
         - mountPoint: application/header # mount point for a global header
           importName: <header_component> # e.g., `GlobalHeader` for `red-hat-developer-hub.backstage-plugin-global-header`
           config:
-            layout:
-              position: above-main-content # options: `above-main-content` or `above-sidebar`
+            position: above-main-content # options: `above-main-content` or `above-sidebar`
 ```
 
 Each global header entry requires the following attributes:
 
 - `mountPoint`: Defines where the header will be added. Use `application/header` to specify it as a global header.
 - `importName`: Specifies the component exported by the global header plugin (e.g., `GlobalHeader`).
-- `config.layout.position`: Determines the header's position. Supported values are:
+- `config.position`: Determines the header's position. Supported values are:
   - `above-main-content`: Positions the header above the main content area.
   - `above-sidebar`: Positions the header above the sidebar.
 

dynamic-plugins.default.yaml

@@ -524,17 +524,70 @@ plugins:
                   text: Bulk import
   # Global Header
   - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
-    disabled: true
+    disabled: false
     pluginConfig:
+      app:
+        sidebar:
+          search: false
+          settings: false
       dynamicPlugins:
         frontend:
+          default.main-menu-items:
+            menuItems:
+              default.create:
+                title: ''
           red-hat-developer-hub.backstage-plugin-global-header:
             mountPoints:
               - mountPoint: application/header
                 importName: GlobalHeader
                 config:
-                  layout:
-                    position: above-main-content
+                  position: above-main-content # above-main-content | above-sidebar
+              - mountPoint: global.header/component
+                importName: SearchComponent
+                config:
+                  priority: 100
+              - mountPoint: global.header/component
+                importName: Spacer
+                config:
+                  priority: 99
+                  props:
+                    growFactor: 0
+              - mountPoint: global.header/component
+                importName: HeaderIconButton
+                config:
+                  priority: 90
+                  props:
+                    title: Create...
+                    icon: add
+                    to: create
+              - mountPoint: global.header/component
+                importName: SupportButton
+                config:
+                  priority: 80
+              - mountPoint: global.header/component
+                importName: NotificationButton
+                config:
+                  priority: 70
+              - mountPoint: global.header/component
+                importName: Divider
+                config:
+                  priority: 50
+              - mountPoint: global.header/component
+                importName: ProfileDropdown
+                config:
+                  priority: 10
+              - mountPoint: global.header/profile
+                importName: MenuItemLink
+                config:
+                  priority: 100
+                  props:
+                    title: Settings
+                    link: /settings
+                    icon: manageAccounts
+              - mountPoint: global.header/profile
+                importName: LogoutButton
+                config:
+                  priority: 10
 
   # Group: Global floating action button
   - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button

dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-header/.eslintrc.js

@@ -1 +1 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+module.exports = require("@backstage/cli/config/eslint-factory")(__dirname);

dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-header/package.json

@@ -1,6 +1,6 @@
 {
   "name": "red-hat-developer-hub-backstage-plugin-global-header",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@mui/material": "5.16.14",
-    "@red-hat-developer-hub/backstage-plugin-global-header": "0.0.2"
+    "@red-hat-developer-hub/backstage-plugin-global-header": "1.0.0"
   },
   "devDependencies": {
     "@backstage/cli": "0.29.6",

dynamic-plugins/wrappers/red-hat-developer-hub-backstage-plugin-global-header/src/index.ts

@@ -1 +1 @@
-export * from '@red-hat-developer-hub/backstage-plugin-global-header';
+export * from "@red-hat-developer-hub/backstage-plugin-global-header";

packages/app/package.json

@@ -45,7 +45,7 @@
     "@mui/icons-material": "5.16.14",
     "@mui/material": "5.16.14",
     "@mui/styled-engine": "5.16.14",
-    "@redhat-developer/red-hat-developer-hub-theme": "0.4.0",
+    "@redhat-developer/red-hat-developer-hub-theme": "0.5.0",
     "@scalprum/core": "0.8.1",
     "@scalprum/react-core": "0.9.3",
     "lodash": "4.17.21",

packages/app/src/components/DynamicRoot/CommonIcons.tsx

@@ -7,11 +7,15 @@ import Extension from '@mui/icons-material/ExtensionOutlined';
 import Favorite from '@mui/icons-material/Favorite';
 import FolderOpen from '@mui/icons-material/FolderOpenOutlined';
 import GppGood from '@mui/icons-material/GppGoodOutlined';
+import Help from '@mui/icons-material/HelpOutline';
 import Home from '@mui/icons-material/HomeOutlined';
 import InsertChart from '@mui/icons-material/InsertChartOutlined';
 import Layers from '@mui/icons-material/Layers';
 import List from '@mui/icons-material/List';
+import Logout from '@mui/icons-material/LogoutOutlined';
+import ManageAccounts from '@mui/icons-material/ManageAccountsOutlined';
 import MonitorHeart from '@mui/icons-material/MonitorHeartOutlined';
+import Notifications from '@mui/icons-material/NotificationsOutlined';
 import People from '@mui/icons-material/People';
 import QueryStats from '@mui/icons-material/QueryStatsOutlined';
 import Rule from '@mui/icons-material/RuleOutlined';
@@ -44,6 +48,10 @@ const CommonIcons: {
   feedback: Textsms,
   validate: Rule,
   security: GppGood,
+  support: Help,
+  notifications: Notifications,
+  manageAccounts: ManageAccounts,
+  logout: Logout,
 };
 
 export default CommonIcons;

packages/app/src/components/DynamicRoot/DynamicRootContext.tsx

@@ -54,7 +54,7 @@ export type ResolvedDynamicRoute = DynamicModuleEntry & {
   };
 };
 
-type ScalprumMountPointConfigBase = {
+export type ScalprumMountPointConfigBase = {
   layout?: Record<string, string>;
   props?: Record<string, any>;
 };

packages/app/src/components/Root/ApplicationHeaders.tsx

@@ -1,18 +1,47 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 
 import { ErrorBoundary } from '@backstage/core-components';
 
-import DynamicRootContext from '../DynamicRoot/DynamicRootContext';
+import DynamicRootContext, {
+  ScalprumMountPoint,
+  ScalprumMountPointConfigBase,
+} from '../DynamicRoot/DynamicRootContext';
 
-export const ApplicationHeaders = ({ position }: { position: string }) => {
+type Position = 'above-main-content' | 'above-sidebar';
+
+type ApplicationHeaderMountPointConfig = ScalprumMountPointConfigBase & {
+  position: Position;
+  layout?: React.CSSProperties;
+};
+
+type ApplicationHeaderMountPoint = ScalprumMountPoint & {
+  Component: React.ComponentType<
+    React.PropsWithChildren<{
+      position: Position;
+      layout?: React.CSSProperties;
+    }>
+  >;
+  config?: ApplicationHeaderMountPointConfig;
+};
+
+export const ApplicationHeaders = ({ position }: { position: Position }) => {
   const { mountPoints } = useContext(DynamicRootContext);
-  const appHeaderMountPoints = mountPoints['application/header'] ?? [];
-  return appHeaderMountPoints
-    ?.filter(({ config }) => config?.layout?.position === position)
-    .map(({ Component, config }, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <ErrorBoundary key={index}>
-        <Component {...config?.props} />
-      </ErrorBoundary>
-    ));
+
+  const appHeaderMountPoints = useMemo(() => {
+    const appHeaderMP = (mountPoints['application/header'] ??
+      []) as ApplicationHeaderMountPoint[];
+
+    return appHeaderMP.filter(({ config }) => config?.position === position);
+  }, [mountPoints, position]);
+
+  return appHeaderMountPoints.map(({ Component, config }, index) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <ErrorBoundary key={index}>
+      <Component
+        position={position}
+        {...config?.props}
+        layout={config?.layout}
+      />
+    </ErrorBoundary>
+  ));
 };

packages/app/src/components/Root/Root.tsx

@@ -36,6 +36,65 @@ import { MenuIcon } from './MenuIcon';
 import { SidebarLogo } from './SidebarLogo';
 
 const useStyles = makeStyles()({
+  /**
+   * This is a workaround to remove the fix height of the Page component
+   * to support the application headers (and the global header plugin)
+   * without having multiple scrollbars.
+   *
+   * This solves also the duplicate scrollbar issues in tech docs:
+   * https://issues.redhat.com/browse/RHIDP-4637 (Scrollbar for docs behaves weirdly if there are over a page of headings)
+   *
+   * Which was also reported and tried to fix upstream:
+   * https://github.com/backstage/backstage/issues/13717
+   * https://github.com/backstage/backstage/pull/14138
+   * https://github.com/backstage/backstage/issues/19427
+   * https://github.com/backstage/backstage/issues/22745
+   *
+   * See also
+   * https://github.com/backstage/backstage/blob/v1.35.0/packages/core-components/src/layout/Page/Page.tsx#L31-L34
+   *
+   * The following rules are based on the current DOM structure
+   *
+   * ```
+   * <body>
+   *   <div id="root">
+   *     // snackbars and toasts
+   *     <div className="pageWithoutFixHeight">
+   *       <nav />                               // Optional nav(s) if a header with position: above-sidebar is configured
+   *       <div>                                 // Backstage SidebarPage component
+   *         <nav />                             // Optional nav(s) if a header with position: above-main-content is configured
+   *         <nav aria-label="sidebar nav" />    // Sidebar content
+   *         <main />                            // Backstage Page component
+   *       </div>
+   *     </div>
+   *   </div>
+   *   // some modals and other overlays
+   * </body>
+   * ```
+   */
+  pageWithoutFixHeight: {
+    // Use 100vh for the complete viewport (similar to how Backstage does it)
+    // and makes the page content part scrollable below...
+    // But instead of using 100vh on the content below,
+    // we use it here so that it includes the header.
+    '> div': {
+      height: '100vh',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+
+    // But we unset the Backstage default 100vh value here and use flex box
+    // to grow to the full height of the parent container.
+    '> div > main': {
+      height: 'unset',
+      flexGrow: 1,
+    },
+    // This solves the same issue for techdocs, which was reported as
+    // https://issues.redhat.com/browse/RHIDP-4637
+    '.techdocs-reader-page > main': {
+      height: 'unset',
+    },
+  },
   sidebarItem: {
     textDecorationLine: 'none',
   },
@@ -51,7 +110,7 @@ const SideBarItemWrapper = (props: SidebarItemProps) => {
   return (
     <SidebarItem
       {...props}
-      className={`${sidebarItem}${props.className ?? ''}`}
+      className={`${sidebarItem} ${props.className ?? ''}`}
     />
   );
 };
@@ -103,6 +162,10 @@ const getMenuItem = (menuItem: ResolvedMenuItem, isNestedMenuItem = false) => {
 };
 
 export const Root = ({ children }: PropsWithChildren<{}>) => {
+  const {
+    classes: { pageWithoutFixHeight },
+  } = useStyles();
+
   const { dynamicRoutes, menuItems } = useContext(DynamicRootContext);
 
   const configApi = useApi(configApiRef);
@@ -260,18 +323,22 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
   };
 
   return (
-    <>
+    <div className={pageWithoutFixHeight}>
       <ApplicationHeaders position="above-sidebar" />
       <SidebarPage>
         <ApplicationHeaders position="above-main-content" />
         <Sidebar>
           {showLogo && <SidebarLogo />}
-          {showSearch && (
-            <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
-              <SidebarSearchModal />
-            </SidebarGroup>
+          {showSearch ? (
+            <>
+              <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+                <SidebarSearchModal />
+              </SidebarGroup>
+              <SidebarDivider />
+            </>
+          ) : (
+            <Box sx={{ height: '1.2rem' }} />
           )}
-          {(showLogo || showSearch) && <SidebarDivider />}
           <SidebarGroup label="Menu" icon={<MuiMenuIcon />}>
             {/* Global nav, not org-specific */}
             {renderMenuItems(true, false)}
@@ -317,6 +384,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
         </Sidebar>
         {children}
       </SidebarPage>
-    </>
+    </div>
   );
 };

packages/app/src/components/Root/SidebarLogo.tsx

@@ -55,7 +55,7 @@ export const SidebarLogo = () => {
           <LogoRender
             base64Logo={logoFullBase64URI}
             defaultLogo={<LogoFull />}
-            width={fullLogoWidth ?? 110}
+            width={fullLogoWidth ?? 170}
           />
         ) : (
           <LogoRender