Upgrade EUI to v95.4.0 (#188865)

`v95.3.0` ⏩ `v95.4.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)_ --- ## [`v95.4.0`](https://github.com/elastic/eui/releases/v95.4.0) - Added `anomalyChart`, `anomalySwimLane`, `changePointDetection`, `fieldStatistics`, `logPatternAnalysis`, `logRateAnalysis` and `singleMetricViewer` glyph to `EuiIcon` ([#7873](elastic/eui#7873)) **Bug fixes** - Fixed overlapping content in `EuiBasicTable` for expanded and selectable table rows ([#7895](elastic/eui#7895)) - Fixed the alignment of `EuiBasicTable` mobile actions ([#7895](elastic/eui#7895)) **Accessibility** - Improved `EuiStat`'s screen reader accessibility ([#7864](elastic/eui#7864)) --- ## Additional Changes - reverts temporary fix for overlapping content in nested tables done in PR [#188374](#188374) --------- Co-authored-by: Elastic Machine <[email protected]>
elastic · Jul 25, 2024 · 2295ba1 · 2295ba1
1 parent 579af1b
commit 2295ba1
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 83 deletions.
diff --git a/package.json b/package.json
@@ -112,7 +112,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.14.0",
     "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "95.3.0",
+    "@elastic/eui": "95.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -86,7 +86,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@95.3.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@95.4.0': ['SSPL-1.0 OR Elastic License 2.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/...ata_quality_dashboard/impl/data_quality/data_quality_panel/summary_table/helpers.test.tsx b/...ata_quality_dashboard/impl/data_quality/data_quality_panel/summary_table/helpers.test.tsx
@@ -452,7 +452,7 @@ describe('helpers', () => {
           </TestProviders>
         );
 
-        expect(screen.getByTestId('incompatibleStat')).toHaveTextContent('-- --'); // the euiScreenReaderOnly content renders an additional set of --
+        expect(screen.getByTestId('incompatibleStat')).toHaveTextContent('--');
       });
     });
 

diff --git a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx
@@ -8,7 +8,7 @@
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 
-import type { EuiBasicTableColumn } from '@elastic/eui';
+import { type EuiBasicTableColumn, useEuiTheme } from '@elastic/eui';
 import { EuiSpacer, EuiInMemoryTable, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -41,6 +41,7 @@ export const JobMessages: FC<JobMessagesProps> = ({
   refreshMessage,
   actionHandler,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const { showNodeInfo } = useEnabledFeatures();
   const columns: Array<EuiBasicTableColumn<JobMessage>> = useMemo(() => {
     const cols: Array<EuiBasicTableColumn<JobMessage>> = [
@@ -65,7 +66,7 @@ export const JobMessages: FC<JobMessagesProps> = ({
           ''
         ),
         render: (message: JobMessage) => <JobIcon message={message} />,
-        width: '6%',
+        width: `${euiTheme.size.l}`,
       },
       {
         field: 'timestamp',
@@ -130,7 +131,7 @@ export const JobMessages: FC<JobMessagesProps> = ({
     }
 
     return cols;
-  }, [showNodeInfo, refreshMessage, actionHandler]);
+  }, [showNodeInfo, refreshMessage, actionHandler, euiTheme]);
 
   const defaultSorting = {
     sort: {

diff --git a/...ins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap b/...ins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap
diff --git a/...solution/observability/public/pages/overview/components/sections/apm/apm_section.test.tsx b/...solution/observability/public/pages/overview/components/sections/apm/apm_section.test.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import * as fetcherHook from '@kbn/observability-shared-plugin/public/hooks/use_fetcher';
+import { screen } from '@elastic/eui/lib/test/rtl';
 import { render, data as dataMock } from '../../../../../utils/test_helper';
 import { CoreStart } from '@kbn/core/public';
 import { ConfigSchema, ObservabilityPublicPluginsStart } from '../../../../../plugin';
@@ -31,6 +32,14 @@ jest.mock('react-router-dom', () => ({
 const { ObservabilityAIAssistantContextualInsight } =
   observabilityAIAssistantPluginMock.createStartContract();
 
+const assertServiceStat = (description: string, stat: string) => {
+  const serviceStat = screen.getByTestSubject('apmServiceStat');
+
+  expect(serviceStat).toBeInTheDocument();
+  expect(serviceStat!.children[0]).toHaveTextContent(description);
+  expect(serviceStat!.children[1]).toHaveTextContent(stat);
+};
+
 describe('APMSection', () => {
   const bucketSize = { intervalString: '60s', bucketSize: 60, dateFormat: 'YYYY-MM-DD HH:mm' };
 
@@ -90,7 +99,7 @@ describe('APMSection', () => {
 
     expect(getByRole('heading')).toHaveTextContent('Services');
     expect(getByText('Show service inventory')).toBeInTheDocument();
-    expect(getByText('Services 11')).toBeInTheDocument();
+    assertServiceStat('Services', '11');
     expect(getByText('900.0 tpm')).toBeInTheDocument();
     expect(queryAllByTestId('loading')).toEqual([]);
   });
@@ -107,7 +116,7 @@ describe('APMSection', () => {
 
     expect(getByRole('heading')).toHaveTextContent('Services');
     expect(getByText('Show service inventory')).toBeInTheDocument();
-    expect(getByText('Services 11')).toBeInTheDocument();
+    assertServiceStat('Services', '11');
     expect(getByText('312.00k tpm')).toBeInTheDocument();
     expect(queryAllByTestId('loading')).toEqual([]);
   });
@@ -117,14 +126,14 @@ describe('APMSection', () => {
       status: fetcherHook.FETCH_STATUS.LOADING,
       refetch: jest.fn(),
     });
-    const { getByRole, queryAllByText, getByTestId } = render(
+    const { getByRole, queryAllByText, getByTestId, getAllByLabelText } = render(
       <APMSection bucketSize={bucketSize} />
     );
 
     expect(getByRole('heading')).toHaveTextContent('Services');
     expect(getByTestId('loading')).toBeInTheDocument();
     expect(queryAllByText('Show service inventory')).toEqual([]);
-    expect(queryAllByText('Services 11')).toEqual([]);
+    expect(getAllByLabelText('Statistic is loading').length).toEqual(2);
     expect(queryAllByText('312.00k tpm')).toEqual([]);
   });
 });
diff --git a/...lity_solution/observability/public/pages/overview/components/sections/apm/apm_section.tsx b/...lity_solution/observability/public/pages/overview/components/sections/apm/apm_section.tsx
@@ -114,6 +114,7 @@ export function APMSection({ bucketSize }: Props) {
               defaultMessage: 'Services',
             })}
             isLoading={isLoading}
+            data-test-subj="apmServiceStat"
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

diff --git a/...sform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx b/...sform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx
@@ -8,7 +8,7 @@
 import React, { type FC } from 'react';
 import { css } from '@emotion/react';
 
-import { useEuiTheme, EuiTabbedContent } from '@elastic/eui';
+import { EuiTabbedContent } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { stringHash } from '@kbn/ml-string-hash';
@@ -30,7 +30,6 @@ interface Props {
 }
 
 export const ExpandedRow: FC<Props> = ({ item, onAlertEdit }) => {
-  const { euiTheme } = useEuiTheme();
   const tabId = stringHash(item.id);
 
   const tabs = [
@@ -113,8 +112,7 @@ export const ExpandedRow: FC<Props> = ({ item, onAlertEdit }) => {
       onTabClick={() => {}}
       expand={false}
       css={css`
-        margin-left: -${euiTheme.size.xl};
-        width: calce(100% + ${euiTheme.size.xl});
+        width: 100%;
 
         .euiTable {
           background-color: transparent;

diff --git a/...pp/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx b/...pp/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx
@@ -81,7 +81,7 @@ export const ExpandedRowMessagesPane: FC<ExpandedRowMessagesPaneProps> = ({ tran
         ''
       ),
       render: (message: TransformMessage) => (
-        <div css={{ marginLeft: `-${euiTheme.base * 1.75}px` }}>
+        <div css={{ margin: 'auto' }}>
           <JobIcon message={message} />
         </div>
       ),

diff --git a/...i/public/application/sections/rules_list/components/rules_list_table_status_cell.test.tsx b/...i/public/application/sections/rules_list/components/rules_list_table_status_cell.test.tsx
@@ -121,7 +121,7 @@ describe('RulesListTableStatusCell', () => {
   });
 
   it('should render loading indicator for new rules', async () => {
-    const { getByText } = render(
+    const { getByLabelText } = render(
       <ComponentWithLocale
         rule={
           {
@@ -137,7 +137,7 @@ describe('RulesListTableStatusCell', () => {
       />
     );
 
-    expect(getByText('Statistic is loading')).not.toBe(null);
+    expect(getByLabelText('Statistic is loading')).not.toBe(null);
   });
 
   it('should render rule with no last run', async () => {

diff --git a/yarn.lock b/yarn.lock
@@ -1752,10 +1752,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@95.3.0":
-  version "95.3.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.3.0.tgz#b880012120f748e71bc2c1e4dbcf5acd514f043e"
-  integrity sha512-KKe2Yuswm0pnOpEnFdWjnekOqFQpN1rlWLp4MPLQwHTc9hMIujiRfOo66RGgc4K3p8qWhyRl/DxbxXC+NnsKiQ==
+"@elastic/eui@95.4.0":
+  version "95.4.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.4.0.tgz#57ac111c2a3e8125db244928a95787bbb2f318c8"
+  integrity sha512-UXmn+xgJj4pwq6MV7xMjM79GN+taTv7LBfrtRfurGwhkmvXJrOjMXWq+mfR8rU44lOS2R4AwzH5gcCBjAafLsA==
   dependencies:
     "@hello-pangea/dnd" "^16.6.0"
     "@types/lodash" "^4.14.202"
-Original file line number
+Diff line change
@@ Expand Up / @@ -452,7 +452,7 @@ describe('helpers', () => { @@
               </TestProviders>
             );
-            expect(screen.getByTestId('incompatibleStat')).toHaveTextContent('-- --'); // the euiScreenReaderOnly content renders an additional set of --
+            expect(screen.getByTestId('incompatibleStat')).toHaveTextContent('--');
           });
         });
@@ Expand Down @@