[SIEM] Detection Engine Create Rule Design Review #1

[patrykkopycinski]

Summary

All form fields in each step panel should be left-aligned with the beginning of the step header text, as indicated in the wireframes and mockups. Currently, they are left-aligned with the numbered/checked circle

The “Index patterns” field button to “Reset to default index patterns” is missing the prefixed refresh icon indicated in the mockups

In the “Severity” field, it appears as though the EuiHealth component within the field is off-center vertically

Can the “False positives” field label be renamed to “False positive examples” and the subsequent “Add false positive” button text be changed to “Add false positive example”?

Alignment should again be left-aligned with step header text, not with the checked circle

The “Description” field appears in a disabled textarea, which is not semantically correct and doesn't match the designs.
The “Severity” field’s value appears to be lower case, when it should be sentence case (i.e. “low” vs “Low”).
The “Risk score” field is missing from the completed step summary.
Can we change the “False positives” field label to be “False positive examples”?

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

Pinging @elastic/siem (Team:SIEM)

[XavierM]

LGTM

[MichaelMarcialis]

This is looking great! Thanks so much for the fast fixes, @patrykkopycinski! Leaving a few small comments below.

• Thanks for correcting the alignment/indentation of the form fields. Unfortunately, it looks like this change also indented in the hr at the bottom of each step panel (above the "Continue" buttons). Is there a way that the bottom hr elements can not be indented and instead match the alignment and width of the top hrs, as shown in the designs?

• It look like with these changes, the completed step summaries are now laid out in a single column. Is there any way we can restore the completed step summaries to being in a two column layout (even if "Description" field can’t go the full width to match the designs)?

[patrykkopycinski]

Focusing the “Custom query” field brings up the autocomplete menu. The autocomplete menu appears to be very short vertically and also increases the height of the “Define rule” step when opened.

Thanks for correcting the alignment/indentation of the form fields. Unfortunately, it looks like this change also indented in the hr at the bottom of each step panel (above the "Continue" buttons). Is there a way that the bottom hr elements can not be indented and instead match the alignment and width of the top hrs, as shown in the designs?

It look like with these changes, the completed step summaries are now laid out in a single column. Is there any way we can restore the completed step summaries to being in a two column layout (even if "Description" field can’t go the full width to match the designs)?

The spacing in between each step panel appears to be smaller than indicated in the wireframes/mockups. Can we change to 24px space in between each step panel to mimic the design?

The EuiHorizontalRule under each step panel header is a different/incorrect margin size versus the one used in the step panel footer. Can the one under the header be changed to margin="m"?

When altering the “Index patterns” field, the alignment of the label changes and shifts up. Doing so misaligns the label, as it doesn’t share the same baseline as the “Reset to default index patterns” text. (P) use IconButton

All subordinate actions (“Add reference URL”, “Add false positive example”, “Add MITRE ATT&CK threat”) appear to be larger than designed in both icon and font size. Can we change this to use a 12x12 icon and 12px font size?

Both time unit select elements for “Rule run interval & look-back` and “Additional look-back” appear as if nested inside and overflowing out the bottom of the preceding time integer input. Can we clean this up to make them appear adjacent rather than nested?

The helper text below the “Additional look-back” field appears to be breaking a line at an arbitrary point. Can this just be allowed to stretch the width of the given space? Or if not, perhaps confined to the width of the form fields? (X maybe)

The “MITRE ATT&CK” field’s tactic value is the wrong font size and weight. (P)
The “MITRE ATT&CK” field’s technique values are missing the prefixed ∟ icon. (P)

[MichaelMarcialis]

This looks great, @patrykkopycinski. I only noticed one super small thing, but marking this as approved for after. Comment below. Thanks!

It appears that the "Optional" text for "Additional look-back" field is the incorrect color (should match the rest). Also when the field is focused, it turns blue (like the label). That's not a pattern that happens in the fields above. If we can lose the focus color on the "Optional" text here, that would be great.

[patrykkopycinski]

Thank you @MichaelMarcialis 👍

[patrykkopycinski]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 24c8aff

History

• 💚 Build #19828 succeeded 5d03a46
• 💚 Build #19707 succeeded 70b7a78
• 💚 Build #19594 succeeded 2ae20af
• 💚 Build #19518 succeeded b51bd4a
• 💚 Build #19300 succeeded b99674f

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