Upgrade EUI to v105.0.0

package.json

@@ -127,9 +127,9 @@
     "@elastic/ecs": "^8.11.5",
     "@elastic/elasticsearch": "9.0.3",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "104.1.0",
-    "@elastic/eui-amsterdam": "npm:@elastic/eui@104.1.0-amsterdam.0",
-    "@elastic/eui-theme-borealis": "3.1.0",
+    "@elastic/eui": "105.0.0",
+    "@elastic/eui-amsterdam": "npm:@elastic/eui@105.0.0-amsterdam.0",
+    "@elastic/eui-theme-borealis": "3.2.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/monaco-esql": "^3.1.5",
     "@elastic/node-crypto": "^1.2.3",

src/dev/license_checker/config.ts

@@ -88,11 +88,11 @@ 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.6.3': ['Elastic License 2.0'],
-  '@elastic/eui@104.1.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
-  '@elastic/eui-amsterdam@104.1.0-amsterdam.0': [
+  '@elastic/eui@105.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-amsterdam@105.0.0-amsterdam.0': [
     'Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0',
   ],
-  '@elastic/eui-theme-borealis@3.1.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-borealis@3.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@2.5.2': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_summary_column_header.tsx

@@ -54,7 +54,7 @@ export const UnifiedDataTableSummaryColumnHeader = ({
       <span css={marginStyle}>
         <EuiIconTip
           data-test-subj={iconTipDataTestSubj}
-          type="questionInCircle"
+          type="question"
           content={tooltipContent}
           title={tooltipTitle}
         />

src/platform/packages/shared/kbn-unified-field-list/src/components/field_stats/field_stats.test.tsx

@@ -34,6 +34,18 @@ const mockedServices = {
   uiSettings: coreMock.createStart().uiSettings,
 };
 
+// Similar to wrapper.text() but filtered by a selector
+export const getChildrenTextBySelector = (wrapper: ReactWrapper, selector: string) => {
+  let text = '';
+  const children = wrapper.find(selector);
+
+  children.forEach((element) => {
+    text += element.text();
+  });
+
+  return text;
+};
+
 describe('UnifiedFieldList FieldStats', () => {
   let defaultProps: FieldStatsWithKbnQuery;
   let dataView: DataView;
@@ -433,8 +445,12 @@ describe('UnifiedFieldList FieldStats', () => {
       'Calculated from 1624 records.'
     );
 
-    expect(wrapper.text()).toBe(
-      'Top values"success"41.5%"info"37.1%"security"10.1%"warning"5.0%"error"3.4%"login"2.7%Calculated from 1624 records.'
+    expect(wrapper.text()).toContain('Top values');
+
+    const text = getChildrenTextBySelector(wrapper, 'div.euiProgress__data');
+
+    expect(text).toBe(
+      '"success"41.5%"info"37.1%"security"10.1%"warning"5.0%"error"3.4%"login"2.7%'
     );
   });
 
@@ -506,8 +522,16 @@ describe('UnifiedFieldList FieldStats', () => {
 
     expect(loadFieldStats).toHaveBeenCalledTimes(1);
 
-    expect(wrapper.text()).toBe(
-      'Examples"success"41.5%"info"37.1%"security"10.1%"warning"5.0%"error"3.4%"login"2.7%Calculated from 1624 records.'
+    expect(wrapper.text()).toContain('Examples');
+
+    const text = getChildrenTextBySelector(wrapper, 'div.euiProgress__data');
+
+    expect(text).toBe(
+      '"success"41.5%"info"37.1%"security"10.1%"warning"5.0%"error"3.4%"login"2.7%'
+    );
+
+    expect(wrapper.find('[data-test-subj="testing-statsFooter"]').first().text()).toBe(
+      'Calculated from 1624 records.'
     );
   });
 
@@ -694,8 +718,14 @@ describe('UnifiedFieldList FieldStats', () => {
 
     expect(loadFieldStats).toHaveBeenCalledTimes(1);
 
-    expect(wrapper.text()).toBe(
-      'Toggle either theTop valuesDistribution1273.9%1326.1%Calculated from 23 sample records.'
+    expect(wrapper.text()).toContain('Toggle either theTop valuesDistribution');
+
+    const text = getChildrenTextBySelector(wrapper, 'div.euiProgress__data');
+
+    expect(text).toBe('1273.9%1326.1%');
+
+    expect(wrapper.find('[data-test-subj="testing-statsFooter"]').first().text()).toBe(
+      'Calculated from 23 sample records.'
     );
   });
 

src/platform/packages/shared/kbn-unified-field-list/src/components/field_stats/field_top_values.test.tsx

@@ -12,6 +12,7 @@ import { EuiProgress, EuiButtonIcon } from '@elastic/eui';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import { FieldTopValues, FieldTopValuesProps } from './field_top_values';
+import { getChildrenTextBySelector } from './field_stats.test';
 import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks';
 import { ES_FIELD_TYPES, KBN_FIELD_TYPES } from '@kbn/field-types';
 
@@ -66,17 +67,19 @@ describe('UnifiedFieldList <FieldTopValues />', () => {
 
   it('should render correctly without filter actions', async () => {
     const wrapper = mountWithIntl(<FieldTopValues {...defaultProps} />);
+    const text = getChildrenTextBySelector(wrapper, 'div.euiProgress__data');
 
-    expect(wrapper.text()).toBe('sourceA10.0%sourceB0.0%Other90.0%');
+    expect(text).toBe('sourceA10.0%sourceB0.0%Other90.0%');
     expect(wrapper.find(EuiProgress)).toHaveLength(3);
     expect(wrapper.find(EuiButtonIcon)).toHaveLength(0);
   });
 
   it('should render correctly with filter actions', async () => {
     const mockAddFilter = jest.fn();
     const wrapper = mountWithIntl(<FieldTopValues {...defaultProps} onAddFilter={mockAddFilter} />);
+    const text = getChildrenTextBySelector(wrapper, 'div.euiProgress__data');
 
-    expect(wrapper.text()).toBe('sourceA10.0%sourceB0.0%Other90.0%');
+    expect(text).toBe('sourceA10.0%sourceB0.0%Other90.0%');
     expect(wrapper.find(EuiProgress)).toHaveLength(3);
     expect(wrapper.find(EuiButtonIcon)).toHaveLength(4);
 
@@ -105,8 +108,9 @@ describe('UnifiedFieldList <FieldTopValues />', () => {
         ]}
       />
     );
+    const text = getChildrenTextBySelector(wrapper, 'div.euiProgress__data');
 
-    expect(wrapper.text()).toBe('sourceA60.0%sourceB30.0%sourceC10.0%');
+    expect(text).toBe('sourceA60.0%sourceB30.0%sourceC10.0%');
   });
 
   it('should render correctly with empty strings', async () => {
@@ -129,8 +133,9 @@ describe('UnifiedFieldList <FieldTopValues />', () => {
         ]}
       />
     );
+    const text = getChildrenTextBySelector(wrapper, 'div.euiProgress__data');
 
-    expect(wrapper.text()).toBe('(empty)60.0%sourceA30.0%sourceB0.4%Other9.6%');
+    expect(text).toBe('(empty)60.0%sourceA30.0%sourceB0.4%Other9.6%');
   });
 
   it('should render correctly without floating point', async () => {
@@ -145,7 +150,8 @@ describe('UnifiedFieldList <FieldTopValues />', () => {
         ]}
       />
     );
+    const text = getChildrenTextBySelector(wrapper, 'div.euiProgress__data');
 
-    expect(wrapper.text()).toBe('sourceA100%');
+    expect(text).toBe('sourceA100%');
   });
 });

src/platform/packages/shared/kbn-unified-field-list/src/components/field_stats/field_top_values_bucket.tsx

@@ -99,64 +99,66 @@ const FieldTopValuesBucket: React.FC<FieldTopValuesBucketProps> = ({
           min-width: 0;
         `}
       >
-        <EuiFlexGroup alignItems="stretch" gutterSize="s" responsive={false}>
-          <EuiFlexItem
-            grow={true}
-            data-test-subj={`${dataTestSubject}-topValues-formattedFieldValue`}
-            css={css`
-              overflow-wrap: anywhere;
-            `}
-          >
-            {(formattedFieldValue?.length ?? 0) > 0 ? (
-              <EuiToolTip content={formattedFieldValue} delay="long">
-                <EuiTextBlockTruncate lines={3}>
-                  <EuiText size="xs" color={'subdued'} {...textProps}>
-                    {formattedFieldValue}
-                  </EuiText>
-                </EuiTextBlockTruncate>
-              </EuiToolTip>
-            ) : (
-              <EuiText size="xs">
-                {type === 'other'
-                  ? i18n.translate('unifiedFieldList.fieldStats.otherDocsLabel', {
-                      defaultMessage: 'Other',
-                    })
-                  : formattedFieldValue === ''
-                  ? i18n.translate('unifiedFieldList.fieldStats.emptyStringValueLabel', {
-                      defaultMessage: '(empty)',
-                    })
-                  : '-'}
-              </EuiText>
-            )}
-          </EuiFlexItem>
-
-          <EuiFlexItem
-            grow={false}
-            data-test-subj={`${dataTestSubject}-topValues-formattedPercentage`}
-          >
-            <EuiToolTip
-              content={i18n.translate('unifiedFieldList.fieldStats.bucketPercentageTooltip', {
-                defaultMessage:
-                  '{formattedPercentage} ({count, plural, one {# record} other {# records}})',
-                values: {
-                  formattedPercentage,
-                  count,
-                },
-              })}
-              delay="long"
-            >
-              <EuiText size="xs" textAlign="left" color={getPercentageColor(euiTheme, color)}>
-                {formattedPercentage}
-              </EuiText>
-            </EuiToolTip>
-          </EuiFlexItem>
-        </EuiFlexGroup>
         <EuiProgress
           value={progressValue}
           max={1}
           size="s"
           color={type === 'other' ? 'subdued' : color}
-          aria-label={`${formattedFieldValue} (${formattedPercentage})`}
+          valueText={
+            <div data-test-subj={`${dataTestSubject}-topValues-formattedPercentage`}>
+              <EuiToolTip
+                content={i18n.translate('unifiedFieldList.fieldStats.bucketPercentageTooltip', {
+                  defaultMessage:
+                    '{formattedPercentage} ({count, plural, one {# record} other {# records}})',
+                  values: {
+                    formattedPercentage,
+                    count,
+                  },
+                })}
+                delay="long"
+              >
+                <EuiText size="xs" textAlign="left" color={getPercentageColor(euiTheme, color)}>
+                  {formattedPercentage}
+                </EuiText>
+              </EuiToolTip>
+            </div>
+          }
+          label={
+            <div
+              data-test-subj={`${dataTestSubject}-topValues-formattedFieldValue`}
+              css={css`
+                overflow-wrap: anywhere;
+              `}
+            >
+              {(formattedFieldValue?.length ?? 0) > 0 ? (
+                <EuiToolTip content={formattedFieldValue} delay="long">
+                  <EuiTextBlockTruncate lines={3}>
+                    <EuiText size="xs" color={'subdued'} {...textProps}>
+                      {formattedFieldValue}
+                    </EuiText>
+                  </EuiTextBlockTruncate>
+                </EuiToolTip>
+              ) : (
+                <EuiText size="xs">
+                  {type === 'other'
+                    ? i18n.translate('unifiedFieldList.fieldStats.otherDocsLabel', {
+                        defaultMessage: 'Other',
+                      })
+                    : formattedFieldValue === ''
+                    ? i18n.translate('unifiedFieldList.fieldStats.emptyStringValueLabel', {
+                        defaultMessage: '(empty)',
+                      })
+                    : '-'}
+                </EuiText>
+              )}
+            </div>
+          }
+          labelProps={{
+            title: undefined,
+            css: css`
+              white-space: unset !important;
+            `,
+          }}
         />
       </EuiFlexItem>
       {onAddFilter && field.filterable && (

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/attributes/doc_viewer_attributes_overview/attributes_accordion.tsx

@@ -56,7 +56,7 @@ export const AttributesAccordion = ({
           <strong css={{ marginRight: euiTheme.size.xs }}>{title}</strong>
           <EuiIconTip
             aria-label={tooltipMessage}
-            type="questionInCircle"
+            type="question"
             color="subdued"
             size="s"
             content={tooltipMessage}

x-pack/solutions/search/plugins/search_query_rules/public/components/query_ruleset_detail/query_rule_flyout/query_rule_metadata_editor.tsx

@@ -70,7 +70,7 @@ export const QueryRuleMetadataEditor: React.FC<QueryRuleMetadataEditorProps> = (
                     )}
                   >
                     <EuiIcon
-                      type="questionInCircle"
+                      type="question"
                       color="subdued"
                       aria-label={i18n.translate(
                         'xpack.search.queryRulesetDetail.queryRuleFlyout.metadataEditorTooltipLabel',
@@ -247,7 +247,7 @@ export const QueryRuleMetadataEditor: React.FC<QueryRuleMetadataEditorProps> = (
                           )}
                         >
                           <EuiIcon
-                            type="questionInCircle"
+                            type="question"
                             color="subdued"
                             aria-label={i18n.translate(
                               'xpack.search.queryRulesetDetail.queryRuleFlyout.metadataEditorValuesTooltipLabel',

x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar_row.test.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { render } from '@testing-library/react';
+import { render, within } from '@testing-library/react';
 import React from 'react';
 import { ProgressBarRow } from './alerts_progress_bar_row';
 import type { AlertsProgressBarData } from './types';
@@ -19,10 +19,12 @@ describe('ProgressBarRow', () => {
       label: 'label',
     };
 
-    const { getByText } = render(<ProgressBarRow item={item} />);
+    const { container } = render(<ProgressBarRow item={item} />);
+    // target only the visible label/value, skip the one for screen readers
+    const data = within(container.querySelector('.euiProgress__data')!);
 
-    expect(getByText('percentageLabel')).toBeInTheDocument();
-    expect(getByText('label')).toBeInTheDocument();
+    expect(data.getByText('percentageLabel')).toBeInTheDocument();
+    expect(data.getByText('label')).toBeInTheDocument();
   });
 
   it('should render key value when key is not Other', () => {
@@ -34,9 +36,11 @@ describe('ProgressBarRow', () => {
       label: 'label',
     };
 
-    const { getByText } = render(<ProgressBarRow item={item} />);
+    const { container } = render(<ProgressBarRow item={item} />);
+    // target only the visible label/value, skip the one for screen readers
+    const data = within(container.querySelector('.euiProgress__data')!);
 
-    expect(getByText('percentageLabel')).toBeInTheDocument();
-    expect(getByText('key')).toBeInTheDocument();
+    expect(data.getByText('percentageLabel')).toBeInTheDocument();
+    expect(data.getByText('key')).toBeInTheDocument();
   });
 });