mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Unified Data Table] Fix elements with defined z-index overlapping grid in full screen mode (#168545)
## Summary This PR fixes an issue where elements with defined z-index values overlap the grid in full screen mode. Before: <img width="2007" alt="before" src="49f5ad02
-5c23-4e63-bf15-959ce1b822f0"> After: <img width="2007" alt="after" src="46d5ce0a
-533a-4b7e-b9d0-be9ec75f2018"> Flaky test run: - x100: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3453 Fixes #168331. ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This commit is contained in:
parent
a7b6064f82
commit
cc8e3e4f2e
2 changed files with 48 additions and 0 deletions
|
@ -161,3 +161,12 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure full screen data grids are not covered by elements with a z-index
|
||||
.euiDataGrid__restrictBody *:not(
|
||||
.euiDataGrid--fullScreen,
|
||||
.euiDataGrid--fullScreen *,
|
||||
[data-euiportal='true'],
|
||||
[data-euiportal='true'] *) {
|
||||
z-index: unset !important;
|
||||
}
|
|
@ -17,6 +17,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
|
|||
const defaultSettings = { defaultIndex: 'logstash-*' };
|
||||
const testSubjects = getService('testSubjects');
|
||||
const security = getService('security');
|
||||
const retry = getService('retry');
|
||||
const browser = getService('browser');
|
||||
|
||||
before(async function () {
|
||||
await security.testUser.setRoles(['kibana_admin', 'test_logstash_reader']);
|
||||
|
@ -47,6 +49,43 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
|
|||
expect(await getTitles()).to.be('@timestamp Document');
|
||||
});
|
||||
|
||||
const isVisible = async (selector: string) => {
|
||||
const element = await testSubjects.find(selector);
|
||||
const { x, y, width, height } = await element.getPosition();
|
||||
return browser.execute(
|
||||
(innerSelector, innerX, innerY) => {
|
||||
let currentElement = document.elementFromPoint(innerX, innerY);
|
||||
while (currentElement) {
|
||||
if (currentElement.matches(`[data-test-subj="${innerSelector}"]`)) {
|
||||
return true;
|
||||
}
|
||||
currentElement = currentElement.parentElement;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
selector,
|
||||
x + width / 2,
|
||||
y + height / 2
|
||||
);
|
||||
};
|
||||
|
||||
it('should hide elements beneath the table when in full screen mode regardless of their z-index', async () => {
|
||||
await retry.try(async () => {
|
||||
expect(await isVisible('unifiedHistogramQueryHits')).to.be(true);
|
||||
expect(await isVisible('unifiedHistogramResizableButton')).to.be(true);
|
||||
});
|
||||
await testSubjects.click('dataGridFullScreenButton');
|
||||
await retry.try(async () => {
|
||||
expect(await isVisible('unifiedHistogramQueryHits')).to.be(false);
|
||||
expect(await isVisible('unifiedHistogramResizableButton')).to.be(false);
|
||||
});
|
||||
await testSubjects.click('dataGridFullScreenButton');
|
||||
await retry.try(async () => {
|
||||
expect(await isVisible('unifiedHistogramQueryHits')).to.be(true);
|
||||
expect(await isVisible('unifiedHistogramResizableButton')).to.be(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('should show the the grid toolbar', async () => {
|
||||
await testSubjects.existOrFail('dscGridToolbar');
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue