Skip to content

Commit 18d2e45

Browse files
jmagakGitHub Actions
jmagak
and
GitHub Actions
authored
RHIDP-7614: Displaying the preferred username and Company Logo (#1254)
* Displaying the preferred username and Company Logo * Displaying the preferred username and Company Logo * Displaying the preferred username and Company Log * Displaying the preferred username and Company Log * Displaying the preferred username and Company Log * Displaying the preferred username and Company Log * Displaying the preferred username and Company Log --------- Co-authored-by: GitHub Actions <[email protected]>
1 parent c8bc26c commit 18d2e45

File tree

4 files changed

+209
-1
lines changed

4 files changed

+209
-1
lines changed

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,13 @@ include::modules/configuring-the-global-header/proc-customize-rhdh-global-header
1818

1919
include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1]
2020

21+
include::modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc[leveloffset=+1]
22+
23+
include::modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc[leveloffset=+1]
24+
25+
include::modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc[leveloffset=+1]
26+
2127
include::modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc[leveloffset=+1]
2228

23-
include::modules/configuring-the-global-header/proc-enabling-quicklinks-starred-items-after-upgrade.adoc[leveloffset=+1]
29+
include::modules/configuring-the-global-header/proc-enabling-quicklinks-starred-items-after-upgrade.adoc[leveloffset=+1]
30+

‎modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
[id="configuring-logo-in-the-global-header.adoc_{context}"]
2+
= Configuring the logo in the global header
3+
4+
You can configure a company logo in the global header of the {product} ({product-very-short}) to reflect your company's branding. `CompanyLogo` is part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options.
5+
6+
This component supports the following props, which are provided through configuration:
7+
8+
* `logo`: The base64 encoded logo image.
9+
* `to`: The redirect path for when users click the logo is '/catalog'.
10+
* `width`: The logo width is optional and defaults to 150 px.
11+
* `height`: The logo height is optional and defaults to 40px.
12+
13+
.Procedure
14+
15+
. To display a custom company logo in the global header, update the configuration with a mount point for `CompanyLogo`:
16+
+
17+
.Example: Configuring company logo
18+
+
19+
[source,yaml,subs="+attributes,+quotes"]
20+
----
21+
# ...rest of the global header configuration
22+
red-hat-developer-hub.backstage-plugin-global-header:
23+
mountPoints:
24+
- mountPoint: application/header
25+
importName: GlobalHeader
26+
config:
27+
# Supported values: `above-main-content` | `above-sidebar`
28+
position: above-main-content
29+
30+
- mountPoint: global.header/component
31+
importName: CompanyLogo
32+
config:
33+
priority: 200
34+
props:
35+
# Path to navigate when users click the logo:
36+
to: '/catalog'
37+
width: 300
38+
height: 200
39+
logo: <string> or <object> # Logo can be a base64 string or theme-specific object
40+
# Example 1: Single logo for all themes
41+
# logo: "<base64_encoded_images>"
42+
43+
# Example 2: Theme-specific logos
44+
# logo:
45+
dark: 'data:image/png;base64,...' # Used in dark theme
46+
light: 'data:image/png;base64,...' # Used in light theme
47+
----
48+
49+
. (Optional) If you do not provide `logo` props to the `CompanyLogo` component, the component instead uses values defined under `app.branding` in your `{my-app-config-file}` file. You can configure the `CompanyLogo` as shown in the following configuration:
50+
+
51+
.Example: Fallback configuration
52+
+
53+
[source,yaml,subs="+attributes,+quotes"]
54+
----
55+
app:
56+
branding:
57+
fullLogoWidth: 220 # Fallback width
58+
fullLogo: <string> or <object> #fullLogo can be a base64 string or theme-specific object
59+
60+
# Example 1: Single logo for all themes
61+
#fullLogo: "<base64_encoded_image>
62+
# Example 2: Theme-specific logos
63+
#fullLogo:
64+
dark: 'data:image/png;base64,...' # Used in dark theme
65+
light: 'data:image/png;base64,...' # Used in light theme
66+
----
67+
+
68+
`CompanyLogo` uses the following configuration elements to control fallback and sizing behavior:
69+
70+
* *Logo source priority*
71+
** The component selects the logo source in the following order:
72+
+
73+
First, `CompanyLogo` props (logo, logo.light, logo.dark), then, `app.branding.fullLogo`. If you do not provide a logo through either, the component displays the default {product-short} theme-specific logo.
74+
75+
* *Logo width priority*
76+
** The component applies the first available value from `props.width`, then `app.branding.fullLogoWidth` from `{my-app-config-file}`. If you do not specify the `width` using either, the component applies a default width (150 px).
77+
78+
[NOTE]
79+
====
80+
`CompanyLogo` preserves the images aspect ratio and never crops or distorts it. If the configured width results in a height greater than the maximum allowed (default: 40px), the image is automatically scaled down. As a result, adjusting only the width may not visibly change the logo unless the height is also configured.
81+
82+
Increasing the logo `height` increases the height of the global header. The component first applies the value from `props.height`. If you do not specify the `height`, the component applies a default height (40px).
83+
====
84+
85+
.Verification
86+
. The logo appears correctly in the global header.
87+
. Click the logo to confirm it redirects to the path you defined in `props.to`.
88+
. Toggle between `light` and `dark` themes to ensure the correct logo loads in each.
89+
. (Optional) Temporarily remove the `CompanyLogo` props to test the fallback to `app.branding.fullLogo`.

‎modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
[id="displaying-preferred-username-in-global-header-profile-drop-down_{context}"]
2+
= Displaying the preferred username in the profile dropdown
3+
4+
You can display the preferred username in the global header profile drop-down list by configuring `spec.profile.displayName` in the user entity. When not configured, the application falls back to a `metadata.title`. If neither is configured, it defaults to a user-friendly name generated by the `useProfileInfo` hook.
5+
6+
.Procedure
7+
.Example when you configure `spec.profile.displayName`
8+
9+
[source,yaml,subs="+attributes,+quotes"]
10+
----
11+
apiVersion: backstage.io/v1alpha1
12+
kind: User
13+
metadata:
14+
# Required unique username
15+
name: _<my_display_name>_
16+
# Optional preferred title
17+
title: _<display_name_title>_
18+
spec:
19+
profile:
20+
# Optional preferred display name (highest priority)
21+
displayName: _<my_display_name>_
22+
memberOf: [janus-authors]
23+
----
24+
25+
.Example when you do not configure `spec.profile.displayname` but configure `metadata.title`
26+
27+
[source,yaml,subs="+attributes,+quotes"]
28+
----
29+
apiVersion: backstage.io/v1alpha1
30+
kind: User
31+
metadata:
32+
# Required unique username
33+
name: _<my_display_name>_
34+
# Optional preferred title
35+
title: _<display_name_title>_
36+
spec:
37+
memberOf: [janus-authors]
38+
----
39+
40+
.Example when you do not configure the `spec.profile.displayname` and the `metadata.title`
41+
42+
[source,yaml,subs="+attributes,+quotes"]
43+
----
44+
apiVersion: backstage.io/v1alpha1
45+
kind: User
46+
metadata:
47+
# Required unique username
48+
name: _<my_display_name>_
49+
spec:
50+
memberOf: [janus-authors]
51+
----
52+
53+
[NOTE]
54+
====
55+
The application falls back to `metadata.name` when you do not register the user entity.
56+
====

‎modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
[id="proc-enabling-logo-in-the-sidebar.adoc_{context}"]
2+
= Enabling logo in the sidebar
3+
4+
You can configure a logo in the sidebar of the {product} ({product-very-short}).
5+
6+
.Procedure
7+
8+
. To display the logo in the sidebar, set the value of the `app.sidebar.logo` parameter to `true` as shown in the following example:
9+
+
10+
.Example: Enabling the logo in only the sidebar
11+
+
12+
[source,yaml,subs="+attributes,+quotes"]
13+
----
14+
app:
15+
sidebar:
16+
logo: true
17+
----
18+
+
19+
[NOTE]
20+
====
21+
To display the logo in only the sidebar, remove the `CompanyLogo` component from the configuration.
22+
====
23+
24+
. To display the same logo in the sidebar for all themes, update the configuration as shown in the following configuration:
25+
+
26+
.Example: Configuring sidebar logo for all themes
27+
+
28+
[source,yaml,subs="+attributes,+quotes"]
29+
----
30+
app:
31+
sidebar:
32+
logo: true
33+
branding:
34+
fullLogoWidth: 220
35+
fullLogo: 'data:image/svg+xml;base64,...'
36+
----
37+
38+
. For theme-specific logos, you can configure the sidebar logo as shown in the following configuration:
39+
+
40+
.Example: Theme-specific logos
41+
+
42+
[source,yaml,subs="+attributes,+quotes"]
43+
----
44+
app:
45+
sidebar:
46+
logo: true
47+
branding:
48+
fullLogoWidth: 220
49+
fullLogo:
50+
light: 'data:image/svg+xml;base64,...'
51+
dark: 'data:image/svg+xml;base64,...'
52+
----
53+
54+
.Verification
55+
. The logo appears correctly in the sidebar.
56+
. Toggle between `light` and `dark` themes to ensure the correct logo loads in each.

0 commit comments

Comments
 (0)