[Security Solution] Add link to documentation for Alert Notification Placeholders/Examples in Actions UI

[spong]

We've received a number of questions around the format and available options for constructing the message within Action UI when creating/editing Rules. This enhancement is for adding a docs link within the UI so users can better understand their options and proper formatting necessary to achieve their use case. In addition to a docs link, we could also add a template selector that could be pre-populated with popular templates per rule type or other use cases -- defer to @elastic/security-design on any additional UX enhancements outside of the docs link.

Useful Docs Links:

• https://www.elastic.co/guide/en/security/7.13/rules-ui-create.html#rule-action-variables
• https://www.elastic.co/guide/en/security/current/rules-ui-create.html#create-threshold-rule

Figma mock link for designs

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[elasticmachine]

Pinging @elastic/security-detections-response (Team:Detections and Resp)

[yiyangliu9286]

Please view the proposed design screens for this request, attaching the Figma mock link for design details:

• Based on the requirement, adding a docs link button so users can have more context around their options and proper formatting necessary to achieve their use case.

• Proposing a new Popover design for "Alert notifications placeholders" for showing the pre-populated template selector (open to feedback for what we call this template selector)
• Adding a search functionality for users to quickly search for the templates.
• Adding a Rule type templates as a sub menu option.

• For the Rule type templates submenu, adding pre-populated templates based on the rule type, also proposing to add search functionality here to enhance the usability as well.
• Question for this: Other than the Threadhold rule template that I am seeing in this doc link, are there any other examples / templates for other rule types other than Threashold rule? (cc: @spong @peluja1012 @jethr0null)

[mdefazio]

Nice update on this!

Is there a better title for the popover? Are these simply Alert variables? Or perhaps we should add in the label next to the icon and then we might not need the popover title.

Would it make sense to break out templates as a separate menu? (Then I think you'll definitely want labels next to the icons)

Also, we will likely want to transition this to the markdown editor so we can gain the benefits of that component similar to how we have it in Cases. Something to consider if you're spending a fair amount of time on this.

[spong]

Great stuff @yiyangliu9286, thanks for sharing! 🙂 And @mdefazio, I think Alert variables would work well here. ++ to using the markdown editor as well if we can (along with any auto-complete we can provide).

I believe the @elastic/kibana-alerting-services team owns this portion of the UI currently, so they might be able to chime in on some history here or relevant issues with regards to upgrading the editor.

[mikecote]

I believe the @elastic/kibana-alerting-services team owns this portion of the UI currently, so they might be able to chime in on some history here or relevant issues with regards to upgrading the editor.

The code lives within the platform plugin, but is open for anyone to enhance. We've tracked some requests to use EUI Markdown editor such as the email body, but enhancing generic components (textareas to become markdown editors) comes with caveats if we want to support rich text. We've discovered each connector implements a slightly different version of markdown and can be tricky to get right (#87440, #79371 (comment)) making the switch to EUI Markdown editor a bit more complex than a simple swap.

[yiyangliu9286]

Thanks for the feedback @mdefazio & @spong!

1. Attaching a short-term revised vision IF we decided to still go for the existing component with the Popover I proposed in the first iteration:

• I have updated some UX/UI problems I saw in this current page layout (figma) re: depaneling the page, update "Actions" header to "Connectors" to make it less repetitive, remove the "add templates" icons and replaced it to buttons with labels to call out Alert variables and Rule variables also removing some of the button placements to make the experience more intuitive.

• Alert variables Popover

• Rule variables Popover

2. IF we'd like to use Markdown Editor, I have thought about a possible view may look like this (but it looks like a more long-term vision):

[banderror]

@yiyangliu9286 @spong does it still require some design work?

[spong]

I think we still need a final review of this design and buyoff from the alerting folks if we're planning more structural changes of this shared component. Probably fine to wire up an override for the title (Actions->Connectors section) for security, but I'm not entirely sure how the + Connector button fits into the existing workflow of selecting a connector and creating if it doesn't exist -- so need some clarity here. But I think we're fine with adding the Alert/Rule variables components as optional props and so Security can add whatever we need without changing it for Stack.

Security Flow:

Stack Mgmt Flow:

[banderror]

@peluja1012 please create a separate ticket for UX improvements

[spong]

Additional community request that would benefit from inline examples/documentation outlined here.