[Security Solution] [EUI Refresh] [Explore page] Migrate styled-components

[agusruidiazgd]

Summary

Addresses #206437
This PR migrates explore page from styled-components to @emotion/styled.
In the process I also convert the kbn/ui-theme json tokens to euiTheme counterparts.

Screen.Recording.2025-01-21.at.11.22.34.mov

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

[elasticmachine]

Pinging @elastic/security-threat-hunting-explore (Team:Threat Hunting:Explore)

[jbudz]

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

[christineweng]

investigations changes LGTM, thank you!

[agusruidiazgd]

@elasticmachine merge upstream

[elasticmachine]

There are no new commits on the base branch.

[elasticmachine]

⏳ Build in-progress, with failures

• Buildkite Build
• Commit: 8aa79ea
• Cloud Deployment

Failed CI Steps

• Jest Tests #2
• Jest Tests #2

Test Failures

• [job] [logs] Jest Tests #2 / arrows ArrowBody renders correctly against snapshot
• [job] [logs] Jest Tests #2 / arrows ArrowBody renders correctly against snapshot
• [job] [logs] Jest Tests #2 / Authentication Host Table Component rendering it renders the host authentication table
• [job] [logs] Jest Tests #2 / Authentication Host Table Component rendering it renders the host authentication table
• [job] [logs] Jest Tests #2 / Authentication User Table Component rendering it renders the user authentication table
• [job] [logs] Jest Tests #2 / Authentication User Table Component rendering it renders the user authentication table
• [job] [logs] Jest Tests #2 / Paginated Table Component Events Should call onChange when you choose a new sort in the table
• [job] [logs] Jest Tests #2 / Paginated Table Component Events Should call onChange when you choose a new sort in the table
• [job] [logs] Jest Tests #2 / Paginated Table Component Events Should call updateActivePage with 0 when you pick a new limit
• [job] [logs] Jest Tests #2 / Paginated Table Component Events Should call updateActivePage with 0 when you pick a new limit
• [job] [logs] Jest Tests #2 / Paginated Table Component Events should call updateActivePage with 1 when clicking to the first page
• [job] [logs] Jest Tests #2 / Paginated Table Component Events should call updateActivePage with 1 when clicking to the first page
• [job] [logs] Jest Tests #2 / Paginated Table Component Events Should call updateLimitPagination when you pick a new limit
• [job] [logs] Jest Tests #2 / Paginated Table Component Events Should call updateLimitPagination when you pick a new limit
• [job] [logs] Jest Tests #2 / Paginated Table Component Events should update the page when the activePage is changed from redux
• [job] [logs] Jest Tests #2 / Paginated Table Component Events should update the page when the activePage is changed from redux
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it render popover to select new limit in table
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it render popover to select new limit in table
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it renders the correct amount of pages and starts at activePage: 0
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it renders the correct amount of pages and starts at activePage: 0
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it renders the default load more table
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it renders the default load more table
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it renders the over loading panel after data has been in the table
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it renders the over loading panel after data has been in the table
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering It should render a sort icon if sorting is defined
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering It should render a sort icon if sorting is defined
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it will NOT render popover to select new limit in table if props itemsPerRow is empty
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering it will NOT render popover to select new limit in table if props itemsPerRow is empty
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering Should display toast when user reaches end of results max
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering Should display toast when user reaches end of results max
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering Should hide items per row if totalCount is less than items
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering Should hide items per row if totalCount is less than items
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering Should hide pagination if totalCount is zero
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering Should hide pagination if totalCount is zero
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering Should show items per row if totalCount is greater than items
• [job] [logs] Jest Tests #2 / Paginated Table Component rendering Should show items per row if totalCount is greater than items
• [job] [logs] Jest Tests #2 / Paginated Table Component Toggle query toggleQuery updates toggleStatus
• [job] [logs] Jest Tests #2 / Paginated Table Component Toggle query toggleQuery updates toggleStatus
• [job] [logs] Jest Tests #2 / Paginated Table Component Toggle query toggleStatus=true, render table
• [job] [logs] Jest Tests #2 / Paginated Table Component Toggle query toggleStatus=true, render table

History

• 💔 Build #269197 failed a66cf9e
• 💔 Build #268735 failed 021b71f

cc @agusruidiazgd