From f04fc0452aae7adb70cf9835c3b143b992910972 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 14 Mar 2025 13:36:11 +0100 Subject: [PATCH 01/20] Update the configure global header Update the configure global header Update the configure global header Update the configure global header Update the configure global header Update the configure global header --- ...ssembly-configuring-the-global-header.adoc | 19 ++++++ .../proc-customize-rhdh-global-header.adoc | 58 ++++++++++++++++++ .../proc-mount-points.adoc | 59 +++++++++++++++++++ titles/customizing/master.adoc | 3 + 4 files changed, 139 insertions(+) create mode 100644 assemblies/assembly-configuring-the-global-header.adoc create mode 100644 modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc create mode 100644 modules/configuring-the-global-header/proc-mount-points.adoc diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc new file mode 100644 index 0000000000..21b4913de0 --- /dev/null +++ b/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} global header includes the following: + +* Search input field +* Create button linking to software templates +* Support for internal and external links, for example, support and notification icons +* Notification buttons +* User profile and create drop-down +* Plugin extension capabilities + +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] \ No newline at end of file diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc new file mode 100644 index 0000000000..19cea1b98d --- /dev/null +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -0,0 +1,58 @@ +[id="customizing-your-product-global-header_{context}"] += Customizing your {product} global header + +Using dynamic plugins, you can 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}]. + +Include the following attributes in your global header entry: + +`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. + +`config.layout.position`:: +Determines the header's position. Supported values are `above-main-content` and `above-sidebar`. + +[NOTE] +==== +You can configure several global headers at different positions by adding entries to the `mountPoints` field. +==== + +.Prerequisites +* You have configured your {product-custom-resource-type} instance. +* You have configured the support URL in the `{my-app-config-file}` file. +* You have installed the notification plugin. + +.Procedure + +. Install your own header as a dynamic plugin. For example, add the following plugin definition to your `dynamic-plugins.default.yaml` file: ++ +.`dynamic-plugins.yaml` fragment +[source,yaml,subs="+attributes,+quotes"] +---- +- package: `__` + disabled: false + pluginConfig: + dynamicPlugins: + frontend: + : + mountPoints: + - mountPoint: application/header + importName: `__` + config: + position: above-main-content +---- ++ +[NOTE] +==== +`importName` is an optional name referencing the value returned by the scaffolder field extension API. +==== +. To disable the global header, disable the right plugin in your `dynamic-plugins.yaml` file as follows: ++ +.`dynamic-plugins.yaml` fragment +[source,yaml,subs="+attributes,+quotes"] +---- +- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header + disabled: true +---- \ No newline at end of file diff --git a/modules/configuring-the-global-header/proc-mount-points.adoc b/modules/configuring-the-global-header/proc-mount-points.adoc new file mode 100644 index 0000000000..f4953efdd5 --- /dev/null +++ b/modules/configuring-the-global-header/proc-mount-points.adoc @@ -0,0 +1,59 @@ +[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`. + +.Adding a `Create` button +[source,yaml] +---- +- mountPoint: global.header/component + importName: HeaderIconButton + config: + priority: 80 + props: + title: Create... + icon: add + to: create +---- + +.Adding a spacer element +[source,yaml] +---- +- mountPoint: global.header/component + importName: Spacer + config: + priority: 99 + props: + growFactor: 0 +global.header/profile: Configures the profile dropdown list when the `ProfileDropdown` component is enabled. +---- + +.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. +---- + +.Adding a section for registering a component +[source,yaml] +---- +- mountPoint: global.header/create + importName: RegisterAComponentSection + config: + props: + growFactor: 0 +---- \ No newline at end of file diff --git a/titles/customizing/master.adoc b/titles/customizing/master.adoc index 99fe89b2c9..6b5ea1f5a5 100644 --- a/titles/customizing/master.adoc +++ b/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] From 8d935da57c277e5e6f8c9ee9c4cd8e97f2c2d3f5 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 14 Mar 2025 21:34:56 +0100 Subject: [PATCH 02/20] Update the configure global header --- .../proc-customize-rhdh-global-header.adoc | 2 +- .../proc-mount-points.adoc | 18 ++++++++++++++---- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 19cea1b98d..adc8ec17fa 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -11,7 +11,7 @@ Defines where the header will be added. Use `application/header` to specify it a `importName`:: Specifies the component exported by the global header plugin. -`config.layout.position`:: +`config.position`:: Determines the header's position. Supported values are `above-main-content` and `above-sidebar`. [NOTE] diff --git a/modules/configuring-the-global-header/proc-mount-points.adoc b/modules/configuring-the-global-header/proc-mount-points.adoc index f4953efdd5..ec7926f51b 100644 --- a/modules/configuring-the-global-header/proc-mount-points.adoc +++ b/modules/configuring-the-global-header/proc-mount-points.adoc @@ -9,7 +9,9 @@ Controls the header position. Use `config.position` to set placement as either ` global.header/component:: Configures header components. Use `config.priority` to set the order of components, and pass properties (including CSS styles) via `config.props`. -.Adding a `Create` button +Examples: + +.Adding a `self-service` button [source,yaml] ---- - mountPoint: global.header/component @@ -17,7 +19,7 @@ Configures header components. Use `config.priority` to set the order of componen config: priority: 80 props: - title: Create... + title: self-service icon: add to: create ---- @@ -31,9 +33,13 @@ Configures header components. Use `config.priority` to set the order of componen priority: 99 props: growFactor: 0 -global.header/profile: Configures the profile dropdown list when the `ProfileDropdown` component is enabled. ---- +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] ---- @@ -45,9 +51,13 @@ global.header/profile: Configures the profile dropdown list when the `ProfileDro title: Settings link: /settings icon: manageAccounts -global.header/create: Configures the create dropdown list when the `CreateDropdown` component is enabled. ---- +global.header/create:: +Configures the create dropdown list when the `CreateDropdown` component is enabled. + +Example: + .Adding a section for registering a component [source,yaml] ---- From 3892ec34bf045c3d054d05ee4055af5be63aef14 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Tue, 18 Mar 2025 14:52:19 +0100 Subject: [PATCH 03/20] Update the configure global header --- .../assembly-configuring-the-global-header.adoc | 6 +++--- .../proc-customize-rhdh-global-header.adoc | 14 ++++++-------- .../proc-mount-points.adoc | 4 ++-- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 21b4913de0..f8cb0abd1f 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -7,10 +7,10 @@ As an administrator, you can configure the {product} global header to create a c By default, the {product} global header includes the following: * Search input field -* Create button linking to software templates -* Support for internal and external links, for example, support and notification icons +* *Create* button linking to software templates +* *Support* button that can link an internal or external support page * Notification buttons -* User profile and create drop-down +* User profile drop-down menu * Plugin extension capabilities include::modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc[leveloffset=+1] diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index adc8ec17fa..c4a37fd87a 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -1,18 +1,18 @@ [id="customizing-your-product-global-header_{context}"] = Customizing your {product} global header -Using dynamic plugins, you can 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 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}]. -Include the following attributes in your global header entry: +To extend the functionality of the default global header, include any the following attributes in your global header entry: `mountPoint`:: -Defines where the header will be added. Use `application/header` to specify it as a global header. +Specifies the location of the header. Use `application/header` to specify it as a global header. `importName`:: Specifies the component exported by the global header plugin. `config.position`:: -Determines the header's position. Supported values are `above-main-content` and `above-sidebar`. +Specifies the position of the header. Supported values are `above-main-content` and `above-sidebar`. [NOTE] ==== @@ -26,9 +26,8 @@ You can configure several global headers at different positions by adding entrie .Procedure -. Install your own header as a dynamic plugin. For example, add the following plugin definition to your `dynamic-plugins.default.yaml` file: +. Install your custom header as a dynamic plugin by adding your custom plugin configuration to your `dynamic-plugins.default.yaml` file. For example: + -.`dynamic-plugins.yaml` fragment [source,yaml,subs="+attributes,+quotes"] ---- - package: `__` @@ -48,9 +47,8 @@ You can configure several global headers at different positions by adding entrie ==== `importName` is an optional name referencing the value returned by the scaffolder field extension API. ==== -. To disable the global header, disable the right plugin in your `dynamic-plugins.yaml` file as follows: +. Optional: To disable the global header, set the value of the `disabled` field to `true` in your `dynamic-plugins.yaml` file. For example: + -.`dynamic-plugins.yaml` fragment [source,yaml,subs="+attributes,+quotes"] ---- - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header diff --git a/modules/configuring-the-global-header/proc-mount-points.adoc b/modules/configuring-the-global-header/proc-mount-points.adoc index ec7926f51b..18a006a485 100644 --- a/modules/configuring-the-global-header/proc-mount-points.adoc +++ b/modules/configuring-the-global-header/proc-mount-points.adoc @@ -11,7 +11,7 @@ Configures header components. Use `config.priority` to set the order of componen Examples: -.Adding a `self-service` button +.Adding a *Self-service* button [source,yaml] ---- - mountPoint: global.header/component @@ -19,7 +19,7 @@ Examples: config: priority: 80 props: - title: self-service + title: Self-service icon: add to: create ---- From 09102508b281b1022efb2b2578e65e0a31ea8234 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Tue, 18 Mar 2025 16:38:15 +0100 Subject: [PATCH 04/20] Update the configure global header --- assemblies/assembly-configuring-the-global-header.adoc | 4 ++-- modules/configuring-the-global-header/proc-mount-points.adoc | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index f8cb0abd1f..01fe119474 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -4,10 +4,10 @@ = 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} global header includes the following: +By default, the {product} global header includes the following components: * Search input field -* *Create* button linking to software templates +* *Create* button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and frontend plugins within {product-short}. * *Support* button that can link an internal or external support page * Notification buttons * User profile drop-down menu diff --git a/modules/configuring-the-global-header/proc-mount-points.adoc b/modules/configuring-the-global-header/proc-mount-points.adoc index 18a006a485..66931b6ea6 100644 --- a/modules/configuring-the-global-header/proc-mount-points.adoc +++ b/modules/configuring-the-global-header/proc-mount-points.adoc @@ -12,14 +12,14 @@ Configures header components. Use `config.priority` to set the order of componen Examples: .Adding a *Self-service* button -[source,yaml] +[source,yaml,subs="attributes,quotes"] ---- - mountPoint: global.header/component importName: HeaderIconButton config: priority: 80 props: - title: Self-service + title: *Self-service* icon: add to: create ---- From 24bd8341fe9149bc1de8d06f2762e1bfc4db9313 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Wed, 19 Mar 2025 13:21:20 +0100 Subject: [PATCH 05/20] Update the configure global header --- assemblies/assembly-configuring-the-global-header.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 01fe119474..b6d220d24a 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -7,7 +7,7 @@ As an administrator, you can configure the {product} global header to create a c By default, the {product} global header includes the following components: * Search input field -* *Create* button provides quick access to a variety of templates, enabling users to efficiently set up services, backend and frontend plugins within {product-short}. +* *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 * Notification buttons * User profile drop-down menu From 1c065c6cb2cffcdf7c2e6914c5d4d81bcaccfbe3 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Wed, 19 Mar 2025 14:59:59 +0100 Subject: [PATCH 06/20] Update the configure global header --- .../assembly-configuring-the-global-header.adoc | 4 ++-- .../proc-customize-rhdh-global-header.adoc | 2 +- .../proc-mount-points.adoc | 14 ++++---------- 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index b6d220d24a..6fb6e0f79e 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -7,10 +7,10 @@ As an administrator, you can configure the {product} global header to create a c By default, the {product} global header includes the following components: * Search input field -* *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}. +* *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 * Notification buttons -* User profile drop-down menu +* User profile drop-down menu provides access to profile settings, appearance customization, Backstage identity details, {product-short} metadata, and a logout button * Plugin extension capabilities include::modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc[leveloffset=+1] diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index c4a37fd87a..ff09e10c34 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -20,7 +20,7 @@ You can configure several global headers at different positions by adding entrie ==== .Prerequisites -* You have configured your {product-custom-resource-type} instance. +* You have configured your Backstage instance. * You have configured the support URL in the `{my-app-config-file}` file. * You have installed the notification plugin. diff --git a/modules/configuring-the-global-header/proc-mount-points.adoc b/modules/configuring-the-global-header/proc-mount-points.adoc index 66931b6ea6..4483ba94fe 100644 --- a/modules/configuring-the-global-header/proc-mount-points.adoc +++ b/modules/configuring-the-global-header/proc-mount-points.adoc @@ -9,9 +9,7 @@ Controls the header position. Use `config.position` to set placement as either ` global.header/component:: Configures header components. Use `config.priority` to set the order of components, and pass properties (including CSS styles) via `config.props`. -Examples: - -.Adding a *Self-service* button +.Example adding a *Self-service* button [source,yaml,subs="attributes,quotes"] ---- - mountPoint: global.header/component @@ -24,7 +22,7 @@ Examples: to: create ---- -.Adding a spacer element +.Example adding a spacer element [source,yaml] ---- - mountPoint: global.header/component @@ -38,9 +36,7 @@ Examples: global.header/profile:: Configures the profile dropdown list when the `ProfileDropdown` component is enabled. -Example: - -.Adding a settings link to the profile dropdown +.Example adding a settings link to the profile dropdown [source,yaml] ---- - mountPoint: global.header/profile @@ -56,9 +52,7 @@ Example: global.header/create:: Configures the create dropdown list when the `CreateDropdown` component is enabled. -Example: - -.Adding a section for registering a component +.Example adding a section for registering a component [source,yaml] ---- - mountPoint: global.header/create From 46f6eb1e1cfd1050cd86f0e75b8dbbf21181ccfa Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Wed, 19 Mar 2025 17:18:54 +0100 Subject: [PATCH 07/20] Update the configure global header --- assemblies/assembly-configuring-the-global-header.adoc | 4 ++-- .../proc-customize-rhdh-global-header.adoc | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 6fb6e0f79e..cfde5cf364 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -6,12 +6,12 @@ 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} global header includes the following components: -* Search input field * *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 * Notification buttons +* Search input field +* Plugin extension capabilities provide a pre-installed and enabled catalog of available plugins in {product} * User profile drop-down menu provides access to profile settings, appearance customization, Backstage identity details, {product-short} metadata, and a logout button -* Plugin extension capabilities include::modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc[leveloffset=+1] diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index ff09e10c34..940b475196 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -20,7 +20,7 @@ You can configure several global headers at different positions by adding entrie ==== .Prerequisites -* You have configured your Backstage instance. +* You have configured your {product} instance. * You have configured the support URL in the `{my-app-config-file}` file. * You have installed the notification plugin. From 37c0595c6d4a1c2bcaad8847411514b4cbdb5357 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Wed, 19 Mar 2025 18:18:58 +0100 Subject: [PATCH 08/20] Update the configure global header --- assemblies/assembly-configuring-the-global-header.adoc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index cfde5cf364..28089decd3 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -8,10 +8,10 @@ By default, the {product} 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 -* Notification buttons -* Search input field +* Notification 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} * Plugin extension capabilities provide a pre-installed and enabled catalog of available plugins in {product} -* User profile drop-down menu provides access to profile settings, appearance customization, Backstage identity details, {product-short} metadata, and a logout button +* 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] From 561521ec1c0c751454ebfb231b594384bfa34b2b Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 20 Mar 2025 08:29:37 +0100 Subject: [PATCH 09/20] Update the configure global header --- assemblies/assembly-configuring-the-global-header.adoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 28089decd3..a05016dbfd 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -8,10 +8,10 @@ By default, the {product} 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 -* Notification 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} -* Plugin extension capabilities provide a pre-installed and enabled catalog of available plugins in {product} -* User profile drop-down menu provides access to profile settings, appearance customization, {product-short} metadata, and a logout button +* *Notification* 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} +* *Plugin extension capabilities* provide a pre-installed and enabled catalog of available plugins in {product} +* *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] From 1651566d1c620d5f1657e7a6e73bb9aeb06e5977 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 20 Mar 2025 18:52:26 +0100 Subject: [PATCH 10/20] Apply technical review suggestions --- .../assembly-configuring-the-global-header.adoc | 2 +- .../proc-customize-rhdh-global-header.adoc | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index a05016dbfd..ae27e18ed5 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -8,7 +8,7 @@ By default, the {product} 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 -* *Notification* button displays alerts and updates from plugins and external services +* *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} * *Plugin extension capabilities* provide a pre-installed and enabled catalog of available plugins in {product} * *User profile* drop-down menu provides access to profile settings, appearance customization, {product-short} metadata, and a logout button diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 940b475196..38a24892cc 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -10,6 +10,21 @@ Specifies the location of the header. Use `application/header` to specify it as `importName`:: Specifies the component exported by the global header plugin. ++ +Below is a list of available header components that you can configure using the `config` field: + +- **`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`. @@ -22,7 +37,7 @@ You can configure several global headers at different positions by adding entrie .Prerequisites * You have configured your {product} instance. * You have configured the support URL in the `{my-app-config-file}` file. -* You have installed the notification plugin. +* You have installed the notifications plugin. .Procedure From d8b082d159ad2758ffb6bb27cc8868a12ed805c1 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 20 Mar 2025 19:03:10 +0100 Subject: [PATCH 11/20] Apply technical review suggestions --- .../proc-customize-rhdh-global-header.adoc | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 38a24892cc..b39cd8d8fd 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -16,15 +16,15 @@ Below is a list of available header components that you can configure using the - **`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). +- **`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. +- **`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`. +- **`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`. From e1374e25115a9536dd0cbcaf87bfdbf2d8057d78 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 20 Mar 2025 19:56:36 +0100 Subject: [PATCH 12/20] Apply review suggestions --- .../proc-customize-rhdh-global-header.adoc | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index b39cd8d8fd..466ca89d3c 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -35,7 +35,6 @@ You can configure several global headers at different positions by adding entrie ==== .Prerequisites -* You have configured your {product} instance. * You have configured the support URL in the `{my-app-config-file}` file. * You have installed the notifications plugin. From ae3c632934319c1221c5e74963ea6ffe51419f07 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 20 Mar 2025 20:49:32 +0100 Subject: [PATCH 13/20] Apply review suggestions --- .../proc-mount-points.adoc | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/modules/configuring-the-global-header/proc-mount-points.adoc b/modules/configuring-the-global-header/proc-mount-points.adoc index 4483ba94fe..ef1faeef44 100644 --- a/modules/configuring-the-global-header/proc-mount-points.adoc +++ b/modules/configuring-the-global-header/proc-mount-points.adoc @@ -33,6 +33,16 @@ Configures header components. Use `config.priority` to set the order of componen 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. From 5409f96663ec156f2303fc7977d0d936f1c1b23d Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 20 Mar 2025 22:32:15 +0100 Subject: [PATCH 14/20] Apply peer suggestions --- .../assembly-configuring-the-global-header.adoc | 6 +++--- .../proc-customize-rhdh-global-header.adoc | 13 ++++--------- .../proc-mount-points.adoc | 10 +++++----- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index ae27e18ed5..bc7c14a2bd 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -4,13 +4,13 @@ = 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} global header includes the following components: +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} -* *Plugin extension capabilities* provide a pre-installed and enabled catalog of available plugins in {product} +* *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] diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 466ca89d3c..151c399e10 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -6,12 +6,12 @@ You can use dynamic plugins to extend the global header with additional buttons 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. +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. + -Below is a list of available header components that you can configure using the `config` field: +The following header components are possible values for the `config` field in the `dynamic-plugins.default.yaml` file: - **`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`. @@ -29,11 +29,6 @@ Below is a list of available header components that you can configure using the `config.position`:: Specifies the position of the header. Supported values are `above-main-content` and `above-sidebar`. -[NOTE] -==== -You can configure several global headers at different positions by adding entries to the `mountPoints` field. -==== - .Prerequisites * You have configured the support URL in the `{my-app-config-file}` file. * You have installed the notifications plugin. @@ -44,7 +39,7 @@ You can configure several global headers at different positions by adding entrie + [source,yaml,subs="+attributes,+quotes"] ---- -- package: `__` +- package: __ disabled: false pluginConfig: dynamicPlugins: @@ -52,7 +47,7 @@ You can configure several global headers at different positions by adding entrie : mountPoints: - mountPoint: application/header - importName: `__` + importName: __ config: position: above-main-content ---- diff --git a/modules/configuring-the-global-header/proc-mount-points.adoc b/modules/configuring-the-global-header/proc-mount-points.adoc index ef1faeef44..3e3b91a364 100644 --- a/modules/configuring-the-global-header/proc-mount-points.adoc +++ b/modules/configuring-the-global-header/proc-mount-points.adoc @@ -8,7 +8,7 @@ Controls the header position. Use `config.position` to set placement as either ` 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"] ---- @@ -21,7 +21,7 @@ Configures header components. Use `config.priority` to set the order of componen icon: add to: create ---- - ++ .Example adding a spacer element [source,yaml] ---- @@ -32,7 +32,7 @@ Configures header components. Use `config.priority` to set the order of componen props: growFactor: 0 ---- - ++ .Example adding a divider element [source,yaml] ---- @@ -45,7 +45,7 @@ mountPoints: 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] ---- @@ -61,7 +61,7 @@ Configures the profile dropdown list when the `ProfileDropdown` component is ena global.header/create:: Configures the create dropdown list when the `CreateDropdown` component is enabled. - ++ .Example adding a section for registering a component [source,yaml] ---- From 9e915a9667c0b604f99061c28e8664887e300ad9 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 21 Mar 2025 10:58:00 +0100 Subject: [PATCH 15/20] Apply technical reviews --- .../proc-customize-rhdh-global-header.adoc | 104 +++++++++++++++++- 1 file changed, 98 insertions(+), 6 deletions(-) diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 151c399e10..46c6f6adc9 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/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` : mountPoints: - mountPoint: application/header - importName: __ + importName: __ config: position: above-main-content + - mountPoint: global.header/component + importName: _ + config: + priority: 100 + - mountPoint: global.header/component + importName: _ + config: + priority: 90 ---- + [NOTE] From 5500102c8cb2041f8f3b433354955f99c1f0bdcd Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 21 Mar 2025 12:11:36 +0100 Subject: [PATCH 16/20] Apply technical review --- .../proc-customize-rhdh-global-header.adoc | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 46c6f6adc9..62dedb84cf 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -135,15 +135,21 @@ Specifies the position of the header. Supported values are `above-main-content` config: position: above-main-content - mountPoint: global.header/component - importName: _ + importName: __ config: priority: 100 - mountPoint: global.header/component - importName: _ + importName: __ config: priority: 90 ---- + +where: + +:: Specifies the package name. +:: Specifies the name of the application header. For example: `MyHeader` +:: 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. From b337596fa771c88a566752211aa4255d66f303a8 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 21 Mar 2025 16:27:04 +0100 Subject: [PATCH 17/20] Apply technical reviews --- .../proc-customize-rhdh-global-header.adoc | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 62dedb84cf..47a45e0b5b 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -13,20 +13,20 @@ For more information on enabling dynamic plugins, see link:{installing-and-viewi pluginConfig: app: sidebar: - search: false - settings: false + search: false # (1) + settings: false # (2) dynamicPlugins: frontend: - default.main-menu-items: + default.main-menu-items: # (3) menuItems: default.create: title: '' - red-hat-developer-hub.backstage-plugin-global-header: + red-hat-developer-hub.backstage-plugin-global-header: # (4) mountPoints: - mountPoint: application/header importName: GlobalHeader config: - position: above-main-content + position: above-main-content # (5) - mountPoint: global.header/component importName: SearchComponent config: @@ -74,6 +74,11 @@ For more information on enabling dynamic plugins, see link:{installing-and-viewi config: priority: 10 ---- +1. *search*: Hides the *Search* modal in the sidebar menu. Change it to `true` to display it in the sidebar. +2. *settings*: Hides the *Settings* button in the sidebar menu. Change it to `true` to display it in the sidebar. +3. `default.main-menu-items`: Hides the *Create* button from the sidebar menu. Remove this field to display it in the sidebar. +4. `red-hat-developer-hub.backstage-plugin-global-header`: The dynamic header plugin (enabled by default). +5. *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: From a5793a24c00cd0b54d2e56d474e1ab9fc7f0d1a7 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 21 Mar 2025 16:31:14 +0100 Subject: [PATCH 18/20] Apply technical reviews --- .../proc-customize-rhdh-global-header.adoc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 47a45e0b5b..1d5690f67a 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -74,9 +74,9 @@ For more information on enabling dynamic plugins, see link:{installing-and-viewi config: priority: 10 ---- -1. *search*: Hides the *Search* modal in the sidebar menu. Change it to `true` to display it in the sidebar. -2. *settings*: Hides the *Settings* button in the sidebar menu. Change it to `true` to display it in the sidebar. -3. `default.main-menu-items`: Hides the *Create* button from the sidebar menu. Remove this field to display it in the sidebar. +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. `red-hat-developer-hub.backstage-plugin-global-header`: The dynamic header plugin (enabled by default). 5. *position*: Defines the position of the header. Options: `above-main-content` or `above-sidebar`. From b9f59e69fa64b4d3dbc461f00526a9f8734ba18b Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 21 Mar 2025 16:54:50 +0100 Subject: [PATCH 19/20] Apply peer reviews --- .../proc-customize-rhdh-global-header.adoc | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 1d5690f67a..e8836068dc 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -112,7 +112,7 @@ Specifies the position of the header. Supported values are `above-main-content` .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 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: +. 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] ---- @@ -136,15 +136,15 @@ Specifies the position of the header. Supported values are `above-main-content` : mountPoints: - mountPoint: application/header - importName: __ + importName: __ config: position: above-main-content - mountPoint: global.header/component - importName: __ + importName: __ config: priority: 100 - mountPoint: global.header/component - importName: __ + importName: __ config: priority: 90 ---- @@ -152,8 +152,8 @@ Specifies the position of the header. Supported values are `above-main-content` where: :: Specifies the package name. -:: Specifies the name of the application header. For example: `MyHeader` -:: Specifies the name of the header component. For example: `MyHeaderComponent` +:: Specifies the name of the application header. For example: `MyHeader` +:: Specifies the name of the header component. For example: `MyHeaderComponent` + [NOTE] ==== From 3a1fe8d0b55873853ffab38ea3e526ad626d6ebe Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 21 Mar 2025 17:08:55 +0100 Subject: [PATCH 20/20] Apply technical reviews --- .../proc-customize-rhdh-global-header.adoc | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index e8836068dc..a7a3d4c69a 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -13,20 +13,20 @@ For more information on enabling dynamic plugins, see link:{installing-and-viewi pluginConfig: app: sidebar: - search: false # (1) - settings: false # (2) + search: false <1> + settings: false <2> dynamicPlugins: frontend: - default.main-menu-items: # (3) + default.main-menu-items: <3> menuItems: default.create: title: '' - red-hat-developer-hub.backstage-plugin-global-header: # (4) + 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 # (5) + position: above-main-content <4> - mountPoint: global.header/component importName: SearchComponent config: @@ -74,11 +74,10 @@ For more information on enabling dynamic plugins, see link:{installing-and-viewi 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. `red-hat-developer-hub.backstage-plugin-global-header`: The dynamic header plugin (enabled by default). -5. *position*: Defines the position of the header. Options: `above-main-content` or `above-sidebar`. +<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: