[Alerting UI] Alert and Connector flyouts Save and Save&Test buttons should be active by default.#86708
Conversation
|
Pinging @elastic/kibana-alerting-services (Team:Alerting Services) |
ymao1
left a comment
There was a problem hiding this comment.
Initial review looks good! Very clear what the errors are now :) Left a question about whether we should be clearing invalid input on Save vs leaving it in the form for user to fix.
| } | ||
| }; | ||
|
|
||
| export function getConnectorWithInvalidatedFields( |
There was a problem hiding this comment.
Can we add unit tests for these new functions?
| configErrors: IErrorObject, | ||
| secretsErrors: IErrorObject, | ||
| baseConnectorErrors: IErrorObject | ||
| ) { |
There was a problem hiding this comment.
If I create an email connector and enter an invalid Sender field, I get immediate feedback on the form that "Sender is not a valid email address." but then if I press Save, my (invalid) entry is cleared and the error just says "Sender is required.". Would it be better to keep the user input so the user can fix it?
There was a problem hiding this comment.
Great catch! I will fix it.
igoristic
left a comment
There was a problem hiding this comment.
Monitoring looks good 👍
I'm wondering about the wording here... I don't think its right as it isn't quite clear what trigger means... The user has a list of Alert types... and we want them to choose one... @gchaps any thoughts? |
| )} | ||
| disabled={readOnly} | ||
| checked={hasAuth} | ||
| checked={hasAuth || false} |
There was a problem hiding this comment.
hasAuth is boolean, so I can't figure out why || false is needed.... 🤔
If it can be undefined then something seems to be wrong in the typing 😬
There was a problem hiding this comment.
In the current implementation, the initial alert object has all user input fields as undefined to be able to not trigger validation on the form opening (each input field has a check on undefined to not set a validation error in this case). When onblur event on the field or click save we are triggering invalidating the values - basically setting it to null instead of undefined.
Do you think we should consider another approach for implementing UI inputs validation triggering?
gmmorris
left a comment
There was a problem hiding this comment.
Left a few typing problems that need sorting but nothing major.
Behaviour wise all looks good except for the missing error when an action is selected but no connector is configured, so happy to approve assuming this is sorted :)
👍
| const alertParamsErrors = (alertTypeModel | ||
| ? alertTypeModel.validate(alert.params).errors | ||
| : []) as IErrorObject; |
There was a problem hiding this comment.
This looks wrong 🤔
the type signature for IErrorObject can't be []... this is probably passing because of the explicit as casting.
It's best to avoid this sort of casting as it can hide errors... better to do this:
const alertParamsErrors: IErrorObject = ....
| const { apiUrl, projectKey } = action.config; | ||
|
|
||
| const isApiUrlInvalid: boolean = errors.apiUrl.length > 0 && apiUrl != null; | ||
| const isApiUrlInvalid: boolean = errors.apiUrl.length > 0 && apiUrl !== undefined; |
There was a problem hiding this comment.
Same thing as != null except now you are allowing null as a valid apiUrl. Why?
There was a problem hiding this comment.
I've added undefined as a value to compare to skip the input validation on the form initialization (before the user did some input or clicked Save). If it is null currently, this is expected an invalid user input trigger and invalid fields will be highlighted. Do you have any issues with this?
There was a problem hiding this comment.
that sound good to me, just wondering the reasoning. thank you!
| }) => { | ||
| const { apiUrl, orgId } = action.config; | ||
| const isApiUrlInvalid: boolean = errors.apiUrl.length > 0 && apiUrl != null; | ||
| const isApiUrlInvalid: boolean = errors.apiUrl.length > 0 && apiUrl !== undefined; |
| actionParams, | ||
| errors: { short_description: [] }, | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| errors: { 'subActionParams.incident.short_description': [] }, |
There was a problem hiding this comment.
if you write it like this, there is no typescript error:
errors: { ['subActionParams.incident.short_description']: [] },
| errors: { | ||
| short_description: ['Short description is required.'], | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| 'subActionParams.incident.short_description': ['Short description is required.'], |
There was a problem hiding this comment.
whoops, get it here too ;)
stephmilovic
left a comment
There was a problem hiding this comment.
Thanks for making those quick TS changes. Looks good from the SIEM perspective. Thank you! LGTM 🚀
💚 Build SucceededMetrics [docs]Async chunks
Distributable file count
Page load bundle
History
To update your PR or re-run it, just comment with: |
…should be active by default. (elastic#86708) * Alert and Connector flyouts Save and Save&Test buttons should be active by default. * fixed typechecks * fixed typechecks * refactored repeted code * fixed typechecks * fixed typechecks * fixed typechecks * fixed due to comments * fixed failing tests * fixed due to comments * fixed due to comments * fixed due to comments * fixed typescript checks
…should be active by default. (#86708) (#87380) * Alert and Connector flyouts Save and Save&Test buttons should be active by default. * fixed typechecks * fixed typechecks * refactored repeted code * fixed typechecks * fixed typechecks * fixed typechecks * fixed due to comments * fixed failing tests * fixed due to comments * fixed due to comments * fixed due to comments * fixed typescript checks


Current PR is making Save and Save&Test buttons always available:
Resolve #84091