feat(global-header): added mount points for global header #2168

ciiay · 2025-01-10T22:33:03Z

Description

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

In your local rhdh-plugins repo, pull the changes from #270
In /workspaces/global-header/plugins/global-header/ directory, run

npx --yes @janus-idp/cli package export-dynamic-plugin --dynamic-plugins-root ~/<your_path_to_rhdh>/rhdh/dynamic-plugins-root --dev

In your local rhdh repo, add the following code in your app-config.local.yaml file

dynamicPlugins:
  rootDirectory: dynamic-plugins-root
  frontend:
    backstage-plugin-simple-test-components:
      scaffolderFieldExtensions:
        - importName: SimpleTestFieldExtension
    red-hat-developer-hub.backstage-plugin-global-header:
      mountPoints:
        - mountPoint: application/header
          importName: GlobalHeader
          config:
            layout:
              position: above-main-content

In your local rhdh repo, which has changes in this PR, run yarn install and yarn dev

Screen recording:
Locally:

rhidp_5471.mp4

OCP:

rhidp_5471_pr_2168.mp4

github-actions · 2025-01-10T23:41:33Z

The image is available at:

github-actions · 2025-01-13T15:59:42Z

The image is available at:

github-actions · 2025-01-14T15:26:00Z

The image is available at:

ciiay · 2025-01-14T17:18:48Z

/test e2e-tests

github-actions · 2025-01-14T19:02:54Z

The image is available at:

christoph-jerolimov

Some initial feedback:

packages/app/src/components/Root/Root.tsx

christoph-jerolimov

You can just render all "above sidebar" headers and all "above content" headers:

packages/app/src/components/Root/Root.tsx

github-actions · 2025-01-14T22:51:46Z

The image is available at:

github-actions · 2025-01-14T23:42:40Z

The image is available at:

invincibleJai · 2025-01-22T14:09:30Z

/cc @debsmita1

debsmita1

Tested with positions
above-sidebar and above-main-content and invalid position value

/lgtm

christoph-jerolimov

Hi, yep, this looks good! One small suggestion below to extract the new code into a new component.

And then I think this PR should also include some new documentation in https://github.com/redhat-developer/rhdh/blob/main/docs/dynamic-plugins/frontend-plugin-wiring.md

I think a good spot would be after "Customizing and Adding Entity tabs" (before "Provide additional Utility APIs").

packages/app/src/components/Root/Root.tsx

Signed-off-by: Yi Cai <[email protected]>

github-actions · 2025-01-23T16:51:32Z

The image is available at:

Signed-off-by: Yi Cai <[email protected]>

github-actions · 2025-01-23T18:04:14Z

The image is available at:

ciiay · 2025-01-23T19:09:06Z

docs/dynamic-plugins/frontend-plugin-wiring.md

Hi @kadel , can you take a look at changes in this file?

You can also review it from: https://github.com/ciiay/rhdh/blob/rhidp-5471-create-mountpoints-for-global-header/docs/dynamic-plugins/frontend-plugin-wiring.md

christoph-jerolimov

Great work @ciiay. The change incl. documentation change lgtm. 👍

We can always improve.

I've tested the container image on a cluster without enabling the plugin. ✔️

With enabled plugin and without any other configuration the header is shown ✔️

global:
  dynamic:
    plugins:
      - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
        disabled: false

I could also add another header from the test package ✔️

global:
  dynamic:
    plugins:
      - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
        disabled: false
      - package: '@red-hat-developer-hub/[email protected]'
        integrity: 'sha512-Dlay4DUAC3SifSJx4dmKDeD07DITGX9ZZ2SMCgcMMc00GJVKToD3DFuPYZ7lV2C2Ve7gWDufCf5NUmqaUWf6GA=='
        pluginConfig:
          dynamicPlugins:
            frontend:
              red-hat-developer-hub.backstage-plugin-global-header-test:
                mountPoints:
                  - mountPoint: application/header
                    importName: CrashHeader
                    config:
                      layout:
                        position: above-main-content

above-sidebar works also ✔️

ErrorBoundary works also expected ✔️

/lgtm
/approve

openshift-ci · 2025-01-23T22:33:25Z

[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

christoph-jerolimov · 2025-01-23T23:34:41Z

/retest

openshift-ci bot requested review from davidfestal and dzemanov January 10, 2025 22:33

ciiay requested a review from christoph-jerolimov January 10, 2025 22:33

ciiay mentioned this pull request Jan 10, 2025

fix(global-header): added some changes for integration with rhdh redhat-developer/rhdh-plugins#270

Merged

4 tasks

ciiay force-pushed the rhidp-5471-create-mountpoints-for-global-header branch from f7700b5 to 5080c3e Compare January 13, 2025 15:22

ciiay force-pushed the rhidp-5471-create-mountpoints-for-global-header branch 2 times, most recently from 964a108 to a123747 Compare January 14, 2025 14:03

ciiay force-pushed the rhidp-5471-create-mountpoints-for-global-header branch 2 times, most recently from a467323 to 314e8f0 Compare January 14, 2025 18:23

ciiay requested a review from gustavolira January 14, 2025 21:22

christoph-jerolimov suggested changes Jan 14, 2025

View reviewed changes

packages/app/src/components/Root/Root.tsx Outdated Show resolved Hide resolved

packages/app/src/components/Root/Root.tsx Outdated Show resolved Hide resolved

packages/app/src/components/Root/Root.tsx Outdated Show resolved Hide resolved

ciiay force-pushed the rhidp-5471-create-mountpoints-for-global-header branch from 9a37dde to ad1eab1 Compare January 14, 2025 22:13

christoph-jerolimov suggested changes Jan 14, 2025

View reviewed changes

ciiay requested a review from christoph-jerolimov January 21, 2025 22:59

openshift-ci bot requested a review from debsmita1 January 22, 2025 14:09

debsmita1 reviewed Jan 23, 2025

View reviewed changes

openshift-ci bot assigned debsmita1 Jan 23, 2025

openshift-ci bot added lgtm approved labels Jan 23, 2025

openshift-merge-robot added the needs-rebase label Jan 23, 2025

christoph-jerolimov suggested changes Jan 23, 2025

View reviewed changes

packages/app/src/components/Root/Root.tsx Outdated Show resolved Hide resolved

packages/app/src/components/Root/Root.tsx Outdated Show resolved Hide resolved

packages/app/src/components/Root/Root.tsx Outdated Show resolved Hide resolved

christoph-jerolimov mentioned this pull request Jan 23, 2025

feat(fab): add new mountpoints support for providers and listeners #2199

Open

5 tasks

ciiay added 14 commits January 23, 2025 09:34

feat(global-header): added mount points for global header

b71446f

Signed-off-by: Yi Cai <[email protected]>

fixed prettier check

e2fbab9

Signed-off-by: Yi Cai <[email protected]>

Added wrapper for global header

7677978

Signed-off-by: Yi Cai <[email protected]>

Updated global header plugin version

90ef611

Signed-off-by: Yi Cai <[email protected]>

updated yarn.lock for global header plugin

33cd77d

Signed-off-by: Yi Cai <[email protected]>

added global header plugin in dockerfiles

6078392

Signed-off-by: Yi Cai <[email protected]>

added global header plugin in InternalPluginsMap

cf68605

Signed-off-by: Yi Cai <[email protected]>

added global header plugin to app-config.dynamic-plugins

c3741f5

Signed-off-by: Yi Cai <[email protected]>

addressed review comments

2cf057b

Signed-off-by: Yi Cai <[email protected]>

code improvement

fa68765

Signed-off-by: Yi Cai <[email protected]>

some improvements

4579a37

Signed-off-by: Yi Cai <[email protected]>

addressed comments

b9e035d

Signed-off-by: Yi Cai <[email protected]>

Addressed review comments

44fbd0e

Signed-off-by: Yi Cai <[email protected]>

prettier fix

90ec01a

Signed-off-by: Yi Cai <[email protected]>

ciiay force-pushed the rhidp-5471-create-mountpoints-for-global-header branch from 1db34b3 to 90ec01a Compare January 23, 2025 14:42

openshift-merge-robot removed the needs-rebase label Jan 23, 2025

fixed merge conflicts and addressed review comments

1f4efda

Signed-off-by: Yi Cai <[email protected]>

ciiay requested a review from christoph-jerolimov January 23, 2025 15:10

ciiay added 2 commits January 23, 2025 11:12

Addressed review comments

1ff7aa5

Signed-off-by: Yi Cai <[email protected]>

yarn dedupe

80cbcbc

Signed-off-by: Yi Cai <[email protected]>

updated md and resolved failed ci check

5c67b0b

Signed-off-by: Yi Cai <[email protected]>

ciiay commented Jan 23, 2025

View reviewed changes

christoph-jerolimov approved these changes Jan 23, 2025

View reviewed changes

openshift-ci bot assigned christoph-jerolimov Jan 23, 2025

openshift-ci bot added the lgtm label Jan 23, 2025

openshift-merge-bot bot merged commit 9a7353c into redhat-developer:main Jan 24, 2025
11 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(global-header): added mount points for global header #2168

feat(global-header): added mount points for global header #2168

ciiay commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 10, 2025

github-actions bot commented Jan 13, 2025

github-actions bot commented Jan 14, 2025

ciiay commented Jan 14, 2025

github-actions bot commented Jan 14, 2025

christoph-jerolimov left a comment

christoph-jerolimov left a comment

github-actions bot commented Jan 14, 2025

github-actions bot commented Jan 14, 2025

invincibleJai commented Jan 22, 2025

debsmita1 left a comment

christoph-jerolimov left a comment

github-actions bot commented Jan 23, 2025

github-actions bot commented Jan 23, 2025

ciiay Jan 23, 2025 •

edited

Loading

christoph-jerolimov left a comment •

edited

Loading

openshift-ci bot commented Jan 23, 2025

christoph-jerolimov commented Jan 23, 2025

feat(global-header): added mount points for global header #2168

feat(global-header): added mount points for global header #2168

Conversation

ciiay commented Jan 10, 2025 • edited Loading

Description

PR acceptance criteria

How to test changes / Special notes to the reviewer

github-actions bot commented Jan 10, 2025

github-actions bot commented Jan 13, 2025

github-actions bot commented Jan 14, 2025

ciiay commented Jan 14, 2025

github-actions bot commented Jan 14, 2025

christoph-jerolimov left a comment

Choose a reason for hiding this comment

christoph-jerolimov left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 14, 2025

github-actions bot commented Jan 14, 2025

invincibleJai commented Jan 22, 2025

debsmita1 left a comment

Choose a reason for hiding this comment

christoph-jerolimov left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 23, 2025

github-actions bot commented Jan 23, 2025

ciiay Jan 23, 2025 • edited Loading

Choose a reason for hiding this comment

christoph-jerolimov left a comment • edited Loading

Choose a reason for hiding this comment

openshift-ci bot commented Jan 23, 2025

christoph-jerolimov commented Jan 23, 2025

ciiay commented Jan 10, 2025 •

edited

Loading

ciiay Jan 23, 2025 •

edited

Loading

christoph-jerolimov left a comment •

edited

Loading