feat: Make certain Status panel items look more 'clickable' (#19698)

[keithchong]

Fixes one part of the issue in #19698.

This is an Argo CD-only fix and does not include the 3D style changes to argo-ui which impacts the tool-bar buttons, which we can do separately.

This PR addresses only the issue with the status panel items. Specifically, the sync, operation and app statuses and revision labels do not indicate they are clickable. Their visual representation should be improved.

The solution is to put a border around the status icon, and to add an external link icon next to the revision text. Also, a border is added to the Ellipsis ('...') button

The text beside the status icon remains clickable in case users are accustomed to clicking on it. At least, the status icon is made more like a button.

Status Text still clickable:

Status icon looks like a button to indicate it is clickable:

Note if the border is drawn around the text as well, the boxes for potentially three statuses will be of different sizes, so the panel looks really strange.

Border around the "More" button:

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

[bunnyshell]

✅ Preview Environment deployed on Bunnyshell

Component	Endpoints
argocd	https://argocd-nfyxro.bunnyenv.com/
argocd-ttyd	https://argocd-web-cli-nfyxro.bunnyenv.com/

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🔴 /bns:stop to stop the environment
• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to remove the environment

[jsoref]

@keithchong offhand, the middle dots feel way too high up...

I wouldn't block on any of my comments, but it still seems worth providing them...

The green check feels a bit too high, but nowhere near as high as the dots:

I think I'm definitely happier w/ flat as opposed to extra shadows.

Note that if someone is going to spend time on this widget set before it's dropped, at least the delete dialog needs space between the ok/cancel buttons:

(I'm just kicking the tires with https://argocd-nfyxro.bunnyenv.com/ to see how things look in this version, I understand that the item is out of scope for the changes.)

Fwiw, we appear to use two colors for links... one's a cyan as you can see from this sha panel link, and one's the green we're using to the left:

We should probably consider making the green text that's a link in the status pane use the same cyan as the sha in the pane.

If we do that, we could consider changing the green Sync OK into a cyan Sync OK which is the usual hint that we have a link.

If we do that, perhaps we don't need to do this button work?

[jsoref]

Ok, so we're mixing a color and a thing... If I create a broken application (I copied some stuff from https://cd.apps.argoproj.io/applications/example.helm-dependency?resource= to https://argocd-nfyxro.bunnyenv.com/applications/env-nfyxro/example.helm-dependency-josh?view=tree&resource=&conditions=false, but apparently not enough), then I get some red stuff:

9 Errors is odd text. I'd kinda want Sync failed (9 errors) or something instead.

Also, I have no idea why the 9 Errors is so low instead of near the top of the box, it looks really out of place...

And, as a user, I'm not quite sure why I don't get a sha in this case. Presumably, it tried to sync to a specific sha.

[keithchong]

I wouldn't block on any of my comments, but it still seems worth providing them...

The green check feels a bit too high, but nowhere near as high as the dots
My subsequent commit fixes this.

I think I'm definitely happier w/ flat as opposed to extra shadows.

For now, I left it. The other PR in argo-ui, along with other changes in Argo CD will supposedly change this.

Note that if someone is going to spend time on this widget set before it's dropped, at least the delete dialog needs space between the ok/cancel buttons:
I saw this issue when looking at the box-shadow. The fix is in argo-ui. I'd like to not touch argo-ui for this PR.

(I'm just kicking the tires with https://argocd-nfyxro.bunnyenv.com/ to see how things look in this version, I understand that the item is out of scope for the changes.)

Fwiw, we appear to use two colors for links... one's a cyan as you can see from this sha panel link, and one's the green we're using to the left

Yeah, this is beyond the scope of the original problem. I left the status text still clickable for users who are used to clicking on it. Ideally, I would just change the design and force users to click on the status icon button instead. @crenshaw-dev recalls that the text is clickable too.

We should probably consider making the green text that's a link in the status pane use the same cyan as the sha in the pane.

If we do that, we could consider changing the green Sync OK into a cyan Sync OK which is the usual hint that we have a link.

If we do that, perhaps we don't need to do this button work?

Yeah, I tried different options, including making the text like a hyperlink with the underline style. That option makes everything look busy and it's ugly because the font size is a lot bigger than the revision text. Also, perhaps there should be a distinction because the revision link brings you to an external page, whereas the status link opens up a sliding panel.

So, I opted for the status icon button which is 'minimal' impact to the design, as well to changes in the code, and it does resolve the problem definition such that it will indicate to new users that this area of the panel is clickable.

I also made some changes for the hydrator status, which I missed earlier. Even there, the colours are off, and the hydrator is only in alpha. (I know the fix for the green failed message for the red error icon, but I think this fix should go with the hydrator work.)

If you are ok with the above reasons, and new changes, let's merge this soon?

[keithchong]

Ok, so we're mixing a color and a thing... If I create a broken application (I copied some stuff from, but apparently not enough), then I get some red stuff:

9 Errors is odd text. I'd kinda want Sync failed (9 errors) or something instead.

Also, I have no idea why the 9 Errors is so low instead of near the top of the box, it looks really out of place...

And, as a user, I'm not quite sure why I don't get a sha in this case. Presumably, it tried to sync to a specific sha.

Yep, I was taken aback by this too and wondered why it's down there. I think this is a separate issue.

[jsoref]

I think I can live with it.