Upgrade EUI to v48.1.1 (#125023)

* Upgraded the version of EUI to 47.0.0 and react-beautiful-dnd (an EUI dependancy) to 13.1.0

* Update i18n mappings with required changes

* Fix all data grid types/tests missing the new `colIndex` prop passed by renderCellValue and cellActions

* Fix cellActions closePopover type to indicate conditionality (only passed when popover is open)

* Fix more datagrid colIndex errors

- pass more missing `colIndex`s

- pass RowAction colIndex, because it's inheriting types from EUI

- omit colIndex from the leading controls column renderer, because it doesn't need them

* Improve StatefulCell typing

- pass colIndex (which fixes EUI type match issue)
- DRY out ariaColIndex logic
- rename ariaRowindex passed to StatefulCell to rowIndex

* Updated i18n_eui_mapping tests to add euiSelectable.searchResults to the tokensToSkip array

* Fix failing ML datagrid FTR test

- `visibleRowIndex` is not a prop passed back by `popoverContents` (see `EuiDataGridCellValueElementProps`), but `rowIndex` is

* Revert attempted ML type change

- in actuality this is an EUI typing issue, children is a ReactElement, not a ReactNode. However we'll shortly be deprecationg popoverContents, so this isn't worth fixing right now

* Update test files to include up to date snapshots of code samples

* Updated a test snapshots to match the latest version of code samples

* Upgraded the version of EUI from 47.0.0 to 48.0.0 in package.json and license_checker config files

* Update the required i18n translation mapping file with additions and changes from EUI version 48.0.0

* Updated three security screen accessibility tests to check for the aria-checked attribute instead of the aria-selected attribute as part of an accessibility update to aria made in EUI PR 5581

* Updated two unit cases to that are responsible for checking strict equality of strings. These unit tests were for the EuiSelectable and EuiFilterGroup components. Both of these components contain and utilize EuiScreenReaderOnly which provides text that is used for screen readers, but can still be viewed and queried in the DOM. These tests have been updated with the EuiScreenReaderOnly text in mind.

* Code clean up and added a missing internationalization token

* Ran yarn kbn bootstrap to update the yarn lock file

* Fix failing ML FTR test
- EuiSelectable now relies on aria-checked to indicate selected state, per W3 spec

* Fix failing functional tests that click the datagrid cell expand button

.euiDataGridRowCell__expandButtonIcon was deprecated in favor of a shared .euiDataGridRowCell__actionButtonIcon class, but the expand action is always the last one

* Upgrade to 48.1.1

* Switch to data-test-subj for datagrid cell expansion selectors

* Switch to new `data-test-selected` attribute over `aria-checked`

* Update snapshots/Jest tests to account for EuiSelectable use in EuiFilter

Co-authored-by: Constance Chen <constance.chen@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -109,7 +109,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.1.0-canary.2",
     "@elastic/ems-client": "8.0.0",
-    "@elastic/eui": "46.1.0",
+    "@elastic/eui": "48.1.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
@@ -336,7 +336,7 @@
     "re2": "^1.16.0",
     "react": "^16.12.0",
     "react-ace": "^7.0.5",
-    "react-beautiful-dnd": "^13.0.0",
+    "react-beautiful-dnd": "^13.1.0",
     "react-color": "^2.13.8",
     "react-dom": "^16.12.0",
     "react-dropzone": "^4.2.9",

src/core/public/i18n/i18n_eui_mapping.test.ts

@@ -76,7 +76,7 @@ describe('@elastic/eui i18n tokens', () => {
       test('defaultMessage is in sync with defString', () => {
         // Certain complex tokens (e.g. ones that have a function as a defaultMessage)
         // need custom i18n handling, and can't be checked for basic defString equality
-        const tokensToSkip = ['euiColumnSorting.buttonActive'];
+        const tokensToSkip = ['euiColumnSorting.buttonActive', 'euiSelectable.searchResults'];
         if (tokensToSkip.includes(token)) return;
 
         // Clean up typical errors from the `@elastic/eui` extraction token tool

src/core/public/i18n/i18n_eui_mapping.tsx

@@ -397,8 +397,8 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Row: {row}; Column: {col}',
         values: { row, col },
       }),
-    'euiDataGridCellButtons.expandButtonTitle': i18n.translate(
-      'core.euiDataGridCellButtons.expandButtonTitle',
+    'euiDataGridCellActions.expandButtonTitle': i18n.translate(
+      'core.euiDataGridCellActions.expandButtonTitle',
       {
         defaultMessage: 'Click or hit enter to interact with cell content',
       }
@@ -954,13 +954,37 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         values={{ searchValue }}
       />
     ),
+    'euiSelectable.screenReaderInstructions': i18n.translate(
+      'core.euiSelectable.screenReaderInstructions',
+      {
+        defaultMessage:
+          'Use up and down arrows to move focus over options. Enter to select. Escape to collapse options.',
+      }
+    ),
+    'euiSelectable.searchResults': ({ resultsLength }: EuiValues) =>
+      i18n.translate('core.euiSelectable.searchResults', {
+        defaultMessage: '{resultsLength, plural, one {# result} other {# results}}',
+        values: { resultsLength },
+      }),
     'euiSelectable.placeholderName': i18n.translate('core.euiSelectable.placeholderName', {
       defaultMessage: 'Filter options',
     }),
+    'euiSelectableListItem.checkedOption': i18n.translate(
+      'core.euiSelectableListItem.checkedOption',
+      {
+        defaultMessage: 'Checked option.',
+      }
+    ),
+    'euiSelectableListItem.checkedOptionInstructions': i18n.translate(
+      'core.euiSelectableListItem.checkedOptionInstructions',
+      {
+        defaultMessage: 'To uncheck this option, press enter.',
+      }
+    ),
     'euiSelectableListItem.includedOption': i18n.translate(
       'core.euiSelectableListItem.includedOption',
       {
-        defaultMessage: 'Included option.',
+        defaultMessage: 'Selected option.',
       }
     ),
     'euiSelectableListItem.includedOptionInstructions': i18n.translate(
@@ -978,7 +1002,13 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiSelectableListItem.excludedOptionInstructions': i18n.translate(
       'core.euiSelectableListItem.excludedOptionInstructions',
       {
-        defaultMessage: 'To deselect this option, press enter.',
+        defaultMessage: 'To uncheck this option, press enter.',
+      }
+    ),
+    'euiSelectableListItem.unckeckedOptionInstructions': i18n.translate(
+      'core.euiSelectableListItem.unckeckedOptionInstructions',
+      {
+        defaultMessage: 'To select this option, press enter.',
       }
     ),
     'euiSelectableTemplateSitewide.loadingResults': i18n.translate(
@@ -1088,6 +1118,28 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Step {number} is loading',
         values: { number },
       }),
+    'euiSuggest.stateSavedTooltip': i18n.translate('core.euiSuggest.stateSavedTooltip', {
+      defaultMessage: 'Saved.',
+    }),
+
+    'euiSuggest.stateUnsavedTooltip': i18n.translate('core.euiSuggest.stateUnsavedTooltip', {
+      defaultMessage: 'Changes have not been saved.',
+    }),
+
+    'euiSuggest.stateLoading': i18n.translate('core.euiSuggest.stateLoading', {
+      defaultMessage: 'State: loading.',
+    }),
+
+    'euiSuggest.stateSaved': i18n.translate('core.euiSuggest.stateSaved', {
+      defaultMessage: 'State: saved.',
+    }),
+
+    'euiSuggest.stateUnsaved': i18n.translate('core.euiSuggest.stateUnsaved', {
+      defaultMessage: 'State: unsaved.',
+    }),
+    'euiSuggest.stateUnchanged': i18n.translate('core.euiSuggest.stateUnchanged', {
+      defaultMessage: 'State: unchanged.',
+    }),
     'euiSuperSelect.screenReaderAnnouncement': i18n.translate(
       'core.euiSuperSelect.screenReaderAnnouncement',
       {

src/dev/license_checker/config.ts

@@ -77,6 +77,6 @@ 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.0.0': ['Elastic License 2.0'],
-  '@elastic/eui@46.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@48.1.1': ['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
 };

src/plugins/discover/public/components/discover_grid/discover_grid_cell_actions.test.tsx

@@ -40,7 +40,8 @@ describe('Discover cell actions ', function () {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           Component={(props: any) => <EuiButton {...props} />}
           rowIndex={1}
-          columnId={'extension'}
+          colIndex={1}
+          columnId="extension"
           isExpanded={false}
           closePopover={jest.fn()}
         />
@@ -68,7 +69,8 @@ describe('Discover cell actions ', function () {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           Component={(props: any) => <EuiButton {...props} />}
           rowIndex={1}
-          columnId={'extension'}
+          colIndex={1}
+          columnId="extension"
           isExpanded={false}
           closePopover={jest.fn()}
         />

src/plugins/discover/public/components/discover_grid/discover_grid_document_selection.test.tsx

@@ -57,6 +57,7 @@ describe('document selection', () => {
         <DiscoverGridContext.Provider value={contextMock}>
           <SelectButton
             rowIndex={0}
+            colIndex={0}
             setCellProps={jest.fn()}
             columnId="test"
             isExpanded={false}
@@ -80,6 +81,7 @@ describe('document selection', () => {
         <DiscoverGridContext.Provider value={contextMock}>
           <SelectButton
             rowIndex={0}
+            colIndex={0}
             setCellProps={jest.fn()}
             columnId="test"
             isExpanded={false}
@@ -102,6 +104,7 @@ describe('document selection', () => {
         <DiscoverGridContext.Provider value={contextMock}>
           <SelectButton
             rowIndex={0}
+            colIndex={0}
             setCellProps={jest.fn()}
             columnId="test"
             isExpanded={false}
@@ -125,6 +128,7 @@ describe('document selection', () => {
         <DiscoverGridContext.Provider value={contextMock}>
           <SelectButton
             rowIndex={0}
+            colIndex={0}
             setCellProps={jest.fn()}
             columnId="test"
             isExpanded={false}

src/plugins/discover/public/components/discover_grid/discover_grid_expand_button.test.tsx

@@ -35,6 +35,7 @@ describe('Discover grid view button ', function () {
       <DiscoverGridContext.Provider value={contextMock}>
         <ExpandButton
           rowIndex={0}
+          colIndex={0}
           setCellProps={jest.fn()}
           columnId="test"
           isExpanded={false}
@@ -57,6 +58,7 @@ describe('Discover grid view button ', function () {
       <DiscoverGridContext.Provider value={contextMock}>
         <ExpandButton
           rowIndex={0}
+          colIndex={0}
           setCellProps={jest.fn()}
           columnId="test"
           isExpanded={false}
@@ -79,6 +81,7 @@ describe('Discover grid view button ', function () {
       <DiscoverGridContext.Provider value={contextMock}>
         <ExpandButton
           rowIndex={1}
+          colIndex={0}
           setCellProps={jest.fn()}
           columnId="test"
           isExpanded={false}