refactor to make the expandedPanelId a prop

examples/grid_example/public/app.tsx

@@ -46,6 +46,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(false);
 
   const [layoutKey, setLayoutKey] = useState<string>(uuidv4());
+  const [expandedPanelId, setExpandedPanelId] = useState<string | undefined>();
   const [gridLayoutApi, setGridLayoutApi] = useState<GridLayoutApi | null>();
   const savedLayout = useRef<GridLayoutData>(getSerializedGridLayout());
   const currentLayout = useRef<GridLayoutData>(savedLayout.current);
@@ -151,6 +152,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
               setHasUnsavedChanges(!isLayoutEqual(savedLayout.current, newLayout));
             }}
             ref={setGridLayoutApi}
+            expandedPanelId={expandedPanelId}
             renderPanelContents={(id) => {
               return (
                 <>
@@ -179,7 +181,9 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
                   </EuiButtonEmpty>
                   <EuiButtonIcon
                     iconType={'expand'}
-                    onClick={() => gridLayoutApi?.expandPanel(id)}
+                    onClick={() =>
+                      setExpandedPanelId((expandedId) => (expandedId ? undefined : id))
+                    }
                     aria-label={i18n.translate('examples.gridExample.maximizePanel', {
                       defaultMessage: 'Maximize/minimize panel',
                     })}

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

@@ -12,7 +12,6 @@ import React, { PropsWithChildren, useEffect, useRef } from 'react';
 import { combineLatest } from 'rxjs';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { GridLayoutStateManager } from './types';
-import { getExpandedPanelId } from './utils/expand_helpers';
 
 const getViewportHeight = () =>
   window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
@@ -27,12 +26,11 @@ export const GridHeightSmoother = ({
     const subscription = combineLatest([
       gridLayoutStateManager.gridDimensions$,
       gridLayoutStateManager.interactionEvent$,
-      gridLayoutStateManager.gridLayout$,
-    ]).subscribe(([dimensions, interactionEvent, gridLayout]) => {
+      gridLayoutStateManager.expandedPanelId$,
+    ]).subscribe(([dimensions, interactionEvent, expandedPanelId]) => {
       if (!smoothHeightRef.current) return;
 
-      const hasExpandedPanel = Boolean(getExpandedPanelId(gridLayout));
-      if (hasExpandedPanel) {
+      if (expandedPanelId) {
         const viewPortHeight = getViewportHeight();
         const smoothHeightRefY = smoothHeightRef.current.getBoundingClientRect().y;
         // we want the screen to occupy a full viewport and not more:

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

@@ -8,8 +8,16 @@
  */
 
 import { cloneDeep } from 'lodash';
-import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { combineLatest, distinctUntilChanged, filter, map, pairwise, skip } from 'rxjs';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import {
+  BehaviorSubject,
+  combineLatest,
+  distinctUntilChanged,
+  filter,
+  map,
+  pairwise,
+  skip,
+} from 'rxjs';
 
 import { GridHeightSmoother } from './grid_height_smoother';
 import { GridRow } from './grid_row';
@@ -23,12 +31,23 @@ interface GridLayoutProps {
   getCreationOptions: () => { initialLayout: GridLayoutData; gridSettings: GridSettings };
   renderPanelContents: (panelId: string) => React.ReactNode;
   onLayoutChange: (newLayout: GridLayoutData) => void;
+  expandedPanelId?: string;
 }
 
 export const GridLayout = forwardRef<GridLayoutApi, GridLayoutProps>(
-  ({ getCreationOptions, renderPanelContents, onLayoutChange }, ref) => {
+  ({ getCreationOptions, renderPanelContents, onLayoutChange, expandedPanelId }, ref) => {
+    const expandedPanelId$ = useMemo(
+      () => new BehaviorSubject<string | undefined>(expandedPanelId),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+    useEffect(() => {
+      expandedPanelId$.next(expandedPanelId);
+    }, [expandedPanelId, expandedPanelId$]);
+
     const { gridLayoutStateManager, setDimensionsRef } = useGridLayoutState({
       getCreationOptions,
+      expandedPanelId$,
     });
     useGridLayoutEvents({ gridLayoutStateManager });
 

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

@@ -22,7 +22,6 @@ import { css } from '@emotion/react';
 import { euiThemeVars } from '@kbn/ui-theme';
 
 import { GridLayoutStateManager, PanelInteractionEvent } from './types';
-import { getExpandedPanelId } from './utils/expand_helpers';
 
 export const GridPanel = forwardRef<
   HTMLDivElement,
@@ -61,13 +60,13 @@ export const GridPanel = forwardRef<
           gridLayoutStateManager.activePanel$,
           gridLayoutStateManager.gridLayout$,
           gridLayoutStateManager.runtimeSettings$,
+          gridLayoutStateManager.expandedPanelId$,
         ])
           .pipe(skip(1)) // skip the first emit because the `initialStyles` will take care of it
-          .subscribe(([activePanel, gridLayout, runtimeSettings]) => {
+          .subscribe(([activePanel, gridLayout, runtimeSettings, expandedPanelId]) => {
             const ref = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];
             const panel = gridLayout[rowIndex].panels[panelId];
             if (!ref || !panel) return;
-            const expandedPanelId = getExpandedPanelId(gridLayout);
             if (expandedPanelId && expandedPanelId === panelId) {
               // adding the class to target the handles in css and disable them
               ref.classList.add('panelExpanded');

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

@@ -18,7 +18,6 @@ import { euiThemeVars } from '@kbn/ui-theme';
 import { DragPreview } from './drag_preview';
 import { GridPanel } from './grid_panel';
 import { GridLayoutStateManager, GridRowData, PanelInteractionEvent } from './types';
-import { getExpandedPanelId } from './utils/expand_helpers';
 
 export const GridRow = forwardRef<
   HTMLDivElement,
@@ -79,9 +78,10 @@ export const GridRow = forwardRef<
           gridLayoutStateManager.interactionEvent$,
           gridLayoutStateManager.gridLayout$,
           gridLayoutStateManager.runtimeSettings$,
+          gridLayoutStateManager.expandedPanelId$,
         ])
           .pipe(skip(1)) // skip the first emit because the `initialStyles` will take care of it
-          .subscribe(([interactionEvent, gridLayout, runtimeSettings]) => {
+          .subscribe(([interactionEvent, gridLayout, runtimeSettings, expandedPanelId]) => {
             const rowRef = gridLayoutStateManager.rowRefs.current[rowIndex];
             if (!rowRef) return;
 
@@ -118,7 +118,6 @@ export const GridRow = forwardRef<
             const rowContainerRef = gridLayoutStateManager.rowContainerRefs.current[rowIndex];
             if (!rowContainerRef) return;
 
-            const expandedPanelId = getExpandedPanelId(gridLayout);
             if (expandedPanelId) {
               // if any panel is maximized, move all the rows with all the panels out of the viewport
               // the maximized panel is translated back to its original position in grid_panel.tsx along with stretching to the viewport
@@ -220,9 +219,7 @@ export const GridRow = forwardRef<
                   e.stopPropagation();
 
                   // do not allow interactions when a panel is expanded
-                  const isInteractive = !getExpandedPanelId(
-                    gridLayoutStateManager.gridLayout$.getValue()
-                  );
+                  const isInteractive = gridLayoutStateManager.expandedPanelId$.value === undefined;
                   if (!isInteractive) return;
 
                   const panelRef = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];

packages/kbn-grid-layout/grid/types.ts

@@ -23,7 +23,6 @@ export interface GridRect extends GridCoordinate {
 
 export interface GridPanelData extends GridRect {
   id: string;
-  isExpanded?: boolean;
 }
 
 export interface GridRowData {
@@ -60,6 +59,7 @@ export interface ActivePanel {
 
 export interface GridLayoutStateManager {
   gridLayout$: BehaviorSubject<GridLayoutData>;
+  expandedPanelId$: BehaviorSubject<string | undefined>;
 
   gridDimensions$: BehaviorSubject<ObservedSize>;
   runtimeSettings$: BehaviorSubject<RuntimeGridSettings>;
@@ -114,7 +114,6 @@ export interface GridLayoutApi {
   addPanel: (panelId: string, placementSettings: PanelPlacementSettings) => void;
   removePanel: (panelId: string) => void;
   replacePanel: (oldPanelId: string, newPanelId: string) => void;
-  expandPanel: (panelId?: string) => void;
   getPanelCount: () => number;
   serializeState: () => GridLayoutData & SerializableRecord;
 }

packages/kbn-grid-layout/grid/use_grid_layout_api.ts

@@ -90,20 +90,6 @@ export const useGridLayoutApi = ({
           gridLayoutStateManager.gridLayout$.next(newLayout);
         }
       },
-      expandPanel: (id) => {
-        const currentLayout = gridLayoutStateManager.gridLayout$.getValue();
-        const newLayout = cloneDeep(currentLayout).map((row) => {
-          for (const panelId in row.panels) {
-            if (panelId === id) {
-              row.panels[panelId].isExpanded = !row.panels[panelId].isExpanded;
-            } else {
-              delete row.panels[panelId].isExpanded;
-            }
-          }
-          return row;
-        });
-        gridLayoutStateManager.gridLayout$.next(newLayout);
-      },
 
       getPanelCount: () => {
         return gridLayoutStateManager.gridLayout$.getValue().reduce((prev, row) => {

packages/kbn-grid-layout/grid/use_grid_layout_state.ts

@@ -23,8 +23,10 @@ import {
 
 export const useGridLayoutState = ({
   getCreationOptions,
+  expandedPanelId$,
 }: {
   getCreationOptions: () => { initialLayout: GridLayoutData; gridSettings: GridSettings };
+  expandedPanelId$: BehaviorSubject<string | undefined>;
 }): {
   gridLayoutStateManager: GridLayoutStateManager;
   setDimensionsRef: (instance: HTMLDivElement | null) => void;
@@ -45,6 +47,7 @@ export const useGridLayoutState = ({
       ...gridSettings,
       columnPixelWidth: 0,
     });
+
     const panelIds$ = new BehaviorSubject<string[][]>(
       initialLayout.map(({ panels }) => Object.keys(panels))
     );
@@ -59,6 +62,7 @@ export const useGridLayoutState = ({
       gridDimensions$,
       runtimeSettings$,
       interactionEvent$,
+      expandedPanelId$,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);