feat(ui): add status panel extensions

[alexymantha]

Adds an extension hook to the status panel. Here is an example of 2 dummy extensions using this feature:

Closes #15775

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Toolchain Guide
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• Optional. My organization is added to USERS.md.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
  • Could not find any tests for what I changed, is there no tests or did I miss them?
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (0b35e2f) 49.51% compared to head (a486963) 49.51%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #15780   +/-   ##
=======================================
  Coverage   49.51%   49.51%           
=======================================
  Files         270      270           
  Lines       47498    47498           
=======================================
  Hits        23517    23517           
  Misses      21669    21669           
  Partials     2312     2312           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[alexymantha]

As a reference, I tested with this extension: https://github.com/alexymantha/argocd-progressive-sync-extension

[ashutosh16]

@alexymantha This feature looks great to me, can you present this feature in the contributor meeting and get other's opinions

[alexymantha]

Sure @ashutosh16! I'll try to join this week's meeting if I find the time

[ashutosh16]

@alexmt What are your thoughts on this feature? Do you expect any widget to be presented differently?

[ashutosh16]

Here's my proposal for making this feature into a generic external plugin on the status panel. When a user clicks on a plugin in Argocd's status panel, a fly-out widget containing the plugin is displayed.
There are a lot of potential uses for developing plugins on the Argocd tree-view status panel.

@alexymantha Would you be interested in extending the feature to incorporate the above changes? Let me know.

[alexymantha]

@ashutosh16 Yes I'd be happy to extend it with your suggestion! I will be working on that in the next few days

[ashutosh16]

@alexymantha Is the PR ready for review? It would be great if we get this feature in 2.10

[alexymantha]

@alexymantha Is the PR ready for review? It would be great if we get this feature in 2.10

I just have a bug to iron out and it will be ready to review. I will try to get it done this week.

[alexymantha]

@ashutosh16 Figured it out, the bug was coming from my extension, not this PR so the PR is ready to review.

Here's a short video showing the flyout panel:

progressive-sync.mov

[ashutosh16]

@alexymantha I pulled in the latest changes and I'm seeing few issues.

• The panel extension UI is not working as expected. I used the repo to test the change
  The banner title seems to incorrect
  The slider is not working

• Extension on the other resource is broken.
  Error

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at initLegacyExtensions (webpack-internal:///./src/app/shared/services/extensions-service.ts:33:10)
<img width="1481" alt="Screenshot 2023-12-11 at 10 14 58 AM" src="https://github.com/argoproj/argo-cd/assets/11219262/28cccddc-ebac-4588-a336-69659665f025">

[alexymantha]

My bad @ashutosh16, I forgot to merge the newest changes into the extension. Can you try the latest version? Tried a similar setup as yours and it works on my side with the up to date extension

[ashutosh16]

@alexymantha Thanks for your wonderful contributions. The feature looks awesome to me and looking forward in using many ways!

Screen.Recording.2023-12-15.at.2.46.17.PM.mov

[ashutosh16]

LGTM