[Core] Clarity regarding bundling and loading of different plugins and their styles

[logeekal]

It is a UI issue so only kibana version matter.

Kibana version: <=8.4

Describe the bug:

While working on a bug I observed that styles of each plugin is loaded when the user visits that plugin (i.e. when that plugin is loaded) and not all at once. It creates inconsistent Dev and user experience.

For example, styles of observability will be applied to the app when a user visits any page within Observability and same goes for the the security.

Because of this, when doing the development, it becomes difficult to know if styles from any other plugin are conflicting with our own. Please see aforementioned bug as a use case here:

Please checkout related PR : #138091

Steps to reproduce:

This bug is reproducible today in kibana but we will soon be moving fix for the same. I guess it could still be repoduced in https://kibana.siem.estc.dev/ for some time. I will also add the recording here so that once the bug is fixed, we have a record.

1. Visit Security --> Alerts in https://kibana.siem.estc.dev/ ( or your local kibana instance) (Preferably new window)
2. We do not need any data for this test so do not worry, in case there is no data available.
3. Open Untitled Timeline from the bottom drawer
4. Click on the full screen icon open timeline in full screen.
5. You will see the correct rendering of timeline going full screen
6. Now visit, Observability --> Alerts
7. Now, repeat steps 1 -> 4

Expected behavior:
There can 2 expected behaviours:

1. Styles from plugins are loaded together so that development can be done with predictable UI interactions. But I am not sure if it is possible since, we are not bundling css separately ( I guess. Please correct me if I am wrong).

2. Styles from one plugin is loaded and when user visits other plugin, styles from that plugin are also loaded and styles from all other plugins are purged so that there is not issue.

Screenshots (if relevant):
Please find the recording below:

1. At the end of recording, I highlight a css, which is available below. As you can see the code is from observability plugin css but it is impacting security solution flyout and error occurs only when I have already visied Observability plugin ( since it is loaded lazily)

kibana/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/styles.scss

Lines 6 to 10 in bd2361d

	.euiFlyout,
	.euiCollapsibleNav {
	top: $fullscreenFlyoutTop;
	height: calc(100% - #{$fullscreenFlyoutTop});

Screen.Recording.2022-08-04.at.13.59.02.mov

Observations

This happens because Alerts (Security) & Alerts (Observability) have conflicting styles and issue only occurs if a user has visited both of the pages.

It seems to me that we inject styles directly into js and do not generate separate css bundles. Please correct me if I am wrong. I think this will make it harder to load css all at once for complete application.

[elasticmachine]

Pinging @elastic/kibana-core (Team:Core)

[elasticmachine]

Pinging @elastic/kibana-operations (Team:Operations)

[spalger]

We use the style-loader to support loading CSS when it is imported by code, this means that once styles are loaded they can't be unloaded, which can definitely lead to this type of problem but is far simpler to implement. I think the most correct solution here would be to migrate to Emotion, which is happening on some teams now and will spread to more teams as time goes on. In the meantime I think it's probably just an issue of properly scoping CSS rules because we're all sharing a single browser window and our CSS rules need to be properly scoped to the application they are intended to effect.

[logeekal]

Thank you. This does make sense and good to know that we are moving towards emotion.

[pgayvallet]

Should we therefore close this?

[logeekal]

I agree that this can be closed.

…

On 22. Aug 2022, at 11:31, Pierre Gayvallet ***@***.***> wrote: Should we therefore close this? — Reply to this email directly, view it on GitHub <#138102 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZDM3QHTJSHCOLDGVFGCRDV2NCINANCNFSM55SJ46CQ>. You are receiving this because you authored the thread.