[8.18] [Lens] Remove scss from annotations plugin, visualization-ui-c…

…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)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Marta
Bondyra","email":"4283304+mbondyra@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-18T12:31:09Z","message":"[Lens]
Remove scss from annotations plugin, visualization-ui-components and
gauge expression (#208891)\n\n## Summary\r\n\r\npart of
https://github.com/elastic/kibana/issues/208908\r\n\r\nReplaces scss to
css-in-js. I've tested all the
changes.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"91a19c0969bc140ad4c16e69eb23f424b0ecae4f","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Visualizations","release_note:skip","Feature:Lens","v9.0.0","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[Lens]
Remove scss from annotations plugin, visualization-ui-components and
gauge
expression","number":208891,"url":"https://github.com/elastic/kibana/pull/208891","mergeCommit":{"message":"[Lens]
Remove scss from annotations plugin, visualization-ui-components and
gauge expression (#208891)\n\n## Summary\r\n\r\npart of
https://github.com/elastic/kibana/issues/208908\r\n\r\nReplaces scss to
css-in-js. I've tested all the
changes.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"91a19c0969bc140ad4c16e69eb23f424b0ecae4f"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208891","number":208891,"mergeCommit":{"message":"[Lens]
Remove scss from annotations plugin, visualization-ui-components and
gauge expression (#208891)\n\n## Summary\r\n\r\npart of
https://github.com/elastic/kibana/issues/208908\r\n\r\nReplaces scss to
css-in-js. I've tested all the
changes.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"91a19c0969bc140ad4c16e69eb23f424b0ecae4f"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>

src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx

@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './index.scss';
 import { isFieldLensCompatible } from '@kbn/visualization-ui-components';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
@@ -357,7 +356,6 @@ const AnnotationEditorControls = ({
         >
           <EuiFormRow
             display="rowCompressed"
-            className="lnsRowCompressedMargin"
             fullWidth
             label={i18n.translate('eventAnnotationComponents.xyChart.annotation.tooltip', {
               defaultMessage: 'Show additional fields',

src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/index.test.tsx

@@ -19,7 +19,8 @@ import type {
 import { QueryInputServices } from '@kbn/visualization-ui-components';
 import moment from 'moment';
 import { act } from 'react-dom/test-utils';
-import { EuiButtonGroup } from '@elastic/eui';
+import { EuiButtonGroup, EuiThemeProvider } from '@elastic/eui';
+import { render, screen } from '@testing-library/react';
 
 jest.mock('@kbn/unified-search-plugin/public', () => ({
   QueryStringInput: () => {
@@ -70,18 +71,27 @@ describe('AnnotationsPanel', () => {
     data: {},
   } as QueryInputServices;
 
-  describe('Dimension Editor', () => {
-    test('shows correct options for line annotations', () => {
-      const component = mount(
+  const mountWithThemeProvider = (
+    propsOverrides: Partial<typeof AnnotationEditorControls> = {}
+  ) => {
+    return mount(
+      <EuiThemeProvider>
         <AnnotationEditorControls
           annotation={customLineStaticAnnotation}
           onAnnotationChange={() => {}}
-          dataView={{} as DataView}
+          dataView={mockDataView}
           getDefaultRangeEnd={() => ''}
           queryInputServices={mockQueryInputServices}
           appName="myApp"
+          {...propsOverrides}
         />
-      );
+      </EuiThemeProvider>
+    );
+  };
+
+  describe('Dimension Editor', () => {
+    test('shows correct options for line annotations', () => {
+      const component = mountWithThemeProvider();
 
       expect(
         component.find('EuiDatePicker[data-test-subj="lns-xyAnnotation-time"]').prop('selected')
@@ -124,16 +134,7 @@ describe('AnnotationsPanel', () => {
         lineWidth: 3,
       };
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={rangeAnnotation}
-          onAnnotationChange={() => {}}
-          dataView={{} as DataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({ annotation: rangeAnnotation });
 
       expect(
         component.find('EuiDatePicker[data-test-subj="lns-xyAnnotation-fromTime"]').prop('selected')
@@ -156,21 +157,26 @@ describe('AnnotationsPanel', () => {
       expect(component.find('[data-test-subj="lns-xyAnnotation-fillStyle"]').exists()).toBeTruthy();
     });
 
-    test('calculates correct endTimstamp and transparent color when switching for range annotation and back', async () => {
+    test('calculates correct endTimestamp and transparent color when switching for range annotation and back', async () => {
       const onAnnotationChange = jest.fn();
       const rangeEndTimestamp = new Date().toISOString();
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={customLineStaticAnnotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={{} as DataView}
-          getDefaultRangeEnd={() => rangeEndTimestamp}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
+
+      const { rerender } = render(
+        <EuiThemeProvider>
+          <AnnotationEditorControls
+            annotation={customLineStaticAnnotation}
+            onAnnotationChange={onAnnotationChange}
+            dataView={mockDataView}
+            getDefaultRangeEnd={() => rangeEndTimestamp}
+            queryInputServices={mockQueryInputServices}
+            appName="myApp"
+          />
+        </EuiThemeProvider>
       );
 
-      component.find('button[data-test-subj="lns-xyAnnotation-rangeSwitch"]').simulate('click');
+      act(() => {
+        screen.getByTestId('lns-xyAnnotation-rangeSwitch').click();
+      });
 
       const expectedRangeAnnotation: RangeEventAnnotationConfig = {
         color: '#FF00001A',
@@ -185,19 +191,30 @@ describe('AnnotationsPanel', () => {
         },
       };
 
-      expect(onAnnotationChange).toBeCalledWith<EventAnnotationConfig[]>(expectedRangeAnnotation);
+      expect(onAnnotationChange).toHaveBeenCalledWith(expectedRangeAnnotation);
+
+      rerender(
+        <EuiThemeProvider>
+          <AnnotationEditorControls
+            annotation={expectedRangeAnnotation}
+            onAnnotationChange={onAnnotationChange}
+            dataView={mockDataView}
+            getDefaultRangeEnd={() => rangeEndTimestamp}
+            queryInputServices={mockQueryInputServices}
+            appName="myApp"
+          />
+        </EuiThemeProvider>
+      );
+
+      expect(screen.getByTestId('lns-xyAnnotation-rangeSwitch').getAttribute('aria-checked')).toBe(
+        'true'
+      );
 
       act(() => {
-        component.setProps({ annotation: expectedRangeAnnotation });
+        screen.getByTestId('lns-xyAnnotation-rangeSwitch').click();
       });
 
-      expect(
-        component.find('EuiSwitch[data-test-subj="lns-xyAnnotation-rangeSwitch"]').prop('checked')
-      ).toEqual(true);
-
-      component.find('button[data-test-subj="lns-xyAnnotation-rangeSwitch"]').simulate('click');
-
-      expect(onAnnotationChange).toBeCalledWith<EventAnnotationConfig[]>({
+      expect(onAnnotationChange).toHaveBeenCalledWith({
         color: '#FF0000',
         id: 'ann1',
         isHidden: undefined,
@@ -227,16 +244,7 @@ describe('AnnotationsPanel', () => {
         filter: { type: 'kibana_query', query: '', language: 'kuery' },
       };
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={annotation}
-          onAnnotationChange={() => {}}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({ annotation });
 
       expect(
         component.find('[data-test-subj="lnsXY-annotation-query-based-field-picker"]').exists()
@@ -264,16 +272,10 @@ describe('AnnotationsPanel', () => {
     test('should prefill timeField with the default time field when switching to query based annotations', () => {
       const onAnnotationChange = jest.fn();
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={customLineStaticAnnotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({
+        annotation: customLineStaticAnnotation,
+        onAnnotationChange,
+      });
 
       act(() => {
         component
@@ -291,16 +293,10 @@ describe('AnnotationsPanel', () => {
     test('should avoid to retain specific manual configurations when switching to query based annotations', () => {
       const onAnnotationChange = jest.fn();
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={customLineStaticAnnotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({
+        annotation: customLineStaticAnnotation,
+        onAnnotationChange,
+      });
 
       act(() => {
         component
@@ -336,16 +332,7 @@ describe('AnnotationsPanel', () => {
 
       const onAnnotationChange = jest.fn();
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={annotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({ annotation, onAnnotationChange });
 
       act(() => {
         component
@@ -379,16 +366,7 @@ describe('AnnotationsPanel', () => {
 
       const onAnnotationChange = jest.fn();
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={annotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({ annotation, onAnnotationChange });
 
       act(() => {
         component
@@ -412,16 +390,11 @@ describe('AnnotationsPanel', () => {
 
     test('should fallback to the first date field available in the dataView if not time-based', () => {
       const onAnnotationChange = jest.fn();
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={customLineStaticAnnotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={{ ...mockDataView, timeFieldName: '' } as DataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({
+        annotation: customLineStaticAnnotation,
+        onAnnotationChange,
+        dataView: { ...mockDataView, timeFieldName: '' } as DataView,
+      });
 
       act(() => {
         component

src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx

@@ -70,7 +70,6 @@ export const ConfigPanelQueryAnnotation = ({
       <EuiFormRow
         hasChildLabel
         display="rowCompressed"
-        className="lnsRowCompressedMargin"
         fullWidth
         label={i18n.translate('eventAnnotationComponents.xyChart.annotation.queryInput', {
           defaultMessage: 'Annotation query',

src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx

@@ -9,7 +9,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { EuiFormRow, EuiSwitch, EuiText, EuiDatePicker } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiText, EuiDatePicker, UseEuiTheme } from '@elastic/eui';
 import moment from 'moment';
 import type {
   PointInTimeEventAnnotationConfig,
@@ -31,7 +31,7 @@ export const ConfigPanelApplyAsRangeSwitch = ({
 }) => {
   const isRange = isRangeAnnotationConfig(annotation);
   return (
-    <EuiFormRow display="columnCompressed" className="lnsRowCompressedMargin">
+    <EuiFormRow display="columnCompressed">
       <EuiSwitch
         data-test-subj="lns-xyAnnotation-rangeSwitch"
         label={
@@ -84,6 +84,15 @@ export const ConfigPanelApplyAsRangeSwitch = ({
   );
 };
 
+const RowCompressedMarginStyle = ({ euiTheme }: UseEuiTheme) => `
+  & + .lnsRowCompressedMargin {
+    margin-top: ${euiTheme.size.s};
+  }
+  .euiFormControlLayout__prepend {
+    min-width: 50px; // makes both labels ("from" and "to") the same width
+  }
+`;
+
 export const ConfigPanelRangeDatePicker = ({
   value,
   label,
@@ -102,9 +111,10 @@ export const ConfigPanelRangeDatePicker = ({
   return (
     <EuiFormRow
       display="rowCompressed"
-      fullWidth
       label={label}
-      className="lnsConfigPanelAnnotations__date lnsRowCompressedMargin"
+      fullWidth
+      className="lnsRowCompressedMargin"
+      css={RowCompressedMarginStyle}
     >
       <EuiDatePicker
         compressed

src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/tooltip_annotation_panel.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiFlexItem, EuiPanel, EuiText, htmlIdGenerator } from '@elastic/eui';
+import { EuiFlexItem, EuiPanel, EuiText, UseEuiTheme, htmlIdGenerator } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useCallback, useState } from 'react';
 import fastIsEqual from 'fast-deep-equal';
@@ -43,6 +43,10 @@ function removeNewEmptyField(v: string) {
 
 const generateId = htmlIdGenerator();
 
+const NewBucketButtonStyles = ({ euiTheme }: UseEuiTheme) => `
+ margin-top: ${euiTheme.size.xs};
+`;
+
 interface LocalFieldEntry {
   name: string;
   id: string;
@@ -78,7 +82,7 @@ export function TooltipSection({ currentConfig, setConfig, dataView }: FieldInpu
 
   const addFieldButton = (
     <NewBucketButton
-      className="lnsConfigPanelAnnotations__addButton"
+      css={NewBucketButtonStyles}
       data-test-subj={`lnsXY-annotation-tooltip-add_field`}
       onClick={() => {
         setFields([...currentFields, { name: '', id: generateId() }]);

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

@@ -3,7 +3,5 @@
   "private": true,
   "version": "1.0.0",
   "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
-  "sideEffects": [
-    "*.scss"
-  ]
+  "sideEffects": false
 }

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

@@ -1,15 +1,11 @@
 {
   "extends": "../../../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "target/types",
-    "types": [
-      "jest",
-      "node",
-      "@emotion/react/types/css-prop",
-    ]
+    "outDir": "target/types"
   },
   "include": [
     "**/*",
+    "../../../../../typings/**/*",
   ],
   "exclude": [
     "target/**/*"