Server UI shows "undefined" for environment variable populated from a secret

[ebr]

Summary

When an environment variable is populated from a secret, the server UI shows undefined for its value. This is highly confusing because the user's first reaction is that the secret value isn't being correctly passed. This messaging could be improved by showing secret or hidden or something to that effect, to indicate that the value does exist, but is not displayed.

---

Message from the maintainers:

Impacted by this bug? Give it a 👍. We prioritise the issues with the most 👍.

[alexec]

Thank you for the bug report. Would you like to submit a PR to fix this?

[ebr]

I would like to, if I can get to it in the next couple of weeks! (i only have basic familiarity with either Go or React, but look forward to figuring it out)

[alexec]

You probably don't need to know Go to do this. I think you need to change: ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx

[aletepe]

I'm working on this bug for Hacktoberfest. @alexec I'd like to not only fix the bug but maybe tweak it a bit to differentiate not available values from secrets. I was thinking having the value show as [redacted] (or something similar) when the value is a secret, and showing not available for other reasons. Where would you say is the best place to put that logic?

[alexec]

@aletepe I don't think the actual value will be returned by the API call. So I don't think you'll need to redact it. What will be useful is showing it is from a secret (e.g. using an FontAwesome icon, e.g. <i className='fa fa-key'/>), the name of the secret and key within it. This allows the user to then go and look it up themselves if they need to.

[aletepe]

@alexec I meant writing literally redacted, so as to make users understand there was actually a value behind it and not simply that there is no value available, and thus avoiding the confusion which led to raising this bug.
I like the idea of showing a more details about the secret, like the icon you mention 👍

PS: could you please assign this issue to me? Thanks before hand!

[alexec]

sure or maybe "secret"?

[aletepe]

@ebr could you please add to the Issue description a screenshot of the UI showing undefined? And maybe steps to reproduce it (an example yaml file or similar)?

[aletepe]

I've used the example in the docs here: https://github.com/argoproj/argo/blob/master/examples/secrets.yaml

Without changes the behaviour is the following:

With my proposed changes it would look something like this (injected two secrets to show multiline behaviour):

It would still show undefined like in the first screenshot for undefined values not coming from secrets.

@alexec @ebr how is this looking?

[alexec]

Looks great!
Can I ask that when you hover your mouse of the key icon you get some explanatory text?

[aletepe]

Something like this?

The value of this environment variable has been hidden for security reasons because it comes from a kubernetes secret.

[alexec]

perfect