From d7b524743eedd671860a3f9e0cf05875fd29a403 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 19 Feb 2025 01:22:07 +1100 Subject: [PATCH] [8.x] [Lens] Remove scss from annotations plugin, visualization-ui-components 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)](https://github.com/elastic/kibana/pull/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> --- .../annotation_editor_controls.tsx | 2 - .../annotation_editor_controls/index.scss | 15 -- .../annotation_editor_controls/index.test.tsx | 165 ++++++++---------- .../query_annotation_panel.tsx | 1 - .../range_annotation_panel.tsx | 18 +- .../tooltip_annotation_panel.tsx | 8 +- .../package.json | 4 +- .../tsconfig.json | 8 +- .../dimension_buttons/palette_indicator.tsx | 6 - .../components/dimension_editor_section.scss | 29 --- .../components/dimension_editor_section.tsx | 37 +++- .../drag_drop_bucket/new_bucket_button.tsx | 3 - .../components/field_picker/field_picker.scss | 7 - .../components/field_picker/field_picker.tsx | 21 ++- .../query_input/filter_query_input.scss | 11 -- .../query_input/filter_query_input.tsx | 18 +- .../package.json | 4 +- .../tsconfig.json | 1 + .../group_editor_controls.test.tsx | 24 ++- .../event_annotation_listing/tsconfig.json | 1 - .../public/components/gauge.scss | 12 -- .../public/components/gauge_component.tsx | 24 ++- .../public/components/index.scss | 9 - .../expression_renderers/gauge_renderer.tsx | 14 +- .../public/components/xy_chart.test.tsx | 17 +- .../annotation_library_editor_page.ts | 5 +- .../dimension_panel/dimension_panel.test.tsx | 23 ++- 27 files changed, 235 insertions(+), 252 deletions(-) delete mode 100644 src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/index.scss delete mode 100644 src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_editor_section.scss delete mode 100644 src/platform/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.scss delete mode 100644 src/platform/packages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.scss delete mode 100644 src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/gauge.scss delete mode 100644 src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/index.scss diff --git a/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx b/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx index de230ac617987..cf213bea1e13b 100644 --- a/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx +++ b/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 = ({ > ({ 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 = {} + ) => { + return mount( + {}} - dataView={{} as DataView} + dataView={mockDataView} getDefaultRangeEnd={() => ''} queryInputServices={mockQueryInputServices} appName="myApp" + {...propsOverrides} /> - ); + + ); + }; + + 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( - {}} - 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( - rangeEndTimestamp} - queryInputServices={mockQueryInputServices} - appName="myApp" - /> + + const { rerender } = render( + + rangeEndTimestamp} + queryInputServices={mockQueryInputServices} + appName="myApp" + /> + ); - 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(expectedRangeAnnotation); + expect(onAnnotationChange).toHaveBeenCalledWith(expectedRangeAnnotation); + + rerender( + + rangeEndTimestamp} + queryInputServices={mockQueryInputServices} + appName="myApp" + /> + + ); + + 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({ + 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( - {}} - 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( - ''} - 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( - ''} - 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( - ''} - queryInputServices={mockQueryInputServices} - appName="myApp" - /> - ); + const component = mountWithThemeProvider({ annotation, onAnnotationChange }); act(() => { component @@ -379,16 +366,7 @@ describe('AnnotationsPanel', () => { const onAnnotationChange = jest.fn(); - const component = mount( - ''} - 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( - ''} - queryInputServices={mockQueryInputServices} - appName="myApp" - /> - ); + const component = mountWithThemeProvider({ + annotation: customLineStaticAnnotation, + onAnnotationChange, + dataView: { ...mockDataView, timeFieldName: '' } as DataView, + }); act(() => { component diff --git a/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx b/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx index dee84a0a3716c..1c0b8df3d4367 100644 --- a/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx +++ b/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx @@ -70,7 +70,6 @@ export const ConfigPanelQueryAnnotation = ({ { const isRange = isRangeAnnotationConfig(annotation); return ( - + ` + & + .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 ( ` + margin-top: ${euiTheme.size.xs}; +`; + interface LocalFieldEntry { name: string; id: string; @@ -78,7 +82,7 @@ export function TooltipSection({ currentConfig, setConfig, dataView }: FieldInpu const addFieldButton = ( { setFields([...currentFields, { name: '', id: generateId() }]); diff --git a/src/platform/packages/shared/kbn-event-annotation-components/package.json b/src/platform/packages/shared/kbn-event-annotation-components/package.json index a50f23ce64044..902406e3378f8 100644 --- a/src/platform/packages/shared/kbn-event-annotation-components/package.json +++ b/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 } diff --git a/src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json b/src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json index 037ef70bfaf82..bb6799d573f02 100644 --- a/src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json +++ b/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/**/*" diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/palette_indicator.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/palette_indicator.tsx index 94c11efd7577f..526399e5b3509 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/palette_indicator.tsx +++ b/src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/palette_indicator.tsx @@ -10,7 +10,6 @@ import React from 'react'; import { EuiColorPaletteDisplay } from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import type { AccessorConfig } from './types'; export function PaletteIndicator({ accessorConfig }: { accessorConfig: AccessorConfig }) { @@ -25,12 +24,7 @@ export function PaletteIndicator({ accessorConfig }: { accessorConfig: AccessorC `} > { return ( -
-
+
+
{title && ( - +

{title}

 )} @@ -30,3 +33,27 @@ export const DimensionEditorSection = ({
); }; + +const DimensionEditorSectionStyles = { + self: ({ euiTheme }: UseEuiTheme) => ` + padding-bottom: ${euiTheme.size.base}; + padding-top: ${euiTheme.size.base}; + &:first-child { + padding-top: 0; + } + `, + divider: ({ euiTheme }: UseEuiTheme) => ` + position: relative; + &:before { + content: ''; + position: absolute; + top: -${euiTheme.size.base}; + right: -${euiTheme.size.base}; + left: -${euiTheme.size.base}; + border-top: 1px solid ${euiTheme.colors.lightShade}; + } + `, + heading: ({ euiTheme }: UseEuiTheme) => ` + padding-bottom: ${euiTheme.size.base}; + `, +}; diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/new_bucket_button.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/new_bucket_button.tsx index a4cacca0ade1c..90b749aa36be7 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/new_bucket_button.tsx +++ b/src/platform/packages/shared/kbn-visualization-ui-components/components/drag_drop_bucket/new_bucket_button.tsx @@ -14,7 +14,6 @@ interface NewBucketButtonProps { label: string; onClick: () => void; isDisabled?: boolean; - className?: string; 'data-test-subj'?: string; } @@ -22,7 +21,6 @@ export const NewBucketButton = ({ label, onClick, isDisabled, - className, 'data-test-subj': dataTestSubj = 'lns-newBucket-add', }: NewBucketButtonProps) => ( {label} diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.scss b/src/platform/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.scss deleted file mode 100644 index d8e4e9b8f7207..0000000000000 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.scss +++ /dev/null @@ -1,7 +0,0 @@ -.lnFieldPicker__option--incompatible { - color: $euiColorLightShade; -} - -.lnFieldPicker__option--nonExistant { - background-color: $euiColorLightestShade; -} \ No newline at end of file diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.tsx index 8dcb97c161813..cc1f1d2a9e931 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.tsx +++ b/src/platform/packages/shared/kbn-visualization-ui-components/components/field_picker/field_picker.tsx @@ -7,12 +7,10 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import './field_picker.scss'; import React from 'react'; import { i18n } from '@kbn/i18n'; -import classNames from 'classnames'; import { comboBoxFieldOptionMatcher } from '@kbn/field-utils'; -import { EuiComboBox, EuiComboBoxOptionOption, EuiComboBoxProps } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiComboBoxProps, useEuiTheme } from '@elastic/eui'; import { FieldIcon } from '@kbn/field-utils/src/components/field_icon'; import { calculateWidthFromCharCount } from '@kbn/calculate-width-from-char-count'; import type { FieldOptionValue, FieldOption } from './types'; @@ -43,6 +41,7 @@ export function FieldPicker( ...rest } = props; + const { euiTheme } = useEuiTheme(); const [selectedOption, setSelectedOption] = React.useState(activeField); let maxLabelLength = 0; @@ -63,10 +62,10 @@ export function FieldPicker( className="eui-alignMiddle" /> ) : null, - className: classNames({ - 'lnFieldPicker__option--incompatible': !fieldOption.compatible, - 'lnFieldPicker__option--nonExistant': !fieldOptionExists, - }), + css: { + color: !fieldOption.compatible ? euiTheme.colors.lightShade : undefined, + backgroundColor: !fieldOptionExists ? euiTheme.colors.lightestShade : undefined, + }, }; }), }; @@ -77,10 +76,10 @@ export function FieldPicker( prepend: otherAttr.value.dataType ? ( ) : null, - className: classNames({ - 'lnFieldPicker__option--incompatible': !compatible, - 'lnFieldPicker__option--nonExistant': !exists, - }), + css: { + color: !compatible ? euiTheme.colors.lightShade : undefined, + backgroundColor: !exists ? euiTheme.colors.lightestShade : undefined, + }, }; }); diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.scss b/src/platform/packages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.scss deleted file mode 100644 index b971b65e897ce..0000000000000 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.scss +++ /dev/null @@ -1,11 +0,0 @@ -// TODO - use emotion instead -.filterQueryInput__popoverButton { - @include euiTextBreakWord; - @include euiFontSizeS; - min-height: $euiSizeXL; - width: 100%; -} - -.filterQueryInput__popover { - width: $euiSize * 60; -} \ No newline at end of file diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx b/src/platform/packages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx index 997016ef0b833..6171ede72d050 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx +++ b/src/platform/packages/shared/kbn-visualization-ui-components/components/query_input/filter_query_input.tsx @@ -18,11 +18,14 @@ import { EuiFlexGroup, EuiIconTip, EuiPopoverProps, + euiTextBreakWord, + useEuiFontSize, + UseEuiTheme, } from '@elastic/eui'; import type { DataViewBase, Query } from '@kbn/es-query'; +import { css } from '@emotion/react'; import { QueryInput, validateQuery } from '.'; import type { QueryInputServices } from '.'; -import './filter_query_input.scss'; const filterByLabel = i18n.translate('visualizationUiComponents.filterQueryInput.label', { defaultMessage: 'Filter by', @@ -46,6 +49,13 @@ export interface FilterQueryInputProps { appName: string; } +const LinkStyles = ({ euiTheme }: UseEuiTheme) => ` + ${euiTextBreakWord()}; + ${useEuiFontSize('s')}; + min-height: ${euiTheme.size.xl}; + width: 100%; +`; + export function FilterQueryInput({ inputFilter, onChange, @@ -100,6 +110,11 @@ export function FilterQueryInput({ isOpen={filterPopoverOpen} closePopover={onClosePopup} display="block" + panelProps={{ + css: css` + width: 960px; + `, + }} panelClassName="filterQueryInput__popover" initialFocus={dataTestSubj ? `textarea[data-test-subj='${dataTestSubj}']` : undefined} button={ @@ -113,6 +128,7 @@ export function FilterQueryInput({ onClick={() => { setFilterPopoverOpen(!filterPopoverOpen); }} + css={LinkStyles} color={isInputFilterValid ? 'text' : 'danger'} title={i18n.translate( 'visualizationUiComponents.filterQueryInput.clickToEdit', diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/package.json b/src/platform/packages/shared/kbn-visualization-ui-components/package.json index 0fe637f3c69ad..aea09d5c502f5 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/package.json +++ b/src/platform/packages/shared/kbn-visualization-ui-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 } diff --git a/src/platform/packages/shared/kbn-visualization-ui-components/tsconfig.json b/src/platform/packages/shared/kbn-visualization-ui-components/tsconfig.json index f65b144e8b86d..c6e6dc0518e24 100644 --- a/src/platform/packages/shared/kbn-visualization-ui-components/tsconfig.json +++ b/src/platform/packages/shared/kbn-visualization-ui-components/tsconfig.json @@ -11,6 +11,7 @@ }, "include": [ "**/*", + "../../../../../typings/**/*" ], "exclude": [ "target/**/*" diff --git a/src/platform/plugins/private/event_annotation_listing/public/components/group_editor_flyout/group_editor_controls/group_editor_controls.test.tsx b/src/platform/plugins/private/event_annotation_listing/public/components/group_editor_flyout/group_editor_controls/group_editor_controls.test.tsx index d79fe5d913343..8e3f9b5bab667 100644 --- a/src/platform/plugins/private/event_annotation_listing/public/components/group_editor_flyout/group_editor_controls/group_editor_controls.test.tsx +++ b/src/platform/plugins/private/event_annotation_listing/public/components/group_editor_flyout/group_editor_controls/group_editor_controls.test.tsx @@ -10,14 +10,14 @@ import React, { ChangeEvent, FormEvent } from 'react'; import type { EventAnnotationGroupConfig } from '@kbn/event-annotation-common'; import { getDefaultManualAnnotation } from '@kbn/event-annotation-common'; -import { ReactWrapper } from 'enzyme'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; +import { ComponentType, ReactWrapper, mount } from 'enzyme'; import { GroupEditorControls } from './group_editor_controls'; -import { EuiTextAreaProps, EuiTextProps } from '@elastic/eui'; +import { EuiTextAreaProps, EuiTextProps, EuiThemeProvider } from '@elastic/eui'; import type { DataView } from '@kbn/data-views-plugin/common'; import { act } from 'react-dom/test-utils'; import type { QueryInputServices } from '@kbn/visualization-ui-components'; import { AnnotationEditorControls } from '@kbn/event-annotation-components'; +import { I18nProvider } from '@kbn/i18n-react'; jest.mock('@elastic/eui', () => { return { @@ -53,8 +53,17 @@ describe('event annotation group editor', () => { beforeEach(async () => { updateMock = jest.fn(); setSelectedAnnotationMock = jest.fn(); - - wrapper = mountWithIntl( + const wrappingComponent: React.FC<{ + children: React.ReactNode; + }> = ({ children }) => { + return ( + + {children} + + ); + }; + + wrapper = mount( { queryInputServices={{} as QueryInputServices} showValidation={false} isAdHocDataView={() => false} - /> + />, + { + wrappingComponent: wrappingComponent as ComponentType<{}>, + } ); await act(async () => { diff --git a/src/platform/plugins/private/event_annotation_listing/tsconfig.json b/src/platform/plugins/private/event_annotation_listing/tsconfig.json index 5cd9cf340bf1d..a92f36d0032ac 100644 --- a/src/platform/plugins/private/event_annotation_listing/tsconfig.json +++ b/src/platform/plugins/private/event_annotation_listing/tsconfig.json @@ -33,7 +33,6 @@ "@kbn/event-annotation-common", "@kbn/lens-plugin", "@kbn/ui-theme", - "@kbn/test-jest-helpers", "@kbn/expressions-plugin", "@kbn/es-query", "@kbn/core-ui-settings-browser", diff --git a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/gauge.scss b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/gauge.scss deleted file mode 100644 index cb7d6718d4dcd..0000000000000 --- a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/gauge.scss +++ /dev/null @@ -1,12 +0,0 @@ -.gauge__wrapper { - flex: 1 1 0; - display: flex; - flex-direction: column; - // it is used for rendering at `Canvas`. - height: 100%; -} - -.gauge__label { - width: 100%; - text-align: center; -} diff --git a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/gauge_component.tsx index dfb408e3a3c70..e080a8a9e09b2 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/gauge_component.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/gauge_component.tsx @@ -8,6 +8,7 @@ */ import React, { FC, useCallback } from 'react'; +import { css } from '@emotion/react'; import { Chart, Bullet, BulletProps, Settings } from '@elastic/charts'; import { useEuiTheme } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -38,10 +39,7 @@ import { computeMinMax, } from './utils'; import { getGaugeIconByType } from './utils/icons'; -import './index.scss'; import { GaugeCentralMajorMode, GaugeTicksPosition } from '../../common/types'; - -import './gauge.scss'; import { useGaugeSizeByType } from './utils/use_gauge_size_by_type'; declare global { @@ -366,7 +364,14 @@ export const GaugeComponent: FC = ({ }; return ( -
+
} @@ -413,7 +418,16 @@ export const GaugeComponent: FC = ({ ]} /> - {commonLabel &&
{commonLabel}
} + {commonLabel && ( +
+ {commonLabel} +
+ )}
); }; diff --git a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/index.scss b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/index.scss deleted file mode 100644 index ea2b35fba9718..0000000000000 --- a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/components/index.scss +++ /dev/null @@ -1,9 +0,0 @@ -.gauge-container { - height: 100%; - width: 100%; - // the FocusTrap is adding extra divs which are making the visualization redraw twice - // with a visible glitch. This make the chart library resilient to this extra reflow - overflow: hidden; - user-select: text; - @include euiScrollBar; -} diff --git a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx index bf2c9130f45a6..0b9881587d2be 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx @@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; +import { css } from '@emotion/react'; import { render, unmountComponentAtNode } from 'react-dom'; import { PersistedState } from '@kbn/visualizations-plugin/public'; import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; @@ -93,7 +94,18 @@ export const gaugeRenderer: ( const { GaugeComponent } = await import('../components/gauge_component'); render( -
+
{ }, ]), ]); - const component = mount(); + const component = mount( + + + + ); const groupedAnnotation = component.find(LineAnnotation); expect(groupedAnnotation.length).toEqual(1); // styles are passed because they are shared, dataValues is rounded to the interval expect(groupedAnnotation).toMatchSnapshot(); // renders numeric icon for grouped annotations - const marker = mount(
{groupedAnnotation.prop('marker') as React.ReactNode}
); + const marker = mount( + +
{groupedAnnotation.prop('marker') as React.ReactNode}
+ + ); const numberIcon = marker.find('NumberIcon'); expect(numberIcon.length).toEqual(1); expect(numberIcon.text()).toEqual('3'); // checking tooltip const renderLinks = mount( -
{(groupedAnnotation.prop('customTooltip') as Function)!()}
+ +
{(groupedAnnotation.prop('customTooltip') as Function)!()}
+ ); expect(renderLinks.text()).toEqual( 'Event 1Mar 18, 2022 @ 04:25:00.000Event 2Mar 18, 2022 @ 04:25:00.020Event 3Mar 18, 2022 @ 04:25:00.001' diff --git a/test/functional/page_objects/annotation_library_editor_page.ts b/test/functional/page_objects/annotation_library_editor_page.ts index e339aeb33f2be..4d67150374b5d 100644 --- a/test/functional/page_objects/annotation_library_editor_page.ts +++ b/test/functional/page_objects/annotation_library_editor_page.ts @@ -11,7 +11,6 @@ import { FtrService } from '../ftr_provider_context'; export class AnnotationEditorPageObject extends FtrService { private readonly testSubjects = this.ctx.getService('testSubjects'); - private readonly find = this.ctx.getService('find'); private readonly retry = this.ctx.getService('retry'); /** @@ -58,9 +57,7 @@ export class AnnotationEditorPageObject extends FtrService { const queryInput = await this.testSubjects.find('annotation-query-based-query-input'); await queryInput.type(config.query); - const titles = await this.find.allByCssSelector( - '.euiFlyout h3.lnsDimensionEditorSection__heading' - ); + const titles = await this.testSubjects.findAll(`lnsDimensionEditorSectionHeading`); const lastTitle = titles[titles.length - 1]; await lastTitle.click(); // close query input pop-up await lastTitle.focus(); // scroll down to the bottom of the section diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_panel.test.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_panel.test.tsx index ff08447f2a247..3df7248ae3f3d 100644 --- a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_panel.test.tsx +++ b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_panel.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { ReactWrapper, ShallowWrapper, ComponentType } from 'enzyme'; +import { ReactWrapper, ShallowWrapper, ComponentType, mount } from 'enzyme'; import React, { ChangeEvent } from 'react'; import { screen, act, render, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -17,6 +17,7 @@ import { EuiRange, EuiSelect, EuiComboBoxProps, + EuiThemeProvider, } from '@elastic/eui'; import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks'; import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks'; @@ -26,7 +27,6 @@ import { FormBasedDimensionEditorComponent, FormBasedDimensionEditorProps, } from './dimension_panel'; -import { mount } from 'enzyme'; import { IUiSettingsClient, HttpSetup, CoreStart, NotificationsStart } from '@kbn/core/public'; import { IStorageWrapper } from '@kbn/kibana-utils-plugin/public'; import { useExistingFieldsReader } from '@kbn/unified-field-list/src/hooks/use_existing_fields'; @@ -167,15 +167,22 @@ const bytesColumn: GenericIndexPatternColumn = { params: { format: { id: 'bytes' } }, }; -const services = coreMock.createStart() as unknown as LensAppServices; +const wrappingComponent: React.FC<{ + children: React.ReactNode; +}> = ({ children }) => { + return ( + + {children} + + ); +}; function mountWithServices(component: React.ReactElement): ReactWrapper { return mount(component, { // This is an elegant way to wrap a component in Enzyme // preserving the root at the component level rather than // at the wrapper one - wrappingComponent: KibanaContextProvider as ComponentType<{}>, - wrappingComponentProps: { services }, + wrappingComponent: wrappingComponent as ComponentType<{}>, }); } @@ -288,7 +295,11 @@ describe('FormBasedDimensionEditor', () => { const Wrapper: React.FC<{ children: React.ReactNode; }> = ({ children }) => { - return {children}; + return ( + + {children} + + ); }; const rtlRender = render(