feat(ui): list dependent resources in delete popup

[agaudreault]

When deleting a resource in the UI, the default option slected will delete the dependent resources. It can be easily missed by a user to delete a resource with all its dependents by mistake. For instance, if someone wants to clean up an old replicaSet that does not have pods anymore, and inadvertently selects the current replicaset, the UI popup will be very similar.

Adding the list of direct dependents reduce the risk of human error.

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.
• 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.
• 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.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 45.13%. Comparing base (f87897c) to head (9e52b89).
Report is 162 commits behind head on master.

❗ Current head 9e52b89 differs from pull request most recent head b2e17a8. Consider uploading reports for the commit b2e17a8 to get more accurate results

Files	Patch %	Lines
cmd/argocd/commands/app_resources.go	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #18116      +/-   ##
==========================================
- Coverage   49.73%   45.13%   -4.60%     
==========================================
  Files         274      352      +78     
  Lines       48948    57437    +8489     
==========================================
+ Hits        24343    25925    +1582     
- Misses      22230    28774    +6544     
- Partials     2375     2738     +363     

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

[todaywasawesome]

@agaudreault what happens when there are so many dependent resources that the window goes beyond the bottom of the screen? We might need a limit in the display to keep from the window getting broken. I glanced through the code and didn't see one.

[todaywasawesome]

Also I love this idea :D

[crenshaw-dev]

@todaywasawesome I had the same thought, found it in the 2nd screenshot

[agaudreault]

@todaywasawesome The maximum number of items is 5. I made sure it is not possible to have an item only for "and 1 more". The code might not be the sexiest, I did my best but I am not too familiar with the Typescript syntax 😅

[ashutosh16]

LGTM!

[ashutosh16]

Use <span> instead of <p>
error in the console

[agaudreault]

I have to use <p> to get the correct css. This will require another PR in https://github.com/argoproj/argo-ui ?

[ashutosh16]

Why do we need another PR in argo-ui?

[agaudreault]

See argoproj/argo-ui#556

[agilgur5]

I might suggest making the "and X more" un-collapsible so that a user can get the full list if they wanted to.

Otherwise def a good feature!