[Security Solution][Detection Engine] EUI Tech Debt - Removes references to static EuiTheme variables #208820
+451
−471
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The EUI page header has some parent <p> somewhere, and we were incorrectly putting <div>s as children. This fixes that, along with a few necessary style changes (and updated snapshots).
This replaces static references to euiThemeVars to enable this behavior. I did away with some `margin` usage in favor of `EuiFlexGroup`'s `gutterSize` prop, as well as removing some manual `display: flex`s in favor of EuiFlexItem/Group. This also appears to fix some errors in the snapshot test related to this component. I'm not sure how those happened, but it appears specific to that test and not a production behavior.
While removing static references to euiThemeVars, I found that these manual styles weren't needed: * `&div:first-child` selector wasn't being applied * margins can be replaced with a different `gutterSize` prop * the eui-yScrollWithShadow was adding a shadow to a container that wasn't actually scrollable; when the extra margin above was removed, this caused the shadow to cover part of the border of the Exception item panels
Because we need to _call_ a hook (`useEuiTheme`) in order to apply styles here, this needs to either be a dedicated React component, or itself a hook. Since the consuming code (all the way down to the EUI component) expects an array of Elements, we can't use a component (since it must return a single component, even if it's a Fragment). So: the function is now a hook! We necessarily now removed the useMemo's wrapping the original function calls, but that's okay because a) there's nothing expensive happening in the hook and b) we can always add a `useMemo` to the hook itself, later.
This ports the styles over from static generation with euiThemeVars to dynamic with useEuiTheme. I also simplified styles in a few ways, here: 1. Remove the JS conditions around applying styles, and porting to equivalent CSS 2. Removing unnecessary flex-basis CSS (which didn't work on the div it was being applied to) 3. Moving child `color` CSS to the parent, instead.
The previous tests were calling React-generating code outside of react, and then in the test we were calling `render()` on the results. We now instead make use of `renderHook`, give a slightly better name to the test helper that wrapped our now-hook, and update snapshots as well.
We had negative-margin CSS to offset a 24px `gap` on our flex grouping. By reducing the `gap` to 8px, we no longer need to offset it.
Instead of adding bottom padding to each element in a container (the header of an individual exception list on its Shared Details page), we instead make the container a `FlexGroup` and add an analogous `gutterSize` prop (and `margin-bottom`) to it.
I forgot about the aforementioned weirdness in EUIPageHeader that necessitates everything being a span.
We were wrapping a `span` in a `div`, and then giving that div: 1. display: inline 2. margin-left: 4px Because the margin is so insignificant (there is already natural space after the previous element), I opted to just remove the div and its styles altogether.
The generated styles are equivalent.
…tCard This component exists as the inner item on the Shared Exception Lists page. Styles have been verified as equivalent.
* Defines a FieldSectionGroup component instead of applying the same styles to multiple identical EuiFieldGroup components * Replaces use of margin-top with a more appropriate `align-self` declaration
rylnd
added
release_note:skip
|
/ci |
|
🤖 Jobs for this PR can be triggered through checkboxes. 🚧
ℹ️ To trigger the CI, please tick the checkbox below 👇
|
💔 Build Failed
Failed CI StepsHistorycc @rylnd |
These were already fixed on the package version of this component, but the one that's still in the plugin was not updated, which I noticed while taking screenshots.
|
Note to self: I think that 7b5441e was a mistake. That function should reference components that use the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 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
marginorpaddingdeclaration referencingeuiThemeVars.size*, and swapping it with an equivalentgutterSizeprop on theEuiFlexGroupcontainer, or with analign-selfor 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:
Rule Exceptions Tab
Before
After
Shared Exception Lists
Shared Exception List Details
Threshold Input
Checklist
Check the PR satisfies following conditions.
Reviewers should verify this PR satisfies this list as well.
release_note:*label is applied per the guidelines