Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 24 commits into
base: main
Choose a base branch
from

Conversation

rylnd
Copy link
Contributor

@rylnd rylnd commented Jan 29, 2025

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 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:

Rule Exceptions Tab

Before

Rule exceptions tab - before

After

Rule exceptions tab - after

Shared Exception Lists

Shared Exception Lists

Shared Exception List Details

Shared Exception List Details

Threshold Input

Threshold Input

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

  • Unit or functional tests were updated or added to match the most common scenarios
  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

@rylnd rylnd added release_note:skip Skip the PR/issue when compiling release notes backport:skip This commit does not require backporting Team:Detection Engine Security Solution Detection Engine Area EUI Visual Refresh labels Jan 29, 2025
@rylnd rylnd self-assigned this Jan 29, 2025
@rylnd
Copy link
Contributor Author

rylnd commented Jan 29, 2025

/ci

@rylnd
Copy link
Contributor Author

rylnd commented Jan 29, 2025

Note to self: I think that 7b5441e was a mistake. That function should reference components that use the useEuiTheme() hook, as opposed to calling the hook directly.

rylnd and others added 21 commits January 31, 2025 16:31
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
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
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.
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.
These tests were failing because they lacked the EUI Theme context when
we were rendering these components which now require them (previously
they were requiring a static object imported from elsewhere).
@rylnd rylnd force-pushed the rylnd/eui_tech_debt branch from b4c12ab to eb60210 Compare January 31, 2025 23:47
@rylnd
Copy link
Contributor Author

rylnd commented Jan 31, 2025

/ci

rylnd added 2 commits January 31, 2025 18:00
We don't really want to test the EuiThemeProvider, it's merely a
consequence of the component's dependencies/how it's written. Calling
the provider out as a wrapper better helps to show that relationship.
@rylnd
Copy link
Contributor Author

rylnd commented Feb 1, 2025

/ci

@rylnd rylnd marked this pull request as ready for review February 1, 2025 18:07
@rylnd rylnd requested review from a team as code owners February 1, 2025 18:07
@rylnd rylnd requested a review from vitaliidm February 1, 2025 18:07
@elasticmachine
Copy link
Contributor

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

@elasticmachine
Copy link
Contributor

elasticmachine commented Feb 1, 2025

💔 Build Failed

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #17 / Fleet Endpoints Integrations inputs_with_standalone_docker_agent "before all" hook for "generate a valid config for standalone agents"
  • [job] [logs] FTR Configs #17 / Fleet Endpoints Integrations inputs_with_standalone_docker_agent "before all" hook for "generate a valid config for standalone agents"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 6640 6638 -2

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.4MB 21.4MB -3.8KB

History

cc @rylnd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:skip This commit does not require backporting EUI Visual Refresh release_note:skip Skip the PR/issue when compiling release notes Team:Detection Engine Security Solution Detection Engine Area
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants