fix(slo): search bar

[kdelemme]

Resolves #166689
Resolves #166683

🍒 Summary

This PR fixes two bugs:

1. When the auto refetch was triggered, the search bar was disabled, resulting in a lost of focus if the user was actively typing in the search bar.
2. When submitting a search query, we were forcing refetch but doing so was using the previous state of the query. Instead, we only update the query state, and let react react hook query trigger a refetch based on the state update.

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[elasticmachine]

Pinging @elastic/actionable-observability (Team: Actionable Observability)

[mgiota]

Only code review LGTM! I will check locally as well

[mgiota]

I tested it and what you describe works fine. But look what happens when I detele the search query. I would expect to get back the list of all slos. Is it something we control? This behaviour is also on main, so I guess we can create a separate issue for this.

Screen.Recording.2023-09-21.at.17.49.44.mov

[kdelemme]

@mgiota Yes i've noticed that before. Indeed this is not related to this fix. In that case, the problem is the QueryStringInput component does not trigger the onSubmit callback when clicking on the "clear" icon.
I need to see if I can bubble up the submit event, and catch it just above to trigger manually the onsubmit.

[kdelemme]

I've improved the fix.

search.mov

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: fe71140

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
observability	1.0MB	1.0MB	+1.0B

History

• 💛 Build #160828 was flaky fc6adbf

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @kdelemme

[mgiota]

Looks great!