[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression #208891

mbondyra · 2025-01-30T09:34:55Z

Summary

part of #208908

Replaces scss to css-in-js. I've tested all the changes.

elasticmachine · 2025-01-30T09:34:58Z

Pinging @elastic/kibana-visualizations (Team:Visualizations)

MichaelMarcialis

Thanks, @mbondyra. I've left two small comments/question regarding whether we can reduce some style repetition/redundancy, but this looks good to me otherwise. Assuming you're able to address those, I'll approve now so I don't hold you up.

MichaelMarcialis · 2025-01-30T19:44:15Z

...t-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx

+            css={css`
+              & + .lnsRowCompressedMargin {
+                margin-top: ${euiThemeVars.euiSizeS};
+              }
+            `}


This same style is used multiple times throughout this PR. To keep things DRY, would it be better to store this style in a separate .style.ts file and reference that one style in all locations, rather than repeating the style?

MichaelMarcialis · 2025-01-30T19:51:16Z

...orm/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.tsx

+            css: {
+              color: !fieldOption.compatible ? euiThemeVars.euiColorLightShade : undefined,
+              backgroundColor: !fieldOptionExists ? euiThemeVars.euiColorLightestShade : undefined,
+            },


Same comment here as previous. Is there anything that can be done here to avoid repeating the same styles?

nickofthyme · 2025-01-30T23:15:16Z

...ackages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx

 } from '@elastic/eui';
 import type { DataViewBase, Query } from '@kbn/es-query';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';


It seems like the EUI team is asking people to move away from using euiThemeVars and instead using the useEuiTheme hook. See #199715 and search for euiThemeVars.

Before:

import { EuiIcon, EuiCode, EuiText, useEuiTheme } from '@elastic/eui'; height: ${euiThemeVars.euiSizeXS} / 2;

After:

import { useEuiTheme } from '@elastic/eui' const { euiTheme } = useEuiTheme(); height: ${euiTheme.size.xs} / 2;

…-fix'

markov00 · 2025-02-17T21:06:17Z

src/platform/packages/shared/kbn-visualization-ui-components/package.json

-  "sideEffects": [
-    "*.scss"
-  ]


You should change this to sideEffects: false to avoid a different treeshake in the bundle.
sideEffects is by default true

markov00 · 2025-02-17T21:09:44Z

src/platform/packages/shared/kbn-event-annotation-components/package.json

@@ -2,8 +2,5 @@
  "name": "@kbn/event-annotation-components",
  "private": true,
  "version": "1.0.0",
-  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
-  "sideEffects": [


keep sideEffects: false

elasticmachine · 2025-02-18T10:47:14Z

💚 Build Succeeded

Buildkite Build
Commit: ed64a8d

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`eventAnnotationListing`	746	710	-36
`expressionGauge`	95	69	-26
`lens`	1820	1784	-36
`observability`	1440	1404	-36
total			-134

Async chunks

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

id	before	after	diff
`eventAnnotationListing`	233.7KB	218.6KB	-15.1KB
`expressionGauge`	19.5KB	9.9KB	-9.6KB
`lens`	1.6MB	1.6MB	-11.9KB
total			-36.5KB

Page load bundle

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

id	before	after	diff
`expressionGauge`	13.7KB	13.7KB	-1.0B

History

💚 Build #277008 succeeded 774dae9
💔 Build #276995 failed 3e3c709
💔 Build #276961 failed b80b629
💔 Build #276870 failed 3b653dc

kibanamachine · 2025-02-18T12:31:25Z

Starting backport for target branches: 8.18, 8.x, 9.0

https://github.com/elastic/kibana/actions/runs/13390605630

…ts and gauge expression (elastic#208891) ## Summary part of elastic#208908 Replaces scss to css-in-js. I've tested all the changes. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 91a19c0)

kibanamachine · 2025-02-18T12:37:19Z

💚 All backports created successfully

Status	Branch	Result
✅	8.18
✅	8.x
✅	9.0

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…mponents and gauge expression (#208891) (#211567) # Backport This will backport the following commits from `main` to `9.0`: - [[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression (#208891)](#208891)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>

…omponents and gauge expression (#208891) (#211565) # Backport This will backport the following commits from `main` to `8.18`: - [[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression (#208891)](#208891)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>

…mponents and gauge expression (#208891) (#211566) # Backport This will backport the following commits from `main` to `8.x`: - [[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression (#208891)](#208891)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>

mbondyra added Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens v9.0.0 backport:version Backport to applied version labels v8.18.0 labels Jan 30, 2025

mbondyra requested review from a team as code owners January 30, 2025 09:34

mbondyra added the release_note:skip Skip the PR/issue when compiling release notes label Jan 30, 2025

mbondyra changed the title ~~[Lens] Remove scss from annotations plugin~~ [Lens] Remove scss from annotations plugin nad visualization-ui-components Jan 30, 2025

mbondyra changed the title ~~[Lens] Remove scss from annotations plugin nad visualization-ui-components~~ [Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression Jan 30, 2025

mbondyra force-pushed the lens/scss-js branch from d2cd1ac to 21bf098 Compare January 30, 2025 21:33

MichaelMarcialis approved these changes Jan 30, 2025

View reviewed changes

mbondyra force-pushed the lens/scss-js branch from 21bf098 to 56d998a Compare January 30, 2025 21:50

nickofthyme approved these changes Jan 30, 2025

View reviewed changes

mbondyra added v9.1.0 v8.19.0 and removed v9.0.0 v8.18.0 labels Feb 3, 2025

mbondyra force-pushed the lens/scss-js branch 2 times, most recently from 2aa224f to 6e1fc08 Compare February 5, 2025 13:37

mbondyra force-pushed the lens/scss-js branch from 6e1fc08 to 864c6db Compare February 17, 2025 10:18

mbondyra requested a review from a team as a code owner February 17, 2025 10:18

mbondyra force-pushed the lens/scss-js branch from 864c6db to 5c76252 Compare February 17, 2025 10:39

mbondyra marked this pull request as draft February 17, 2025 11:07

mbondyra force-pushed the lens/scss-js branch 2 times, most recently from e895517 to 9e73246 Compare February 17, 2025 11:17

elastic deleted a comment from elasticmachine Feb 17, 2025

mbondyra removed the request for review from a team February 17, 2025 12:16

kibanamachine and others added 5 commits February 17, 2025 13:17

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

e5ab848

…-fix'

=remove import

8ae2291

refactor to sugar syntax

95eaa69

=wip

9fb9deb

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

3b653dc

…-fix'

mbondyra force-pushed the lens/scss-js branch from 09a900e to 3b653dc Compare February 17, 2025 12:17

mbondyra added v8.18.0 v9.0.0 labels Feb 17, 2025

fix tests

006d20a

mbondyra force-pushed the lens/scss-js branch from 8ee793d to 006d20a Compare February 17, 2025 14:55

kibanamachine and others added 2 commits February 17, 2025 15:05

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'

b80b629

removing type

774dae9

mbondyra force-pushed the lens/scss-js branch from 3e3c709 to 774dae9 Compare February 17, 2025 16:41

markov00 reviewed Feb 17, 2025

View reviewed changes

mbondyra added 2 commits February 18, 2025 10:08

Update package.json

721c0c2

Update package.json

ed64a8d

mbondyra merged commit 91a19c0 into elastic:main Feb 18, 2025
9 checks passed

mbondyra deleted the lens/scss-js branch February 18, 2025 12:31

kibanamachine mentioned this pull request Feb 18, 2025

[8.18] [Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression (#208891) #211565

Merged

kibanamachine mentioned this pull request Feb 18, 2025

[8.x] [Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression (#208891) #211566

Merged

kibanamachine mentioned this pull request Feb 18, 2025

[9.0] [Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression (#208891) #211567

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression #208891

[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression #208891

mbondyra commented Jan 30, 2025 •

edited by kibanamachine

Loading

elasticmachine commented Jan 30, 2025

MichaelMarcialis left a comment

MichaelMarcialis Jan 30, 2025

MichaelMarcialis Jan 30, 2025

nickofthyme Jan 30, 2025

markov00 Feb 17, 2025

markov00 Feb 17, 2025

elasticmachine commented Feb 18, 2025

kibanamachine commented Feb 18, 2025

kibanamachine commented Feb 18, 2025

[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression #208891

[Lens] Remove scss from annotations plugin, visualization-ui-components and gauge expression #208891

Conversation

mbondyra commented Jan 30, 2025 • edited by kibanamachine Loading

Summary

elasticmachine commented Jan 30, 2025

MichaelMarcialis left a comment

Choose a reason for hiding this comment

MichaelMarcialis Jan 30, 2025

Choose a reason for hiding this comment

MichaelMarcialis Jan 30, 2025

Choose a reason for hiding this comment

nickofthyme Jan 30, 2025

Choose a reason for hiding this comment

markov00 Feb 17, 2025

Choose a reason for hiding this comment

markov00 Feb 17, 2025

Choose a reason for hiding this comment

elasticmachine commented Feb 18, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

kibanamachine commented Feb 18, 2025

kibanamachine commented Feb 18, 2025

💚 All backports created successfully

Questions ?

mbondyra commented Jan 30, 2025 •

edited by kibanamachine

Loading