-
Notifications
You must be signed in to change notification settings - Fork 487
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add popover and prevent submit if duration params are invalid (#244) #291
Add popover and prevent submit if duration params are invalid (#244) #291
Conversation
Codecov Report
@@ Coverage Diff @@
## master #291 +/- ##
==========================================
+ Coverage 82.23% 82.36% +0.13%
==========================================
Files 141 141
Lines 3112 3119 +7
Branches 647 651 +4
==========================================
+ Hits 2559 2569 +10
+ Misses 439 436 -3
Partials 114 114
Continue to review full report at Codecov.
|
I would rather display an error in the UI than try to infer which units the user had in mind by typing just a number. E.g. |
Per @yurishkuro comment, we can add a
The message only shows up if the user tries to submit the form while the field is invalid. To take it a bit further, the |
@@ -98,6 +99,11 @@ export function convertQueryParamsToFormDates({ start, end }) { | |||
}; | |||
} | |||
|
|||
function addDefaultUnitToDuration(duration) { | |||
if (!duration) return null; | |||
return /[0-9]$/.test(duration) ? `${duration}ms` : duration; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Side note: 1.1
would fail this regex.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was just testing that if it ended in a number, append 'ms'
. 1.1 ends in a number so it would pass. Regardless, I updated to your stronger pattern (but added a $
because 0ms0 would pass that pattern).
Signed-off-by: Everett Ross <reverett@uber.com>
a57d15d
to
b7616b9
Compare
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The joys of redux-forms...
Changes look great. LMK if anything looks awry with my comments.
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, one minor suggestion.
packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js
Outdated
Show resolved
Hide resolved
Signed-off-by: Everett Ross <reverett@uber.com>
Signed-off-by: Everett Ross <reverett@uber.com>
…tracing#244) (jaegertracing#291) * Add validation for duration fields in SearchForm (jaegertracing#244) Signed-off-by: Everett Ross <reverett@uber.com> * Add tests for redux-form-field-adapter Signed-off-by: Everett Ross <reverett@uber.com> * Fix boolean prop type Signed-off-by: Everett Ross <reverett@uber.com> * Add boolean for input validation, change popover to show when inactive Signed-off-by: Everett Ross <reverett@uber.com> * Add tests for onChangeAdapter Signed-off-by: Everett Ross <reverett@uber.com> * Create separate ValidatedAdaptedInput for duration fields Signed-off-by: Everett Ross <reverett@uber.com> * Remove unnecessary curly braces Signed-off-by: Everett Ross <reverett@uber.com> Signed-off-by: Everett Ross <reverett@uber.com>
…tracing#244) (jaegertracing#291) * Add validation for duration fields in SearchForm (jaegertracing#244) Signed-off-by: Everett Ross <reverett@uber.com> * Add tests for redux-form-field-adapter Signed-off-by: Everett Ross <reverett@uber.com> * Fix boolean prop type Signed-off-by: Everett Ross <reverett@uber.com> * Add boolean for input validation, change popover to show when inactive Signed-off-by: Everett Ross <reverett@uber.com> * Add tests for onChangeAdapter Signed-off-by: Everett Ross <reverett@uber.com> * Create separate ValidatedAdaptedInput for duration fields Signed-off-by: Everett Ross <reverett@uber.com> * Remove unnecessary curly braces Signed-off-by: Everett Ross <reverett@uber.com> Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
…tracing#244) (jaegertracing#291) * Add validation for duration fields in SearchForm (jaegertracing#244) Signed-off-by: Everett Ross <reverett@uber.com> * Add tests for redux-form-field-adapter Signed-off-by: Everett Ross <reverett@uber.com> * Fix boolean prop type Signed-off-by: Everett Ross <reverett@uber.com> * Add boolean for input validation, change popover to show when inactive Signed-off-by: Everett Ross <reverett@uber.com> * Add tests for onChangeAdapter Signed-off-by: Everett Ross <reverett@uber.com> * Create separate ValidatedAdaptedInput for duration fields Signed-off-by: Everett Ross <reverett@uber.com> * Remove unnecessary curly braces Signed-off-by: Everett Ross <reverett@uber.com> Signed-off-by: Everett Ross <reverett@uber.com> Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
Which problem is this PR solving?
Short description of the changes
If the user times in an invalid duration, a popover is displayed to indicate that units are necessary. The submit button is disabled if any fields are invalid. To avoid jumping on the user as soon as the start typing, the popover is not visible until the user has blurred. After the user has blurred, the popover is visible as long as the field is invalid, even if the field becomes focused again.