[7.x] Upgrade EUI to v37.3.0 (#109157) (#109691)

* Upgrade EUI to v37.3.0 (#109157)

* eui to 37.3.0

* i18n tokens

* reinstate discover_grid_flyout test

* more i18n tokens

* snapshot updates

* fix jest failures

* update cell position pattern

* clean up pattern

* buttongroup click -> change

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* fix bad merge

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -96,7 +96,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^7.16.0-canary.1",
     "@elastic/ems-client": "7.15.0",
-    "@elastic/eui": "37.1.1",
+    "@elastic/eui": "37.3.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/maki": "6.3.0",

src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap

@@ -62,11 +62,11 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiColumnSorting.emptySorting": "Currently no fields are sorted",
           "euiColumnSorting.pickFields": "Pick fields to sort by",
           "euiColumnSorting.sortFieldAriaLabel": "Sort by:",
-          "euiColumnSortingDraggable.activeSortLabel": "is sorting this data grid",
+          "euiColumnSortingDraggable.activeSortLabel": [Function],
           "euiColumnSortingDraggable.defaultSortAsc": "A-Z",
           "euiColumnSortingDraggable.defaultSortDesc": "Z-A",
-          "euiColumnSortingDraggable.removeSortLabel": "Remove from data grid sort:",
-          "euiColumnSortingDraggable.toggleLegend": "Select sorting method for field:",
+          "euiColumnSortingDraggable.removeSortLabel": [Function],
+          "euiColumnSortingDraggable.toggleLegend": [Function],
           "euiComboBoxOptionsList.allOptionsSelected": "You've selected all available options",
           "euiComboBoxOptionsList.alreadyAdded": [Function],
           "euiComboBoxOptionsList.createCustomOption": [Function],
@@ -80,16 +80,13 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiControlBar.screenReaderAnnouncement": "There is a new region landmark with page level controls at the end of the document.",
           "euiControlBar.screenReaderHeading": "Page level controls",
           "euiDataGrid.ariaLabel": [Function],
-          "euiDataGrid.ariaLabelGridPagination": [Function],
           "euiDataGrid.ariaLabelledBy": [Function],
-          "euiDataGrid.ariaLabelledByGridPagination": "Pagination for preceding grid",
-          "euiDataGrid.fullScreenButton": "Full screen",
-          "euiDataGrid.fullScreenButtonActive": "Exit full screen",
           "euiDataGrid.screenReaderNotice": "Cell contains interactive content.",
-          "euiDataGridCell.column": "Column",
-          "euiDataGridCell.row": "Row",
+          "euiDataGridCell.position": [Function],
           "euiDataGridCellButtons.expandButtonTitle": "Click or hit enter to interact with cell content",
           "euiDataGridHeaderCell.headerActions": "Header actions",
+          "euiDataGridPagination.detailedPaginationLabel": [Function],
+          "euiDataGridPagination.paginationLabel": "Pagination for preceding grid",
           "euiDataGridSchema.booleanSortTextAsc": "False-True",
           "euiDataGridSchema.booleanSortTextDesc": "True-False",
           "euiDataGridSchema.currencySortTextAsc": "Low-High",
@@ -100,6 +97,8 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiDataGridSchema.jsonSortTextDesc": "Large-Small",
           "euiDataGridSchema.numberSortTextAsc": "Low-High",
           "euiDataGridSchema.numberSortTextDesc": "High-Low",
+          "euiDataGridToolbar.fullScreenButton": "Full screen",
+          "euiDataGridToolbar.fullScreenButtonActive": "Exit full screen",
           "euiDatePopoverButton.invalidTitle": [Function],
           "euiDatePopoverButton.outdatedTitle": [Function],
           "euiFieldPassword.maskPassword": "Mask password",

src/core/public/i18n/i18n_eui_mapping.tsx

@@ -275,12 +275,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiColumnSorting.buttonActive': i18n.translate('core.euiColumnSorting.buttonActive', {
       defaultMessage: 'fields sorted',
     }),
-    'euiColumnSortingDraggable.activeSortLabel': i18n.translate(
-      'core.euiColumnSortingDraggable.activeSortLabel',
-      {
-        defaultMessage: 'is sorting this data grid',
-      }
-    ),
+    'euiColumnSortingDraggable.activeSortLabel': ({ display }: EuiValues) =>
+      i18n.translate('core.euiColumnSortingDraggable.activeSortLabel', {
+        defaultMessage: '{display} is sorting this data grid',
+        values: { display },
+      }),
     'euiColumnSortingDraggable.defaultSortAsc': i18n.translate(
       'core.euiColumnSortingDraggable.defaultSortAsc',
       {
@@ -295,18 +294,16 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         description: 'Descending sort label',
       }
     ),
-    'euiColumnSortingDraggable.removeSortLabel': i18n.translate(
-      'core.euiColumnSortingDraggable.removeSortLabel',
-      {
-        defaultMessage: 'Remove from data grid sort:',
-      }
-    ),
-    'euiColumnSortingDraggable.toggleLegend': i18n.translate(
-      'core.euiColumnSortingDraggable.toggleLegend',
-      {
-        defaultMessage: 'Select sorting method for field:',
-      }
-    ),
+    'euiColumnSortingDraggable.removeSortLabel': ({ display }: EuiValues) =>
+      i18n.translate('core.euiColumnSortingDraggable.removeSortLabel', {
+        defaultMessage: 'Remove {display} from data grid sort',
+        values: { display },
+      }),
+    'euiColumnSortingDraggable.toggleLegend': ({ display }: EuiValues) =>
+      i18n.translate('core.euiColumnSortingDraggable.toggleLegend', {
+        defaultMessage: 'Select sorting method for {display}',
+        values: { display },
+      }),
     'euiComboBoxOptionsList.allOptionsSelected': i18n.translate(
       'core.euiComboBoxOptionsList.allOptionsSelected',
       {
@@ -381,19 +378,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiDataGrid.screenReaderNotice': i18n.translate('core.euiDataGrid.screenReaderNotice', {
       defaultMessage: 'Cell contains interactive content.',
     }),
-    'euiDataGrid.ariaLabelGridPagination': ({ label }: EuiValues) =>
-      i18n.translate('core.euiDataGrid.ariaLabelGridPagination', {
-        defaultMessage: 'Pagination for preceding grid: {label}',
-        values: { label },
-        description: 'Screen reader text to describe the pagination controls',
-      }),
-    'euiDataGrid.ariaLabelledByGridPagination': i18n.translate(
-      'core.euiDataGrid.ariaLabelledByGridPagination',
-      {
-        defaultMessage: 'Pagination for preceding grid',
-        description: 'Screen reader text to describe the pagination controls',
-      }
-    ),
     'euiDataGrid.ariaLabel': ({ label, page, pageCount }: EuiValues) =>
       i18n.translate('core.euiDataGrid.ariaLabel', {
         defaultMessage: '{label}; Page {page} of {pageCount}.',
@@ -406,21 +390,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         values: { page, pageCount },
         description: 'Screen reader text to describe the size of the data grid',
       }),
-    'euiDataGrid.fullScreenButton': i18n.translate('core.euiDataGrid.fullScreenButton', {
-      defaultMessage: 'Full screen',
-    }),
-    'euiDataGrid.fullScreenButtonActive': i18n.translate(
-      'core.euiDataGrid.fullScreenButtonActive',
-      {
-        defaultMessage: 'Exit full screen',
-      }
-    ),
-    'euiDataGridCell.row': i18n.translate('core.euiDataGridCell.row', {
-      defaultMessage: 'Row',
-    }),
-    'euiDataGridCell.column': i18n.translate('core.euiDataGridCell.column', {
-      defaultMessage: 'Column',
-    }),
+    'euiDataGridCell.position': ({ row, col }: EuiValues) =>
+      i18n.translate('core.euiDataGridCell.position', {
+        defaultMessage: 'Row: {row}; Column: {col}',
+        values: { row, col },
+      }),
     'euiDataGridCellButtons.expandButtonTitle': i18n.translate(
       'core.euiDataGridCellButtons.expandButtonTitle',
       {
@@ -433,6 +407,17 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Header actions',
       }
     ),
+    'euiDataGridPagination.detailedPaginationLabel': ({ label }: EuiValues) =>
+      i18n.translate('core.euiDataGridPagination.detailedPaginationLabel', {
+        defaultMessage: 'Pagination for preceding grid: {label}',
+        values: { label },
+      }),
+    'euiDataGridPagination.paginationLabel': i18n.translate(
+      'core.euiDataGridPagination.paginationLabel',
+      {
+        defaultMessage: 'Pagination for preceding grid',
+      }
+    ),
     'euiDataGridSchema.booleanSortTextAsc': i18n.translate(
       'core.euiDataGridSchema.booleanSortTextAsc',
       {
@@ -497,6 +482,18 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         description: 'Descending size label',
       }
     ),
+    'euiDataGridToolbar.fullScreenButton': i18n.translate(
+      'core.euiDataGridToolbar.fullScreenButton',
+      {
+        defaultMessage: 'Full screen',
+      }
+    ),
+    'euiDataGridToolbar.fullScreenButtonActive': i18n.translate(
+      'core.euiDataGridToolbar.fullScreenButtonActive',
+      {
+        defaultMessage: 'Exit full screen',
+      }
+    ),
     'euiDatePopoverButton.invalidTitle': ({ title }: EuiValues) =>
       i18n.translate('core.euiDatePopoverButton.invalidTitle', {
         defaultMessage: 'Invalid date: {title}',

src/dev/license_checker/config.ts

@@ -75,7 +75,7 @@ export const LICENSE_OVERRIDES = {
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   'node-sql-parser@3.6.1': ['(GPL-2.0 OR MIT)'], // GPL-2.0* https://github.com/taozhi8833998/node-sql-parser
   '@elastic/ems-client@7.15.0': ['Elastic License 2.0'],
-  '@elastic/eui@37.1.1': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@37.3.0': ['SSPL-1.0 OR Elastic License 2.0'],
 
   // TODO can be removed if the https://github.com/jindw/xmldom/issues/239 is released
   'xmldom@0.1.27': ['MIT'],

src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx

@@ -144,9 +144,7 @@ describe('Discover flyout', function () {
     expect(props.setExpandedDoc.mock.calls[0][0]._id).toBe('4');
   });
 
-  // EuiFlyout is mocked in Jest environments.
-  // EUI team to reinstate `onKeyDown`: https://github.com/elastic/eui/issues/4883
-  it.skip('allows navigating with arrow keys through documents', () => {
+  it('allows navigating with arrow keys through documents', () => {
     const props = getProps();
     const component = mountWithIntl(<DiscoverGridFlyout {...props} />);
     findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowRight' });

src/plugins/home/public/application/components/tutorial/tutorial.test.js

@@ -134,7 +134,7 @@ describe('isCloudEnabled is false', () => {
     );
     await loadTutorialPromise;
     component.update();
-    component.find('#onPremElasticCloud').first().simulate('click');
+    component.find('#onPremElasticCloud').first().find('input').simulate('change');
     component.update();
     expect(component.state('visibleInstructions')).toBe('onPremElasticCloud');
   });

x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot

@@ -334,7 +334,6 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected euiButtonGroupButton-isIconOnly"
               disabled={false}
               htmlFor="generated-id"
-              onClick={[Function]}
               style={
                 Object {
                   "minWidth": undefined,
@@ -371,7 +370,6 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
               disabled={false}
               htmlFor="generated-id"
-              onClick={[Function]}
               style={
                 Object {
                   "minWidth": undefined,
@@ -408,7 +406,6 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
               disabled={false}
               htmlFor="generated-id"
-              onClick={[Function]}
               style={
                 Object {
                   "minWidth": undefined,
@@ -783,7 +780,6 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected euiButtonGroupButton-isIconOnly"
               disabled={false}
               htmlFor="generated-id"
-              onClick={[Function]}
               style={
                 Object {
                   "minWidth": undefined,
@@ -820,7 +816,6 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
               disabled={false}
               htmlFor="generated-id"
-              onClick={[Function]}
               style={
                 Object {
                   "minWidth": undefined,
@@ -857,7 +852,6 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
               disabled={false}
               htmlFor="generated-id"
-              onClick={[Function]}
               style={
                 Object {
                   "minWidth": undefined,

x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot

@@ -164,7 +164,6 @@ Array [
                 className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
                 disabled={false}
                 htmlFor="generated-id"
-                onClick={[Function]}
                 style={
                   Object {
                     "minWidth": undefined,
@@ -195,7 +194,6 @@ Array [
                 className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
                 disabled={false}
                 htmlFor="generated-id"
-                onClick={[Function]}
                 style={
                   Object {
                     "minWidth": undefined,

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/helpers/actions/toggle_phase_action.ts

@@ -14,15 +14,21 @@ const toggleDeletePhase = async (testBed: TestBed) => {
   const { find, component } = testBed;
 
   let button = find('disableDeletePhaseButton');
+  let action = 'disable';
   if (!button.length) {
     button = find('enableDeletePhaseButton');
+    action = 'enable';
   }
   if (!button.length) {
     throw new Error(`Button to enable/disable delete phase was not found.`);
   }
 
   await act(async () => {
-    button.simulate('click');
+    if (action === 'disable') {
+      button.simulate('click');
+    } else {
+      button.find('input').simulate('change');
+    }
   });
   component.update();
 };

x-pack/plugins/translations/translations/ja-JP.json

@@ -296,11 +296,8 @@
     "core.euiColumnSorting.emptySorting": "現在並び替えられているフィールドはありません",
     "core.euiColumnSorting.pickFields": "並び替え基準でフィールドの選択",
     "core.euiColumnSorting.sortFieldAriaLabel": "並べ替え基準：",
-    "core.euiColumnSortingDraggable.activeSortLabel": "このデータグリッドを並び替え中",
     "core.euiColumnSortingDraggable.defaultSortAsc": "A-Z",
     "core.euiColumnSortingDraggable.defaultSortDesc": "Z-A",
-    "core.euiColumnSortingDraggable.removeSortLabel": "データグリッドの並び替えから削除：",
-    "core.euiColumnSortingDraggable.toggleLegend": "フィールドの並び替え方法を選択：",
     "core.euiComboBoxOptionsList.allOptionsSelected": "利用可能なオプションをすべて選択しました",
     "core.euiComboBoxOptionsList.alreadyAdded": "{label} はすでに追加されています",
     "core.euiComboBoxOptionsList.createCustomOption": "{searchValue}をカスタムオプションとして追加",
@@ -311,14 +308,8 @@
     "core.euiComboBoxPill.removeSelection": "グループの選択項目から {children} を削除してください",
     "core.euiCommonlyUsedTimeRanges.legend": "頻繁に使用",
     "core.euiDataGrid.ariaLabel": "{label}; {page}/{pageCount}ページ。",
-    "core.euiDataGrid.ariaLabelGridPagination": "前のグリッドのページネーション：{label}",
     "core.euiDataGrid.ariaLabelledBy": "{page}/{pageCount}ページ。",
-    "core.euiDataGrid.ariaLabelledByGridPagination": "前のグリッドのページネーション",
-    "core.euiDataGrid.fullScreenButton": "全画面",
-    "core.euiDataGrid.fullScreenButtonActive": "全画面を終了",
     "core.euiDataGrid.screenReaderNotice": "セルにはインタラクティブコンテンツが含まれます。",
-    "core.euiDataGridCell.column": "列",
-    "core.euiDataGridCell.row": "行",
     "core.euiDataGridCellButtons.expandButtonTitle": "クリックするか enter を押すと、セルのコンテンツとインタラクトできます。",
     "core.euiDataGridHeaderCell.headerActions": "ヘッダーアクション",
     "core.euiDataGridSchema.booleanSortTextAsc": "False-True",

x-pack/plugins/translations/translations/zh-CN.json

@@ -299,11 +299,8 @@
     "core.euiColumnSorting.emptySorting": "当前未排序任何字段",
     "core.euiColumnSorting.pickFields": "选取排序依据的字段",
     "core.euiColumnSorting.sortFieldAriaLabel": "排序依据：",
-    "core.euiColumnSortingDraggable.activeSortLabel": "正在排序此数据网格",
     "core.euiColumnSortingDraggable.defaultSortAsc": "A-Z",
     "core.euiColumnSortingDraggable.defaultSortDesc": "Z-A",
-    "core.euiColumnSortingDraggable.removeSortLabel": "从数据网格排序中移除：",
-    "core.euiColumnSortingDraggable.toggleLegend": "为字段选择排序方法：",
     "core.euiComboBoxOptionsList.allOptionsSelected": "您已选择所有可用选项",
     "core.euiComboBoxOptionsList.alreadyAdded": "{label} 已添加",
     "core.euiComboBoxOptionsList.createCustomOption": "将 {searchValue} 添加为自定义选项",
@@ -314,14 +311,8 @@
     "core.euiComboBoxPill.removeSelection": "将 {children} 从此组中的选择移除",
     "core.euiCommonlyUsedTimeRanges.legend": "常用",
     "core.euiDataGrid.ariaLabel": "{label}；第 {page} 页，共 {pageCount} 页。",
-    "core.euiDataGrid.ariaLabelGridPagination": "前面网格的分页：{label}",
     "core.euiDataGrid.ariaLabelledBy": "第 {page} 页，共 {pageCount} 页。",
-    "core.euiDataGrid.ariaLabelledByGridPagination": "前面网格的分页",
-    "core.euiDataGrid.fullScreenButton": "全屏",
-    "core.euiDataGrid.fullScreenButtonActive": "退出全屏",
     "core.euiDataGrid.screenReaderNotice": "单元格包含交互内容。",
-    "core.euiDataGridCell.column": "列",
-    "core.euiDataGridCell.row": "行",
     "core.euiDataGridCellButtons.expandButtonTitle": "单击或按 Enter 键以便与单元格内容进行交互",
     "core.euiDataGridHeaderCell.headerActions": "标题操作",
     "core.euiDataGridSchema.booleanSortTextAsc": "False-True",

x-pack/test/functional/services/transform/wizard.ts

@@ -110,7 +110,7 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi
         .toArray()
         .map((cell) => {
           const cellText = $(cell).text();
-          const pattern = /^(.*)Row: (\d+), Column: (\d+):$/;
+          const pattern = /^(.*)Row: (\d+); Column: (\d+)$/;
           const matches = cellText.match(pattern);
           expect(matches).to.not.eql(null, `Cell text should match pattern '${pattern}'`);
           return { text: matches![1], row: Number(matches![2]), column: Number(matches![3]) };

yarn.lock

@@ -1465,10 +1465,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@37.1.1":
-  version "37.1.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-37.1.1.tgz#06bd1e1908b8b56525107a3eca42af036b950ab5"
-  integrity sha512-wEehwi9Ei81ydl8ExDuALbzDH6dgaHqKSlv/3Pmm+BcuW8FW4ctr8K5YPSJ7+5hdOdG0Bps5nnIpCDEinXSsLw==
+"@elastic/eui@37.3.0":
+  version "37.3.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-37.3.0.tgz#98e19f7fd610df2198de453c6078032057012249"
+  integrity sha512-CxWPS8GL+0GN/fUnQ8PRb9t6Iep1UNpBGOfbbx/jyoGmVtoMLXp4RRNCd10iCZR0oXMD8gmtdul5OJwRYLkD7g==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"