[Observability plugin] Audit new EUI Borealis theme

[fkanout]

Summary

It fixes #203338 by updating tokens and migrating from styled-components to @emotion and Eui Visual Refresh for Borealis theme for the files owned by @elastic/obs-ux-management-team.

[kdelemme]

Don't you need to change this file: packages/kbn-babel-preset/styled_components_files.js as well in order to not use styled component anymore?

[kdelemme]

Code change LGTM. Just a question regarding the need to update: packages/kbn-babel-preset/styled_components_files.js

[github-actions]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

[mgadewoll]

✅ Changes LGTM from EUI side

[fkanout]

Don't you need to change this file: packages/kbn-babel-preset/styled_components_files.js as well in order to not use styled component anymore?

@kdelemme I don't know. This is the first time I have checked this file. Can you elaborate more on what needs to be updated in this file and what would be the impact? It looks like it is related to bundling.

[jasonrhodes]

@fkanout it looks like this line https://github.com/elastic/kibana/blob/main/packages/kbn-babel-preset/styled_components_files.js#L18

mentions files that we have presumably just edited to no longer use styled components. The comments of that file mention:

• Synchronized regex list of files that use styled-components.
• Used by kbn-babel-preset and kbn-eslint-config.

So I think we are probably helping those tools so they can stop trying to lint or build those files with styled components in mind. I suspect leaving it there is a no-op but we should probably remove. Can you confirm that all of the listed regex patterns in that line have been updated in this PR and if so, remove the line? Then we can get this merged. Thanks for working on this.

[fkanout]

@fkanout it looks like this line https://github.com/elastic/kibana/blob/main/packages/kbn-babel-preset/styled_components_files.js#L18

mentions files that we have presumably just edited to no longer use styled components. The comments of that file mention:

• Synchronized regex list of files that use styled-components.
• Used by kbn-babel-preset and kbn-eslint-config.

So I think we are probably helping those tools so they can stop trying to lint or build those files with styled components in mind. I suspect leaving it there is a no-op but we should probably remove. Can you confirm that all of the listed regex patterns in that line have been updated in this PR and if so, remove the line? Then we can get this merged. Thanks for working on this.

@jasonrhodes line 18 in the link is pointing to

• /src[\/\\]plugins[\/\\]kibana_react[\/\\]/,
  but I think you want to mention
• /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\](exploratory_view|investigate|investigate_app|observability|observability_ai_assistant_app|observability_ai_assistant_management|observability_solution|serverless_observability|streams|streams_app|synthetics|uptime|ux)[\/\\]/,

Not all of these files have been migrated from Styled-components. Here is the list of the remaining ones:

• plugins/observability
• plugins/exploratory_view
• plugins/synthetics
• plugins/uptime
• plugins/ux

I will remove the regex for the other plugins/pages.

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: b3a6748
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-204615-b3a67484e3c4

Failed CI Steps

• Uptime @elastic/synthetics Tests

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
observabilityShared	231	238	+7
synthetics	1044	1061	+17
total			+24

Async chunks

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

id	before	after	diff
entityManagerApp	12.5KB	12.2KB	-321.0B
investigateApp	482.8KB	481.5KB	-1.2KB
observabilityAIAssistantApp	295.1KB	293.8KB	-1.3KB
observabilityAiAssistantManagement	98.4KB	97.7KB	-715.0B
observabilityShared	54.9KB	63.5KB	+8.5KB
streamsApp	116.9KB	115.1KB	-1.8KB
synthetics	1.1MB	1.1MB	+13.1KB
total			+16.3KB

Page load bundle

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

id	before	after	diff
entityManagerApp	5.1KB	5.0KB	-141.0B
investigateApp	11.1KB	11.1KB	-65.0B
observabilityAIAssistantApp	14.8KB	14.7KB	-108.0B
observabilityShared	93.9KB	93.8KB	-118.0B
streamsApp	5.6KB	5.5KB	-60.0B
total			-492.0B

History

• 💚 Build #262256 succeeded 12a3302
• 💚 Build #261913 succeeded 4466366
• 💔 Build #261824 failed 98cf187
• 💔 Build #261510 failed d359690

cc @fkanout

[jasonrhodes]

Changes to the styled_components_files.js file LGTM -- I spoke with Faisal about why streams is removed here and it appears they've done some PRs to remove style components there recently too, so we're removing them from this file for them. (I believe those lines were recently added here just yesterday or today, in an attempt to decrease the conflicts in this file because of a wider regex that was in use in one line.)

[klacabane]

entity_manager change lgtm