Upgrade EUI to v97.0.0 (elastic#195525)

`v96.1.0`⏩`v97.0.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v97.0.0`](https://github.com/elastic/eui/releases/v97.0.0)

**Breaking changes**

- EuiDataGrid's custom grid body (rendered via `renderCustomGridBody`)
no longer automatically renders the column header row or footer rows. It
instead now passes the `headerRow` and `footerRow` React elements, which
require manual rendering.
([elastic#8028](elastic/eui#8028))
- This change was made to allow consumers to sync header/footer rows
with their own custom virtualization libraries.
- To facilitate this, a `gridWidth` prop is now also passed to custom
grid body renderers.

**Bug fixes**

- Fixed inputs not taking the whole width when passing `fullWidth` as
`true` to EuiDatePickerRange component
([elastic#8061](elastic/eui#8061))

**Accessibility**

- Improved accessibility of `EuiExternalLinkIcon` by clarifying text for
Screen Reader users. ([elastic#8065](elastic/eui#8065))

---------

Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit cd60c66)

package.json

@@ -119,7 +119,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.15.0",
     "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "96.1.0",
+    "@elastic/eui": "97.0.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

@@ -860,13 +860,16 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       'core.euiInlineEditForm.saveButtonAriaLabel',
       { defaultMessage: 'Save edit' }
     ),
-    'euiExternalLinkIcon.ariaLabel': i18n.translate('core.euiExternalLinkIcon.ariaLabel', {
-      defaultMessage: 'External link',
-    }),
+    'euiExternalLinkIcon.externalTarget.screenReaderOnlyText': i18n.translate(
+      'core.euiExternalLinkIcon.externalTarget.screenReaderOnlyText',
+      {
+        defaultMessage: '(external)',
+      }
+    ),
     'euiExternalLinkIcon.newTarget.screenReaderOnlyText': i18n.translate(
       'core.euiExternalLinkIcon.newTarget.screenReaderOnlyText',
       {
-        defaultMessage: '(opens in a new tab or window)',
+        defaultMessage: '(external, opens in a new tab or window)',
       }
     ),
     'euiLoadingStrings.ariaLabel': i18n.translate('core.euiLoadingStrings.ariaLabel', {

packages/kbn-securitysolution-io-ts-utils/src/test_utils/index.ts

@@ -53,5 +53,4 @@ export const getPaths = <A>(validation: t.Validation<A>): string[] => {
 /**
  * Convenience utility to remove text appended to links by EUI
  */
-export const removeExternalLinkText = (str: string) =>
-  str.replace(/\(opens in a new tab or window\)/g, '');
+export const removeExternalLinkText = (str: string) => str.replace(/\(external[^)]*\)/g, '');

packages/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx

@@ -157,7 +157,7 @@ describe('Unified data table cell rendering', function () {
       />
     );
     expect(component.html()).toMatchInlineSnapshot(
-      `"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-1gd56qr-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
+      `"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-w92548-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
     );
   });
 
@@ -184,7 +184,7 @@ describe('Unified data table cell rendering', function () {
       />
     );
     expect(component.html()).toMatchInlineSnapshot(
-      `"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-1gd56qr-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
+      `"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-w92548-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
     );
     findTestSubject(component, 'docTableClosePopover').simulate('click');
     expect(closePopoverMockFn).toHaveBeenCalledTimes(1);

src/dev/license_checker/config.ts

@@ -87,7 +87,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@96.1.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@97.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.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/embeddable/public/lib/embeddables/error_embeddable.test.tsx

@@ -42,13 +42,12 @@ test('ErrorEmbeddable renders an embeddable with markdown message', async () =>
       <span
         class="emotion-EuiExternalLinkIcon"
         data-euiicon-type="popout"
-      >
-        External link
-      </span>
+        role="presentation"
+      />
       <span
         class="emotion-euiScreenReaderOnly"
       >
-        (opens in a new tab or window)
+        (external, opens in a new tab or window)
       </span>
     </a>
   `);

src/plugins/links/public/components/dashboard_link/dashboard_link_component.test.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 
 import { DEFAULT_DASHBOARD_DRILLDOWN_OPTIONS } from '@kbn/presentation-util-plugin/public';
-import { createEvent, fireEvent, render, screen, within } from '@testing-library/react';
+import { createEvent, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { LINKS_VERTICAL_LAYOUT } from '../../../common/content_management';
@@ -75,7 +75,7 @@ describe('Dashboard link component', () => {
     expect(link).toHaveTextContent('Dashboard 1');
 
     // does not render external link icon
-    const externalIcon = within(link).queryByText('External link');
+    const externalIcon = link.querySelector('[data-euiicon-type="popout"]');
     expect(externalIcon).toBeNull();
 
     // calls `navigate` on click
@@ -122,8 +122,8 @@ describe('Dashboard link component', () => {
     const link = screen.getByTestId('dashboardLink--foo');
     expect(link).toBeInTheDocument();
     // external link icon is rendered
-    const externalIcon = within(link).getByText('External link');
-    expect(externalIcon?.getAttribute('data-euiicon-type')).toBe('popout');
+    const externalIcon = link.querySelector('[data-euiicon-type="popout"]');
+    expect(externalIcon).toBeInTheDocument();
 
     // calls `window.open`
     await userEvent.click(link);

src/plugins/links/public/components/external_link/external_link_component.test.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 
 import userEvent from '@testing-library/user-event';
-import { createEvent, fireEvent, render, screen, within } from '@testing-library/react';
+import { createEvent, fireEvent, render, screen } from '@testing-library/react';
 import { LINKS_VERTICAL_LAYOUT } from '../../../common/content_management';
 import { ExternalLinkComponent } from './external_link_component';
 import { coreServices } from '../../services/kibana_services';
@@ -39,8 +39,8 @@ describe('external link component', () => {
 
     const link = await screen.findByTestId('externalLink--foo');
     expect(link).toBeInTheDocument();
-    const externalIcon = within(link).getByText('External link');
-    expect(externalIcon.getAttribute('data-euiicon-type')).toBe('popout');
+    const externalIcon = link.querySelector('[data-euiicon-type="popout"]');
+    expect(externalIcon).toBeInTheDocument();
     await userEvent.click(link);
     expect(window.open).toHaveBeenCalledWith('https://example.com', '_blank');
   });
@@ -52,8 +52,8 @@ describe('external link component', () => {
     };
     render(<ExternalLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} />);
     const link = await screen.findByTestId('externalLink--foo');
-    const externalIcon = within(link).getByText('External link');
-    expect(externalIcon?.getAttribute('data-euiicon-type')).toBe('popout');
+    const externalIcon = link.querySelector('[data-euiicon-type="popout"]');
+    expect(externalIcon).toBeInTheDocument();
   });
 
   test('modified click does not trigger event.preventDefault', async () => {

src/plugins/saved_objects_management/public/management_section/object_view/components/not_found_errors.test.tsx

@@ -26,7 +26,7 @@ describe('NotFoundErrors component', () => {
     const callOut = mounted.find('EuiCallOut');
     expect(callOut.render()).toMatchSnapshot();
     expect(mounted.text()).toMatchInlineSnapshot(
-      `"There is a problem with this saved objectThe saved search associated with this object no longer exists.If you know what this error means, you can use the Saved objects APIsExternal link(opens in a new tab or window) to fix it — otherwise click the delete button above."`
+      `"There is a problem with this saved objectThe saved search associated with this object no longer exists.If you know what this error means, you can use the Saved objects APIs(external, opens in a new tab or window) to fix it — otherwise click the delete button above."`
     );
   });
 
@@ -35,7 +35,7 @@ describe('NotFoundErrors component', () => {
     const callOut = mounted.find('EuiCallOut');
     expect(callOut.render()).toMatchSnapshot();
     expect(mounted.text()).toMatchInlineSnapshot(
-      `"There is a problem with this saved objectThe data view associated with this object no longer exists.If you know what this error means, you can use the Saved objects APIsExternal link(opens in a new tab or window) to fix it — otherwise click the delete button above."`
+      `"There is a problem with this saved objectThe data view associated with this object no longer exists.If you know what this error means, you can use the Saved objects APIs(external, opens in a new tab or window) to fix it — otherwise click the delete button above."`
     );
   });
 
@@ -44,7 +44,7 @@ describe('NotFoundErrors component', () => {
     const callOut = mounted.find('EuiCallOut');
     expect(callOut.render()).toMatchSnapshot();
     expect(mounted.text()).toMatchInlineSnapshot(
-      `"There is a problem with this saved objectA field associated with this object no longer exists in the data view.If you know what this error means, you can use the Saved objects APIsExternal link(opens in a new tab or window) to fix it — otherwise click the delete button above."`
+      `"There is a problem with this saved objectA field associated with this object no longer exists in the data view.If you know what this error means, you can use the Saved objects APIs(external, opens in a new tab or window) to fix it — otherwise click the delete button above."`
     );
   });
 
@@ -53,7 +53,7 @@ describe('NotFoundErrors component', () => {
     const callOut = mounted.find('EuiCallOut');
     expect(callOut.render()).toMatchSnapshot();
     expect(mounted.text()).toMatchInlineSnapshot(
-      `"There is a problem with this saved objectIf you know what this error means, you can use the Saved objects APIsExternal link(opens in a new tab or window) to fix it — otherwise click the delete button above."`
+      `"There is a problem with this saved objectIf you know what this error means, you can use the Saved objects APIs(external, opens in a new tab or window) to fix it — otherwise click the delete button above."`
     );
   });
 });