Upgrade EUI to v95.5.0

package.json

@@ -114,7 +114,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",

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}.',

src/dev/license_checker/config.ts

@@ -86,7 +86,7 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['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'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

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;
-}

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);
       });
     });
 

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');

x-pack/plugins/security_solution/public/common/components/super_date_picker/index.test.tsx

@@ -103,12 +103,15 @@ describe('SIEM Super Date Picker', () => {
           </ReduxStoreProvider>
         );
         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,23 +126,22 @@ 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');
       });
 
       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', () => {
           </ReduxStoreProvider>
         );
         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', () => {
           </ReduxStoreProvider>
         );
         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();
 

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.",

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以上でなければなりません",

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",

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 = {

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');
 

yarn.lock

@@ -1767,10 +1767,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"