[Security Solution] EUI Refresh Followup Pt. 1#205990

Merged

rylnd merged 28 commits intoelastic:mainfrom

rylnd:rylnd/eui_refresh_qa

Jan 23, 2025

Contributor

rylnd commented Jan 9, 2025 •

edited

Loading

Summary

This is the first batch of work involving #202052. It includes the following tasks:

(Important) Review usage of "success" colors for positive, semantic intent.(details).
(Important) Review and update color palette usage. (details)
(Important) Replace vis colors used outside of visualizations with color tokens . (details)
(Important) Replace custom colors with semantic tokens (details)
(Important) Replace color calculation functions with semantic tokens. (details)
Update tokens to use the new naming scheme. (details)

What changed?

Broadly, these changes involve two main areas: Exception Lists and the Rule Creation form (specifically: the EQL query bar and the "time" inputs (Suppression Duration, Interval, Lookback)).

I also found an unused component, and fixed a minor UI bug with Exception Comments.

Screenshots (before and after, and with both themes) are included below.

Also: as a majority of these components' usage of theme variables is done with @styled-components, and we are transitioning away from that toward @emotion, I also opted to remove usages of @styled-components wherever possible, as that change was negligible in comparison with the theming changes. If a file being changed included references to static eui theme variables, e.g. euiThemeVars, those were removed as well (but many are still outstanding).

Screenshots

NOTE: Most of the "Before" screenshots were taken from a cluster using the Borealis theme.

Rule Exceptions Tab

Before After (Amsterdam) After (Borealis)

Shared Exception Lists

Before After (Amsterdam) After (Borealis)

Shared List Details

Before After (Amsterdam) After (Borealis)

EQL Query Input

Before After (Amsterdam) After (Borealis)

Suppression Fields

Before After (Amsterdam) After (Borealis)

Suppression Fields (Disabled)

Before After (Amsterdam) After (Borealis)

Exception Comments UI Bug

Before After

Checklist

Unit or functional tests were updated or added to match the most common scenarios

rylnd force-pushed the rylnd/eui_refresh_qa branch from 1f64cc9 to 5f89ce8 Compare

January 9, 2025 23:10

rylnd added 18 commits

January 16, 2025 20:45


          Replace usage of warningText colors within DE and RM code

2b70312

`warningText -> textWarning`. This also replaces some uses of the
now-deprecated `euiThemeVars` with use of the `useEuiTheme` hook.


          Move EQL textarea styles to @emotion styles

ee5fe12

* This uses the theme to set a min-height on the textarea, since it is a
  best practice with a resizable element. The dropped styles were no
  longer necessary with the EUI component.


          Fix style of Suppression duration input when disabled

Both box-shadow and border were being applied here, which combined with
the border-radius lead to a weird-looking input. This removes the
box-shadow.


          Replace styled-components with @emotion in EuiQueryBar

569e41b

* Removes uses of deprecated tokens
* Aligns EqlQueryBar closer to a normal form component (no custom label)


          Replace usage of euiThemeVars in Exception Item Comments

05c4239

These were "solved" by using the `useEuiTheme` hook and placing the
generation of styles within the component itself, as opposed to
statically outside them.


          WIP: Attempting to use styles in non-component functions

607be54

In the case of `generateLinkedRulesMenuItems`, the function was a react
component in everything but name. I renamed it so that the react-hooks
linter rules wouldn't complain, but I left the manual invocations of the
element since they're fine.


          Revert "WIP: Attempting to use styles in non-component functions"

f911d72

This reverts commit 0489ee1f806517f80c08ef622ec9b81ac82fba9d.

This ends up not working since that component now calls a hook, and you
can't call a hook from e.g. the `useMemo` that wraps the
link-generating, in at least one instance. I'll have to come back to
this one.


          Replace direct hex color usage in Exception Item Conditions component(s)

70c1da3

This replaces the use hex colors (to style a border), swapping instead
for the now-preferred euiTheme context, as well as using `@emotion` when possible.

These changes are applied here to both the in-plugin and packaged
versions of this component, which are used in two different sections. It
also attempts to bring them more inline with one another by applying a
missing `eui-xScroll` class that did not exist on the plugin variant of
this component.


          Fix/limit scoping of accordion styles

cabfad2

These styles (particularly the box-shadow) were being incorrectly
applied to all child elements, which caused the inner Comments accordion
to be styled incorrectly. I failed to catch this when it was introduced
in elastic#178023.


          Fix/simplify styles on Exception List Comments

79b1f88

This fixes the styling of comments, namely on the accordion, by:

1. Ensuring consistency between the two implementations
2. Removing unnecessary styles


          Remove references to hex colors/EuiThemeVars in more exception compon…

162bc0b

…ents

The MetaInfo component was easy to find, but it took a while to track
down where the MenuItems component is used: on the exception DETAILS
page, which is only accessed through the shared exception list page by
clicking on an individual list.


          Swap use of hex color reference with semantic equivalent

313a58f

Finally, an easy one!


          Remove euiThemeVars, hex color, and styled-components from TitleBadge

3c194a9

This component is used on the shared exceptions page, where exceptions
lists are listed.


          Remove usage of transparentize()

fd684d7

We only use this in our Duration components, as they are custom. It's
worth noting that we've re-implemented this in three different places,
as you can see here, but we can deduplicate later. These are EuiSelects
where Seconds/Minutes/Hours are chosen for either rule scheduling or
suppression duration.

Instead of using this custom color, it's been replaced with
`backgroundBasePrimary`, making it more in light with other similar form
controls.

I also replaced some usages of styled-components, here.


          Remove custom styling of labelAppend on ScheduleItem

e75d4ec

In testing this CSS (to determine a replacement), I discovered that it's
adding a fixed margin-left to labelAppend, which may extend outside the
bounds of the form row. The margin size itself seemed arbitrary. The
container for both labels is also a fixed size.

Instead, I opted to change the containing flexbox to justify as
`spaceBetween`, maximizing the distance between the items. If the
incoming `labelAppend` prop needs to add additional styling, the caller
can add that (although in testing I did not see usage of this prop).


          Remove unused form component and associations

bb58886

This was replaced by `ScheduleRuleField` in elastic#200304. I discovered
this while looking for usages of EUI color helpers, but upon further
inspection it can just be pruned.


          More accurate variable names

492f487

I was reusing style names from the similar Suppression Duration
components, but that's not correct, here. These apply to the Scheduling
fields during rule creation, so "duration" isn't accurate.


          Remove list-header styles file

f25db7a

This contained now-outdated references to EuiThemeVars that needed to be
inlined to the consuming component (in order to take advantage of the
euiTheme context/hook).

On the ListHeader component, I was able to remove a negative margin by
using `bottomBorder="extended"` as per the documentation. However, due
to the way the content is currently constructed, we still need a
negative margin-top in order to offset a hardcoded EuiSpacer in the
EuiPageHeader component (for which a comment was included on the style).

I was not able to use the full `useEuiFontSize` helper as the
line-heights have changed significantly from the original layout, hence
the `font-size: ().fontSize` pattern.

rylnd force-pushed the rylnd/eui_refresh_qa branch from 5f89ce8 to f25db7a Compare

January 17, 2025 04:26

rylnd added 2 commits

January 17, 2025 14:33


          Convert ExceptionItemComments styles to @emotion

c616efe

For reasons I'm not yet clear on, the template literal syntax does not
work in this file, but the object notation does.


          Add space between existing comments and the "add comment" textarea

c8ffe7b

This was a minor UI bug that only shows when you're editing an exception
item in order to add another comment.

rylnd self-assigned this

rylnd marked this pull request as ready for review

January 17, 2025 21:22

rylnd requested a review from a team as a code owner

January 17, 2025 21:22

rylnd requested a review from vitaliidm

January 17, 2025 21:22

rylnd added release_note:skip Team:Detection Engine labels

Contributor

elasticmachine commented Jan 17, 2025

Pinging @elastic/security-detection-engine (Team:Detection Engine)

rylnd added the v8.18.0 label

rylnd added backport:skip EUI Visual Refresh labels


          [CI] Auto-commit changed files from 'node scripts/styled_components_m…

09a4ab7

…apping'

elastic-vault-github-plugin-prod bot requested a review from a team as a code owner

January 17, 2025 21:31

jbudz approved these changes

View reviewed changes

Contributor

jbudz left a comment

packages/kbn-babel-preset/styled_components_files.js LGTM

rylnd added 2 commits

January 17, 2025 17:43


          Fix outdated snapshots

f946cb7

We changed some props being passed to EUI components, which changed the
resultant HTML, here.


          Merge branch 'main' into rylnd/eui_refresh_qa

c79f178

mgadewoll reviewed

View reviewed changes

...y_solution/public/detection_engine/rule_creation/components/eql_query_edit/eql_query_bar.tsx Outdated

    
              import React, { useCallback, useEffect, useRef, useMemo } from 'react';

              import { Subscription } from 'rxjs';

              import styled from 'styled-components';

              import { css } from '@emotion/css';

Contributor

mgadewoll Jan 20, 2025

Why is @emotion/css needed here? We generally advice to use @emotion/react with the css prop. (info on the distinction)

(same for other usages done with these changes)

Contributor Author

rylnd Jan 21, 2025

@mgadewoll that general advice seemed, to me, to be overruled by this comment:

If your Kibana plugin is set up with styled-components, it will not support @emotion/react and you must use @emotion/css instead

which, revisiting this based on your feedback, is perhaps too broad of a statement? Is this functionality actually at the level of an individual file, and we can have both packages working in the same plugin? That is currently unclear, so I was erring on the side of the "known working" @emotion/css.

Additionally, the proceeding comment about subtle bugs when mixing the two implementations does not inspire confidence that the solution is straightforward.

Please advise.

Contributor

mgadewoll Jan 22, 2025

Thanks for the insights! That's why I asked what's the reasoning here, since I'm not having the overview across plugins. Then your update is fine. 🙂

If you're still mixing styled-components and emotion, then there are limitations indeed. If you run into those and need a middle ground until all is migrated to emotion, there are two ways to do that:

use @emotion/css as stated in the FAQ
use emotion/styled as direct replacement for styled from styled-components (FAQ)

...lution/public/detection_engine/rule_exceptions/components/exception_item_card/conditions.tsx Show resolved Hide resolved

rylnd added 2 commits

January 21, 2025 12:58


          Merge branch 'main' into rylnd/eui_refresh_qa

093e56d

 Conflicts:
	x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_field/schedule_item_field.tsx


          * refs/remotes/origin/rylnd/eui_refresh_qa:

vitaliidm approved these changes

View reviewed changes

Contributor

vitaliidm left a comment

Thank you for working on this.
I left one comment that would be great to address before merging

...ic/detection_engine/rule_creation_ui/components/description_step/alert_suppression_label.tsx

+                          color="danger"
                           style={{ marginLeft: '8px' }}
                           data-test-subj="alertSuppressionInsufficientLicensingIcon"
                         />

Contributor

vitaliidm Jan 22, 2025

Screenshot 2025-01-22 at 11 02 22

supression duration component in Borealis has doubled right border.
Would be great if it can be fixed

Contributor

vitaliidm Jan 22, 2025 •

edited

Loading

affects only disabled state

Screen.Recording.2025-01-22.at.11.06.11.mov

Contributor Author

rylnd Jan 23, 2025

@vitaliidm good catch, I think I'd seen this but forgotten to follow up.

Should be fixed in cfa6cde; here are some screenshots:

Duration Input - Amsterdam

Enabled Disabled

Duration Input - Borealis

Enabled Disabled

rylnd added 3 commits

January 22, 2025 12:53


          Fix styling of Duration input when disabled

cfa6cde

This incorrectly had a 2px right border when disabled, due to a) the
box-shadow style being overridden by inner EUI disabled styling. This
fixes that issue, and also adds a border for contrast when the input is
disabled (the light gray of the disabled numerical input was too
low-contrast sitting next to the light blue of the duration input).


          Prefer @emotion/react to @emotion/css

9e249dc

We only need @emotion/css in files that _also_ use styled-components,
which none of these do. I previously did not understand this limitation,
and so was overly conservative with my usage of @emotion/react.


          Merge branch 'main' into rylnd/eui_refresh_qa

c3b8b52

Contributor

elasticmachine commented Jan 23, 2025

💚 Build Succeeded

Buildkite Build
Commit: c3b8b52

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	6609	6608	-1

Async chunks

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

id	before	after	diff
`securitySolution`	21.3MB	21.3MB	-3.5KB

History

💔 Build #269045 failed 8242932
💛 Build #268260 was flaky c79f178
💔 Build #268240 failed 09a4ab7

rylnd merged commit c430a6c into elastic:main

8 checks passed

rylnd deleted the rylnd/eui_refresh_qa branch

January 23, 2025 21:06

kibanamachine added the v9.0.0 label

This was referenced Jan 24, 2025

[ResponseOps][MW] Fix bug when creating repeating Maintenance Window #207084

Merged

[SKA] Move orphan README #208167

Merged

JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this pull request


          [Security Solution] EUI Refresh Followup Pt. 1 (elastic#205990)

0191b75

## Summary

This is the first batch of work involving
elastic#202052. It includes the
following tasks:

- [x] (Important) Review usage of "success" colors for positive,
semantic
intent.([details](elastic#202052 (comment))).
- [x] (Important) Review and update color palette usage.
([details](#color-palettes))
- [x] (Important) Replace vis colors used outside of visualizations with
color tokens .
([details](elastic#202052 (comment)))
- [x] (Important) Replace custom colors with semantic tokens
([details](elastic#202052 (comment)))
- [x] (Important) Replace color calculation functions with semantic
tokens.
([details](elastic#202052 (comment)))
- [x] Update tokens to use the new naming scheme.
([details](elastic#202052 (comment)))

### What changed?
Broadly, these changes involve two main areas: Exception Lists and the
Rule Creation form (specifically: the EQL query bar and the "time"
inputs (Suppression Duration, Interval, Lookback)).

I also found an unused component, and fixed a minor UI bug with
Exception Comments.

Screenshots (before and after, and with both themes) are included below.

Also: as a majority of these components' usage of theme variables is
done with `@styled-components`, and we are transitioning away from that
toward `@emotion`, I also opted to remove usages of `@styled-components`
wherever possible, as that change was negligible in comparison with the
theming changes. If a file being changed included references to static
eui theme variables, e.g. `euiThemeVars`, those were removed as well
(but many are still outstanding).


### Screenshots

__NOTE__: Most of the "Before" screenshots were taken from a cluster
using the Borealis theme.

<details>
  <summary>
    <h3>Rule Exceptions Tab</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1594" alt="Rule Exceptions - Before"
src="https://github.com/user-attachments/assets/56feb5e8-b5ec-4bdc-9372-968056e6bca3"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="805" alt="Rule Exceptions - After (Amsterdam)"
src="https://github.com/user-attachments/assets/a6ab3d47-acc7-4eb6-8a0c-bd9ccafc2021"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="805" alt="Rule Exceptions - After (Borealis)"
src="https://github.com/user-attachments/assets/9fbd8a17-0afb-4ccc-95ea-5bab4da5b254"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Shared Exception Lists</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1594" alt="Shared Exception Lists - Before"
src="https://github.com/user-attachments/assets/b2a69f9c-4892-4732-a2e1-e167461680d1"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="805" alt="Shared Exception Lists - After (Amsterdam)"
src="https://github.com/user-attachments/assets/1aea0dff-97ee-4482-9a66-38c4be2baea8"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="805" alt="Shared Exception Lists - After (Borealis)"
src="https://github.com/user-attachments/assets/76be9446-17fb-451d-b15a-99166cb1f588"
/>
  </kbd>
</details>

<details>


  <summary>
    <h3>Shared List Details</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1594" alt="Shared List Details - Before"
src="https://github.com/user-attachments/assets/5eeec91d-ea96-4e3c-8c7d-b5e6bb8bf35a"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="805" alt="Shared List Details - After (Amsterdam)"
src="https://github.com/user-attachments/assets/5229b850-356c-40e7-80f1-d32156f97a56"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="805" alt="Shared List Details - After (Borealis)"
src="https://github.com/user-attachments/assets/81219613-c329-48f8-8fd3-857207d0ada0"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>EQL Query Input</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1085" alt="EQL Bar - Before"
src="https://github.com/user-attachments/assets/b19cf18b-a5d2-4001-bebc-9154af8e9b43"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="1085" alt="EQL Bar - After (Amsterdam)"
src="https://github.com/user-attachments/assets/70911ad2-9e52-4b65-b305-cd90a6be1fd2"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="1085" alt="EQL Bar - After (Borealis)"
src="https://github.com/user-attachments/assets/92a789d0-fffa-483c-bcb2-fc02b5e8ce10"
/>

  </kbd>
</details>


<details>
  <summary>
    <h3>Suppression Fields</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1085" alt="Suppression Fields - Before"
src="https://github.com/user-attachments/assets/458c3464-0eba-47d4-abbe-8de0b333b8ec"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="1085" alt="Suppression Fields - After (Amsterdam)"
src="https://github.com/user-attachments/assets/b6fb67b0-7908-4fe8-9e02-d9e14c8f97c5"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="1085" alt="Suppression Fields - After (Borealis)"
src="https://github.com/user-attachments/assets/f48c24a5-50ea-41fd-af45-b3d32f20921b"
/>

  </kbd>

</details>

<details>
  <summary>
    <h3>Suppression Fields (Disabled)</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1085" alt="Suppression Fields (Disabled) - Before"
src="https://github.com/user-attachments/assets/e60aa561-d8ce-4b23-8694-e6443ad37c16"
/>

  </kbd>
  <kbd>
    <h3>After (Amsterdam)</h3>
<img width="1085" alt="Suppression Fields (Disabled) - After
(Amsterdam)"
src="https://github.com/user-attachments/assets/45277962-482d-484c-b8bd-3a587b7c16d1"
/>

  </kbd>
  <kbd>
    <h3>After (Borealis)</h3>
<img width="1085" alt="Suppression Fields (Disabled) - After (Borealis)"
src="https://github.com/user-attachments/assets/69f6217b-a2c2-4c6a-be9e-80dfd0a4e5f1"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Exception Comments UI Bug</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="805" alt="Comments UI Bug - Before"
src="https://github.com/user-attachments/assets/652d35fa-8ff2-4850-a9a4-79cec3b4b698"
/>

  </kbd>
  <kbd>
    <h3>After</h3>
<img width="805" alt="Comments UI Bug - After"
src="https://github.com/user-attachments/assets/a8cc1cd6-b25f-4694-a479-c35f45eae6aa"
/>

  </kbd>
</details>

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

rylnd mentioned this pull request

[Security Solution][Detection Engine] EUI Tech Debt - Removes references to static EuiTheme variables #208820

Merged

2 tasks

rylnd added a commit that referenced this pull request


          [Security Solution][Detection Engine] EUI Tech Debt - Removes referen…

39ec0a0

…ces to static EuiTheme variables (#208820)

## Summary

This PR is a followup to #205990, which removed references to all of the
deprecated/renamed EUI vars in preparation for 9.0. Here, we address
some of the non-critical tech debt related to the EUI refresh, namely
the [removal of static EUI
tokens](#199715 (comment))
from our codebase.

I made every attempt not to change any styles in this PR, except to
simplify CSS to produce an equivalent design. A common example of this
was removing a static `margin` or `padding` declaration referencing
`euiThemeVars.size*`, and swapping it with an equivalent `gutterSize`
prop on the `EuiFlexGroup` container, or with an `align-self` or other
equivalent flexbox directive.

## Screenshots of Areas Affected
The majority of changes here involved the Exception List/Item pages.
I've attached screenshots of their current layout for comparison/review:


<details>
  <summary>
    <h3>Rule Exceptions Tab</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1395" alt="Rule exceptions tab - before"
src="https://github.com/user-attachments/assets/db7a5487-7df3-4a5f-b88e-90ab34784970"
/>

  </kbd>
  <kbd>
    <h3>After</h3>
<img width="1421" alt="Rule exceptions tab - after"
src="https://github.com/user-attachments/assets/77cbdefc-cbec-4b9e-8436-197f2f2f6677"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Shared Exception Lists</h3>
  </summary>
  <kbd>
<img width="1517" alt="Shared Exception Lists"
src="https://github.com/user-attachments/assets/5448dd65-60f7-470c-bf7a-7af75bb914fa"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Shared Exception List Details</h3>
  </summary>
  <kbd>
<img width="1517" alt="Shared Exception List Details"
src="https://github.com/user-attachments/assets/6e03fef6-af58-40bb-98c5-188651a584cc"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Threshold Input</h3>
  </summary>
  <kbd>
<img width="1046" alt="Threshold Input"
src="https://github.com/user-attachments/assets/28738857-6bdf-404f-a790-a9f4e66ff27a"
/>

  </kbd>
</details>



### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.


- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

drewdaemon pushed a commit to drewdaemon/kibana that referenced this pull request


          [Security Solution][Detection Engine] EUI Tech Debt - Removes referen…

f7215dd

…ces to static EuiTheme variables (elastic#208820)

## Summary

This PR is a followup to elastic#205990, which removed references to all of the
deprecated/renamed EUI vars in preparation for 9.0. Here, we address
some of the non-critical tech debt related to the EUI refresh, namely
the [removal of static EUI
tokens](elastic#199715 (comment))
from our codebase.

I made every attempt not to change any styles in this PR, except to
simplify CSS to produce an equivalent design. A common example of this
was removing a static `margin` or `padding` declaration referencing
`euiThemeVars.size*`, and swapping it with an equivalent `gutterSize`
prop on the `EuiFlexGroup` container, or with an `align-self` or other
equivalent flexbox directive.

## Screenshots of Areas Affected
The majority of changes here involved the Exception List/Item pages.
I've attached screenshots of their current layout for comparison/review:


<details>
  <summary>
    <h3>Rule Exceptions Tab</h3>
  </summary>
  <kbd>
    <h3>Before</h3>
<img width="1395" alt="Rule exceptions tab - before"
src="https://github.com/user-attachments/assets/db7a5487-7df3-4a5f-b88e-90ab34784970"
/>

  </kbd>
  <kbd>
    <h3>After</h3>
<img width="1421" alt="Rule exceptions tab - after"
src="https://github.com/user-attachments/assets/77cbdefc-cbec-4b9e-8436-197f2f2f6677"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Shared Exception Lists</h3>
  </summary>
  <kbd>
<img width="1517" alt="Shared Exception Lists"
src="https://github.com/user-attachments/assets/5448dd65-60f7-470c-bf7a-7af75bb914fa"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Shared Exception List Details</h3>
  </summary>
  <kbd>
<img width="1517" alt="Shared Exception List Details"
src="https://github.com/user-attachments/assets/6e03fef6-af58-40bb-98c5-188651a584cc"
/>

  </kbd>
</details>

<details>
  <summary>
    <h3>Threshold Input</h3>
  </summary>
  <kbd>
<img width="1046" alt="Threshold Input"
src="https://github.com/user-attachments/assets/28738857-6bdf-404f-a790-a9f4e66ff27a"
/>

  </kbd>
</details>



### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.


- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine mentioned this pull request

[jest] @emotion/babel-preset-css-prop #216489

Merged

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip EUI Visual Refresh release_note:skip Team:Detection Engine v8.18.0 v9.0.0