feat(global-header): added config for default header components

[ciiay]

Description

• Added config for default application header components
• Added extra common icons
• Updated support to "tech-preview"
• Updated support to "production" as the new plugin version will be ready for production

Which issue(s) does this PR fix

• Fixes RHIDP-5252

PR acceptance criteria

Please make sure that the following steps are complete:

• GitHub Actions are completed and successful
• Unit Tests are updated and passing
• E2E Tests are updated and passing
• Documentation is updated if necessary (requirement for new features)
• Add a screenshot if the change is UX/UI related

How to test changes / Special notes to the reviewer

1. Pull changes in rhdh-plugins PR to your local and in workspaces/global-header/plugins/global-header/ directory run npx --yes @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root <path-to-your-rhdh>/dynamic-plugins-root --dev
2. Pull changes in this PR to your local rhdh, in app-config.local file:

dynamicPlugins:
  rootDirectory: dynamic-plugins-root
  frontend:
    red-hat-developer-hub.backstage-plugin-global-header:
      mountPoints:
        - mountPoint: application/header
          importName: GlobalHeader
          config:
            layout:
              position: above-main-content
              # position: above-sidebar
        - mountPoint: application/header/component
          importName: SearchComponent
          config:
            type: search
            enabled: true
            slot: header-start
            priority: 100
        - mountPoint: application/header/component
          importName: CreateDropdown
          config:
            type: dropdown_button
            enabled: true
            key: create
            slot: header-start
            priority: 90
        - mountPoint: global.header/component
          importName: HeaderIconButton
          config:
            type: icon_button
            slot: header-start
            priority: 80
            props:
              icon: support
              tooltip: Support
              to: https://github.com/redhat-developer/rhdh/issues
        - mountPoint: global.header/component
          importName: HeaderIconButton
          config:
            type: icon_button
            slot: header-start
            priority: 70
            props:
              icon: notifications
              tooltip: Notifications
              to: /notifications
        - mountPoint: application/header/component
          importName: ProfileDropdown
          config:
            type: dropdown_button
            enabled: true
            key: profile
            slot: header-end
            priority: 0

To test out the Notifications icon button, follow the below steps:
To set up notifications frontend, you can add to app-config.yaml:

dynamicPlugins:
  frontend:
    backstage.plugin-notifications:
      dynamicRoutes:
        - path: /notifications
          importName: NotificationsPage
          module: NotificationsPlugin
          menuItem:
            config:
              props:
                titleCounterEnabled: true
                webNotificationsEnabled: true
            icon: notificationsIcon
            text: Notifications

To send notifications, you can setup external service https://backstage.io/docs/auth/service-to-service-auth/#static-keys-for-plugin-to-plugin-auth like this:

backend:
  auth:
    externalAccess:
      - type: static
        options:
          token: ${EXTERNAL_SERVICE_TOKEN}
          subject: cicd-system-completion-events

(Make sure this is auth under backend and not the top level auth key)
Then you can use this to send notifications:

curl -X POST http://localhost:7007/api/notifications -H "Content-Type: application/json" -H "Authorization: Bearer ${EXTERNAL_SERVICE_TOKEN}" -d '{"recipients":{"type":"broadcast"},"payload": {"title": "Title of boradcast message","link": "http://foo.com/bar","severity": "high","topic": "The topic"}}'

Screen recording(uploaded Feb 7):

rhidp_5252_final.mp4

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-3c47b552

[ciiay]

/test e2e-tests

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-bd346191

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-174e3088

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-94399801

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-524c84b0

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-d7becf76

[christoph-jerolimov]

Small change request

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-0bc22271

[christoph-jerolimov]

The plugin doesn't define this components yet, so this code couldn't be found.

As discussed in Slack. You must update the plugin to the latest release as well.

I share this here so that others see that this PR is on hold until the plugin is updated. :)

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-e10a187a

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-54132891

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-703c7a7c

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign pataknight for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2263 or
• quay.io/rhdh-community/rhdh:pr-2263-3aaf792e

[its-mitesh-kumar]

@ciiay , there is no clear line outline for the search box is this okay ?

[its-mitesh-kumar]

@ciiay Tested on cluster Search , Create , Support , Profile .
Search , Create => Seems working as per expected ,
while Support is not redirecting anywhere
and Profile is showing Guest user while I am logged through my Github .
I am attaching screen recording for the same

Screen.Recording.2025-02-11.at.1.32.55.AM.mov

[ciiay]

@ciiay Tested on cluster Search , Create , Support , Profile . Search , Create => Seems working as per expected , while Support is not redirecting anywhere and Profile is showing Guest user while I am logged through my Github . I am attaching screen recording for the same

Screen.Recording.2025-02-11.at.1.32.55.AM.mov

Hi @its-mitesh-kumar , thanks for the review. This has to be tested with rhdh-plugins PR, not ready for testing on a cluster until the rhdh-plugins PR gets in and the new version is out and available.

[ciiay]

@ciiay , there is no clear line outline for the search box is this okay ?

Hi @its-mitesh-kumar , this UI aligns up with the Figma design.