Upgrade EUI to v89.1.0 (elastic#169135)

`v89.0.0`⏩`v89.1.0` This upgrade also contains an EuiDataGrid refactor (elastic/eui#7255) not listed in the changelog (as no end-user functionality or props changed as a result of the refactor). The unlisted changes should only affect DOM and `className` usages in Kibana (primarily CSS overrides and test selectors). --- ## [`89.1.0`](https://github.com/elastic/eui/tree/v89.1.0) - Added `tokenVectorSparse` token and updated `tokenDenseVector` token (now named `tokenVectorDense`). ([elastic#7282](elastic/eui#7282)) **CSS-in-JS conversions** - Reduced default CSS prefixes generated by Emotion to only browsers supported by EUI (latest evergreen browsers). This can be customized by passing your own Emotion cache to `EuiProvider`. ([elastic#7272](elastic/eui#7272))
benakansara · Oct 22, 2023 · 7bafefe · 7bafefe
1 parent c649b27
commit 7bafefe
Show file tree

Hide file tree

Showing 14 changed files with 41 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
     "@elastic/ems-client": "8.5.0",
-    "@elastic/eui": "89.0.0",
+    "@elastic/eui": "89.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/...me/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/...me/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -22,10 +22,6 @@
   font-size: $euiFontSizeS;
 }
 
-.euiDataGridRowCell__definedHeight {
-  white-space: pre-wrap;
-}
-
 .unifiedDataTable__inner {
   display: flex;
   flex-direction: column;
@@ -51,7 +47,7 @@
   }
 
   .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
-  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__actions--overlay {
     background-color: tintOrShade($euiColorLightShade, 50%, 0);
   }
 }
@@ -110,14 +106,14 @@
 .unifiedDataTable__rowControl {
   // fine-tuning the vertical alignment with the text for any row height setting
   margin-top: -3px;
-  .euiDataGridRowCell__truncate & { // "Single line" row height setting
+  .euiDataGridRowCell__defaultHeight & { // "Single line" row height setting
     margin-top: 0;
   }
 }
 
 .unifiedDataTable__descriptionList {
   // force the content truncation when "Single line" row height setting is active
-  .euiDataGridRowCell__truncate & {
+  .euiDataGridRowCell__defaultHeight & {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;

diff --git a/packages/react/kibana_context/root/eui_provider.tsx b/packages/react/kibana_context/root/eui_provider.tsx
@@ -10,7 +10,7 @@ import React, { FC, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import createCache from '@emotion/cache';
 
-import { EuiProvider, EuiProviderProps } from '@elastic/eui';
+import { EuiProvider, EuiProviderProps, euiStylisPrefixer } from '@elastic/eui';
 import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import { getColorMode, defaultTheme } from '@kbn/react-kibana-context-common';
 import { ThemeServiceStart } from '@kbn/react-kibana-context-common';
@@ -25,18 +25,23 @@ export interface KibanaEuiProviderProps extends Pick<EuiProviderProps<{}>, 'modi
 
 // Set up the caches.
 // https://eui.elastic.co/#/utilities/provider#cache-location
+const stylisPlugins = [euiStylisPrefixer]; // https://emotion.sh/docs/@emotion/cache#stylisplugins
+
 const emotionCache = createCache({
   key: 'css',
+  stylisPlugins,
   container: document.querySelector('meta[name="emotion"]') as HTMLElement,
 });
 
 const globalCache = createCache({
   key: EUI_STYLES_GLOBAL,
+  stylisPlugins,
   container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
 });
 
 const utilitiesCache = createCache({
   key: EUI_STYLES_UTILS,
+  stylisPlugins,
   container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
 });
 

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -85,7 +85,7 @@ 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.5.0': ['Elastic License 2.0'],
-  '@elastic/eui@89.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@89.1.0': ['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
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
 };
diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx b/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx
@@ -149,7 +149,7 @@ describe('DataTable', () => {
         wrapper
           .find('[data-test-subj="dataGridRowCell"]')
           .at(0)
-          .find('.euiDataGridRowCell__truncate')
+          .find('.euiDataGridRowCell__content')
           .childAt(0)
           .text()
       ).toEqual(mockTimelineData[0].ecs.timestamp);

diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.tsx b/x-pack/packages/security-solution/data_table/components/data_table/index.tsx
@@ -118,11 +118,11 @@ const EuiDataGridContainer = styled.div<{ hideLastPage: boolean }>`
       ${({ hideLastPage }) => `${hideLastPage ? 'display:none' : ''}`};
     }
   }
-  div .euiDataGridRowCell__contentByHeight {
-    height: auto;
-    align-self: center;
+  div .euiDataGridRowCell__contentWrapper {
+    display: flex;
+    align-items: center;
   }
-  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__contentByHeight {
+  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__content {
     flex-grow: 0;
     width: 100%;
   }

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts
@@ -46,14 +46,15 @@ export const useStyles = () => {
     & .euiDataGridRowCell {
       font-size: ${euiTheme.size.m};
     }
-    & .euiDataGridRowCell__expandActions > [data-test-subj='euiDataGridCellExpandButton'] {
+    & .euiDataGridRowCell__actions > [data-test-subj='euiDataGridCellExpandButton'] {
       display: none;
     }
-    & .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+    & .euiDataGridRowCell__actions--overlay {
       padding: 0;
     }
 
-    & .euiDataGridRowCell__expandFlex {
+    & .euiDataGridRowCell__contentWrapper {
+      display: flex;
       align-items: center;
     }
     & .euiDataGridRowCell.euiDataGridRowCell--numeric {

diff --git a/x-pack/plugins/osquery/cypress/tasks/integrations.ts b/x-pack/plugins/osquery/cypress/tasks/integrations.ts
@@ -13,6 +13,7 @@ import {
   CONFIRM_MODAL_BTN_SEL,
   CREATE_PACKAGE_POLICY_SAVE_BTN,
   DATA_COLLECTION_SETUP_STEP,
+  DATE_PICKER_ABSOLUTE_TAB,
   DATE_PICKER_ABSOLUTE_TAB_SEL,
   TOAST_CLOSE_BTN,
   TOAST_CLOSE_BTN_SEL,
@@ -98,7 +99,7 @@ export function closeModalIfVisible() {
 export function closeDateTabIfVisible() {
   cy.get('body').then(($body) => {
     if ($body.find(DATE_PICKER_ABSOLUTE_TAB_SEL).length) {
-      cy.getBySel(DATE_PICKER_ABSOLUTE_TAB_SEL).clickOutside();
+      cy.getBySel(DATE_PICKER_ABSOLUTE_TAB).clickOutside();
     }
   });
 }

diff --git a/x-pack/plugins/security/server/prompt_page.tsx b/x-pack/plugins/security/server/prompt_page.tsx
@@ -6,7 +6,7 @@
  */
 
 import 'css.escape'; // Polyfill required to render `EuiPageTemplate` server-side
-import { EuiPageTemplate, EuiProvider } from '@elastic/eui';
+import { EuiPageTemplate, EuiProvider, euiStylisPrefixer } from '@elastic/eui';
 // @ts-expect-error no definitions in component folder
 import { icon as EuiIconWarning } from '@elastic/eui/lib/components/icon/assets/warning';
 // @ts-expect-error no definitions in component folder
@@ -32,7 +32,7 @@ appendIconComponentCache({
   warning: EuiIconWarning,
 });
 
-const emotionCache = createCache({ key: 'eui' });
+const emotionCache = createCache({ key: 'eui', stylisPlugins: [euiStylisPrefixer] });
 
 interface Props {
   buildNumber: number;

diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
@@ -71,11 +71,11 @@ const EuiDataGridContainer = styled.div<GridContainerProps>`
       }};
     }
   }
-  div .euiDataGridRowCell__contentByHeight {
-    height: auto;
-    align-self: center;
+  div .euiDataGridRowCell__contentWrapper {
+    display: flex;
+    align-items: center;
   }
-  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__contentByHeight {
+  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__content {
     flex-grow: 0;
     width: 100%;
   }

diff --git a/...tions/actions_connectors_list/components/actions_connectors_event_log_list_table.test.tsx b/...tions/actions_connectors_list/components/actions_connectors_event_log_list_table.test.tsx
@@ -93,25 +93,22 @@ describe('actions_connectors_event_log_list_table', () => {
     expect(wrapper.find('[data-test-subj="connectorEventLogListProgressBar"]')).toEqual({});
     expect(
       wrapper
-        .find('[data-gridcell-column-id="timestamp"] .euiDataGridRowCell__truncate')
+        .find('[data-gridcell-column-id="timestamp"] .euiDataGridRowCell__content')
         .first()
         .text()
     ).toBeTruthy();
     expect(
-      wrapper
-        .find('[data-gridcell-column-id="status"] .euiDataGridRowCell__truncate')
-        .first()
-        .text()
+      wrapper.find('[data-gridcell-column-id="status"] .euiDataGridRowCell__content').first().text()
     ).toEqual('succeeded');
     expect(
       wrapper
-        .find('[data-gridcell-column-id="connector_name"] .euiDataGridRowCell__truncate')
+        .find('[data-gridcell-column-id="connector_name"] .euiDataGridRowCell__content')
         .first()
         .text()
     ).toEqual('test connector');
     expect(
       wrapper
-        .find('[data-gridcell-column-id="message"] .euiDataGridRowCell__truncate')
+        .find('[data-gridcell-column-id="message"] .euiDataGridRowCell__content')
         .first()
         .text()
     ).toEqual('action executed: .server-log:86020b10-9b3b-11ed-8422-2f5a388a317d: test');

diff --git a/x-pack/test/examples/triggers_actions_ui_examples/alerts_table.ts b/x-pack/test/examples/triggers_actions_ui_examples/alerts_table.ts
@@ -169,18 +169,18 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         const $ = await euiDataGridRow.parseDomContent();
         rows.push({
           status: $.findTestSubjects('dataGridRowCell')
-            .find('[data-gridcell-column-id="event.action"] .euiDataGridRowCell__truncate')
+            .find('[data-gridcell-column-id="event.action"] .euiDataGridRowCell__content')
             .text(),
           lastUpdated: $.findTestSubjects('dataGridRowCell')
-            .find('[data-gridcell-column-id="@timestamp"] .euiDataGridRowCell__truncate')
+            .find('[data-gridcell-column-id="@timestamp"] .euiDataGridRowCell__content')
             .text(),
           duration: $.findTestSubjects('dataGridRowCell')
             .find(
-              '[data-gridcell-column-id="kibana.alert.duration.us"] .euiDataGridRowCell__truncate'
+              '[data-gridcell-column-id="kibana.alert.duration.us"] [data-datagrid-cellcontent]'
             )
             .text(),
           reason: $.findTestSubjects('dataGridRowCell')
-            .find('[data-gridcell-column-id="kibana.alert.reason"] .euiDataGridRowCell__truncate')
+            .find('[data-gridcell-column-id="kibana.alert.reason"] [data-datagrid-cellcontent]')
             .text(),
         });
       }

diff --git a/yarn.lock b/yarn.lock
@@ -1706,10 +1706,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@89.0.0":
-  version "89.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-89.0.0.tgz#673c1aeecd875ea2ad51dffade4ffea2d3cea4c0"
-  integrity sha512-wE3GaGjPVGHNeuCsJ3lXwDlbTeXPQvz69I00EWkHyoJoKDXk/2i7sRGIXYlTNWZ9ppwloBCPyPAKW71jiN8JBQ==
+"@elastic/eui@89.1.0":
+  version "89.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-89.1.0.tgz#25aa9a59515102221286780ab559c3cff91a3753"
+  integrity sha512-vvSfP+kMUeQlfmxnRZhdX7r3rxpmjc3PkWC0KrMTf+NlXEao1imvlMHJNIJ58z5YjUBSMN5jtXkNkjHGI86KDw==
   dependencies:
     "@hello-pangea/dnd" "^16.3.0"
     "@types/lodash" "^4.14.198"