Validate Session Title with Yup #8236
Conversation
This is the validation library suggested by Mainmatter, let's give it a try.
This is a very simple case, but validations work and are translated. Doing this in an initializer isn't a good idea, it breaks everything when we try and get to the application in tests, but this is a starting place.
The initializer was a no go, it blew up tests. Plus this was everything is in the same file. When the file is loaded so are the error message translations. We extract any needed information for the translation from the error and send the entire thing to the message component. That component then does the translation and subs in the description when needed.
By calling validate when the error display is triggered we ensure that errors will be present and that properties will get autotracked that are validated. This, in turn, let's us remove the asynchronous code from a component and just access the validation object's errors as they are needed.
Wait 250 milliseconds each time we validate in order to not validate every single keystroke, but still respond with errors quickly for users.
|
How would I test a "NewSession" to see if the validation works or not? |
|
Testing: |
|
For some reason, I was thinking of a "NewSession" as a new user session, like when you log in /facepalm |
|
Failing test is for real, I need to swap the way it debounces, it works for user input, but the test fails because async is hard and there seems to be a ordering issue with calling it this way. Should be a pretty minor fix, this is still ready for comments. |
|
First thing I notice is that the form actually seems to get submitted before the validations are run now. Click submit button, see spinner, see validations. Before it would show up before spinning. Not sure if that's better or worse, but it does incur a minor speed decrease. |
The validator was running out of sync so things would appear as valid even if they weren't. Now things run in the right order. I removed the validation run from the all fields error display, this should really be used exclusively with saving and at that point the consumer should run a full validation and check the result.
It's probably fixed now, but the new session save was doing a boolean check which could be undefined and causing and issue. I think this is a better API for the validations.
I think you may have been seeing the same async weirdness that was breaking in the test, I've moved some stuff around. I also reduced the debounce because I think that 250ms was actually too long and felt janky. |
|
@jrjohnson Your change fixed what I was seeing :D |
jrjohnson
requested review from
michaelchadwick and
stopfstedt
as code owners
First step in making a transition away from our current classic decorator valdidation approach and into something more modern and less prone to blowing up horribly when decorator support lands in the language officially.
This has some significant advantages over our current approach:
I'm not a huge fan of the
setupErrorMessagesfunction on file load invocation as I don't really know why that works and doesn't get called on every import, I wasn't able to get something going with an initializer, but optimization there may be possible.This seemed like a natural stopping place for comments. I can either follow up in this PR with migrations for everything else, or more likely we'll tackle them one at a time.