[Security Solution] Test and fix EUI theme Borealis applied to Rule Management features

[banderror]

Related to: #199715
PR: #206122

Summary

First initial testing done by @banderror revealed no major issues with the features owned by the @elastic/security-detection-rule-management team. In fact, the new theme looks very nice! A few very minor issues were noticed that are logged below.

We should regression test our UIs and follow #199715 for the work that needs to be done in the code.

Todo

• Check if Borealis has been enabled by default. #temp-security-eui-borealis-integration
• Review the actions requested by the EUI team and understand what do we need to do exactly
  • Description of [Meta] EUI Visual Refresh integration and QA #199715 ("Requested Code Changes")
  • Comments in the ticket starting from this one
• Test our features with the theme enabled and update the "Noticed issues" section below

Noticed issues

Colors

Some colors that we use for rule status and severity indicators seem off.

Current theme	Borealis
	(the warning color appears way too dark)

[elasticmachine]

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

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management)

[JasonStoltz]

@banderror Interesting issue you're experiencing!

My hunch is that you are using euiColorVis colors for those. As part of the advice for Borealis, we are asking folks to discontinue using those outside of data visualizations.

My recommendation here is to stick with the EuiHealth component here (if you're not using it already) and using the colors as described in the example:

<EuiHealth color="subdued">Inactive</EuiHealth>
<EuiHealth color="primary">Active</EuiHealth>
<EuiHealth color="success">Healthy</EuiHealth>
<EuiHealth color="warning">Warning</EuiHealth>
<EuiHealth color="danger">Failure</EuiHealth>

CC @gvnmagni and @mgadewoll to see if they agree!

[gvnmagni]

thank you Jason and thank you @banderror . I am aware of this case, @codearos shared this to me few days ago since I was trying to map different uses of severity levels across the product.

We have been working on a Severity Color Palette that might help you out here, it is still a work in progress but you can already find a description here (Issue & conversation) and a PR made by Lene here that introduces tokens (PR).

If you like the idea, and I would love to hear from @codearos here first maybe, we could try use colors coming from this palette.

If, instead, you prefer a quick fix, we can try to match similar color to the ones you had in Amsterdam and make the best out of this (the reason why colors changed is bacause Datavis colors palette have been updated and they don't follow the same logic as before, this is why we have undesired results now)

[nikitaindik]

I've thoroughly tested our pages and opened a PR that implements the changes described in "Requested Code Changes" of this issue.

Incorrect severity colors will be fixed by this Threat Hunting PR.

Incorrect color of the warning rule execution status will be addressed by EUI. There is no draft PR yet, as discussions are still ongoing between the design and EUI folks to determine the best approach.

We can consider this issue done once my PR and the severity colors PR are merged.

[banderror]

Hey @nikitaindik, let's keep the ticket open for now. As you say, when both PRs are merged, we will need to do some final testing and close it if everything is ok.

[nikitaindik]

The severity colors PR is now finally merged. I'll test our merged changes combined with new severity colors on main and will post an update here.

[nikitaindik]

I retested our pages in both themes with dark and light modes, and can confirm that the changes look good and we are now Borealis-ready.

Here's a screenshot of severity colors on the Rule Management page for Amsterdam and Borealis.

Since the severity colors palette is still in development by the design folks (issue), the colors may change in the future. However, severity colors for the whole Security Solution are now centralized in one place (code), making future updates straightforward once the final palette is ready.

Let me get a final confirmation from the designer that we are good to go and ask him to check the "QA" checkbox for our team in the ticket. Apart from that, there's really nothing left to do from our end.

[nikitaindik]

We have a ✅ for QA from the designer. Closing this one! 🎉