[Observability] fix slo observability compressed styles to be not compressed

[rshen91]

Summary

Building off of PR #192993 to revert the compressed styles for SLOs

[elasticmachine]

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

[Heenawter]

@shahzad31 Can you confirm that it is just the SLO page that should have non-compressed styling?

From my understanding, only the SLO page's controls should be impacted - but right now, the Alerts page also uses this QuickFilters component, so the styles have been expanded here, too (and I believe they explicitly prefer the compact styling).

@rshen If possible, I think it would be better to only target the SLO page and not the whole QuickFilters component since this is used a lot more places than just SLO.

[rshen91]

Sorry - I think this is the SLO page, totally can be misunderstanding though 😶‍🌫️ ? x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss

[shahzad31]

i still honestly don't understand why these custom styles are kept in SLO plugin, they should be moved where the control components are.

[nreese]

@rshen91 One solution to remove custom styles from SLO would be to add a compressed prop to ControlGroupRenderer. Then, ControlGroupRenderer could pass compressed to control group embeddable by adding a compressed boolean in the parent returned from ReactEmbeddableRenderer.getParentApi. Finally, the control group embeddable could use compressed styles if the parentApi contains compressed key where typeof parentApi.compressed === boolean && parentApi.compressed

[Heenawter]

@rshen91 @shahzad31 fyi What @nreese is describing is a potential solution for #189939 that he came up with and we discussed offline :) I think it could work really well for a case like this - we can add a compressed prop to ControlGroupRenderer without having to add "serializable state" to the control group, which is what we were originally trying to avoid with these custom styles.

I think this is the best plan moving forward - sorry for the back and forth 🙇

[nreese]

Here is an example for MapRenderer that migrates props from serialized state to parent Api.

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 7f0d2f3
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-193081-7f0d2f3b6b3f

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
slo	844	849	+5

Async chunks

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

id	before	after	diff
controls	455.7KB	455.7KB	-24.0B
slo	854.1KB	855.0KB	+901.0B
total			+877.0B

History

• 💚 Build #235408 succeeded 5354eb0
• 💚 Build #234949 succeeded 0b6fbc0
• 💛 Build #234592 was flaky 67ea6a2

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @rshen91