diff --git a/package.json b/package.json index a8a40fca02780d..e3b06c55f284e3 100644 --- a/package.json +++ b/package.json @@ -108,7 +108,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.4.0-canary.1", "@elastic/ems-client": "8.3.3", - "@elastic/eui": "64.0.5", + "@elastic/eui": "67.1.8", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/core/application/core-application-browser-internal/src/application_leave.tsx b/packages/core/application/core-application-browser-internal/src/application_leave.tsx index e6c7bc8b4ad7a0..d2a82cbb129c88 100644 --- a/packages/core/application/core-application-browser-internal/src/application_leave.tsx +++ b/packages/core/application/core-application-browser-internal/src/application_leave.tsx @@ -5,7 +5,7 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import type { ButtonColor } from '@elastic/eui'; +import type { EuiButtonColor } from '@elastic/eui'; import { AppLeaveActionType, type AppLeaveActionFactory, @@ -20,7 +20,7 @@ const appLeaveActionFactory: AppLeaveActionFactory = { title?: string, callback?: () => void, confirmButtonText?: string, - buttonColor?: ButtonColor + buttonColor?: EuiButtonColor ) { return { type: AppLeaveActionType.confirm, diff --git a/packages/core/application/core-application-browser/src/app_leave.ts b/packages/core/application/core-application-browser/src/app_leave.ts index 683d55296ff660..edc18c5ef8a483 100644 --- a/packages/core/application/core-application-browser/src/app_leave.ts +++ b/packages/core/application/core-application-browser/src/app_leave.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import type { ButtonColor } from '@elastic/eui'; +import type { EuiButtonColor } from '@elastic/eui'; /** * A handler that will be executed before leaving the application, either when @@ -61,7 +61,7 @@ export interface AppLeaveConfirmAction { text: string; title?: string; confirmButtonText?: string; - buttonColor?: ButtonColor; + buttonColor?: EuiButtonColor; callback?: () => void; } @@ -95,7 +95,7 @@ export interface AppLeaveActionFactory { title?: string, callback?: () => void, confirmButtonText?: string, - buttonColor?: ButtonColor + buttonColor?: EuiButtonColor ): AppLeaveConfirmAction; /** diff --git a/packages/core/apps/core-apps-browser-internal/src/status/components/__snapshots__/server_status.test.tsx.snap b/packages/core/apps/core-apps-browser-internal/src/status/components/__snapshots__/server_status.test.tsx.snap index bcc60f59085921..60d1bad95e3e1c 100644 --- a/packages/core/apps/core-apps-browser-internal/src/status/components/__snapshots__/server_status.test.tsx.snap +++ b/packages/core/apps/core-apps-browser-internal/src/status/components/__snapshots__/server_status.test.tsx.snap @@ -1,100 +1,61 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ServerStatus renders correctly for green state 2`] = ` - - + - - - Green - - + Green - - + + `; exports[`ServerStatus renders correctly for red state 2`] = ` - - + - - - Red - - + Red - - + + `; exports[`ServerStatus renders correctly for yellow state 2`] = ` - - + - - - Yellow - - + Yellow - - + + `; diff --git a/packages/core/apps/core-apps-browser-internal/src/status/components/server_status.test.tsx b/packages/core/apps/core-apps-browser-internal/src/status/components/server_status.test.tsx index 13e6a36a65cfd6..af27e2ba54ea27 100644 --- a/packages/core/apps/core-apps-browser-internal/src/status/components/server_status.test.tsx +++ b/packages/core/apps/core-apps-browser-internal/src/status/components/server_status.test.tsx @@ -24,7 +24,7 @@ describe('ServerStatus', () => { const status = getStatus(); const component = mount(); expect(component.find('EuiTitle').text()).toMatchInlineSnapshot(`"Kibana status is Green"`); - expect(component.find('EuiBadge')).toMatchSnapshot(); + expect(component.find('EuiBadge').render()).toMatchSnapshot(); }); it('renders correctly for yellow state', () => { @@ -34,7 +34,7 @@ describe('ServerStatus', () => { }); const component = mount(); expect(component.find('EuiTitle').text()).toMatchInlineSnapshot(`"Kibana status is Yellow"`); - expect(component.find('EuiBadge')).toMatchSnapshot(); + expect(component.find('EuiBadge').render()).toMatchSnapshot(); }); it('renders correctly for red state', () => { @@ -44,7 +44,7 @@ describe('ServerStatus', () => { }); const component = mount(); expect(component.find('EuiTitle').text()).toMatchInlineSnapshot(`"Kibana status is Red"`); - expect(component.find('EuiBadge')).toMatchSnapshot(); + expect(component.find('EuiBadge').render()).toMatchSnapshot(); }); it('displays the correct `name`', () => { diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap index 63e5e8dd748be2..1475e5fbedd010 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap @@ -136,7 +136,7 @@ Array [ aria-controls="generated-id" aria-expanded="true" aria-labelledby="generated-id" - class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiAccordion__iconButton-isOpen-arrowRight" + class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen-arrowRight" tabindex="-1" type="button" > @@ -261,7 +261,7 @@ Array [ aria-controls="generated-id" aria-expanded="true" aria-labelledby="generated-id" - class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiAccordion__iconButton-isOpen-arrowRight" + class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen-arrowRight" tabindex="-1" type="button" > @@ -393,7 +393,7 @@ Array [ aria-controls="generated-id" aria-expanded="true" aria-labelledby="generated-id" - class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiAccordion__iconButton-isOpen-arrowRight" + class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen-arrowRight" tabindex="-1" type="button" > @@ -508,7 +508,7 @@ Array [ aria-controls="generated-id" aria-expanded="true" aria-labelledby="generated-id" - class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiAccordion__iconButton-isOpen-arrowRight" + class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen-arrowRight" tabindex="-1" type="button" > @@ -606,7 +606,7 @@ Array [ aria-controls="generated-id" aria-expanded="true" aria-labelledby="generated-id" - class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiAccordion__iconButton-isOpen-arrowRight" + class="euiButtonIcon euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right emotion-euiButtonIcon-empty-text-hoverStyles-euiAccordion__iconButton-isOpen-arrowRight" tabindex="-1" type="button" > diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap index 2a42112f30a819..aa77a58ad7202a 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap @@ -83,7 +83,7 @@ exports[`Header renders 1`] = ` aria-expanded="false" aria-haspopup="true" aria-label="Help menu" - class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton" + class="euiButtonEmpty euiHeaderSectionItemButton css-wvaqcf-empty-text" type="button" > + + `; diff --git a/packages/shared-ux/button_toolbar/src/buttons/primary/primary.test.tsx b/packages/shared-ux/button_toolbar/src/buttons/primary/primary.test.tsx index 10cbe7cb4dff00..8478ca1842c415 100644 --- a/packages/shared-ux/button_toolbar/src/buttons/primary/primary.test.tsx +++ b/packages/shared-ux/button_toolbar/src/buttons/primary/primary.test.tsx @@ -14,13 +14,13 @@ import { PrimaryButton } from './primary'; describe('', () => { test('is rendered', () => { const component = mountWithIntl(); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('it can be passed a functional onClick handler', () => { const mockHandler = jest.fn(); const component = mountWithIntl(); - component.simulate('click'); + component.find('button').simulate('click'); expect(mockHandler).toHaveBeenCalled(); }); }); diff --git a/packages/shared-ux/button_toolbar/src/popover/__snapshots__/popover.test.tsx.snap b/packages/shared-ux/button_toolbar/src/popover/__snapshots__/popover.test.tsx.snap index 319ea90381f9ed..dd63af4b39fac7 100644 --- a/packages/shared-ux/button_toolbar/src/popover/__snapshots__/popover.test.tsx.snap +++ b/packages/shared-ux/button_toolbar/src/popover/__snapshots__/popover.test.tsx.snap @@ -9,14 +9,14 @@ exports[` is rendered 1`] = ` class="euiPopover__anchor css-16vtueo-render" > - - - - - - -
- -
- -
- -
- - + Create chart + + + + +
+
+
+
`; diff --git a/packages/shared-ux/button_toolbar/src/toolbar/toolbar.test.tsx b/packages/shared-ux/button_toolbar/src/toolbar/toolbar.test.tsx index 545ed8d4f7b933..729695edab5e87 100644 --- a/packages/shared-ux/button_toolbar/src/toolbar/toolbar.test.tsx +++ b/packages/shared-ux/button_toolbar/src/toolbar/toolbar.test.tsx @@ -18,7 +18,7 @@ describe('', () => { const children = { primaryButton }; const component = mountWithIntl(); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); test('onClick works as expected when the primary button is clicked', () => { diff --git a/packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.component.test.tsx.snap b/packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.component.test.tsx.snap index 17eb4ef8804cda..a74b8433433cbb 100644 --- a/packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.component.test.tsx.snap +++ b/packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.component.test.tsx.snap @@ -11,7 +11,9 @@ exports[`NoDataCardComponent props button 1`] = ` description="Use Elastic Agent for a simple, unified way to collect data from your machines." footer={ Button @@ -40,7 +42,9 @@ exports[`NoDataCardComponent props href 1`] = ` description="Use Elastic Agent for a simple, unified way to collect data from your machines." footer={ Add Elastic Agent @@ -70,7 +74,9 @@ exports[`NoDataCardComponent renders 1`] = ` description="Use Elastic Agent for a simple, unified way to collect data from your machines." footer={ Add Elastic Agent diff --git a/packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.test.tsx.snap b/packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.test.tsx.snap index 949570f3e8b5af..89967755cbb11b 100644 --- a/packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.test.tsx.snap +++ b/packages/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.test.tsx.snap @@ -3,13 +3,13 @@ exports[`NoDataCard props button 1`] = `
- @@ -42,9 +42,9 @@ exports[`NoDataCard props button 1`] = ` Card title - +

@@ -53,17 +53,17 @@ exports[`NoDataCard props button 1`] = `

- +

@@ -284,13 +284,13 @@ exports[`NoDataCard props no access to Fleet 1`] = ` exports[`NoDataCard renders 1`] = `

- @@ -323,9 +323,9 @@ exports[`NoDataCard renders 1`] = ` Card title - +

@@ -334,17 +334,17 @@ exports[`NoDataCard renders 1`] = `

@@ -235,7 +230,7 @@ Array [ class="euiPopover__anchor css-16vtueo-render" >
@@ -580,7 +570,7 @@ Array [ class="euiPopover__anchor css-16vtueo-render" >
"` + `"
100
"` ); }); @@ -146,7 +146,7 @@ describe('Discover grid cell rendering', function () { /> ); expect(component.html()).toMatchInlineSnapshot( - `"
100
"` + `"
100
"` ); findTestSubject(component, 'docTableClosePopover').simulate('click'); expect(closePopoverMockFn).toHaveBeenCalledTimes(1); diff --git a/src/plugins/discover/public/components/discover_tour/discover_tour.test.tsx b/src/plugins/discover/public/components/discover_tour/discover_tour.test.tsx index 7a2e31d5005708..4bdbeaa663818e 100644 --- a/src/plugins/discover/public/components/discover_tour/discover_tour.test.tsx +++ b/src/plugins/discover/public/components/discover_tour/discover_tour.test.tsx @@ -41,7 +41,7 @@ describe('Discover tour', () => { expect(component.find(EuiTourStep)).toHaveLength(0); // one step should become visible after the tour is triggered - component.find(`[data-test-subj="${buttonSubjToTestStart}"]`).at(0).simulate('click'); + component.find(`button[data-test-subj="${buttonSubjToTestStart}"]`).at(0).simulate('click'); expect(component.find(EuiTourStep)).toHaveLength(5); expect( diff --git a/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap b/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap index 39f52a52138d01..cf539f43b39f4a 100644 --- a/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap +++ b/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap @@ -17,7 +17,7 @@ exports[`TableHeader with time column renders correctly 1`] = ` > time - + + + + - - - + + + + diff --git a/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap b/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap index d0bb6ae9e44894..9cd75729a99c85 100644 --- a/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap +++ b/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap @@ -23,7 +23,7 @@ Array [ class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldName eui-textBreakAll" > test.test.test @@ -57,7 +57,7 @@ Array [ class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldName eui-textBreakAll" > test.test.test @@ -91,7 +91,7 @@ Array [ class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldName eui-textBreakAll" > test @@ -125,7 +125,7 @@ Array [ class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldName eui-textBreakAll" > test.test.test diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/tests/saved_object_finder_create_new.test.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/tests/saved_object_finder_create_new.test.tsx index 79e68aabe577ac..563d5c11f5e578 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/tests/saved_object_finder_create_new.test.tsx +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/tests/saved_object_finder_create_new.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { SavedObjectFinderCreateNew } from '../saved_object_finder_create_new'; import { shallow } from 'enzyme'; -import { EuiButton, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui'; +import { EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui'; import { mountWithIntl } from '@kbn/test-jest-helpers'; describe('SavedObjectFinderCreateNew', () => { @@ -66,7 +66,7 @@ describe('SavedObjectFinderCreateNew', () => { const component = mountWithIntl(); let popover = component.find(EuiPopover); expect(popover.prop('isOpen')).toBe(false); - const button = component.find(EuiButton); + const button = component.find('button'); button.simulate('click'); popover = component.find(EuiPopover); expect(popover.prop('isOpen')).toBe(true); diff --git a/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap index caefc62436adac..f1b25d6da11455 100644 --- a/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap +++ b/src/plugins/es_ui_shared/public/components/view_api_request_flyout/__snapshots__/view_api_request_flyout.test.tsx.snap @@ -12,7 +12,7 @@ exports[`ViewApiRequestFlyout is rendered 1`] = ` type="button" />

,
{ } > { } > { } > is rendered 1`] = ` display="block" position="top" > - -
- + + + + + , + , + ], + }, + } + } + isStringTag={true} + serialized={ + Object { + "map": undefined, + "name": "uuw4g3-euiToolTipAnchor-block", + "next": undefined, + "styles": "*[disabled]{pointer-events:none;};label:euiToolTipAnchor;;;display:block;label:block;;;", + "toString": [Function], + } + } + /> + +
+ + +
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap index dabcee37a8959d..b22fa5c264db20 100644 --- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap @@ -142,6 +142,7 @@ exports[`Flyout conflicts should allow conflict resolution 1`] = ` grow={false} > { allowedTypes={allowedTypes} /> ); - wrapper.find('EuiButton').simulate('click'); + wrapper.find('button[data-test-subj="confirmModalConfirmButton"]').simulate('click'); expect(onConfirm).toHaveBeenCalledTimes(1); expect(onCancel).not.toHaveBeenCalled(); @@ -176,7 +176,9 @@ describe('DeleteConfirmModal', () => { /> ); - expect(wrapper.find('EuiButton').getDOMNode()).toBeDisabled(); + expect( + wrapper.find('button[data-test-subj="confirmModalConfirmButton"]').getDOMNode() + ).toBeDisabled(); }); }); diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.test.tsx index 609338f7aed384..5f39e65cd1e736 100644 --- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.test.tsx +++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/export_modal.test.tsx @@ -81,7 +81,7 @@ describe('ExportModal', () => { onIncludeReferenceChange={onIncludeReferenceChange} /> ); - wrapper.find('EuiButton').simulate('click'); + wrapper.find('EuiButton button').simulate('click'); expect(onExport).toHaveBeenCalledTimes(1); expect(onCancel).not.toHaveBeenCalled(); diff --git a/src/plugins/telemetry/public/components/__snapshots__/opt_in_banner.test.tsx.snap b/src/plugins/telemetry/public/components/__snapshots__/opt_in_banner.test.tsx.snap index 95995a95465840..e243b83527eb65 100644 --- a/src/plugins/telemetry/public/components/__snapshots__/opt_in_banner.test.tsx.snap +++ b/src/plugins/telemetry/public/components/__snapshots__/opt_in_banner.test.tsx.snap @@ -29,6 +29,7 @@ exports[`OptInDetailsComponent renders as expected 1`] = ` grow={false} > diff --git a/src/plugins/unified_field_list/public/components/field_visualize_button/field_visualize_button.test.tsx b/src/plugins/unified_field_list/public/components/field_visualize_button/field_visualize_button.test.tsx index 99f0543f536b90..fdd204c86b8983 100644 --- a/src/plugins/unified_field_list/public/components/field_visualize_button/field_visualize_button.test.tsx +++ b/src/plugins/unified_field_list/public/components/field_visualize_button/field_visualize_button.test.tsx @@ -77,7 +77,7 @@ describe('UnifiedFieldList ', () => { }); expect(wrapper!.text()).toBe('Visualize'); - wrapper!.find(EuiButton).simulate('click'); + wrapper!.find('a[data-test-subj="fieldVisualize-extension"]').simulate('click'); expect(mockExecuteAction).toHaveBeenCalledWith({ contextualFields, @@ -119,7 +119,7 @@ describe('UnifiedFieldList ', () => { ); expect(wrapper!.text()).toBe('Visualize'); - wrapper!.find(EuiButton).simulate('click'); + wrapper!.find('a[data-test-subj="fieldVisualize-geo.coordinates"]').simulate('click'); expect(mockExecuteAction).toHaveBeenCalledWith({ contextualFields: [], diff --git a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx index 3b987b8b191755..89132b5943d3ca 100644 --- a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx +++ b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx @@ -171,6 +171,7 @@ export function ChangeDataView({ title={triggerLabel} fullWidth={fullWidth} disabled={isDisabled} + textProps={{ className: 'eui-textTruncate' }} {...rest} > <> diff --git a/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx b/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx index c7db17ea934d5e..84e41d6c6aa4f1 100644 --- a/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx +++ b/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx @@ -126,7 +126,7 @@ describe('Saved query management list component', () => { component.find('[data-test-subj="saved-query-management-apply-changes-button"]').length ).toBeTruthy(); component - .find('[data-test-subj="saved-query-management-apply-changes-button"]') + .find('button[data-test-subj="saved-query-management-apply-changes-button"]') .first() .simulate('click'); expect(onLoadSpy).toBeCalled(); diff --git a/src/plugins/unified_search/public/search_bar/search_bar.test.tsx b/src/plugins/unified_search/public/search_bar/search_bar.test.tsx index 0d17014e5203d6..ea472a865290a8 100644 --- a/src/plugins/unified_search/public/search_bar/search_bar.test.tsx +++ b/src/plugins/unified_search/public/search_bar/search_bar.test.tsx @@ -292,8 +292,10 @@ describe('SearchBar', () => { expect(component.find(EuiSuperUpdateButton).prop('isDisabled')).toBe(true); expect(component.find(FilterItems).prop('readOnly')).toBe(true); - expect(component.find('[data-test-subj="showQueryBarMenu"]').at(0).getDOMNode()).toBeDisabled(); - expect(component.find('[data-test-subj="addFilter"]').at(0).getDOMNode()).toBeDisabled(); + expect( + component.find('button[data-test-subj="showQueryBarMenu"]').at(0).getDOMNode() + ).toBeDisabled(); + expect(component.find('button[data-test-subj="addFilter"]').at(0).getDOMNode()).toBeDisabled(); expect(component.find(DataViewPicker).prop('isDisabled')).toBe(true); diff --git a/src/plugins/vis_types/vega/public/components/vega_vis.styles.tsx b/src/plugins/vis_types/vega/public/components/vega_vis.styles.tsx new file mode 100644 index 00000000000000..aff07e7a08b541 --- /dev/null +++ b/src/plugins/vis_types/vega/public/components/vega_vis.styles.tsx @@ -0,0 +1,31 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { css, Global } from '@emotion/react'; +import { useEuiTheme, UseEuiTheme, euiScrollBarStyles } from '@elastic/eui'; + +import { vegaBaseViewStyles } from '../vega_view/vega_base_view.styles'; +import { vegaVisTooltipStyles } from '../vega_view/vega_tooltip.styles'; + +// Styles for non-React DOM nodes that's easier to set at the Global level +export const GlobalVegaVisStyles = () => { + const euiTheme = useEuiTheme(); + + const baseViewStyles = vegaBaseViewStyles(euiTheme); + const tooltipStyles = vegaVisTooltipStyles(euiTheme); + + return ; +}; + +export const wrapperStyles = (euiTheme: UseEuiTheme) => css` + ${euiScrollBarStyles(euiTheme)} + display: flex; + flex: 1 1 0; + overflow: auto; +`; diff --git a/src/plugins/vis_types/vega/public/components/vega_vis_component.tsx b/src/plugins/vis_types/vega/public/components/vega_vis_component.tsx index 3328b27f3b0f4b..9629839548ad7e 100644 --- a/src/plugins/vis_types/vega/public/components/vega_vis_component.tsx +++ b/src/plugins/vis_types/vega/public/components/vega_vis_component.tsx @@ -7,7 +7,7 @@ */ import React, { useEffect, useRef, useMemo, useCallback } from 'react'; -import { EuiResizeObserver, EuiResizeObserverProps } from '@elastic/eui'; +import { EuiResizeObserver, EuiResizeObserverProps, useEuiTheme } from '@elastic/eui'; import { throttle } from 'lodash'; import type { IInterpreterRenderHandlers, RenderMode } from '@kbn/expressions-plugin/common'; @@ -15,7 +15,7 @@ import { createVegaVisualization } from '../vega_visualization'; import { VegaVisualizationDependencies } from '../plugin'; import { VegaParser } from '../data_model/vega_parser'; -import './vega_vis.scss'; +import { GlobalVegaVisStyles, wrapperStyles } from './vega_vis.styles'; interface VegaVisComponentProps { deps: VegaVisualizationDependencies; @@ -84,13 +84,18 @@ export const VegaVisComponent = ({ [resizeChart] ); + const euiTheme = useEuiTheme(); + return ( - - {(resizeRef) => ( -
-
-
- )} - + <> + + + {(resizeRef) => ( +
+
+
+ )} + + ); }; diff --git a/src/plugins/vis_types/vega/public/vega_view/vega_base_view.styles.ts b/src/plugins/vis_types/vega/public/vega_view/vega_base_view.styles.ts new file mode 100644 index 00000000000000..40f3f82bf24590 --- /dev/null +++ b/src/plugins/vis_types/vega/public/vega_view/vega_base_view.styles.ts @@ -0,0 +1,144 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { + UseEuiTheme, + logicalCSS, + mathWithUnits, + euiScrollBarStyles, + euiFontSize, + euiBackgroundColor, +} from '@elastic/eui'; + +// Note that these are globally-set styles, due to vega_base_view being vanilla JS/non-React +export const vegaBaseViewStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + return css` + .vgaVis { + display: flex; + flex: 1 1 100%; + position: relative; + // flex-direction determined by js + } + + .vgaVis--autoresize { + ${euiScrollBarStyles(euiThemeContext)}; + ${logicalCSS('max-width', '100%')} + ${logicalCSS('max-height', '100%')} + overflow: auto; + } + + .vgaVis__view { + z-index: 0; + flex: 1 1 100%; + + display: block; + + canvas { + display: block; + } + + // BUG #23514: Make sure Vega doesn't display the controls in two places + .vega-bindings { + display: none !important; + } + } + + .vgaVis__controls { + ${euiFontSize(euiThemeContext, 's')} + display: flex; + + &:not(:empty) { + // Adding a little bit of padding helps with the unnecessary scrollbars + ${logicalCSS('padding-vertical', euiTheme.size.s)} + ${logicalCSS('padding-horizontal', 0)} + } + + &.vgaVis__controls--column { + flex-direction: column; + } + + &.vgaVis__controls--row { + flex-direction: row; + + > .vega-bind { + flex-grow: 1; + } + } + + > .vega-bind { + .vega-bind-name { + display: inline-block; + ${logicalCSS( + 'width', + mathWithUnits(euiTheme.size.m, (x) => x * 10 - euiTheme.base) + )} + } + + input[type='range'] { + ${logicalCSS( + 'width', + mathWithUnits(euiTheme.size.m, (x) => x * 10) + )} + display: inline-block; + vertical-align: middle; + } + + label { + margin: 0; + ${logicalCSS('margin-left', euiTheme.size.s)} + } + + select { + ${logicalCSS( + 'max-width', + mathWithUnits(euiTheme.size.base, (x) => x * 10) + )} + } + + .vega-bind-radio label { + ${logicalCSS('margin-vertical', 0)} + ${logicalCSS('margin-right', euiTheme.size.s)} + ${logicalCSS('margin-left', euiTheme.size.xs)} + } + } + } + + // Messages + + .vgaVis__messages { + position: absolute; + ${logicalCSS('top', 0)} + ${logicalCSS('width', '100%')} + margin: auto; + opacity: 0.8; + z-index: 1; + list-style: none; + } + + .vgaVis__message { + margin: ${euiTheme.size.s}; + + .vgaVis__messageCode { + white-space: pre-wrap; + padding: ${euiTheme.size.s}; + } + } + + .vgaVis__message--warn .vgaVis__messageCode { + background-color: ${euiBackgroundColor(euiThemeContext, 'warning')}; + color: ${euiTheme.colors.warningText}; + } + + .vgaVis__message--err .vgaVis__messageCode { + background-color: ${euiBackgroundColor(euiThemeContext, 'danger')}; + color: ${euiTheme.colors.dangerText}; + } + `; +}; diff --git a/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.js b/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.js index 18cae39121fee9..112cf44a23372b 100644 --- a/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.js +++ b/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.js @@ -57,11 +57,7 @@ export class TooltipHandler { const el = document.createElement('div'); el.setAttribute('id', tooltipId); - ['vgaVis__tooltip', 'euiToolTipPopover', 'euiToolTip', `euiToolTip--${this.position}`].forEach( - (className) => { - el.classList.add(className); - } - ); + el.classList.add('vgaVis__tooltip', `vgaVis__tooltip--${this.position}`); if (this.textTruncate) { el.classList.add('vgaVis__tooltip--textTruncate'); diff --git a/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.styles.ts b/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.styles.ts new file mode 100644 index 00000000000000..3940c7e3a22e3a --- /dev/null +++ b/src/plugins/vis_types/vega/public/vega_view/vega_tooltip.styles.ts @@ -0,0 +1,102 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { + UseEuiTheme, + logicalCSS, + logicalTextAlignCSS, + mathWithUnits, + euiTextTruncate, + euiBreakpoint, +} from '@elastic/eui'; +// @ts-expect-error style types not defined +import { euiToolTipStyles } from '@elastic/eui/lib/components/tool_tip/tool_tip.styles'; + +// Style tooltip popup (gets created dynamically at the top level if dashboard has a Vega vis) +// Adapted from https://github.com/vega/vega-tooltip + +export const vegaVisTooltipStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + // Merge EUI tooltip styles into ours + const euiStyles = euiToolTipStyles(euiThemeContext); + + // Note that these are globally-set styles, due to vega_tooltip being vanilla JS/non-React + return css` + .vgaVis__tooltip { + ${euiStyles.euiToolTip} + + ${logicalCSS('max-width', '100%')} + position: fixed; + + h2 { + ${logicalCSS('margin-bottom', euiTheme.size.s)} + } + + &--textTruncate { + td { + ${euiTextTruncate()} + } + } + + td { + ${logicalCSS('padding-vertical', euiTheme.size.xs)} + + &.key { + ${logicalCSS( + 'max-width', + mathWithUnits(euiTheme.size.base, (x) => x * 10) + )} + color: ${euiTheme.colors.mediumShade}; + ${logicalTextAlignCSS('right')} + ${logicalCSS('padding-right', euiTheme.size.xs)} + } + + &.value { + ${logicalCSS( + 'max-width', + mathWithUnits(euiTheme.size.l, (x) => x * 10) + )} + ${logicalTextAlignCSS('left')} + } + } + + ${euiBreakpoint(euiThemeContext, ['xs', 'm'])} { + td { + &.key { + ${logicalCSS( + 'max-width', + mathWithUnits(euiTheme.size.base, (x) => x * 6) + )} + } + + &.value { + ${logicalCSS( + 'max-width', + mathWithUnits(euiTheme.size.base, (x) => x * 10) + )} + } + } + } + } + + // Positions + .vgaVis__tooltip--left { + ${euiStyles.left} + } + .vgaVis__tooltip--right { + ${euiStyles.right} + } + .vgaVis__tooltip--top { + ${euiStyles.top} + } + .vgaVis__tooltip--bottom { + ${euiStyles.bottom} + } + `; +}; diff --git a/src/plugins/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap b/src/plugins/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap index b3c03c71e77d0b..3e9a526aff5b9c 100644 --- a/src/plugins/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap +++ b/src/plugins/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap @@ -2,4 +2,4 @@ exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"
"`; -exports[`VisLegend Component Legend open should match the snapshot 1`] = `"
"`; +exports[`VisLegend Component Legend open should match the snapshot 1`] = `"
"`; diff --git a/test/functional/apps/management/_runtime_fields.ts b/test/functional/apps/management/_runtime_fields.ts index 8ec9fb92c58eae..ee8928562cce83 100644 --- a/test/functional/apps/management/_runtime_fields.ts +++ b/test/functional/apps/management/_runtime_fields.ts @@ -62,7 +62,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.settings.filterField(fieldName); await testSubjects.click('editFieldFormat'); await PageObjects.settings.setFieldType('Long'); - await PageObjects.settings.setFieldScript('emit(6);'); + await PageObjects.settings.setFieldScriptWithoutToggle('emit(6);'); await testSubjects.find('changeWarning'); await PageObjects.settings.clickSaveField(); await PageObjects.settings.confirmSave(); diff --git a/test/functional/page_objects/settings_page.ts b/test/functional/page_objects/settings_page.ts index bfa038e5014eca..d3e84313716e26 100644 --- a/test/functional/page_objects/settings_page.ts +++ b/test/functional/page_objects/settings_page.ts @@ -788,6 +788,7 @@ export class SettingsPageObject extends FtrService { async setFieldType(type: string) { this.log.debug('set type = ' + type); await this.testSubjects.setValue('typeField', type); + await this.browser.pressKeys(this.browser.keys.ENTER); } async setFieldTypeComposite() { @@ -803,6 +804,12 @@ export class SettingsPageObject extends FtrService { await this.monacoEditor.setCodeEditorValue(script); } + async setFieldScriptWithoutToggle(script: string) { + this.log.debug('set script without toggle = ' + script); + await this.monacoEditor.waitCodeEditorReady('valueRow'); + await this.monacoEditor.setCodeEditorValue(script); + } + async setCompositeScript(script: string) { this.log.debug('set composite script = ' + script); await this.monacoEditor.waitCodeEditorReady('scriptFieldRow'); diff --git a/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx index c545f7a0e41287..a76743d6ff4a6d 100644 --- a/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx @@ -27,19 +27,22 @@ export function LicensePrompt({
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot index c2abfb44c096fd..3900363fb2d1b2 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot @@ -28,7 +28,7 @@ exports[`Storyshots renderers/TimeFilter default 1`] = ` >
+

+ Manage workpad assets +

+
+
-

- Manage workpad assets -

-
-
+
- +
- -
- Select or drag and drop images -
+ Select or drag and drop images
+
+
+

+ Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets. +

+
+
+
-

- Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets. -

-
-
-
-
- - - -
+ + +
+
-
-

- Import your assets to get started -

-
+ Import your assets to get started +
+
+
+ +
+
- -
-
-
- 0% space used -
+ 0% space used
- -
+ +
@@ -216,7 +208,8 @@ exports[`Storyshots components/Assets/AssetManager two assets 1`] = ` >
+

+ Manage workpad assets +

+
+
-

- Manage workpad assets -

-
-
+
- +
- -
- Select or drag and drop images -
+ Select or drag and drop images
+
+
+

+ Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets. +

+
+
+
-

- Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets. -

-
-
-
-
+ Asset thumbnail + +
+
+
+

-

+ airplane + +
+ - Asset thumbnail -
-
-
+ + ( + 1 + kb) + + +

+
+
+
-

- - airplane - -
- - - ( - 1 - kb) - - -

+ + +
-
-
- - -
-
- -
- -
- -
-
- -
- -
- -
-
+ +
+
+ - - -
+
+ +
+
+ + +
+
+
-
-
+
+
+
+
+

+ + marker + +
+ - Asset thumbnail - -

-
+ + ( + 1 + kb) + + +

+
+
+
-

- - marker - -
- - - ( - 1 - kb) - - -

+ + +
-
-
- - -
-
- -
- -
- -
-
- -
- -
- -
-
+ +
+
+ - - -
+
+ +
+
+ + +
+
+
+ +
+
- -
-
-
- 0% space used -
+ 0% space used
- -
+ +
diff --git a/x-pack/plugins/canvas/public/components/color_manager/__stories__/__snapshots__/color_manager.stories.storyshot b/x-pack/plugins/canvas/public/components/color_manager/__stories__/__snapshots__/color_manager.stories.storyshot index 6f9f6195f17cbd..7c6e30dd64fb01 100644 --- a/x-pack/plugins/canvas/public/components/color_manager/__stories__/__snapshots__/color_manager.stories.storyshot +++ b/x-pack/plugins/canvas/public/components/color_manager/__stories__/__snapshots__/color_manager.stories.storyshot @@ -391,7 +391,7 @@ exports[`Storyshots components/Color/ColorManager interactive 1`] = ` >
-
-

- Edit custom element -

-
+

+ Edit custom element +

+
+
-
- -
+ Name + +
+
-
- -
-
-
- 40 characters remaining +
+
+ 40 characters remaining +
+
+
-
- -
+ Description + +
+
+