Change to secret inputs in response to #6338 in st2

[fdrab]

Changes made:

1, removed password field type as it no longer serves any purpose. only the base primitive types are left (string / number / int...)
2, added a wrapper

block around inputs to display a visibility toggle button to align centrally
3, secrets are now obfuscated using -webkit-text-security and this can be toggled by clicking on an "eye" icon.
4, if a field is marked as secret and the secret is not shown via visibility toggle, spellcheck is disabled
5, if input is secret, validation returns "*".repeat(v.length) instead of the value for types that return value in the error message
6, moved the "eye" icon a bit to the right to not overlap with the scrollbar

Feedback is welcome, I'm not a very good developer and I may not know all the things there is to know and may have missed something. These changes were tested in firefox / Edge and Chrome.

My 'gulp test' fails due to binding issues (TypeError: bind EINVAL 0.0.0.0). If anyone knows how to get around that, I'm all ears.

[nzlosh]

The gulp looks like it might be related to an out of date web browser. Care to take a shot at updating the tests?

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
/home/circleci/project/node_modules/react-textarea-autosize/dist/react-textarea-autosize.cjs.js:16
var isIE =  _isBrowser ? !!document.documentElement.currentStyle : false;

[fdrab]

The gulp looks like it might be related to an out of date web browser. Care to take a shot at updating the tests?

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
/home/circleci/project/node_modules/react-textarea-autosize/dist/react-textarea-autosize.cjs.js:16
var isIE =  _isBrowser ? !!document.documentElement.currentStyle : false;

will take a look

[fdrab]

So I've checked some things and I'm starting to doubt it has anything to do with browser version or whatnot:
1, when I run the command that failed (npm run test-unit) in my virtualbox, all 308 tests pass
2, I've run the above mentioned command to update the browserslist and even though it was reported as success, the yarn.lock file wasn't updated with proper versions, so it still thinks that it's old, for some reason.
3, my subsequent PR for sanitizing the preview in actions succeeded, which suggests that there is no issue with browser or tests as they are (perhaps except for the fact that zombie is no longer updated and is an archived repo)

I'll try to take a deeper dive into this tomorrow or in the near future.

[fdrab]

I'm unable to replicate the error in my environment. I've spun up a completely fresh install of Ubuntu 22.04, installed MongoDB, installed Redis / RabbitMQ, deployed ST2 3.9 unstable, cloned the repo, switched to the branch, ran all the commands required to do "gulp test" and everything works. Both unit tests and functional tests both work fine, no failures, 308 unit tests passed, 84 functional tests passed.

How can I get access to replicate the CircleCI run locally? Do I need to be part of the org? Haven't work with CircleCI before.

I want to be able to replicate the complete circleCI run on my machine using CircleCI tools without spinning up an EC2. There has to be something I can't see on my virtual machine.

[nzlosh]

The circleci yaml https://github.com/StackStorm/st2web/blob/master/.circleci/config.yml describes the process used to test on CircleCI. If you look at the build logs on CircleCI for the commit that failed you can see how the environment is composed, e.g. linux distribution, the environment variables, nodejs version etc.

[fdrab]

😎

[cognifloyd]

Sorry for the delayed review. Just a couple of questions before I approve.

1. Would you please post screenshots of what the secret fields look like with this change?

2. Does the visibility button appear on all fields or just on secret fields?

Aside: This will probably fix other issues I've had with secrets fields, like the browser trying to autofill my st2 user+password when running an action. Exciting!

[fdrab]

test flow with 2 inputs, string and an object, single line, hidden:

visible:

Multi-line input secret (only strings are multi-line, JSONs are parsed into single lines):

visible:

The string has a default value that's not masked, because frankly that shouldn't even be allowed, as it makes the secrets visible in plaintext in the yaml.

However, now that I made these screenshots, I've noticed that if the string/JSON is very long, it overlaps with the "eye" icon, so I have to fix that.

[fdrab]

Fixed the overlap by adjusting padding from the right side, so that if the string or json is too long, it'll word-wrap before it hits the icon:

[cognifloyd]

Sweet. This should be a big improvement.

[fdrab]

before this is merged please let me play around with the icon positioning. it being off-center irks me.

[fdrab]

OK I've added a wrapper around secret fields to center the icons and also increased the padding from the right side to 40px from 36px and increased max height to 100px from 50:

Hidden:

Not hidden:

[cognifloyd]

LGTM. Are you ready for me to merge this?

[fdrab]

Yes. Nothing for me to add to this one.