feat(global-header): added config for default header components

dynamic-plugins.default.yaml

@@ -535,6 +535,68 @@ plugins:
                 config:
                   layout:
                     position: above-main-content
+              - mountPoint: global.header/component
+                importName: SearchComponent
+                config:
+                  type: search
+                  slot: header-start
+                  priority: 100
+              - mountPoint: global.header/component
+                importName: CreateDropdown
+                config:
+                  type: dropdown_button
+                  key: create
+                  slot: header-start
+                  priority: 90
+              - mountPoint: global.header/create
+                importName: SoftwareTemplatesSection
+                config:
+                  type: list
+                  priority: 10
+              - mountPoint: global.header/create
+                importName: RegisterAComponentSection
+                config:
+                  type: link
+              - mountPoint: global.header/component
+                importName: HeaderIconButton
+                config:
+                  type: icon_button
+                  slot: header-start
+                  priority: 80
+                  props:
+                    icon: support
+                    tooltip: Support (external site)
+              - mountPoint: global.header/component
+                importName: HeaderIconButton
+                config:
+                  type: icon_button
+                  slot: header-start
+                  priority: 70
+                  props:
+                    icon: notifications
+                    tooltip: Notifications
+                    to: /notifications
+              - mountPoint: global.header/component
+                importName: ProfileDropdown
+                config:
+                  type: dropdown_button
+                  key: profile
+                  slot: header-end
+                  priority: 0
+              - mountPoint: global.header/profile
+                importName: HeaderLink
+                config:
+                  type: link
+                  priority: 10
+                  props:
+                    title: Settings
+                    link: /settings
+                    icon: manageAccounts
+              - mountPoint: global.header/profile
+                importName: LogoutButton
+                config:
+                  type: logout
+                  priority: 0
 
   # 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": "0.0.6",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",

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/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/Root/Root.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
+import React, { PropsWithChildren, useState } from 'react';
 
 import {
   Sidebar,
@@ -27,9 +27,8 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import { makeStyles } from 'tss-react/mui';
 
-import DynamicRootContext, {
-  ResolvedMenuItem,
-} from '../DynamicRoot/DynamicRootContext';
+import { useDynamicSidebarConfiguration } from '../../utils/dynamicUI/useDynamicSidebarConfiguration';
+import { ResolvedMenuItem } from '../DynamicRoot/DynamicRootContext';
 import { ApplicationHeaders } from './ApplicationHeaders';
 import { MenuIcon } from './MenuIcon';
 import { SidebarLogo } from './SidebarLogo';
@@ -102,7 +101,8 @@ const getMenuItem = (menuItem: ResolvedMenuItem, isNestedMenuItem = false) => {
 };
 
 export const Root = ({ children }: PropsWithChildren<{}>) => {
-  const { dynamicRoutes, menuItems } = useContext(DynamicRootContext);
+  const { showSearchBar, showSettingsButton, dynamicRoutes, menuItems } =
+    useDynamicSidebarConfiguration();
   const [openItems, setOpenItems] = useState<{ [key: string]: boolean }>({});
 
   const { loading: loadingPermission, allowed: canDisplayRBACMenuItem } =
@@ -254,9 +254,11 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
         <ApplicationHeaders position="above-main-content" />
         <Sidebar>
           <SidebarLogo />
-          <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
-            <SidebarSearchModal />
-          </SidebarGroup>
+          {showSearchBar && (
+            <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+              <SidebarSearchModal />
+            </SidebarGroup>
+          )}
           <SidebarDivider />
           <SidebarGroup label="Menu" icon={<MuiMenuIcon />}>
             {/* Global nav, not org-specific */}
@@ -285,13 +287,15 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
             {renderMenuItems(false, true)}
           </SidebarGroup>
           <SidebarDivider />
-          <SidebarGroup
-            label="Settings"
-            to="/settings"
-            icon={<AccountCircleOutlinedIcon />}
-          >
-            <SidebarSettings icon={AccountCircleOutlinedIcon} />
-          </SidebarGroup>
+          {showSettingsButton && (
+            <SidebarGroup
+              label="Settings"
+              to="/settings"
+              icon={<AccountCircleOutlinedIcon />}
+            >
+              <SidebarSettings icon={AccountCircleOutlinedIcon} />
+            </SidebarGroup>
+          )}
         </Sidebar>
         {children}
       </SidebarPage>

packages/app/src/utils/dynamicUI/useDynamicSidebarConfiguration.ts

@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+
+import DynamicRootContext from '../../components/DynamicRoot/DynamicRootContext';
+
+export const useDynamicSidebarConfiguration = () => {
+  const { dynamicRoutes, menuItems, mountPoints } =
+    useContext(DynamicRootContext);
+  const headerComponents = mountPoints['global.header/component'] ?? [];
+  const profileMountPoints = mountPoints['global.header/profile'] ?? [];
+
+  return {
+    showSearchBar: !headerComponents.some(
+      ({ config }) => (config as any)?.type === 'search',
+    ),
+    showSettingsButton: !profileMountPoints.some(
+      ({ config }) => (config as any)?.props.link === '/settings',
+    ),
+    dynamicRoutes,
+    menuItems,
+  };
+};

yarn.lock

@@ -16299,13 +16299,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.21.1":
-  version: 1.21.1
-  resolution: "@remix-run/router@npm:1.21.1"
-  checksum: a7f618a33cbee44491f17db302a89eebf9f2d72892a7e918433cee5a0006935185f1f2946b8ff6f669184c6ca75babff1cdfa15a016a87ac7b5353cb4fd2c470
-  languageName: node
-  linkType: hard
-
 "@remix-run/router@npm:1.22.0":
   version: 1.22.0
   resolution: "@remix-run/router@npm:1.22.0"
@@ -39809,7 +39802,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:6.29.0":
+"react-router-dom@npm:6.29.0, react-router-dom@npm:^6.26.2":
   version: 6.29.0
   resolution: "react-router-dom@npm:6.29.0"
   dependencies:
@@ -39822,30 +39815,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.26.2":
-  version: 6.28.2
-  resolution: "react-router-dom@npm:6.28.2"
-  dependencies:
-    "@remix-run/router": 1.21.1
-    react-router: 6.28.2
-  peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: daa7a0f10c2d9861225c12d896bd4839da61ed1bbee945dc730fe27e8545d2dd1655cbbd6efe8b8f9647cad79bd98f9fed001073f93d5216be08b76f3aa4e88c
-  languageName: node
-  linkType: hard
-
-"react-router@npm:6.28.2":
-  version: 6.28.2
-  resolution: "react-router@npm:6.28.2"
-  dependencies:
-    "@remix-run/router": 1.21.1
-  peerDependencies:
-    react: ">=16.8"
-  checksum: 3e47c475293a54ae7067cc12d26947b6d73586916fc17ccd32215524c6ae7aa52b64d8d748a75152fa2bc72193ca709181c8aa24bfcd60efe08243357afed6e0
-  languageName: node
-  linkType: hard
-
 "react-router@npm:6.29.0":
   version: 6.29.0
   resolution: "react-router@npm:6.29.0"