[8.13] [Unified Data Table] Update full screen handling to fix z-index issues in Kibana (#178788) (#179019)

# Backport This will backport the following commits from `main` to `8.13`: - [[Unified Data Table] Update full screen handling to fix z-index issues in Kibana (#178788)](https://github.com/elastic/kibana/pull/178788)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
2025-04-24 17:59:23 -04:00 · 2024-03-19 23:27:06 -04:00 · 2024-03-19 23:27:06 -04:00 · 24e7c9ab38
commit 24e7c9ab38
parent 5814aa95db
4 changed files with 108 additions and 1 deletions
--- a/packages/kbn-unified-data-table/src/components/data_table.scss
+++ b/packages/kbn-unified-data-table/src/components/data_table.scss
@ -172,7 +172,7 @@
 }

 // Ensure full screen data grids are not covered by elements with a z-index
-.euiDataGrid__restrictBody *:not(
+.unifiedDataTable__fullScreen *:not(
 .euiDataGrid--fullScreen,
 .euiDataGrid--fullScreen *,
 [data-euiportal='true'],
--- a/packages/kbn-unified-data-table/src/components/data_table.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.tsx
@ -78,6 +78,7 @@ import {
 import { UnifiedDataTableFooter } from './data_table_footer';
 import { UnifiedDataTableAdditionalDisplaySettings } from './data_table_additional_display_settings';
 import { useRowHeight } from '../hooks/use_row_height';
+import { useFullScreenWatcher } from '../hooks/use_full_screen_watcher';

 export interface UnifiedDataTableRenderCustomToolbarProps {
  toolbarProps: EuiDataGridCustomToolbarProps;
@ -927,6 +928,8 @@ export const UnifiedDataTable = ({
    rowLineHeight: rowLineHeightOverride,
  });

+  const { dataGridId, setDataGridWrapper } = useFullScreenWatcher();
+
  const isRenderComplete = loadingState !== DataLoadingState.loading;

  if (!rowCount && loadingState === DataLoadingState.loading) {
@ -967,6 +970,7 @@ export const UnifiedDataTable = ({
    <UnifiedDataTableContext.Provider value={unifiedDataTableContextValue}>
      <span className="unifiedDataTable__inner">
        <div
+          ref={setDataGridWrapper}
          data-test-subj="discoverDocTable"
          data-render-complete={isRenderComplete}
          data-shared-item=""
@ -976,6 +980,7 @@ export const UnifiedDataTable = ({
          className={classnames(className, 'unifiedDataTable__table')}
        >
          <EuiDataGridMemoized
+            id={dataGridId}
            aria-describedby={randomId}
            aria-labelledby={ariaLabelledBy}
            columns={euiGridColumns}
--- a/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.test.ts
+++ b/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.test.ts
@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { act, renderHook } from '@testing-library/react-hooks';
+import {
+  EUI_DATA_GRID_FULL_SCREEN_CLASS,
+  UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS,
+  useFullScreenWatcher,
+} from './use_full_screen_watcher';
+
+describe('useFullScreenWatcher', () => {
+  it(`should add and remove ${UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS} class from the body when toggling full screen`, async () => {
+    const { result } = renderHook(() => useFullScreenWatcher());
+    const dataGridWrapper = document.createElement('div');
+    document.body.appendChild(dataGridWrapper);
+    act(() => {
+      result.current.setDataGridWrapper(dataGridWrapper);
+    });
+    const dataGrid = document.createElement('div');
+    dataGrid.id = result.current.dataGridId;
+    dataGridWrapper.appendChild(dataGrid);
+    await nextTick();
+    expect(document.body).not.toHaveClass(UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS);
+    dataGrid.classList.add(EUI_DATA_GRID_FULL_SCREEN_CLASS);
+    await nextTick();
+    expect(document.body).toHaveClass(UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS);
+    dataGrid.classList.remove(EUI_DATA_GRID_FULL_SCREEN_CLASS);
+    await nextTick();
+    expect(document.body).not.toHaveClass(UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS);
+  });
+});
+
+const nextTick = () => {
+  return act(() => {
+    return new Promise((resolve) =>
+      requestAnimationFrame(() => {
+        resolve();
+      })
+    );
+  });
+};
--- a/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts
+++ b/packages/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts
@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useGeneratedHtmlId, useMutationObserver } from '@elastic/eui';
+import { useCallback, useState } from 'react';
+
+export const useFullScreenWatcher = () => {
+  const dataGridId = useGeneratedHtmlId({ prefix: 'unifiedDataTable' });
+  const [dataGridWrapper, setDataGridWrapper] = useState<HTMLElement | null>(null);
+  const [dataGrid, setDataGrid] = useState<HTMLElement | null>(null);
+
+  const checkForDataGrid = useCallback<MutationCallback>(
+    (_, observer) => {
+      const foundDataGrid = document.getElementById(dataGridId);
+
+      if (foundDataGrid) {
+        setDataGrid(foundDataGrid);
+        observer.disconnect();
+      }
+    },
+    [dataGridId]
+  );
+
+  const watchForFullScreen = useCallback<MutationCallback>(() => {
+    if (dataGrid) {
+      toggleFullScreen(dataGrid);
+    }
+  }, [dataGrid]);
+
+  useMutationObserver(dataGridWrapper, checkForDataGrid, { childList: true, subtree: true });
+
+  useMutationObserver(dataGrid, watchForFullScreen, {
+    attributes: true,
+    attributeFilter: ['class'],
+  });
+
+  return { dataGridId, setDataGridWrapper };
+};
+
+export const EUI_DATA_GRID_FULL_SCREEN_CLASS = 'euiDataGrid--fullScreen';
+export const UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS = 'unifiedDataTable__fullScreen';
+
+const toggleFullScreen = (dataGrid: HTMLElement) => {
+  const fullScreenClass = dataGrid.classList.contains(EUI_DATA_GRID_FULL_SCREEN_CLASS);
+
+  if (fullScreenClass) {
+    document.body.classList.add(UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS);
+  } else {
+    document.body.classList.remove(UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS);
+  }
+};