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 theme PR to your local
3. Pull changes in this PR to your local rhdh, in packages/app/package.json, replace "@redhat-developer/red-hat-developer-hub-theme": "0.4.0", with "@redhat-developer/red-hat-developer-hub-theme": "file:path/to/your/red-hat-developer-hub-theme",
4. In your rhdh app-config.local file:

Config

``` dynamicPlugins: rootDirectory: dynamic-plugins-root 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 # above-main-content | below-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 ```

6*. If test on a cluster, add the following config to your app-config to hide the search modal and settings button in sidebar:

app-config.yaml

    # for testing notifications
    backend:
      auth:
        dangerouslyDisableDefaultAuthPolicy: true
        externalAccess:
          - type: static
            options:
              token: test-token
              subject: cicd-system-completion-events

helm chart with notifications plugin enabled

dynamic:
  includes:
    - dynamic-plugins.default.yaml
  plugins:
    - disabled: false
      package: ./dynamic-plugins/dist/backstage-plugin-notifications
      pluginConfig:
        app:
          sidebar:
            search: false
            settings: false
        dynamicPlugins:
          frontend:
            backstage.plugin-notifications:
              dynamicRoutes:
                - importName: NotificationsPage
                  path: /notifications
    - disabled: false
      package: ./dynamic-plugins/dist/backstage-plugin-notifications-backend-dynamic
    - disabled: false
      package: ./dynamic-plugins/dist/backstage-plugin-signals-backend-dynamic
    - disabled: false
      package: ./dynamic-plugins/dist/backstage-plugin-signals
      pluginConfig:
        dynamicPlugins:
          frontend:
            backstage.plugin-signals: {}
    - disabled: false
      package: >-
        ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
      pluginConfig:
        dynamicPlugins:
          frontend:
            default.main-menu-items:
              menuItems:
                default.create:
                  title: ''  # to hide the Create button from sidebar
            red-hat-developer-hub.backstage-plugin-global-header:
              mountPoints:
                - config:
                    position: above-main-content
                  importName: GlobalHeader
                  mountPoint: application/header
                - config:
                    priority: 100
                  importName: SearchComponent
                  mountPoint: global.header/component
                - config:
                    priority: 99
                    props:
                      growFactor: 0
                  importName: Spacer
                  mountPoint: global.header/component
                - config:
                    priority: 90
                    props:
                      icon: add
                      title: Create...
                      to: create
                  importName: HeaderIconButton
                  mountPoint: global.header/component
                - config:
                    priority: 80
                  importName: SupportButton
                  mountPoint: global.header/component
                - config:
                    priority: 70
                  importName: NotificationButton
                  mountPoint: global.header/component
                - config:
                    priority: 50
                  importName: Divider
                  mountPoint: global.header/component
                - config:
                    priority: 10
                  importName: ProfileDropdown
                  mountPoint: global.header/component
                - config:
                    priority: 100
                    props:
                      icon: manageAccounts
                      link: /settings
                      title: Settings
                  importName: MenuItemLink
                  mountPoint: global.header/profile
                - config:
                    priority: 10
                  importName: LogoutButton
                  mountPoint: global.header/profile

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. :)

[christoph-jerolimov]

/retest

[github-actions]

The image is available at:

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

[christoph-jerolimov]

/retest

[github-actions]

The image is available at:

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

[debsmita1]

verified this on a cluster
/lgtm

[teknaS47]

Looks good. Verified on a cluster /lgtm

[github-actions]

The image is available at:

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

[christoph-jerolimov]

@ciiay and I've tested this on a cluster and this got lgtm from both of us.

The last e2e tests passed successfully:

The last change only includes a documentation change: a90c1f4

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christoph-jerolimov, debsmita1

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

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [christoph-jerolimov,debsmita1]

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-a90c1f4f

[openshift-ci]

New changes are detected. LGTM label has been removed.

[github-actions]

The image is available at:

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

[christoph-jerolimov]

/cherry-pick release-1.5

[openshift-cherrypick-robot]

@christoph-jerolimov: once the present PR merges, I will cherry-pick it on top of release-1.5 in a new PR and assign it to you.

In response to this:

/cherry-pick release-1.5

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[openshift-cherrypick-robot]

@christoph-jerolimov: #2263 failed to apply on top of branch "release-1.5":

Applying: feat(global-header): added config for default header components
Applying: prettier fix
Applying: hide header items in sidebar
Applying: resolve failed ci checks
Applying: resolve failed ci checks
Applying: updated header component mp name
Applying: added icons and updated global header config
Applying: addressed review comments
Applying: updated global header wrapper to take the latest release
Applying: removed default support button url
Applying: resolved merging conflicts
Applying: addressed review comments
Applying: updated theme package to pick up changes for global header
Applying: fix: align application header mountpoint with other mount points
Applying: fixed double scrollbar issue
Applying: small pickup
Applying: prettier fix
Applying: updated default global header config
Applying: fixed global header version
Applying: fixed default global header config
Applying: updated header package.json dependency
Applying: ignore the problematic link
Applying: updated yarn.lock
Using index info to reconstruct a base tree...
M	yarn.lock
Falling back to patching base and 3-way merge...
Auto-merging yarn.lock
CONFLICT (content): Merge conflict in yarn.lock
error: Failed to merge in the changes.
hint: Use 'git am --show-current-patch=diff' to see the failed patch
hint: When you have resolved this problem, run "git am --continue".
hint: If you prefer to skip this patch, run "git am --skip" instead.
hint: To restore the original branch and stop patching, run "git am --abort".
hint: Disable this message with "git config advice.mergeConflict false"
Patch failed at 0023 updated yarn.lock

In response to this:

/cherry-pick release-1.5

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.