From 2f8825d68af0336aaa764848eeb6a0c346ef8a18 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Wed, 24 Jan 2024 13:29:43 -0800 Subject: [PATCH] Upgrade EUI to v92.1.1 (#174955) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `v92.0.0-backport.0`⏩ `v92.1.1` --- ## [`v92.1.1`](https://github.com/elastic/eui/releases/v92.1.1) **Bug fixes** - Minor `EuiDataGrid` cell performance fixes ([#7465](https://github.com/elastic/eui/pull/7465)) ## [`v92.1.0`](https://github.com/elastic/eui/releases/v92.1.0) - Updated `EuiResizableButton` to allow customizing the `indicator` style with either `handle` (default) or `border` ([#7455](https://github.com/elastic/eui/pull/7455)) - Enhanced `EuiResizableContainer` to preserve the drag/resize event when the user's mouse leaves the parent container and re-enters ([#7456](https://github.com/elastic/eui/pull/7456)) **Bug fixes** - Fixed an `EuiTreeView` JSX Typescript error ([#7452](https://github.com/elastic/eui/pull/7452)) - Fixed a color console warning being generated by disabled `EuiStep`s ([#7454](https://github.com/elastic/eui/pull/7454)) **Accessibility** - `EuiDataGrid`'s keyboard/screenreader experience has been tweaked to be more consistent for varying complex data: ([#7448](https://github.com/elastic/eui/pull/7448)) - Headers are now always navigable by arrow key, regardless of whether the header cells contain interactive content - Non-expandable cells containing any amount of interactive content now must be entered via Enter or F2 keypress - Expandable cells continue to be toggled via Enter or F2 keypress - `EuiDataGrid` now provides a direct screen reader hint for Enter key behavior for expandable & interactive cells ([#7448](https://github.com/elastic/eui/pull/7448)) --- package.json | 2 +- .../__snapshots__/i18n_service.test.tsx.snap | 2 + .../src/i18n_eui_mapping.tsx | 8 ++ .../src/panels_resizable.tsx | 107 +++++++++--------- src/dev/license_checker/config.ts | 2 +- .../vis_default_editor/public/_default.scss | 4 + .../public/default_editor.tsx | 1 + .../datatable/components/table_basic.test.tsx | 8 +- .../osquery/cypress/e2e/all/live_query.cy.ts | 7 +- .../osquery/cypress/tasks/saved_queries.ts | 21 ++-- .../cypress/tasks/alerts.ts | 5 +- .../cypress/tasks/asset_criticality/common.ts | 4 +- yarn.lock | 8 +- 13 files changed, 96 insertions(+), 83 deletions(-) diff --git a/package.json b/package.json index 410dffca4b7ef..f67fead47293d 100644 --- 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.1", - "@elastic/eui": "92.0.0-backport.0", + "@elastic/eui": "92.1.1", "@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 index c1f33ec2f18c6..78bb5d5d7ea71 100644 --- 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 @@ -83,6 +83,8 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiDataGrid.ariaLabel": [Function], "euiDataGrid.ariaLabelledBy": [Function], "euiDataGrid.screenReaderNotice": "Cell contains interactive content.", + "euiDataGridCell.expansionEnterPrompt": "Press the Enter key to expand this cell.", + "euiDataGridCell.focusTrapEnterPrompt": "Press the Enter key to interact with this cell's contents.", "euiDataGridCell.position": [Function], "euiDataGridCellActions.expandButtonTitle": "Click or hit enter to interact with cell content", "euiDataGridHeaderCell.actionsPopoverScreenReaderText": "To navigate through the list of column actions, press the Tab or Up and Down arrow keys.", 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 index 6f6a29e1a5255..8710a8640d747 100644 --- 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 @@ -523,6 +523,14 @@ export const getEuiContextMapping = (): EuiTokensObject => { defaultMessage: '{columnId}, column {col}, row {row}', values: { columnId, row, col }, }), + 'euiDataGridCell.expansionEnterPrompt': i18n.translate( + 'core.euiDataGridCell.expansionEnterPrompt', + { defaultMessage: 'Press the Enter key to expand this cell.' } + ), + 'euiDataGridCell.focusTrapEnterPrompt': i18n.translate( + 'core.euiDataGridCell.focusTrapEnterPrompt', + { defaultMessage: "Press the Enter key to interact with this cell's contents." } + ), 'euiDataGridCellActions.expandButtonTitle': i18n.translate( 'core.euiDataGridCellActions.expandButtonTitle', { diff --git a/packages/kbn-resizable-layout/src/panels_resizable.tsx b/packages/kbn-resizable-layout/src/panels_resizable.tsx index 300c9130b8100..6c9bd12674b20 100644 --- a/packages/kbn-resizable-layout/src/panels_resizable.tsx +++ b/packages/kbn-resizable-layout/src/panels_resizable.tsx @@ -6,12 +6,19 @@ * Side Public License, v 1. */ -import { EuiResizableContainer, useGeneratedHtmlId, useResizeObserver } from '@elastic/eui'; +import { + EuiResizableContainer, + useGeneratedHtmlId, + useResizeObserver, + useEuiTheme, + mathWithUnits, +} from '@elastic/eui'; import type { ResizeTrigger } from '@elastic/eui/src/components/resizable_container/types'; import { css } from '@emotion/react'; import { isEqual, round } from 'lodash'; import type { ReactElement } from 'react'; import React, { useCallback, useEffect, useState } from 'react'; +import useLatest from 'react-use/lib/useLatest'; import { ResizableLayoutDirection } from '../types'; import { getContainerSize, percentToPixels, pixelsToPercent } from './utils'; @@ -47,41 +54,30 @@ export const PanelsResizable = ({ onFixedPanelSizeChange?: (fixedPanelSize: number) => void; setPanelSizes: (panelSizes: { fixedPanelSizePct: number; flexPanelSizePct: number }) => void; }) => { + const { euiTheme } = useEuiTheme(); const fixedPanelId = useGeneratedHtmlId({ prefix: 'fixedPanel' }); const { height: containerHeight, width: containerWidth } = useResizeObserver(container); const containerSize = getContainerSize(direction, containerWidth, containerHeight); - // EuiResizableContainer doesn't work properly when used with react-reverse-portal and - // will cancel the resize. To work around this we keep track of when resizes start and - // end to toggle the rendering of a transparent overlay which prevents the cancellation. - // EUI issue: https://github.com/elastic/eui/issues/6199 - const [resizeWithPortalsHackIsResizing, setResizeWithPortalsHackIsResizing] = useState(false); - const enableResizeWithPortalsHack = useCallback( - () => setResizeWithPortalsHackIsResizing(true), - [] - ); - const disableResizeWithPortalsHack = useCallback( - () => setResizeWithPortalsHackIsResizing(false), - [] - ); - const baseButtonCss = css` - background-color: transparent !important; - gap: 0 !important; - - &:not(:hover):not(:focus) { - &:before, - &:after { - width: 0; - } - } + // The resize overlay makes it so that other mouse events (e.g. tooltip hovers, etc) + // don't occur when mouse dragging + const [isResizing, setIsResizing] = useState(false); + + // Align the resizable button border to overlap exactly over existing panel/layout borders + const buttonBorderCss = css` + position: relative; + inset-${direction === 'horizontal' ? 'inline-start' : 'block-end'}: -${mathWithUnits( + euiTheme.border.width.thin, + (x) => x / 2 + )}; `; const defaultButtonCss = css` z-index: 3; `; - const resizeWithPortalsHackButtonCss = css` + const resizingButtonCss = css` z-index: 4; `; - const resizeWithPortalsHackOverlayCss = css` + const resizingOverlayCss = css` position: absolute; top: 0; left: 0; @@ -158,34 +154,35 @@ export const PanelsResizable = ({ setPanelSizes, ]); - const onResizeStart = useCallback( - (trigger: ResizeTrigger) => { - if (trigger !== 'pointer') { - return; - } - - enableResizeWithPortalsHack(); - }, - [enableResizeWithPortalsHack] - ); - - const onResizeEnd = useCallback(() => { - if (!resizeWithPortalsHackIsResizing) { + const onResizeStart = useCallback((trigger: ResizeTrigger) => { + if (trigger !== 'pointer') { return; } + setIsResizing(true); + }, []); + + // EUI will call an outdated version of this callback when the resize ends, + // so we need to make sure on our end that the latest version is called. + const onResizeEndStable = useLatest(() => { + setIsResizing((_isResizing) => { + // We don't want the resize button to retain focus after the resize is complete, + // but EuiResizableContainer will force focus it onClick. To work around this we + // use setTimeout to wait until after onClick has been called before blurring. + if (_isResizing) { + if (document.activeElement instanceof HTMLElement) { + const button = document.activeElement; + setTimeout(() => { + button.blur(); + }); + } + } + return false; + }); + }); - // We don't want the resize button to retain focus after the resize is complete, - // but EuiResizableContainer will force focus it onClick. To work around this we - // use setTimeout to wait until after onClick has been called before blurring. - if (document.activeElement instanceof HTMLElement) { - const button = document.activeElement; - setTimeout(() => { - button.blur(); - }); - } - - disableResizeWithPortalsHack(); - }, [disableResizeWithPortalsHack, resizeWithPortalsHackIsResizing]); + const onResizeEnd = useCallback(() => { + onResizeEndStable.current(); + }, [onResizeEndStable]); // Don't render EuiResizableContainer until we have have valid // panel sizes or it can cause the resize functionality to break. @@ -218,10 +215,8 @@ export const PanelsResizable = ({ {flexPanel} - {resizeWithPortalsHackIsResizing ?
: <>} + {isResizing ?
: <>} )} diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 2846992840a59..e171747874c2e 100644 --- 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.1': ['Elastic License 2.0'], - '@elastic/eui@92.0.0-backport.0': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@92.1.1': ['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 '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause) diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index 56c6a0f0f63f6..2949712f6347e 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -32,6 +32,10 @@ * Resizer */ +.visEditor__resizer { + height: auto; +} + .visEditor__resizer-isHidden { display: none; } diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index fdfcf5bd7d7cc..2f6757a96d252 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -109,6 +109,7 @@ function DefaultEditor({ diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx index d99f62fcb9219..7e7a18a94ac9c 100644 --- a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx +++ b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx @@ -207,7 +207,7 @@ describe('DatatableComponent', () => { /> ); - wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('focus'); + wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('mouseEnter'); await waitForWrapperUpdate(wrapper); @@ -248,7 +248,7 @@ describe('DatatableComponent', () => { /> ); - wrapper.find('[data-test-subj="dataGridRowCell"]').at(1).simulate('focus'); + wrapper.find('[data-test-subj="dataGridRowCell"]').at(1).simulate('mouseEnter'); await waitForWrapperUpdate(wrapper); @@ -324,7 +324,7 @@ describe('DatatableComponent', () => { /> ); - wrapper.find('[data-test-subj="dataGridRowCell"]').at(0).simulate('focus'); + wrapper.find('[data-test-subj="dataGridRowCell"]').at(0).simulate('mouseEnter'); await waitForWrapperUpdate(wrapper); @@ -365,7 +365,7 @@ describe('DatatableComponent', () => { /> ); - wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('focus'); + wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('mouseEnter'); await waitForWrapperUpdate(wrapper); diff --git a/x-pack/plugins/osquery/cypress/e2e/all/live_query.cy.ts b/x-pack/plugins/osquery/cypress/e2e/all/live_query.cy.ts index 04a3a24fbabb5..8351e9df4728c 100644 --- a/x-pack/plugins/osquery/cypress/e2e/all/live_query.cy.ts +++ b/x-pack/plugins/osquery/cypress/e2e/all/live_query.cy.ts @@ -58,10 +58,9 @@ describe('ALL - Live Query', { tags: ['@ess', '@serverless'] }, () => { expect(interception.response?.body.data.queries[0]).to.have.property('timeout', 890); }); checkResults(); - cy.get('[data-gridcell-column-index="0"][data-gridcell-row-index="0"]').should('exist'); - cy.get( - '[data-gridcell-column-index="0"][data-gridcell-row-index="0"] [data-datagrid-interactable="true"]' - ).click(); + const firstCell = '[data-gridcell-column-index="0"][data-gridcell-row-index="0"]'; + cy.get(firstCell).should('exist'); + cy.get(firstCell).find('[data-euigrid-tab-managed="true"]').click(); cy.url().should('include', 'app/fleet/agents/'); }); diff --git a/x-pack/plugins/osquery/cypress/tasks/saved_queries.ts b/x-pack/plugins/osquery/cypress/tasks/saved_queries.ts index 0ff06beed1d79..568649572ae99 100644 --- a/x-pack/plugins/osquery/cypress/tasks/saved_queries.ts +++ b/x-pack/plugins/osquery/cypress/tasks/saved_queries.ts @@ -52,15 +52,17 @@ export const getSavedQueriesComplexTest = () => // hidden columns cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns35'); - cy.getBySel('dataGridHeaderCell-osquery.cmdline').click(); - cy.contains(/Hide column$/).click(); - cy.getBySel('dataGridHeaderCell-osquery.cwd').click(); - - cy.contains(/Hide column$/).click(); - cy.getBySel('dataGridHeaderCell-osquery.disk_bytes_written.number').click(); - - cy.contains(/Hide column$/).click(); + cy.getBySel('dataGridColumnSelectorButton').click(); + cy.get('[data-popover-open="true"]').should('be.visible'); + cy.getBySel('dataGridColumnSelectorToggleColumnVisibility-osquery.cmdline').click(); + cy.getBySel('dataGridColumnSelectorToggleColumnVisibility-osquery.cwd').click(); + cy.getBySel( + 'dataGridColumnSelectorToggleColumnVisibility-osquery.disk_bytes_written.number' + ).click(); + cy.getBySel('dataGridColumnSelectorButton').click(); + cy.get('[data-popover-open="true"]').should('not.exist'); cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns32/35'); + // change pagination cy.getBySel('pagination-button-next').click().wait(500).click(); cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns32/35'); @@ -72,8 +74,7 @@ export const getSavedQueriesComplexTest = () => cy.getBySel(RESULTS_TABLE_BUTTON).click(); // sorting - cy.getBySel('dataGridHeaderCell-osquery.egid').click(); - + cy.getBySel('dataGridHeaderCellActionButton-osquery.egid').click({ force: true }); cy.contains(/Sort A-Z$/).click(); cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns32/35'); cy.getBySel(RESULTS_TABLE_BUTTON).trigger('mouseover'); diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts b/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts index d75d94ed519d6..dfedc68af8985 100644 --- a/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts +++ b/x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts @@ -143,8 +143,9 @@ export const expandFirstAlertActions = () => { }; export const expandFirstAlert = () => { - cy.get(EXPAND_ALERT_BTN).should('be.visible'); - cy.get(EXPAND_ALERT_BTN).first().click(); + cy.get(EXPAND_ALERT_BTN).first().should('be.visible'); + // Cypress is flaky on clicking this button despite production not having that issue + cy.get(EXPAND_ALERT_BTN).first().trigger('click'); }; export const hideMessageTooltip = () => { diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/asset_criticality/common.ts b/x-pack/test/security_solution_cypress/cypress/tasks/asset_criticality/common.ts index 515bd4061365a..f867efc80f8b3 100644 --- a/x-pack/test/security_solution_cypress/cypress/tasks/asset_criticality/common.ts +++ b/x-pack/test/security_solution_cypress/cypress/tasks/asset_criticality/common.ts @@ -21,7 +21,9 @@ import { scrollAlertTableColumnIntoView } from '../alerts'; * Find the first alert row in the alerts table then click on the host name to open the flyout */ export const expandFirstAlertHostFlyout = () => { - cy.get(OPEN_HOST_FLYOUT_BUTTON).first().click(); + // Cypress is flaky on clicking this button despite production not having that issue + // eslint-disable-next-line cypress/no-force + cy.get(OPEN_HOST_FLYOUT_BUTTON).first().click({ force: true }); }; /** diff --git a/yarn.lock b/yarn.lock index 50ea6503d5906..1ef4d6d6e968f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1740,10 +1740,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@92.0.0-backport.0": - version "92.0.0-backport.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-92.0.0-backport.0.tgz#201757bef89141dad6f8f719976fa2a0b52be86a" - integrity sha512-ZliSke0YehCbCuHvYkY0BIMg32QeqTMZy+qgGYsh+Bp0UZ4CZn9j5e7LWavfal3+t8HMFCHTk0RUFFXrcepplA== +"@elastic/eui@92.1.1": + version "92.1.1" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-92.1.1.tgz#f5713bfa12733a2c62df365e37f7983a7c08411e" + integrity sha512-kjUP+IewVcoJ59e84lHwtdy5OvGNSmlHvzn5uUmGTKnBGOxoYv5K9pyGujVWpxSCG9MNr3anMsNE7EX6usj37A== dependencies: "@hello-pangea/dnd" "^16.3.0" "@types/lodash" "^4.14.198"