RHIDP-7614: Displaying the preferred username and Company Logo

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

@@ -18,6 +18,11 @@ include::modules/configuring-the-global-header/proc-customize-rhdh-global-header
 
 include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1]
 
+include::modules/configuring-the-global-header/proc-displaying-company-logo-in-the-global-header.adoc[leveloffset=+1]
+
+include::modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-dropdown.adoc[leveloffset=+1]
+
 include::modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc[leveloffset=+1]
 
-include::modules/configuring-the-global-header/proc-enabling-quicklinks-starred-items-after-upgrade.adoc[leveloffset=+1]
+include::modules/configuring-the-global-header/proc-enabling-quicklinks-starred-items-after-upgrade.adoc[leveloffset=+1]
+

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

@@ -0,0 +1,95 @@
+[id="displaying-company-logo-in-the-global-header.adoc_{context}"]
+= Displaying company logo in the global header
+
+You can configure a company logo in the global header of the {product} ({product-very-short}) to reflect your company's branding. The `CompanyLogo` is now part of the global header by default and offers full control over the theming, navigation behavior, sizing, and fallback options.
+
+The `CompanyLogo` ensures strict display constraints to maintain design consistency:
+
+* The default maximum dimensions: `150px` wide, `40px` high.
+* The logo must retain its original proportions using `object-fit: contain`
+* The component keeps its layout fixed and you cannot move it from its mount point.
+* The `CompanyLogo` automatically scales the image down if dimensions exceed allowed size.
+
+This component also supports the following props:
+
+* `logo`: The encoded logo image.
+* `to`: The redirect path for when users click the logo.
+* `width`:	Optional width of the logo.
+* `height`: Optional height of the logo.
+
+.Procedure
+
+. To display a custom company logo in the global header, update the configuration with a mount point for `CompanyLogo`:
++
+.Example: Configuring company logo
++
+[source,yaml,subs="+attributes,+quotes"]
+----
+# ...rest of the global header configuration
+red-hat-developer-hub.backstage-plugin-global-header:
+  mountPoints:
+    - mountPoint: application/header
+      importName: GlobalHeader
+      config:
+        position: above-main-content # <1>
+
+    - mountPoint: global.header/component
+      importName: CompanyLogo
+      config:
+        priority: 200
+        props:
+          to: '/catalog' # <2>
+          width: 300
+          height: 200
+          #logo: 'data:image/png;base64,...' # <3>
+          logo:
+            dark: 'data:image/png;base64,...' # <4>
+            light: 'data:image/png;base64,...' # <5>
+----
+<1> Specify the position of the company logo in the global header. By default, the `position` is set to `above-main-content`. Supported values are `above-main-content` and `above-sidebar`.
+<2> Define the redirect path for when users click the logo.
+<3> Provide a single logo to apply across all themes.
+<4> Provide a dark mode logo in the `logo.dark`.
+<5> Provide a light mode logo in the `logo.light`.
++
+You can use either a single logo for all themes or theme-specific logos (light and dark). If you define both, theme-specific logos take precedence over the single logo.
+
+. (Optional) If you do not provide props to the `CompanyLogo` component, the component instead uses values defined under `app.branding` in your `{my-app-config-file}` file. You can configure both the sidebar logo and the `CompanyLogo` fallback as shown in the following configuration:
++
+.Example: Fallback configuration
++
+[source,yaml,subs="+attributes,+quotes"]
+----
+app:
+  branding:
+    fullLogoWidth: 220  # Fallback width
+    # fullLogo: "data:image/svg+xml;base64,..."
+    fullLogo:
+      light: 'data:image/svg+xml;base64,...'
+      dark: 'data:image/svg+xml;base64,...'
+----
++
+The `CompanyLogo` uses the following configuration elements to control fallback and sizing behavior:
+
+* *Logo source priority*
+** If you fail to provide a logo through either the `CompanyLogo` props (`logo`, `logo.light`, `logo.dark`) or the `app.branding.fullLogo`, the component displays the default {product-short} theme-specific logo.
+
+* *Logo width priority*
+** If you fail to specify the `width` using the `CompanyLogo` prop (`props.width`) or through the `app.branding.fullLogoWidth` from the `{my-app-config-file}`, the component applies a default width.
+** If your configure `width` results in a height greater than the default maximum height, the component automatically scales the logo down.
++
+In some cases, changing only the width might not visibly affect the logo unless you also adjust the height.
+
+* *Logo height priority*
+** If you do not specify the `height` using the `CompanyLogo` prop (`props.height`), the component automatically applies a default maximum height.
++
+[NOTE]
+====
+If you increase the company logo's height, the global header height also increases, but the image never appears cropped or distorted.
+====
+
+.Verification
+. The logo appears correctly in the global header.
+. Click the logo to confirm it redirects to the path you defined in `props.to`.
+. Toggle between `light` and `dark` themes to ensure the correct logo loads in each.
+. (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-dropdown.adoc

@@ -0,0 +1,56 @@
+[id="displaying-preferred-username-in-global-header-profile-dropdown_{context}"]
+= Displaying the preferred username in the profile dropdown
+
+You can display the preferred username in the global header's profile dropdown 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.
+
+.Procedure
+.Example when you configure `spec.profile.displayName`
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: _<my_display_name>_ # <1>
+  title: _<display_name_title>_ # <2>
+spec:
+  profile:
+    displayName: _<my_display_name>_ # <3>
+  memberOf: [janus-authors]
+----
+<1> Required: Specify the unique username (`metadata.name`).
+<2> Optional: Specify the preferred title (`metadata.title`).
+<3> Optional: Specify the preferred display name (`spec.profile.displayName`). This takes the highest priority.
+
+.Example when you do not configure `spec.profile.displayname` but configure `metadata.title`
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: _<my_display_name>_ # <1>
+  title: _<display_name_title>_ # <2>
+spec:
+  memberOf: [janus-authors]
+----
+<1> Required: Specify the unique username (`metadata.name`).
+<2> Optional: Specify the preferred title (`metadata.title`).
+
+.Example when you do not configure the `spec.profile.displayname` and the `metadata.title`
+
+[source,yaml,subs="+attributes,+quotes"]
+----
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: _<my_display_name>_ # <1>
+spec:
+  memberOf: [janus-authors]
+----
+<1> Required: Specify the unique username (`metadata.name`).
+
+[NOTE]
+====
+The application falls back to `metadata.name` when you do not register the user entity.
+====