[8.x] Upgrade EUI to v97.0.0 (#195525) (#196116)

# Backport This will backport the following commits from `main` to `8.x`: - [Upgrade EUI to v97.0.0 (#195525)](#195525)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Cee Chen <[email protected]>
elastic · Oct 14, 2024 · 2d16d45 · 2d16d45
1 parent 8a7579c
commit 2d16d45
Show file tree

Hide file tree

Showing 54 changed files with 228 additions and 246 deletions.
diff --git a/package.json b/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",

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
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
@@ -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', {

diff --git a/packages/kbn-securitysolution-io-ts-utils/src/test_utils/index.ts b/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, '');
diff --git a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx b/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);

diff --git a/src/dev/license_checker/config.ts b/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)

diff --git a/..._editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap b/..._editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap
diff --git a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx b/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>
   `);

diff --git a/src/plugins/links/public/components/dashboard_link/dashboard_link_component.test.tsx b/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);

diff --git a/src/plugins/links/public/components/external_link/external_link_component.test.tsx b/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 () => {

diff --git a/...ic/management_section/object_view/components/__snapshots__/not_found_errors.test.tsx.snap b/...ic/management_section/object_view/components/__snapshots__/not_found_errors.test.tsx.snap
diff --git a/...cts_management/public/management_section/object_view/components/not_found_errors.test.tsx b/...cts_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."`
     );
   });
 });
diff --git a/...ugins/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap b/...ugins/vis_types/vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap