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]

😎