[Discover] SCSS to Emotions migration part 2/4

[akowalska622]

Summary

SCSS to Emotions migration - part 2/4

Part of #209807

Approach

1. All CSS-in-JS styles, which can be extracted outside of the component without issues are extracted below the component and euiTheme is passed as an argument

2. If it's not possible, because of state changes (which impacts styles) or unit tests issues, those styles are defined inline and usually use useEuiTheme hook

3. Class are removed when it can be done without any issues. If a class is used in tests or different style block uses it as a child class for specificity reasons, I left the class assigned to the component. All places like this are described with a proper comment.

4. If some props-to-class could be easily migrated to conditional CSS attribute value it was migrated. Some of them though were used in cases described in point 3) and/or were too convoluted to easily and clearly migrate it to conditional values (for example src/platform/packages/shared/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx, but there are more).

Approach was inspired by [FAQ] Kibana and Emotion / CSS-in-JS usage. If we opt for a different approach, I'm open for suggestions and I'll align it accordingly.

Files included

src/platform/plugins/shared/discover/public/application/context/components/action_bar/_action_bar.scss

src/platform/plugins/shared/discover/public/application/context/context_app.scss

src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.scss

src/platform/plugins/shared/discover/public/application/main/components/no_results/_no_results.scss

src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/assets/no_results_illustration.scss

src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.scss

src/platform/plugins/shared/discover/public/application/main/components/top_nav/top_nav.scss

src/platform/plugins/shared/discover/public/embeddable/components/saved_search_grid.scss

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
• Flaky Test Runner was used on any tests changed
• The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

• See some risk examples
• ...

[akowalska622]

Those classes were not used anywhere, removed file and confirmed component remains styled the same

[akowalska622]

/ci

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[davismcphee]

Code changes look good and work well overall! I did notice a couple of issues to look into and left some feedback.

[davismcphee]

A drop in the async bundle, 100 more lines removed than added, and lots of tech debt / dead code removal. What's not to love about this PR? Confirmed both issues I noticed are resolved, and in that case it LGTM, thanks!

[akowalska622]

A drop in the async bundle, 100 more lines removed than added, and lots of tech debt / dead code removal. What's not to love about this PR? Confirmed both issues I noticed are resolved, and in that case it LGTM, thanks!

Sounds like a book review! 😄 I'm happy to contribute 🚀

[l-suarez]

Thanks for the ping Ania, LGTM

[eokoneyo]

Shared UX changes LGTM

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 7cca7ff

Failed CI Steps

• FTR Configs #9

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
core	397	398	+1
discover	1214	1179	-35
total			-34

Async chunks

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

id	before	after	diff
discover	962.0KB	951.1KB	-10.9KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
core	430.9KB	431.0KB	+164.0B
discover	20.2KB	20.2KB	-41.0B
navigation	12.8KB	12.8KB	+41.0B
total			+164.0B

History

• 💚 Build #285328 succeeded e51594e
• 💔 Build #285305 failed c5ca0d1
• 💔 Build #285294 failed 3a54518
• 💚 Build #284680 succeeded f769fff

cc @akowalska622