[Alerting] Add popover for Elasticsearch query rule type

[lcawl]

Summary

Relates to #134763

That PR included edits to the UI text for the Elasticsearch query rule type and removed a tooltip associated with the query threshold fields.

This PR:

• Adds a popover to provide more detailed advice about the query threshold and time window, based on information that currently exists only in https://www.elastic.co/guide/en/kibana/master/rule-type-es-query.html
• Changes the term "duration" with "time window". I recommended the use of duration in the previous PR but now think it's misleading.

Screenshots

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/response-ops (Team:ResponseOps)

[gchaps]

This is a nice start. Here are a few comments.

Placement

Can this pop-up cover just the greyed out background and not the Create rule form? It would nice to see the rest of the form for context.

We should look at other help pop-ups and use the same width.

Formatting

• Larger font size for title

• Re: the steps, @KOTungseth reminded me that when we first started implementing in-product assistance, we talked about leaving step-by-step content in the product docs, and reference content in the product. So maybe this (with or without the bullets):

• The threshold value is a comparison operator, for exampel, IS ABOVE 1000. ...

• The time is how far back in time to search. To avoid gaps...

Text

Overall, I think we can cut down the text a bit.

[mdefazio]

A few thoughts:

I think we'll at least want to put a max-width on the popover panel to account for wide screens...

What if we use a tour component instead? It has a maxW prop and we can also break apart the steps based on the input (the multi doc callout might prove tricky though).

I'm wondering if this helps us a) avoid taking over the screen and b) is readable in the context of the input (depending on the screen size and how far I've scrolled when I click the help, it may hide the inputs).

Here's a rough breakdown of what I was imagining.
Whimsical link

Granted, I think this does beg the question of whether this should go through the whole form...

[mdefazio]

Just have the one comment on the width of the popover.

I think we can explore some other options on incorporating this copy within the form. But this certainly is an improvement.

[lcawl]

Can this pop-up cover just the greyed out background and not the Create rule form? It would nice to see the rest of the form for context.

I didn't see how to make that happen, but I did change the anchor position so it's less likely to cover the pertinent fields.

• Larger font size for title

I was unable to force the popover title and the callout title to match, so I've removed the callout title.

• Re: the steps, @KOTungseth reminded me that when we first started implementing in-product assistance, we talked about leaving step-by-step content in the product docs...

Sure, I've changed it back to paragraphs.

Overall, I think we can cut down the text a bit.

I've reduced the callout to a single line. I think we could likely also drop the "For example..." phrase, but if you see other areas to cut, let me know!

[mdefazio]

LGTM!

[gchaps]

Looking good.

I think we should be more direct in the second paragraph:

To avoid gaps in detection, set this value greater than or equal to the value you chose for the Check every field.

Hopefully, the pop-up doesn't cover the "Check every" field.

I like the blue box at the bottom and without the title. Is there a way we can indicate this is a note? Maybe an icon and the word note:

x Note: If the time window ....

[gchaps]

LGTM

[lcawl]

I think we should be more direct in the second paragraph:

Thanks! I made that change in c6592f6

Hopefully, the pop-up doesn't cover the "Check every" field.

Unfortunately the "check every" field is right near the top of that UI so folks have likely scrolled too far to see it anymore. Hopefully it's still fresh in their memory.

I like the blue box at the bottom and without the title. Is there a way we can indicate this is a note? Maybe an icon and the word note:

Since it's a single sentence in that callout now, I was able to get the icon to re-appear (it disappeared when I removed the title) by turning the sentence into the title: 1718236. I've refreshed the initial screenshot with the result.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 1718236
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
stackAlerts	136	137	+1

Async chunks

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

id	before	after	diff
stackAlerts	209.6KB	211.8KB	+2.1KB

History

• 💚 Build #57604 succeeded f06aac2
• 💔 Build #57577 failed 6bcd8ec
• 💚 Build #57557 succeeded 003d330
• 💚 Build #56439 succeeded 62650ad
• 💔 Build #56432 failed 1b7d0c0
• 💔 Build #56145 failed 261725b

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