Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 16 commits into from
Feb 18, 2025
Merged

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

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f6c5486
[Lens] Remove scss from annotations plugin
mbondyra Jan 30, 2025
14ed789
scss another file
mbondyra Jan 30, 2025
b47715e
field picker
mbondyra Jan 30, 2025
029db99
scss in src/platform/packages/shared/kbn-visualization-ui-components/
mbondyra Jan 30, 2025
810fd96
scss in src/platform/packages/shared/kbn-visualization-ui-components/
mbondyra Jan 30, 2025
a052035
gauge expression
mbondyra Jan 30, 2025
e5ab848
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Jan 30, 2025
8ae2291
=remove import
mbondyra Jan 30, 2025
95eaa69
refactor to sugar syntax
mbondyra Feb 5, 2025
9fb9deb
=wip
mbondyra Feb 7, 2025
3b653dc
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Feb 17, 2025
006d20a
fix tests
mbondyra Feb 17, 2025
b80b629
[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'
kibanamachine Feb 17, 2025
774dae9
removing type
mbondyra Feb 17, 2025
721c0c2
Update package.json
mbondyra Feb 18, 2025
ed64a8d
Update package.json
mbondyra Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions ...nnotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -365,7 +364,6 @@ const AnnotationEditorControls = ({
>
<EuiFormRow
display="rowCompressed"
className="lnsRowCompressedMargin"
fullWidth
label={i18n.translate('eventAnnotationComponents.xyChart.annotation.tooltip', {
defaultMessage: 'Show additional fields',
Expand Down
15 changes: 0 additions & 15 deletions ...s/shared/kbn-event-annotation-components/components/annotation_editor_controls/index.scss
View file
Open in desktop

This file was deleted.

165 changes: 69 additions & 96 deletions ...ared/kbn-event-annotation-components/components/annotation_editor_controls/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: () => {
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Expand All @@ -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',
Expand All @@ -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,
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down
1 change: 0 additions & 1 deletion ...nt-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ export const ConfigPanelQueryAnnotation = ({
<EuiFormRow
hasChildLabel
display="rowCompressed"
className="lnsRowCompressedMargin"
fullWidth
label={i18n.translate('eventAnnotationComponents.xyChart.annotation.queryInput', {
defaultMessage: 'Annotation query',
Expand Down
18 changes: 14 additions & 4 deletions ...nt-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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={
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down
8 changes: 6 additions & 2 deletions ...-annotation-components/components/annotation_editor_controls/tooltip_annotation_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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() }]);
Expand Down
5 changes: 1 addition & 4 deletions src/platform/packages/shared/kbn-event-annotation-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

keep sideEffects: false

"*.scss"
]
"license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
}
Loading