RHIDP-5490: Configure global header in RHDH

assemblies/assembly-configuring-the-global-header.adoc

@@ -0,0 +1,19 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-the-global-header-in-rhdh
+[id="{context}"]
+= Configuring the global header in {product}
+
+As an administrator, you can configure the {product} global header to create a consistent and flexible navigation bar across your {product-short} instance.
+By default, the {product-short} global header includes the following components:
+
+* *Create* button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and front-end plugins within {product-short}
+* *Support* button that can link an internal or external support page
+* *Notifications* button displays alerts and updates from plugins and external services
+* *Search* input field allows users to find services, components, documentation, and other resources within {product-short}
+* *Plugin extension capabilities* provide a preinstalled and enabled catalog of available plugins in {product-short}
+* *User profile* drop-down menu provides access to profile settings, appearance customization, {product-short} metadata, and a logout button
+
+include::modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc[leveloffset=+1]
+
+
+include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1]

modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc

@@ -0,0 +1,167 @@
+[id="customizing-your-product-global-header_{context}"]
+= Customizing your {product} global header
+
+You can use the `red-hat-developer-hub.backstage-plugin-global-header` dynamic plugin to extend the global header with additional buttons and customize the order and position of icons and features. Additionally, you can create and integrate your custom dynamic header plugins using the mount points provided by this new header feature, allowing you to further tailor to suit your needs.
+For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+
+.Default global header configuration
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
+    disabled: false
+    pluginConfig:
+      app:
+        sidebar:
+          search: false    <1>
+          settings: false  <2>
+      dynamicPlugins:
+        frontend:
+          default.main-menu-items: <3>
+            menuItems:
+              default.create:
+                title: ''
+          red-hat-developer-hub.backstage-plugin-global-header: # the default enabled dynamic header plugin
+            mountPoints:
+              - mountPoint: application/header
+                importName: GlobalHeader
+                config:
+                  position: above-main-content <4>
+              - 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
+----
+<1> *search*: Hides the *Search* modal in the sidebar menu. Change it to `true` to display the *Search* modal in the sidebar.
+<2> *settings*: Hides the *Settings* button in the sidebar menu. Change it to `true` to display the *Settings* button in the sidebar.
+<3> `default.main-menu-items`: Hides the *Create* button from the sidebar menu. Remove this field to display the *Create* button in the sidebar.
+<4> *position*: Defines the position of the header. Options: `above-main-content` or `above-sidebar`.
+
+To extend the functionality of the default global header, include any the following attributes in your global header entry:
+
+`mountPoint`::
+Specifies the location of the header. Use `application/header` to specify it as a global header. You can configure several global headers at different positions by adding entries to the `mountPoints` field.
+
+`importName`::
+Specifies the component exported by the global header plugin.
++
+The `red-hat-developer-hub.backstage-plugin-global-header` package (enabled by default) offers the following header components as possible mount point values:
+
+- **`SearchComponent`**: Adds a search bar (enabled by default).
+- **`Spacer`**: Adds spacing in the header to position buttons at the end. Useful when you disable `SearchComponent`.
+- **`HeaderIconButton`**: Adds an icon button. By default, the *Create* icon button remains enabled.
+- **`SupportButton`**: Adds a *Support* icon button, allowing users to configure a link to an internal or external page. Enabled by default but requires additional configuration to display.
+- **`NotificationButton`**: Adds a *Notifications* icon button to display unread notifications in real time and navigate to the *Notifications* page. Enabled by default (requires the notifications plugin).
+- **`Divider`**: Adds a vertical divider. By default, a divider appears between the profile dropdown and other header components.
+- **`ProfileDropdown`**: Adds a profile dropdown showing the logged-in user's name. By default, it contains two menu items.
+- **`MenuItemLink`**: Adds a link item in a dropdown menu. By default, the profile dropdown includes a link to the *Settings* page.
+- **`LogoutButton`**: Adds a logout button in the profile dropdown (enabled by default).
+- **`CreateDropdown`**: Adds a *Create* dropdown button (disabled by default). The menu items are configurable.
+- **`SoftwareTemplatesSection`**: Adds a list of software template links to the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+- **`RegisterAComponentSection`**: Adds a link to the *Register a Component* page in the *Create* dropdown menu (disabled by default). You must enable `CreateDropdown`.
+
+`config.position`::
+Specifies the position of the header. Supported values are `above-main-content` and `above-sidebar`.
+
+.Prerequisites
+* You must configure the support URL in the `{my-app-config-file}` file to display the *Support* button in the header.
+* You must install the notifications plugin to display the *Notifications* button in the header.
+
+.Procedure
+
+. Copy the default configuration and modify the field values to suit your needs. You can adjust the `priority` value of each header component to control its position. Additionally, you can enable or disable components by adding or removing them from the configuration. To ensure that the remaining header buttons align with the end of the header before the profile dropdown button, set `config.props.growFactor` to `1` in the `Spacer` mount point to enable the `Spacer` component. For example:
++
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 100
+    props:
+      growFactor: 1
+----
+
+. To use your custom header, you must install it as a dynamic plugin by adding your plugin configuration to your `app-config-dynamic.yaml` file. For example:
++
+[source,yaml,subs="+attributes,+quotes"]
+----
+- package: _<npm_or_oci_package-reference>_
+  disabled: false
+  pluginConfig:
+    dynamicPlugins:
+      frontend:
+        <package_name>:
+          mountPoints:
+            - mountPoint: application/header
+              importName: _<application_header_name>_
+              config:
+                position: above-main-content
+            - mountPoint: global.header/component
+              importName: _<header_component_name>_
+              config:
+                priority: 100
+            - mountPoint: global.header/component
+              importName: _<header_component_name>_
+              config:
+                priority: 90
+----
++
+where:
+
+<npm_or_oci_package-reference>:: Specifies the package name.
+<application_header_name>:: Specifies the name of the application header. For example: `MyHeader`
+<header_component_name>:: Specifies the name of the header component. For example: `MyHeaderComponent`
++
+[NOTE]
+====
+`importName` is an optional name referencing the value returned by the scaffolder field extension API.
+====
+. Optional: To disable the global header, set the value of the `disabled` field to `true` in your `dynamic-plugins.yaml` file. For example:
++
+[source,yaml,subs="+attributes,+quotes"]
+----
+- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
+  disabled: true
+----

modules/configuring-the-global-header/proc-mount-points.adoc

@@ -0,0 +1,73 @@
+[id="mount-points-for-dynamic-plugin-intergration_{context}"]
+= Mount points for dynamic plugin integration
+
+You can customize the application header in {product-short} using mount points for dynamic plugins. These mount points give flexibility in configuring the position of the header, its components and dropdown menus. You can create a customized experience with the following enhancements:
+
+application/header::
+Controls the header position. Use `config.position` to set placement as either `above-main-content` or `above-sidebar`.
+
+global.header/component::
+Configures header components. Use `config.priority` to set the order of components, and pass properties (including CSS styles) via `config.props`.
++
+.Example adding a *Self-service* button
+[source,yaml,subs="attributes,quotes"]
+----
+- mountPoint: global.header/component
+  importName: HeaderIconButton
+  config:
+    priority: 80
+    props:
+      title: *Self-service*
+      icon: add
+      to: create
+----
++
+.Example adding a spacer element
+[source,yaml]
+----
+- mountPoint: global.header/component
+  importName: Spacer
+  config:
+    priority: 99
+    props:
+      growFactor: 0
+----
++
+.Example adding a divider element
+[source,yaml]
+----
+mountPoints:
+  - mountPoint: global.header/component
+    importName: Divider
+    config:
+      priority: 150
+----
+
+global.header/profile::
+Configures the profile dropdown list when the `ProfileDropdown` component is enabled.
++
+.Example adding a settings link to the profile dropdown
+[source,yaml]
+----
+- mountPoint: global.header/profile
+  importName: MenuItemLink
+  config:
+    priority: 100
+    props:
+      title: Settings
+      link: /settings
+      icon: manageAccounts
+----
+
+global.header/create::
+Configures the create dropdown list when the `CreateDropdown` component is enabled.
++
+.Example adding a section for registering a component
+[source,yaml]
+----
+- mountPoint: global.header/create
+  importName: RegisterAComponentSection
+  config:
+    props:
+      growFactor: 0
+----

titles/customizing/master.adoc

@@ -23,6 +23,9 @@ include::assemblies/assembly-configuring-templates.adoc[leveloffset=+1]
 include::modules/customizing-the-learning-paths/proc-customize-rhdh-learning-paths.adoc[leveloffset=+1]
 
 
+include::assemblies/assembly-configuring-the-global-header.adoc[leveloffset=+1]
+
+
 include::assemblies/assembly-configuring-a-floating-action-button.adoc[leveloffset=+1]