mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
Upgrade EUI to v92.1.1 (#174955)
`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))
This commit is contained in:
Cee Chen
GitHub
parent
0dd0664261
commit
2f8825d68a
13 changed files with 94 additions and 81 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// 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);
|
||||
|
||||
&:not(:hover):not(:focus) {
|
||||
&:before,
|
||||
&:after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
// 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);
|
||||
}, []);
|
||||
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
// 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;
|
||||
});
|
||||
});
|
||||
|
||||
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 = ({
|
|||
</EuiResizablePanel>
|
||||
<EuiResizableButton
|
||||
className={resizeButtonClassName}
|
||||
css={[
|
||||
baseButtonCss,
|
||||
resizeWithPortalsHackIsResizing ? resizeWithPortalsHackButtonCss : defaultButtonCss,
|
||||
]}
|
||||
indicator="border"
|
||||
css={[buttonBorderCss, isResizing ? resizingButtonCss : defaultButtonCss]}
|
||||
data-test-subj={`${dataTestSubj}ResizableButton`}
|
||||
/>
|
||||
<EuiResizablePanel
|
||||
|
|
@ -232,7 +227,7 @@ export const PanelsResizable = ({
|
|||
>
|
||||
{flexPanel}
|
||||
</EuiResizablePanel>
|
||||
{resizeWithPortalsHackIsResizing ? <div css={resizeWithPortalsHackOverlayCss} /> : <></>}
|
||||
{isResizing ? <div css={resizingOverlayCss} /> : <></>}
|
||||
</>
|
||||
)}
|
||||
</EuiResizableContainer>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@
|
|||
* Resizer
|
||||
*/
|
||||
|
||||
.visEditor__resizer {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.visEditor__resizer-isHidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,6 +109,7 @@ function DefaultEditor({
|
|||
</EuiResizablePanel>
|
||||
|
||||
<EuiResizableButton
|
||||
alignIndicator="start"
|
||||
className={`visEditor__resizer ${isCollapsed ? 'visEditor__resizer-isHidden' : ''}`}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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/');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue