[8.11] [Unified Data Table] Fix elements with defined z-index overlapping grid in full screen mode (#168545) (#169949)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[Unified Data Table] Fix elements with defined z-index overlapping
grid in full screen mode
(#168545)](https://github.com/elastic/kibana/pull/168545)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Davis
McPhee","email":"davis.mcphee@elastic.co"},"sourceCommit":{"committedDate":"2023-10-26T01:34:32Z","message":"[Unified
Data Table] Fix elements with defined z-index overlapping grid in full
screen mode (#168545)\n\n## Summary\r\n\r\nThis PR fixes an issue where
elements with defined z-index values\r\noverlap the grid in full screen
mode.\r\n\r\nBefore:\r\n<img width=\"2007\"
alt=\"before\"\r\nsrc=\"49f5ad02-5c23-4e63-bf15-959ce1b822f0\">\r\n\r\nAfter:\r\n<img
width=\"2007\"
alt=\"after\"\r\nsrc=\"46d5ce0a-533a-4b7e-b9d0-be9ec75f2018\">\r\n\r\nFlaky
test run:\r\n-
x100:\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3453\r\n\r\nFixes
#168331.\r\n\r\n### Checklist\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [x] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR is usable by keyboard only (learn more\r\nabout
[keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n-
[ ] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"cc8e3e4f2e963e99dbcabc2258c0576d8a37a0e6","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:DataDiscovery","v8.11.0","Feature:UnifiedDataTable","v8.12.0"],"number":168545,"url":"https://github.com/elastic/kibana/pull/168545","mergeCommit":{"message":"[Unified
Data Table] Fix elements with defined z-index overlapping grid in full
screen mode (#168545)\n\n## Summary\r\n\r\nThis PR fixes an issue where
elements with defined z-index values\r\noverlap the grid in full screen
mode.\r\n\r\nBefore:\r\n<img width=\"2007\"
alt=\"before\"\r\nsrc=\"49f5ad02-5c23-4e63-bf15-959ce1b822f0\">\r\n\r\nAfter:\r\n<img
width=\"2007\"
alt=\"after\"\r\nsrc=\"46d5ce0a-533a-4b7e-b9d0-be9ec75f2018\">\r\n\r\nFlaky
test run:\r\n-
x100:\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3453\r\n\r\nFixes
#168331.\r\n\r\n### Checklist\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [x] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR is usable by keyboard only (learn more\r\nabout
[keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n-
[ ] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"cc8e3e4f2e963e99dbcabc2258c0576d8a37a0e6"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/168545","number":168545,"mergeCommit":{"message":"[Unified
Data Table] Fix elements with defined z-index overlapping grid in full
screen mode (#168545)\n\n## Summary\r\n\r\nThis PR fixes an issue where
elements with defined z-index values\r\noverlap the grid in full screen
mode.\r\n\r\nBefore:\r\n<img width=\"2007\"
alt=\"before\"\r\nsrc=\"49f5ad02-5c23-4e63-bf15-959ce1b822f0\">\r\n\r\nAfter:\r\n<img
width=\"2007\"
alt=\"after\"\r\nsrc=\"46d5ce0a-533a-4b7e-b9d0-be9ec75f2018\">\r\n\r\nFlaky
test run:\r\n-
x100:\r\nhttps://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3453\r\n\r\nFixes
#168331.\r\n\r\n### Checklist\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [x] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR is usable by keyboard only (learn more\r\nabout
[keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n-
[ ] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"cc8e3e4f2e963e99dbcabc2258c0576d8a37a0e6"}}]}]
BACKPORT-->

packages/kbn-unified-data-table/src/components/data_table.scss

@@ -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;
+}

test/functional/apps/discover/group2/_data_grid.ts

@@ -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']);
@@ -46,5 +48,42 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.unifiedFieldList.clickFieldListItemRemove('agent');
       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);
+      });
+    });
   });
 }