From 73575d47165bf1bcca843343bcc36ef7dfe1f831 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jul 2024 10:50:36 -0700 Subject: [PATCH 1/6] Upgrade EUI to v95.5.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 44e4ca7d5157e..d9a87c2718786 100644 --- a/package.json +++ b/package.json @@ -113,7 +113,7 @@ "@elastic/ecs": "^8.11.1", "@elastic/elasticsearch": "^8.14.0", "@elastic/ems-client": "8.5.3", - "@elastic/eui": "95.4.0", + "@elastic/eui": "95.5.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 b241cc96b8a83..989322e130dcd 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -86,7 +86,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.5.3': ['Elastic License 2.0'], - '@elastic/eui@95.4.0': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@95.5.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 '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause) diff --git a/yarn.lock b/yarn.lock index b045ebd2e3ab0..9cb2ab67898c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1752,10 +1752,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@95.4.0": - version "95.4.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.4.0.tgz#57ac111c2a3e8125db244928a95787bbb2f318c8" - integrity sha512-UXmn+xgJj4pwq6MV7xMjM79GN+taTv7LBfrtRfurGwhkmvXJrOjMXWq+mfR8rU44lOS2R4AwzH5gcCBjAafLsA== +"@elastic/eui@95.5.0": + version "95.5.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.5.0.tgz#a138a17279b06cd076bd400f246ef377afe44453" + integrity sha512-znXhppkr8UNuppxNFu1IGHq3Q8EfMBDtXTYXU/JK5ELgGz0Rd8Syhaw3TJSBoiwufATcmSrFbXCF2grXbY07Kw== dependencies: "@hello-pangea/dnd" "^16.6.0" "@types/lodash" "^4.14.202" From d721daf40d62a4e1b33c3c7a09b7aab7805e4531 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jul 2024 10:57:14 -0700 Subject: [PATCH 2/6] i18n updates --- .../__snapshots__/i18n_service.test.tsx.snap | 6 ++++-- .../src/i18n_eui_mapping.tsx | 17 +++++++++++++---- .../translations/translations/fr-FR.json | 2 -- .../translations/translations/ja-JP.json | 2 -- .../translations/translations/zh-CN.json | 2 -- 5 files changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap index 51caec4b95289..ca90bcbdb67ba 100644 --- a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap +++ b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap @@ -263,7 +263,6 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiProgress.valueText": [Function], "euiQuickSelect.applyButton": "Apply", "euiQuickSelect.fullDescription": [Function], - "euiQuickSelect.legendText": "Quick select a time range", "euiQuickSelect.nextLabel": "Next time window", "euiQuickSelect.previousLabel": "Previous time window", "euiQuickSelect.quickSelectTitle": "Quick select", @@ -275,7 +274,10 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiRecentlyUsed.legend": "Recently used date ranges", "euiRefreshInterval.fullDescriptionOff": [Function], "euiRefreshInterval.fullDescriptionOn": [Function], - "euiRefreshInterval.legend": "Refresh every", + "euiRefreshInterval.toggleAriaLabel": "Toggle refresh", + "euiRefreshInterval.toggleLabel": "Refresh every", + "euiRefreshInterval.unitsAriaLabel": "Refresh interval units", + "euiRefreshInterval.valueAriaLabel": "Refresh interval value", "euiRelativeTab.dateInputError": "Must be a valid range", "euiRelativeTab.fullDescription": [Function], "euiRelativeTab.numberInputError": "Must be >= 0", diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx index df6071e9d14ed..34e6ef5ab0380 100644 --- a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx +++ b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx @@ -1312,9 +1312,6 @@ export const getEuiContextMapping = (): EuiTokensObject => { defaultMessage: 'Currently set to {timeTense} {timeValue} {timeUnit}.', values: { timeTense, timeValue, timeUnit }, }), - 'euiQuickSelect.legendText': i18n.translate('core.euiQuickSelect.legendText', { - defaultMessage: 'Quick select a time range', - }), 'euiQuickSelect.nextLabel': i18n.translate('core.euiQuickSelect.nextLabel', { defaultMessage: 'Next time window', }), @@ -1339,9 +1336,21 @@ export const getEuiContextMapping = (): EuiTokensObject => { 'euiRecentlyUsed.legend': i18n.translate('core.euiRecentlyUsed.legend', { defaultMessage: 'Recently used date ranges', }), - 'euiRefreshInterval.legend': i18n.translate('core.euiRefreshInterval.legend', { + 'euiRefreshInterval.toggleLabel': i18n.translate('core.euiRefreshInterval.toggleLabel', { defaultMessage: 'Refresh every', }), + 'euiRefreshInterval.toggleAriaLabel': i18n.translate( + 'core.euiRefreshInterval.toggleAriaLabel', + { + defaultMessage: 'Toggle refresh', + } + ), + 'euiRefreshInterval.valueAriaLabel': i18n.translate('core.euiRefreshInterval.valueAriaLabel', { + defaultMessage: 'Refresh interval value', + }), + 'euiRefreshInterval.unitsAriaLabel': i18n.translate('core.euiRefreshInterval.unitsAriaLabel', { + defaultMessage: 'Refresh interval units', + }), 'euiRefreshInterval.fullDescriptionOff': ({ optionValue, optionText }: EuiValues) => i18n.translate('core.euiRefreshInterval.fullDescriptionOff', { defaultMessage: 'Refresh is off, interval set to {optionValue} {optionText}.', diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 62ce477ecca04..37f30a3229907 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -834,7 +834,6 @@ "core.euiProgress.valueText": "{value} %", "core.euiQuickSelect.applyButton": "Appliquer", "core.euiQuickSelect.fullDescription": "Actuellement défini sur {timeTense} {timeValue} {timeUnit}.", - "core.euiQuickSelect.legendText": "Sélection rapide d’une plage temporelle", "core.euiQuickSelect.nextLabel": "Fenêtre temporelle suivante", "core.euiQuickSelect.previousLabel": "Fenêtre temporelle précédente", "core.euiQuickSelect.quickSelectTitle": "Sélection rapide", @@ -846,7 +845,6 @@ "core.euiRecentlyUsed.legend": "Plages de dates récemment utilisées", "core.euiRefreshInterval.fullDescriptionOff": "L'actualisation est désactivée, intervalle défini sur {optionValue} {optionText}.", "core.euiRefreshInterval.fullDescriptionOn": "L'actualisation est activée, intervalle défini sur {optionValue} {optionText}.", - "core.euiRefreshInterval.legend": "Actualiser toutes les", "core.euiRelativeTab.dateInputError": "Doit être une plage valide", "core.euiRelativeTab.fullDescription": "L'unité peut être modifiée. Elle est actuellement définie sur {unit}.", "core.euiRelativeTab.numberInputError": "Doit être >= 0.", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index bba91c32ffc4c..37affdc6d9b61 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -835,7 +835,6 @@ "core.euiProgress.valueText": "{value}%", "core.euiQuickSelect.applyButton": "適用", "core.euiQuickSelect.fullDescription": "現在 {timeTense} {timeValue} {timeUnit}に設定されています。", - "core.euiQuickSelect.legendText": "時間範囲をすばやく選択", "core.euiQuickSelect.nextLabel": "次の時間ウィンドウ", "core.euiQuickSelect.previousLabel": "前の時間ウィンドウ", "core.euiQuickSelect.quickSelectTitle": "すばやく選択", @@ -847,7 +846,6 @@ "core.euiRecentlyUsed.legend": "最近使用した日付範囲", "core.euiRefreshInterval.fullDescriptionOff": "更新はオフです。間隔は{optionValue} {optionText}に設定されています。", "core.euiRefreshInterval.fullDescriptionOn": "更新はオンです。間隔は{optionValue} {optionText}に設定されています。", - "core.euiRefreshInterval.legend": "以下の感覚ごとに更新", "core.euiRelativeTab.dateInputError": "有効な範囲でなければなりません", "core.euiRelativeTab.fullDescription": "単位は変更可能です。現在 {unit} に設定されています。", "core.euiRelativeTab.numberInputError": "0以上でなければなりません", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index b2fb6ec9b4f02..8d95d344c80a5 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -836,7 +836,6 @@ "core.euiProgress.valueText": "{value}%", "core.euiQuickSelect.applyButton": "应用", "core.euiQuickSelect.fullDescription": "当前设置为 {timeTense} {timeValue} {timeUnit}。", - "core.euiQuickSelect.legendText": "快选时间范围", "core.euiQuickSelect.nextLabel": "下一时间窗口", "core.euiQuickSelect.previousLabel": "上一时间窗口", "core.euiQuickSelect.quickSelectTitle": "快速选择", @@ -848,7 +847,6 @@ "core.euiRecentlyUsed.legend": "最近使用的日期范围", "core.euiRefreshInterval.fullDescriptionOff": "刷新已关闭，时间间隔设置为 {optionValue} {optionText}。", "core.euiRefreshInterval.fullDescriptionOn": "刷新已打开，时间间隔设置为 {optionValue} {optionText}。", - "core.euiRefreshInterval.legend": "刷新频率", "core.euiRelativeTab.dateInputError": "必须为有效范围", "core.euiRelativeTab.fullDescription": "单位可更改。当前设置为 {unit}。", "core.euiRelativeTab.numberInputError": "必须 >= 0", From 1fdbffb9ea45e77b7c6e9025a49f530711caa4de Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jul 2024 10:51:12 -0700 Subject: [PATCH 3/6] Remove unnecessary EuiQuickSelect custom CSS - default max height is now 144px --- .../unified_search/public/query_string_input/query_bar.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/plugins/unified_search/public/query_string_input/query_bar.scss b/src/plugins/unified_search/public/query_string_input/query_bar.scss index 2ecf27416a907..99e93d876ee50 100644 --- a/src/plugins/unified_search/public/query_string_input/query_bar.scss +++ b/src/plugins/unified_search/public/query_string_input/query_bar.scss @@ -3,7 +3,3 @@ background-image: euiFormControlGradient($euiColorDanger); } } -// increase the section height to avoid vertical scrolling -.euiQuickSelectPopover__section { - max-height: 142px; -} From acdb33b9fedf888a6e8469a3c79136d47152985c Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jul 2024 10:51:26 -0700 Subject: [PATCH 4/6] [EuiSuperDatePicker] Update test selectors - a lot of Enzyme tweaks to account for new Emotion wrapper - a className*= change for a removed className, + test assertion updates --- .../components/time_controls.test.tsx | 7 ++- .../super_date_picker/index.test.tsx | 54 ++++++++++--------- 2 files changed, 34 insertions(+), 27 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/time_controls.test.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/time_controls.test.tsx index 959ded8e0cdbf..70dc780efe590 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/time_controls.test.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/time_controls.test.tsx @@ -44,10 +44,13 @@ describe('MetricsTimeControls', () => { /> ); component - .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]') + .find('button[data-test-subj="superDatePickerToggleQuickMenuButton"]') .first() .simulate('click'); - component.find('[data-test-subj="superDatePickerCommonlyUsed_Today"]').last().simulate('click'); + component + .find('button[data-test-subj="superDatePickerCommonlyUsed_Today"]') + .last() + .simulate('click'); expect(handleTimeChange.mock.calls.length).toBe(1); const timeRangeInput = handleTimeChange.mock.calls[0][0]; expect(timeRangeInput.from).toBe('now/d'); diff --git a/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx index a2cbc508da56e..19e783064b763 100644 --- a/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx @@ -103,12 +103,15 @@ describe('SIEM Super Date Picker', () => { ); wrapper - .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]') + .find('button[data-test-subj="superDatePickerToggleQuickMenuButton"]') .first() .simulate('click'); wrapper.update(); - wrapper.find('button.euiQuickSelect__applyButton').first().simulate('click'); + wrapper + .find('button[data-test-subj="superDatePickerQuickSelectApplyButton"]') + .first() + .simulate('click'); wrapper.update(); }); @@ -123,15 +126,14 @@ describe('SIEM Super Date Picker', () => { test('Make Sure it is Today date is an absolute date', () => { wrapper - .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]') + .find('button[data-test-subj="superDatePickerToggleQuickMenuButton"]') .first() .simulate('click'); wrapper.update(); wrapper - .find('[data-test-subj="superDatePickerCommonlyUsed_Today"]') + .find('button[data-test-subj="superDatePickerCommonlyUsed_Today"]') .first() - .find('button') .simulate('click'); wrapper.update(); expect(store.getState().inputs.global.timerange.kind).toBe('absolute'); @@ -139,7 +141,7 @@ describe('SIEM Super Date Picker', () => { test('Make Sure it is This Week date is an absolute date', () => { wrapper - .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]') + .find('button[data-test-subj="superDatePickerToggleQuickMenuButton"]') .first() .simulate('click'); wrapper.update(); @@ -173,53 +175,57 @@ describe('SIEM Super Date Picker', () => { ); wrapper - .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]') + .find('button[data-test-subj="superDatePickerToggleQuickMenuButton"]') .first() .simulate('click'); wrapper.update(); wrapper - .find('[data-test-subj="superDatePickerCommonlyUsed_Today"]') + .find('button[data-test-subj="superDatePickerCommonlyUsed_Today"]') .first() - .find('button') .simulate('click'); wrapper.update(); }); test('Today is in Recently used date ranges', () => { - expect(wrapper.find('div.euiQuickSelectPopover__section').at(1).text()).toBe('Today'); + expect( + wrapper.find('div[className*="euiQuickSelectPanel__section"]').at(1).text() + ).toContain('Today'); }); test('Today and "Last ${x} hours" where ${x} is in hours are in Recently used date ranges', () => { wrapper - .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]') + .find('button[data-test-subj="superDatePickerToggleQuickMenuButton"]') .first() .simulate('click'); wrapper.update(); - wrapper.find('button.euiQuickSelect__applyButton').first().simulate('click'); + wrapper + .find('button[data-test-subj="superDatePickerQuickSelectApplyButton"]') + .first() + .simulate('click'); wrapper.update(); - expect(wrapper.find('div.euiQuickSelectPopover__section').at(1).text()).toMatch( - /^Last\s[0-9]+\s(.)+Today/ - ); + const ranges = wrapper.find('div[className*="euiQuickSelectPanel__section"]').at(1).text(); + expect(ranges).toContain('Today'); + expect(ranges).toContain('Last 24 hours'); }); test('Make sure that it does not add any duplicate if you click again on today', () => { wrapper - .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]') + .find('button[data-test-subj="superDatePickerToggleQuickMenuButton"]') .first() .simulate('click'); wrapper.update(); wrapper - .find('[data-test-subj="superDatePickerCommonlyUsed_Today"]') + .find('button[data-test-subj="superDatePickerCommonlyUsed_Today"]') .first() - .find('button') .simulate('click'); wrapper.update(); - expect(wrapper.find('div.euiQuickSelectPopover__section').at(1).text()).toBe('Today'); + const text = wrapper.find('div[className*="euiQuickSelectPanel__section"]').at(1).text(); + expect(text.match(/Today/g)).toHaveLength(1); }); }); @@ -236,15 +242,14 @@ describe('SIEM Super Date Picker', () => { ); wrapper - .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]') + .find('button[data-test-subj="superDatePickerToggleQuickMenuButton"]') .first() .simulate('click'); wrapper.update(); wrapper - .find('[data-test-subj="superDatePickerToggleRefreshButton"]') + .find('button[data-test-subj="superDatePickerToggleRefreshButton"]') .first() - .find('button') .simulate('click'); wrapper.update(); @@ -266,15 +271,14 @@ describe('SIEM Super Date Picker', () => { test('Make sure we can stop the stream live', () => { wrapper - .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]') + .find('button[data-test-subj="superDatePickerToggleQuickMenuButton"]') .first() .simulate('click'); wrapper.update(); wrapper - .find('[data-test-subj="superDatePickerToggleRefreshButton"]') + .find('button[data-test-subj="superDatePickerToggleRefreshButton"]') .first() - .find('button') .simulate('click'); wrapper.update(); From c50ec62e58a2d7d132d42a526ca8b714d4541c91 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jul 2024 13:58:23 -0700 Subject: [PATCH 5/6] [EuiSuperDatePicker] Update FTR className reference to data-test-subj --- x-pack/test/functional/page_objects/dataset_quality.ts | 2 +- x-pack/test/functional/services/transform/date_picker.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/x-pack/test/functional/page_objects/dataset_quality.ts b/x-pack/test/functional/page_objects/dataset_quality.ts index 7f918ce3ba76f..b2d07161ddbaa 100644 --- a/x-pack/test/functional/page_objects/dataset_quality.ts +++ b/x-pack/test/functional/page_objects/dataset_quality.ts @@ -79,7 +79,7 @@ export function DatasetQualityPageObject({ getPageObjects, getService }: FtrProv datasetSearchInput: '[placeholder="Filter data sets"]', showFullDatasetNamesSwitch: 'button[aria-label="Show full data set names"]', showInactiveDatasetsNamesSwitch: 'button[aria-label="Show inactive data sets"]', - superDatePickerApplyButton: '.euiQuickSelect__applyButton', + superDatePickerApplyButton: '[data-test-subj="superDatePickerQuickSelectApplyButton"]', }; const testSubjectSelectors = { diff --git a/x-pack/test/functional/services/transform/date_picker.ts b/x-pack/test/functional/services/transform/date_picker.ts index 8752a398c2276..3da0c88fce6b7 100644 --- a/x-pack/test/functional/services/transform/date_picker.ts +++ b/x-pack/test/functional/services/transform/date_picker.ts @@ -37,7 +37,9 @@ export function TransformDatePickerProvider({ getService, getPageObjects }: FtrP await find.selectValue(`[aria-label*="Time unit"]`, timeUnit); // Apply - const applyButton = await quickMenuElement.findByClassName('euiQuickSelect__applyButton'); + const applyButton = await quickMenuElement.findByTestSubject( + 'superDatePickerQuickSelectApplyButton' + ); const actualApplyButtonText = await applyButton.getVisibleText(); expect(actualApplyButtonText).to.be('Apply'); From ce200f68e17fe511822679fc498797731fc3d682 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jul 2024 13:59:17 -0700 Subject: [PATCH 6/6] [FTR] Tweak visual snapshot diff ratio --- test/functional/apps/dashboard/group5/embed_mode.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/functional/apps/dashboard/group5/embed_mode.ts b/test/functional/apps/dashboard/group5/embed_mode.ts index 3c2cfbae77a9f..c819a05c8ceb2 100644 --- a/test/functional/apps/dashboard/group5/embed_mode.ts +++ b/test/functional/apps/dashboard/group5/embed_mode.ts @@ -126,7 +126,7 @@ export default function ({ 'dashboard_embed_mode_scrolling', updateBaselines ); - expect(percentDifference).to.be.lessThan(0.02); + expect(percentDifference).to.be.lessThan(0.021); }); });