Apply technical reviews

Author: GitHub Actions

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

@@ -1,7 +1,79 @@
 [id="customizing-your-product-global-header_{context}"]
 = Customizing your {product} global header
 
-You can use dynamic plugins to extend the global header with additional buttons and customize the order and position of icons and features. For more information on enabling dynamic plugins, see link:{installing-and-viewing-dynamic-plugins-url}[{installing-and-viewing-dynamic-plugins-title}].
+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
+          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:
+                  position: above-main-content
+              - 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
+----
 
 To extend the functionality of the default global header, include any the following attributes in your global header entry:
 
@@ -11,7 +83,7 @@ Specifies the location of the header. Use `application/header` to specify it as
 `importName`::
 Specifies the component exported by the global header plugin.
 +
-The following header components are possible values for the `config` field in the `dynamic-plugins.default.yaml` file:
+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`.
@@ -30,12 +102,24 @@ The following header components are possible values for the `config` field in th
 Specifies the position of the header. Supported values are `above-main-content` and `above-sidebar`.
 
 .Prerequisites
-* You have configured the support URL in the `{my-app-config-file}` file.
-* You have installed the notifications plugin.
+* 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
 
-. Install your custom header as a dynamic plugin by adding your custom plugin configuration to your `dynamic-plugins.default.yaml` file. For example:
+. 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 icon 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"]
 ----
@@ -47,9 +131,17 @@ Specifies the position of the header. Supported values are `above-main-content`
         <package_name>:
           mountPoints:
             - mountPoint: application/header
-              importName: _<Header_component_name>_
+              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
 ----
 +
 [NOTE]