From 491dc61ae38e08135453baf238ad18f13605091f Mon Sep 17 00:00:00 2001 From: Tomasz Kajtoch Date: Wed, 19 Jul 2023 09:55:08 +0200 Subject: [PATCH 1/7] Upgrade @elastic/eui to 85.0.0 --- package.json | 2 +- src/dev/license_checker/config.ts | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index e5295bc888c3b..9e6ae246ec8a5 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2", "@elastic/ems-client": "8.4.0", - "@elastic/eui": "84.0.0", + "@elastic/eui": "85.0.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index c12e6f91b821f..6672e7e4fb560 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.4.0': ['Elastic License 2.0'], - '@elastic/eui@84.0.0': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@85.0.0': ['SSPL-1.0 OR Elastic License 2.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry 'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary }; diff --git a/yarn.lock b/yarn.lock index 37f05126527f4..3b122472f9e30 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1552,10 +1552,10 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@84.0.0": - version "84.0.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-84.0.0.tgz#0d37da1fe3f2f9af54b62e127c9682d381111ba6" - integrity sha512-hgDWyXwlhpbNzQgIvGLppqSRMEVt2zMlXIxMzvlV6PYPJUh1K9f5pOyXtNyouFgYZG2bkltvG3cUrMLeBbgUkg== +"@elastic/eui@85.0.0": + version "85.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-85.0.0.tgz#792d4dd9fe4fb17c824688f1f629c3d2a58d5556" + integrity sha512-gIbn0YeO/yi3Z+5T/+Fbm0kVQXKcrSmHgHSFc1AddQozQkTyCkowzrUxE8lKTOQk95dTlx+C9r3vESNAMsweWQ== dependencies: "@types/chroma-js" "^2.0.0" "@types/lodash" "^4.14.194" From 107b349b85143b6c6a9d04cfa4bc3e6d1da69e51 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 19 Jul 2023 08:38:41 -0700 Subject: [PATCH 2/7] [Presentation] Remove `.euiFilterGroup__popoverPanel` usage - `.presFilterByType__panel` already has its own width Sass, so move the width CSS there instead --- .../public/components/field_picker/field_type_filter.scss | 1 + .../public/components/field_picker/field_type_filter.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss index bc4ea714a4113..f993a2a0a065c 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss +++ b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss @@ -1,4 +1,5 @@ .presFilterByType__panel { + width: $euiSize * 18; min-width: $euiSizeXXL * 8; @include euiBreakpoint('l', 'xl') { width: $euiFormMaxWidth; diff --git a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx index a17739cf8ccbd..d6fa9827f0af1 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx @@ -66,7 +66,7 @@ export function FieldTypeFilter({ {}} isDisabled={!isPopoverOpen}> Date: Wed, 19 Jul 2023 08:45:16 -0700 Subject: [PATCH 3/7] [EuiFilterGroup] Remove all other references to `.euiFilterGroup__popoverPanel` - After Emotion conversion, no longer has any styles attached to it - use Emotion CSS instead --- .../table_list_view_table/src/components/table_sort_select.tsx | 2 +- .../table_list_view_table/src/components/tag_filter_panel.tsx | 2 +- .../src/components/field_list_filters/field_type_filter.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/content-management/table_list_view_table/src/components/table_sort_select.tsx b/packages/content-management/table_list_view_table/src/components/table_sort_select.tsx index 37cc6fc9eea80..9140c8ac3bc32 100644 --- a/packages/content-management/table_list_view_table/src/components/table_sort_select.tsx +++ b/packages/content-management/table_list_view_table/src/components/table_sort_select.tsx @@ -160,7 +160,7 @@ export function TableSortSelect({ tableSort, hasUpdatedAtMetadata, onChange }: P closePopover={closePopover} panelPaddingSize="none" anchorPosition="downCenter" - panelClassName="euiFilterGroup__popoverPanel" + panelProps={{ css: { width: euiTheme.base * 18 } }} > <> {i18nText.headerSort} diff --git a/packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx b/packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx index 03439f9dec161..c9871eb509d7e 100644 --- a/packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx +++ b/packages/content-management/table_list_view_table/src/components/tag_filter_panel.tsx @@ -116,7 +116,7 @@ export const TagFilterPanel: FC = ({ closePopover={closePopover} panelPaddingSize="none" anchorPosition="downCenter" - panelClassName="euiFilterGroup__popoverPanel" + panelProps={{ css: { width: euiTheme.base * 18 } }} panelStyle={isInUse ? { transition: 'none' } : undefined} > diff --git a/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx b/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx index db98acad65013..e8667d5c0c98a 100644 --- a/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx +++ b/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx @@ -149,7 +149,7 @@ export function FieldTypeFilter({ return ( Date: Mon, 24 Jul 2023 01:27:12 +0200 Subject: [PATCH 4/7] increase EuiFilterButton selector specificity in failing unit tests due to emotion conversion --- .../finder/saved_object_finder.test.tsx | 4 +-- .../filters/groups_filter_popover.test.tsx | 2 +- .../filters/jobs_table_filters.test.tsx | 30 +++++++++++++++---- .../flow_direction_select.test.tsx | 2 +- .../components/open_timeline/index.test.tsx | 2 +- .../open_timeline/search_row/index.test.tsx | 2 +- .../event_log_list_status_filter.test.tsx | 2 +- .../components/rule_status_filter.test.tsx | 4 +-- .../es_deprecations.helpers.ts | 4 +-- .../kibana_deprecations.helpers.ts | 4 +-- .../filter_status_button.test.tsx.snap | 8 ++--- .../__snapshots__/status_filter.test.tsx.snap | 26 ++++++++-------- 12 files changed, 54 insertions(+), 36 deletions(-) diff --git a/src/plugins/saved_objects_finder/public/finder/saved_object_finder.test.tsx b/src/plugins/saved_objects_finder/public/finder/saved_object_finder.test.tsx index 1c8ed33853c87..674e49a77c360 100644 --- a/src/plugins/saved_objects_finder/public/finder/saved_object_finder.test.tsx +++ b/src/plugins/saved_objects_finder/public/finder/saved_object_finder.test.tsx @@ -679,8 +679,8 @@ describe('SavedObjectsFinder', () => { wrapper.instance().componentDidMount!(); await nextTick(); expect(wrapper.find('button.euiFilterButton')).toHaveLength(2); - expect(wrapper.find('button.euiFilterButton [data-text="Types"]')).toHaveLength(1); - expect(wrapper.find('button.euiFilterButton [data-text="Tags"]')).toHaveLength(1); + expect(wrapper.find('button.euiFilterButton span[data-text="Types"]')).toHaveLength(1); + expect(wrapper.find('button.euiFilterButton span[data-text="Tags"]')).toHaveLength(1); }); it('should not render filter buttons if disabled', async () => { diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx index 403d48c38850e..1e10ab18b5783 100644 --- a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx @@ -38,7 +38,7 @@ describe('GroupsFilterPopover', () => { /> ); - wrapper.find('[data-test-subj="groups-filter-popover-button"]').first().simulate('click'); + wrapper.find('button[data-test-subj="groups-filter-popover-button"]').first().simulate('click'); wrapper.update(); wrapper.find('EuiFilterSelectItem').first().simulate('click'); diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx index 6156a01c70485..bf367a8c57e41 100644 --- a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx @@ -25,7 +25,10 @@ describe('JobsTableFilters', () => { ); - wrapper.find('[data-test-subj="show-elastic-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-elastic-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); expect( @@ -42,7 +45,10 @@ describe('JobsTableFilters', () => { ); - wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-custom-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); expect( @@ -59,10 +65,16 @@ describe('JobsTableFilters', () => { ); - wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-custom-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); - wrapper.find('[data-test-subj="show-elastic-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-elastic-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); expect( @@ -85,10 +97,16 @@ describe('JobsTableFilters', () => { ); - wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-custom-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); - wrapper.find('[data-test-subj="show-custom-jobs-filter-button"]').first().simulate('click'); + wrapper + .find('button[data-test-subj="show-custom-jobs-filter-button"]') + .first() + .simulate('click'); wrapper.update(); expect( diff --git a/x-pack/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx b/x-pack/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx index 57d31bd2a03e5..1899c3ae33cc3 100644 --- a/x-pack/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx +++ b/x-pack/plugins/security_solution/public/explore/network/components/flow_controls/flow_direction_select.test.tsx @@ -44,7 +44,7 @@ describe('Select Flow Direction', () => { ); wrapper - .find(`[data-test-subj="${FlowDirection.biDirectional}"]`) + .find(`button[data-test-subj="${FlowDirection.biDirectional}"]`) .first() .simulate('click', event); wrapper.update(); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx index 62f1445529066..471561d6eeb0e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx @@ -472,7 +472,7 @@ describe('StatefulOpenTimeline', () => { false ); - wrapper.find('[data-test-subj="only-favorites-toggle"]').first().simulate('click'); + wrapper.find('button[data-test-subj="only-favorites-toggle"]').first().simulate('click'); expect(wrapper.find('[data-test-subj="open-timeline"]').last().prop('onlyFavorites')).toEqual( true diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx index 3b0f2cc4ad7c0..e7bda4a5b79b9 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx @@ -77,7 +77,7 @@ describe('SearchRow', () => { ); - wrapper.find('[data-test-subj="only-favorites-toggle"]').first().simulate('click'); + wrapper.find('button[data-test-subj="only-favorites-toggle"]').first().simulate('click'); expect(onToggleOnlyFavorites).toHaveBeenCalled(); }); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx index d3e8b38a8a557..df1cb6b7a1e2c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status_filter.test.tsx @@ -42,7 +42,7 @@ describe('event_log_list_status_filter', () => { ); - wrapper.find(EuiFilterButton).simulate('click'); + wrapper.find(EuiFilterButton).find('button').simulate('click'); const statusItems = wrapper.find(EuiFilterSelectItem); expect(statusItems.length).toEqual(4); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx index 27eddb21177cd..7221736830917 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.test.tsx @@ -35,7 +35,7 @@ describe('RuleStatusFilter', () => { expect(wrapper.find('[data-test-subj="ruleStateFilterSelect"]').exists()).toBeFalsy(); - wrapper.find(EuiFilterButton).simulate('click'); + wrapper.find(EuiFilterButton).find('button').simulate('click'); const statusItems = wrapper.find(EuiSelectableListItem); expect(statusItems.length).toEqual(3); @@ -46,7 +46,7 @@ describe('RuleStatusFilter', () => { ); - wrapper.find(EuiFilterButton).simulate('click'); + wrapper.find(EuiFilterButton).find('button').simulate('click'); wrapper.find(EuiSelectableListItem).at(0).simulate('click'); expect(onChangeMock).toHaveBeenCalledWith(['enabled']); diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts index e6e87087ed55d..87f022fc4f47b 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/es_deprecations.helpers.ts @@ -56,7 +56,7 @@ const createActions = (testBed: TestBed) => { // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector find('searchBarContainer') .find('.euiPopover') - .find('.euiFilterButton') + .find('button.euiFilterButton') .at(index) .simulate('click'); }); @@ -75,7 +75,7 @@ const createActions = (testBed: TestBed) => { clickCriticalFilterButton: async () => { await act(async () => { // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector - find('searchBarContainer').find('.euiFilterButton').at(0).simulate('click'); + find('searchBarContainer').find('button.euiFilterButton').at(0).simulate('click'); }); component.update(); diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts index 8899212ca341c..adf24716ca932 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts @@ -64,7 +64,7 @@ const createActions = (testBed: TestBed) => { find('kibanaDeprecations') .find('.euiSearchBar__filtersHolder') .find('.euiPopover') - .find('.euiFilterButton') + .find('button.euiFilterButton') .at(0) .simulate('click'); }); @@ -77,7 +77,7 @@ const createActions = (testBed: TestBed) => { // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector find('kibanaDeprecations') .find('.euiSearchBar__filtersHolder') - .find('.euiFilterButton') + .find('button.euiFilterButton') .at(0) .simulate('click'); }); diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap index f71c1d6885b99..e0aaefdf9d549 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/overview/monitor_list/__snapshots__/filter_status_button.test.tsx.snap @@ -2,18 +2,18 @@ exports[`FilterStatusButton renders without errors for valid props 1`] = `