fix(ui): update config at runtime to apply branding

ciiay commented 2 weeks ago

Description

Currently app.branding.iconLogo is not being injected during runtime, which leads favicon not updating from customization. This PR added a ConfigUpdater component to take the config at runtime so that customized iconLogo will be picked up as favicon.

Which issue(s) does this PR fix

Fixes issue #777
RHIDP-2673

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)
[x] Add a screenshot if the change is UX/UI related

How to test changes / Special notes to the reviewer

Test data:

data: 
  app-config-rhdh.yaml: |
    app: 
      branding: 
        iconLogo: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAADAFBMVEVHcEyWcCiolEdoUSP+4DD7xRX8zBe4qVCtjDKtiCL+94mkgSWpiy6tmDmogyC1mzGvnkCjgCaypUW2pTvjuzbhuzfMvD2viBzWwjfYqBW2rU360R+3jRnz2jPg1ETmvzTPsCvZsDn8yhrvuR31ySL+7ETsxC68lCK2jyDhujrFmhq5sVPYrBzerS3zwh+9kBj3yBxWORf+5jL91CF/XB3swizdtTjrrRTitTD1yCO5sFfjujbnvS9KOi3DkBTovC/WqDKLcVr8yyP5yhzEiB+NYxj+81CMWx3q4VfjoxZ+Sg1XNRL7wRK2sF7itzGibhXFjRDQpDbl3VzcsDO/hBDyqQ7cnRXkqyLyuxr+6DuyeRPYoCXKgA/ZlRjbggq1r2XOoTBcOiBfPCMNBQTWz2TwrBnKmCXCvWr+60XFli5ySiTPiQouEQYlDgd8QAvl4XvHixe3s2y+kCn7zit+VhF1WheZgDnbuCGffSXYlBHDvnCsfRhzYRfGtURxWQrz1y6EYAjVwkbX03fw3kLRylf+93HEvWjp5X65smrAtGPt6XW7sGTx7oTd12H91hz91Bv8xRLjjAr96D791xz8yRf90B/91ib80R7+4y/91Rn90Bz9zyH+4jX9zRn92yT91iD6yBn8xxT8wxb+8EP6uw/0pQz+81r+82782TT+9Hz98VP++IXy30HnshTwuRX1uRL+5jb+7Tz+6Dj+6zj2uhD84DT760nrxij+4jPq4E798Ez+2i3+8k390hr5zyL1uxT5xhj+5zD6zh38xxvtvxv9zxr92S7+3Cr80SH+4C3wsA/3uRL92SP+4zb+6j7+81X3sQ/9yxm4aAj80hrqpg6+ZwnvoAztngv/9Ffehg3gigr1qhDxoA3eiQ3SewnplQv2wBrgnAz+7kT882T+5TvWlRDbkAr82zX38HX2viP93zjjmA7+82fJgAmwgyn+60+6egnyth359If94j/gvSP++ZCsdAiqjQ/++ZT40Cresxr99Wb++pr08ID//J/+/JaMm2H6AAAAlHRSTlMABgko/v7+AQJ0/iQVKFWdGChWnVse64L6/pT+rP7+m/Y1/vz+/t/TtSnrpP7H/tX+I/7+C+E6/qz+lninIO/RhXX+/jBa/jH+/uCR/mpoofln/h32/v2+/P7bTvLG/it6Durz9f6zvf4bGv77/v7+70Vx/vHmZ/5K/q/WtG39/v699P5X/i/+NGH+Wv7Y///////+AJaghAAAAYtJREFUOMtjYKAGcLTFL8+YlMyBVwFzbk4iXgVl7/Ky8CqoLS9hxyfP3vilFK8BLc31dcx45Dl6f6/6XoNHQVvX/9ZfDRW4FXT+/bf657dqRpwKunv+cK2o/FCEU0FH+4/Vnz++LcjEpYCp6SvX++LX2Wk4g7vq08o3r14+e5qAS0Fh/srlGc9TH4YF4lKR/mL5sicrHlzxdMBhS3zK42WPIuc4nzLXVcSuwjdo1Y3F585O37Je2cIMa7xZeZx3Wxw5Z9pC1gN69taaWOJDe+euPRs37dg9e9GUuYcs1eRFRNFVSMltU91sNIPlmNNhtv7JfdIqpjZ+wShKhMTWTNpwcMbJ49NmT521t3/mzMsLIsKjkb0lICwhu5Vl3rwz8+cbT50+l23CwglLQmNdkA3h5VfYvu/E9P6+vv6jFxfdvnn3ztLrMe4o9vBwquscMVigNIV1gs+SpRMnToy76o3uIUFODS3Jtev2n75w7f6te5e8DLElQm4+cRl9u4CQKH9XEzxplYmRgToAADVmlE2t74hfAAAAAElFTkSuQmCC

Screenshots: Chrome:

Firefox:

Note: Dynamically loads favicon is not supported by Safari yet.

github-actions[bot] commented 2 weeks ago

The image is available at: quay.io/janus-idp/backstage-showcase:pr-1381!

ciiay commented 2 weeks ago

/retest

github-actions[bot] commented 2 weeks ago

The image is available at: quay.io/janus-idp/backstage-showcase:pr-1381!

ciiay commented 2 weeks ago

/test e2e-tests

ciiay commented 2 weeks ago

/retest

github-actions[bot] commented 2 weeks ago

The image is available at: quay.io/janus-idp/backstage-showcase:pr-1381!

openshift-ci[bot] commented 1 week ago

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: gashcrumb

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](https://github.com/janus-idp/backstage-showcase/blob/main/OWNERS)~~ [gashcrumb] Approvers can indicate their approval by writing `/approve` in a comment Approvers can cancel approval by writing `/approve cancel` in a comment

divyanshiGupta commented 1 week ago

/cherry-pick 1.2.x

openshift-cherrypick-robot commented 1 week ago

@divyanshiGupta: new pull request created: #1424

In response to [this](https://github.com/janus-idp/backstage-showcase/pull/1381#issuecomment-2238538987): >/cherry-pick 1.2.x Instructions for interacting with me using PR comments are available [here](https://git.k8s.io/community/contributors/guide/pull-requests.md). If you have questions or suggestions related to my behavior, please file an issue against the [kubernetes-sigs/prow](https://github.com/kubernetes-sigs/prow/issues/new?title=Prow%20issue:) repository.

janus-idp / backstage-showcase