[EuiDataGrid] Fix grid height when exiting full screen mode (#5580)

* Track full screen grid height separately
- so grid height restores correctly after leaving full-screen mode

* Fix nested ternary eslint warning

src/components/datagrid/body/data_grid_body.test.tsx

@@ -42,6 +42,7 @@ describe('EuiDataGridBody', () => {
     schemaDetectors,
     popoverContents: providedPopoverContents,
     rowHeightUtils: mockRowHeightUtils,
+    isFullScreen: false,
     gridStyles: {},
     gridWidth: 300,
     gridRef: {

src/components/datagrid/body/data_grid_body.tsx

@@ -239,6 +239,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     onColumnResize,
     rowHeightsOptions,
     virtualizationOptions,
+    isFullScreen,
     gridStyles,
     gridWidth,
     gridRef,
@@ -424,6 +425,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     unconstrainedWidth: 0, // unable to determine this until the container's size is known
     wrapperDimensions,
     wrapperRef,
+    isFullScreen,
     rowCount,
   });
 

src/components/datagrid/data_grid.tsx

@@ -441,6 +441,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                 interactiveCellId={interactiveCellId}
                 rowHeightsOptions={rowHeightsOptions}
                 virtualizationOptions={virtualizationOptions || {}}
+                isFullScreen={isFullScreen}
                 gridStyles={gridStyles}
                 gridWidth={gridWidth}
                 gridRef={gridRef}

src/components/datagrid/data_grid_types.ts

@@ -345,6 +345,7 @@ export interface EuiDataGridBodyProps {
   onColumnResize?: EuiDataGridOnColumnResizeHandler;
   virtualizationOptions?: Partial<VariableSizeGridProps>;
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
+  isFullScreen: boolean;
   gridStyles: EuiDataGridStyle;
   gridWidth: number;
   gridRef: MutableRefObject<Grid | null>;

src/components/datagrid/utils/grid_height_width.ts

@@ -19,46 +19,58 @@ export const useFinalGridDimensions = ({
   unconstrainedWidth,
   wrapperDimensions,
   wrapperRef,
+  isFullScreen,
   rowCount,
 }: {
   unconstrainedHeight: number;
   unconstrainedWidth: number;
   wrapperDimensions: { width: number; height: number };
   wrapperRef: MutableRefObject<HTMLDivElement | null>;
+  isFullScreen: boolean;
   rowCount: number;
 }) => {
   // Used if the grid needs to scroll
   const [height, setHeight] = useState<number | undefined>(undefined);
   const [width, setWidth] = useState<number | undefined>(undefined);
+  // Tracking full screen height separately is necessary to correctly restore the grid back to non-full-screen height
+  const [fullScreenHeight, setFullScreenHeight] = useState(0);
 
   // Set the wrapper height on load, whenever the grid wrapper resizes, and whenever rowCount changes
   useEffect(() => {
     const boundingRect = wrapperRef.current!.getBoundingClientRect();
 
-    if (boundingRect.height !== unconstrainedHeight) {
-      setHeight(boundingRect.height);
+    if (isFullScreen) {
+      setFullScreenHeight(boundingRect.height);
+    } else {
+      if (boundingRect.height !== unconstrainedHeight) {
+        setHeight(boundingRect.height);
+      }
     }
     if (boundingRect.width !== unconstrainedWidth) {
       setWidth(boundingRect.width);
     }
   }, [
     // Effects that should cause recalculations
     rowCount,
+    isFullScreen,
     wrapperDimensions,
     // Dependencies
     wrapperRef,
     unconstrainedHeight,
     unconstrainedWidth,
   ]);
 
-  const finalHeight = IS_JEST_ENVIRONMENT
-    ? Number.MAX_SAFE_INTEGER
+  const finalHeight = isFullScreen
+    ? fullScreenHeight
     : height || unconstrainedHeight;
-  const finalWidth = IS_JEST_ENVIRONMENT
-    ? Number.MAX_SAFE_INTEGER
-    : width || unconstrainedWidth;
+  const finalWidth = width || unconstrainedWidth;
 
-  return { finalHeight, finalWidth };
+  return IS_JEST_ENVIRONMENT
+    ? {
+        finalHeight: Number.MAX_SAFE_INTEGER,
+        finalWidth: Number.MAX_SAFE_INTEGER,
+      }
+    : { finalHeight, finalWidth };
 };
 
 /**