[Dashboard][Collapsable Panels] Responsive layout

examples/grid_example/public/app.tsx

@@ -23,10 +23,12 @@ import {
   EuiPageTemplate,
   EuiProvider,
   EuiSpacer,
+  EuiButtonGroup,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { AppMountParameters } from '@kbn/core-application-browser';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
-import { GridLayout, GridLayoutData } from '@kbn/grid-layout';
+import { GridLayout, GridLayoutData, GridAccessMode } from '@kbn/grid-layout';
 import { i18n } from '@kbn/i18n';
 
 import { getPanelId } from './get_panel_id';
@@ -46,6 +48,8 @@ const DASHBOARD_GRID_COLUMN_COUNT = 48;
 export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
   const savedState = useRef<MockSerializedDashboardState>(getSerializedDashboardState());
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(false);
+  const [expandedPanelId, setExpandedPanelId] = useState<string | undefined>();
+  const [accessMode, setAccessMode] = useState<GridAccessMode>('EDIT');
   const [currentLayout, setCurrentLayout] = useState<GridLayoutData>(
     dashboardInputToGridLayout(savedState.current)
   );
@@ -72,6 +76,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
           <div style={{ padding: 8 }}>{id}</div>
           <EuiButtonEmpty
             onClick={() => {
+              setExpandedPanelId(undefined);
               mockDashboardApi.removePanel(id);
             }}
           >
@@ -81,6 +86,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
           </EuiButtonEmpty>
           <EuiButtonEmpty
             onClick={async () => {
+              setExpandedPanelId(undefined);
               const newPanelId = await getPanelId({
                 coreStart,
                 suggestion: id,
@@ -92,10 +98,25 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
               defaultMessage: 'Replace panel',
             })}
           </EuiButtonEmpty>
+          <EuiButtonIcon
+            iconType={expandedPanelId ? 'minimize' : 'expand'}
+            onClick={() => setExpandedPanelId((expandedId) => (expandedId ? undefined : id))}
+            aria-label={
+              expandedPanelId
+                ? i18n.translate('examples.gridExample.minimizePanel', {
+                    defaultMessage: 'Minimize panel {id}',
+                    values: { id },
+                  })
+                : i18n.translate('examples.gridExample.maximizePanel', {
+                    defaultMessage: 'Maximize panel {id}',
+                    values: { id },
+                  })
+            }
+          />
         </>
       );
     },
-    [coreStart, mockDashboardApi]
+    [coreStart, mockDashboardApi, setExpandedPanelId, expandedPanelId]
   );
 
   return (
@@ -107,7 +128,12 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             defaultMessage: 'Grid Layout Example',
           })}
         />
-        <EuiPageTemplate.Section color="subdued">
+        <EuiPageTemplate.Section
+          color="subdued"
+          contentProps={{
+            css: { display: 'flex', flexFlow: 'column nowrap', flexGrow: 1 },
+          }}
+        >
           <EuiCallOut
             title={i18n.translate('examples.gridExample.sessionStorageCallout', {
               defaultMessage:
@@ -132,6 +158,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             <EuiFlexItem grow={false}>
               <EuiButton
                 onClick={async () => {
+                  setExpandedPanelId(undefined);
                   const panelId = await getPanelId({
                     coreStart,
                     suggestion: uuidv4(),
@@ -146,6 +173,34 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiFlexGroup gutterSize="xs" alignItems="center">
+                <EuiFlexItem grow={false}>
+                  <EuiButtonGroup
+                    legend={i18n.translate('examples.gridExample.layoutOptionsLegend', {
+                      defaultMessage: 'Layout options',
+                    })}
+                    options={[
+                      {
+                        id: 'VIEW',
+                        label: i18n.translate('examples.gridExample.viewOption', {
+                          defaultMessage: 'View',
+                        }),
+                        toolTipContent:
+                          'The layout adjusts when the window is resized. Panel interactivity, such as moving and resizing within the grid, is disabled.',
+                      },
+                      {
+                        id: 'EDIT',
+                        label: i18n.translate('examples.gridExample.editOption', {
+                          defaultMessage: 'Edit',
+                        }),
+                        toolTipContent: 'The layout does not adjust when the window is resized.',
+                      },
+                    ]}
+                    idSelected={accessMode}
+                    onChange={(id) => {
+                      setAccessMode(id as GridAccessMode);
+                    }}
+                  />
+                </EuiFlexItem>
                 {hasUnsavedChanges && (
                   <EuiFlexItem grow={false}>
                     <EuiBadge color="warning">
@@ -190,6 +245,8 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
           </EuiFlexGroup>
           <EuiSpacer size="m" />
           <GridLayout
+            accessMode={accessMode}
+            expandedPanelId={expandedPanelId}
             layout={currentLayout}
             gridSettings={{
               gutterSize: DASHBOARD_MARGIN_SIZE,

packages/kbn-grid-layout/grid/grid_height_smoother.tsx

@@ -10,6 +10,7 @@
 import { css } from '@emotion/react';
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
 import { combineLatest } from 'rxjs';
+import { euiThemeVars } from '@kbn/ui-theme';
 import { GridLayoutStateManager } from './types';
 
 export const GridHeightSmoother = ({
@@ -19,11 +20,14 @@ export const GridHeightSmoother = ({
   // set the parent div size directly to smooth out height changes.
   const smoothHeightRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
-    const subscription = combineLatest([
+    const interactionStyleSubscription = combineLatest([
       gridLayoutStateManager.gridDimensions$,
       gridLayoutStateManager.interactionEvent$,
     ]).subscribe(([dimensions, interactionEvent]) => {
       if (!smoothHeightRef.current) return;
+      if (gridLayoutStateManager.expandedPanelId$.getValue()) {
+        return;
+      }
       if (!interactionEvent) {
         smoothHeightRef.current.style.height = `${dimensions.height}px`;
         return;
@@ -39,7 +43,34 @@ export const GridHeightSmoother = ({
         smoothHeightRef.current.getBoundingClientRect().height
       )}px`;
     });
-    return () => subscription.unsubscribe();
+
+    const expandedPanelSubscription = gridLayoutStateManager.expandedPanelId$.subscribe(
+      (expandedPanelId) => {
+        if (!smoothHeightRef.current) return;
+
+        if (expandedPanelId) {
+          const smoothHeightRefY =
+            smoothHeightRef.current.getBoundingClientRect().y + document.documentElement.scrollTop;
+          const gutterSize = parseFloat(euiThemeVars.euiSizeL);
+
+          // When panel is expanded, ensure the page occupies the full viewport height
+          // If the parent element is a flex container (preferred approach):
+          smoothHeightRef.current.style.flexBasis = `100%`;
+
+          // fallback in case parent is not a flex container (less reliable if shifts happen after the time we calculate smoothHeightRefY)
+          smoothHeightRef.current.style.height = `calc(100vh - ${smoothHeightRefY + gutterSize}px`;
+          smoothHeightRef.current.style.transition = 'none';
+        } else {
+          smoothHeightRef.current.style.flexBasis = '';
+          smoothHeightRef.current.style.height = '';
+          smoothHeightRef.current.style.transition = '';
+        }
+      }
+    );
+    return () => {
+      interactionStyleSubscription.unsubscribe();
+      expandedPanelSubscription.unsubscribe();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

packages/kbn-grid-layout/grid/grid_layout.tsx

@@ -9,11 +9,13 @@
 
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { combineLatest, distinctUntilChanged, filter, map, pairwise, skip } from 'rxjs';
 
+import { css } from '@emotion/react';
 import { GridHeightSmoother } from './grid_height_smoother';
 import { GridRow } from './grid_row';
-import { GridLayoutData, GridSettings } from './types';
+import { GridAccessMode, GridLayoutData, GridSettings } from './types';
 import { useGridLayoutEvents } from './use_grid_layout_events';
 import { useGridLayoutState } from './use_grid_layout_state';
 import { isLayoutEqual } from './utils/equality_checks';
@@ -24,17 +26,23 @@ interface GridLayoutProps {
   gridSettings: GridSettings;
   renderPanelContents: (panelId: string) => React.ReactNode;
   onLayoutChange: (newLayout: GridLayoutData) => void;
+  expandedPanelId?: string;
+  accessMode?: GridAccessMode;
 }
 
 export const GridLayout = ({
   layout,
   gridSettings,
   renderPanelContents,
   onLayoutChange,
+  expandedPanelId,
+  accessMode = 'EDIT',
 }: GridLayoutProps) => {
   const { gridLayoutStateManager, setDimensionsRef } = useGridLayoutState({
     layout,
     gridSettings,
+    expandedPanelId,
+    accessMode,
   });
   useGridLayoutEvents({ gridLayoutStateManager });
 
@@ -132,12 +140,23 @@ export const GridLayout = ({
     });
   }, [rowCount, gridLayoutStateManager, renderPanelContents]);
 
+  const gridClassNames = classNames('kbnGrid', {
+    'kbnGrid--static': expandedPanelId || accessMode === 'VIEW',
+    'kbnGrid--hasExpandedPanel': Boolean(expandedPanelId),
+  });
+
   return (
     <GridHeightSmoother gridLayoutStateManager={gridLayoutStateManager}>
       <div
         ref={(divElement) => {
           setDimensionsRef(divElement);
         }}
+        className={gridClassNames}
+        css={css`
+          &.kbnGrid--hasExpandedPanel {
+            height: 100%;
+          }
+        `}
       >
         {children}
       </div>

packages/kbn-grid-layout/grid/grid_panel.tsx

@@ -22,6 +22,7 @@ import { css } from '@emotion/react';
 import { euiThemeVars } from '@kbn/ui-theme';
 
 import { GridLayoutStateManager, PanelInteractionEvent } from './types';
+import { getKeysInOrder } from './utils/resolve_grid_row';
 
 export const GridPanel = forwardRef<
   HTMLDivElement,
@@ -50,13 +51,21 @@ export const GridPanel = forwardRef<
         grid-column-end: ${initialPanel.column + 1 + initialPanel.width};
         grid-row-start: ${initialPanel.row + 1};
         grid-row-end: ${initialPanel.row + 1 + initialPanel.height};
+        &.kbnGridPanel--isExpanded {
+          transform: translate(9999px, 9999px);
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
       `;
     }, [gridLayoutStateManager, rowIndex, panelId]);
 
     useEffect(
       () => {
         /** Update the styles of the panel via a subscription to prevent re-renders */
-        const styleSubscription = combineLatest([
+        const activePanelStyleSubscription = combineLatest([
           gridLayoutStateManager.activePanel$,
           gridLayoutStateManager.gridLayout$,
           gridLayoutStateManager.runtimeSettings$,
@@ -68,6 +77,7 @@ export const GridPanel = forwardRef<
             if (!ref || !panel) return;
 
             const currentInteractionEvent = gridLayoutStateManager.interactionEvent$.getValue();
+
             if (panelId === activePanel?.id) {
               // if the current panel is active, give it fixed positioning depending on the interaction event
               const { position: draggingPosition } = activePanel;
@@ -91,7 +101,7 @@ export const GridPanel = forwardRef<
                 ref.style.gridRowEnd = ``;
               } else {
                 // if the current panel is being dragged, render it with a fixed position + size
-                ref.style.position = 'fixed';
+                ref.style.position = `fixed`;
                 ref.style.left = `${draggingPosition.left}px`;
                 ref.style.top = `${draggingPosition.top}px`;
                 ref.style.width = `${draggingPosition.right - draggingPosition.left}px`;
@@ -121,8 +131,50 @@ export const GridPanel = forwardRef<
             }
           });
 
+        const expandedPanelStyleSubscription = gridLayoutStateManager.expandedPanelId$
+          .pipe(skip(1)) // skip the first emit because the `initialStyles` will take care of it
+          .subscribe((expandedPanelId) => {
+            const ref = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];
+            const gridLayout = gridLayoutStateManager.gridLayout$.getValue();
+            const panel = gridLayout[rowIndex].panels[panelId];
+            if (!ref || !panel) return;
+
+            if (expandedPanelId && expandedPanelId === panelId) {
+              ref.classList.add('kbnGridPanel--isExpanded');
+            } else {
+              ref.classList.remove('kbnGridPanel--isExpanded');
+            }
+          });
+
+        const mobileViewStyleSubscription = gridLayoutStateManager.isMobileView$
+          .pipe(skip(1))
+          .subscribe((isMobileView) => {
+            if (!isMobileView) {
+              return;
+            }
+            const ref = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];
+            const gridLayout = gridLayoutStateManager.gridLayout$.getValue();
+            const allPanels = gridLayout[rowIndex].panels;
+            const panel = allPanels[panelId];
+            if (!ref || !panel) return;
+
+            const sortedKeys = getKeysInOrder(gridLayout[rowIndex]);
+            const currentPanelPosition = sortedKeys.indexOf(panelId);
+            const sortedKeysBefore = sortedKeys.slice(0, currentPanelPosition);
+            const responsiveGridRowStart = sortedKeysBefore.reduce(
+              (acc, key) => acc + allPanels[key].height,
+              1
+            );
+            ref.style.gridColumnStart = `1`;
+            ref.style.gridColumnEnd = `-1`;
+            ref.style.gridRowStart = `${responsiveGridRowStart}`;
+            ref.style.gridRowEnd = `${responsiveGridRowStart + panel.height}`;
+          });
+
         return () => {
-          styleSubscription.unsubscribe();
+          expandedPanelStyleSubscription.unsubscribe();
+          mobileViewStyleSubscription.unsubscribe();
+          activePanelStyleSubscription.unsubscribe();
         };
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -150,7 +202,7 @@ export const GridPanel = forwardRef<
           >
             {/* drag handle */}
             <div
-              className="dragHandle"
+              className="kbnGridPanel__dragHandle"
               css={css`
                 opacity: 0;
                 display: flex;
@@ -174,6 +226,10 @@ export const GridPanel = forwardRef<
                   cursor: grabbing;
                   opacity: 1 !important;
                 }
+                .kbnGrid--static & {
+                  opacity: 0 !important;
+                  display: none;
+                }
               `}
               onMouseDown={(e) => interactionStart('drag', e)}
               onMouseUp={(e) => interactionStart('drop', e)}
@@ -182,7 +238,7 @@ export const GridPanel = forwardRef<
             </div>
             {/* Resize handle */}
             <div
-              className="resizeHandle"
+              className="kbnGridPanel__resizeHandle"
               onMouseDown={(e) => interactionStart('resize', e)}
               onMouseUp={(e) => interactionStart('drop', e)}
               css={css`
@@ -202,6 +258,10 @@ export const GridPanel = forwardRef<
                   background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
                   cursor: se-resize;
                 }
+                .kbnGrid--static & {
+                  opacity: 0 !important;
+                  display: none;
+                }
               `}
             />
             <div