[8.x] [Dashboard][Collapsable Panels] Fix bug on `layout` u…

…pdate (#202049) (#202072)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Dashboard][Collapsable Panels] Fix bug on `layout` update
(#202049)](#202049)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-27T21:12:15Z","message":"[Dashboard][Collapsable
Panels] Fix bug on `layout` update (#202049)\n\n## Summary\r\n\r\nWhen
the `layout` prop updates, we cannot assume that it is \"safe\"
(i.e.\r\nwe cannot assume it has no floating panels and/or colliding
panels).\r\nBecause of this, we need to resolve each grid row when this
prop\r\nchanges. When I added this
in\r\nhttps://github.com//pull/200793, I accidentally
only\r\n**compacted** the rows, which did not account for possible
collisions\r\nthat the Dashboard's panel placement strategies do not
account for. This\r\nPR fixes that by calling `resolveGridRow` (which
compacts **and**\r\ndetects collisions) instead of just `compactGridRow`
(which, as the name\r\nsuggests, only compacts the
rows)\r\n\r\n**Before:**\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/bcea4efd-35fa-425d-ac04-41434ffaa810\r\n\r\n\r\n**After:**\r\n\r\n\r\nhttps://github.com/user-attachments/assets/6cd205c6-d1d5-4a97-8d14-425c2a4bbeda\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nThere are no risks to this PR, since all work is
contained in the\r\n`examples`
plugin.","sha":"57b8bdad3fb64d26b8fe3b0bf12c071857fff9e2","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","Team:Presentation","loe:small","release_note:skip","impact:high","v9.0.0","backport:prev-minor","Project:Collapsable
Panels"],"title":"[Dashboard][Collapsable Panels] Fix bug on `layout`
update","number":202049,"url":"https://github.com/elastic/kibana/pull/202049","mergeCommit":{"message":"[Dashboard][Collapsable
Panels] Fix bug on `layout` update (#202049)\n\n## Summary\r\n\r\nWhen
the `layout` prop updates, we cannot assume that it is \"safe\"
(i.e.\r\nwe cannot assume it has no floating panels and/or colliding
panels).\r\nBecause of this, we need to resolve each grid row when this
prop\r\nchanges. When I added this
in\r\nhttps://github.com//pull/200793, I accidentally
only\r\n**compacted** the rows, which did not account for possible
collisions\r\nthat the Dashboard's panel placement strategies do not
account for. This\r\nPR fixes that by calling `resolveGridRow` (which
compacts **and**\r\ndetects collisions) instead of just `compactGridRow`
(which, as the name\r\nsuggests, only compacts the
rows)\r\n\r\n**Before:**\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/bcea4efd-35fa-425d-ac04-41434ffaa810\r\n\r\n\r\n**After:**\r\n\r\n\r\nhttps://github.com/user-attachments/assets/6cd205c6-d1d5-4a97-8d14-425c2a4bbeda\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nThere are no risks to this PR, since all work is
contained in the\r\n`examples`
plugin.","sha":"57b8bdad3fb64d26b8fe3b0bf12c071857fff9e2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202049","number":202049,"mergeCommit":{"message":"[Dashboard][Collapsable
Panels] Fix bug on `layout` update (#202049)\n\n## Summary\r\n\r\nWhen
the `layout` prop updates, we cannot assume that it is \"safe\"
(i.e.\r\nwe cannot assume it has no floating panels and/or colliding
panels).\r\nBecause of this, we need to resolve each grid row when this
prop\r\nchanges. When I added this
in\r\nhttps://github.com//pull/200793, I accidentally
only\r\n**compacted** the rows, which did not account for possible
collisions\r\nthat the Dashboard's panel placement strategies do not
account for. This\r\nPR fixes that by calling `resolveGridRow` (which
compacts **and**\r\ndetects collisions) instead of just `compactGridRow`
(which, as the name\r\nsuggests, only compacts the
rows)\r\n\r\n**Before:**\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/bcea4efd-35fa-425d-ac04-41434ffaa810\r\n\r\n\r\n**After:**\r\n\r\n\r\nhttps://github.com/user-attachments/assets/6cd205c6-d1d5-4a97-8d14-425c2a4bbeda\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nThere are no risks to this PR, since all work is
contained in the\r\n`examples`
plugin.","sha":"57b8bdad3fb64d26b8fe3b0bf12c071857fff9e2"}}]}]
BACKPORT-->

Co-authored-by: Hannah Mudge <[email protected]>

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

@@ -17,7 +17,7 @@ import { GridLayoutData, GridSettings } from './types';
 import { useGridLayoutEvents } from './use_grid_layout_events';
 import { useGridLayoutState } from './use_grid_layout_state';
 import { isLayoutEqual } from './utils/equality_checks';
-import { compactGridRow } from './utils/resolve_grid_row';
+import { resolveGridRow } from './utils/resolve_grid_row';
 
 interface GridLayoutProps {
   layout: GridLayoutData;
@@ -53,7 +53,7 @@ export const GridLayout = ({
        * so, we need to loop through each row and ensure it is compacted
        */
       newLayout.forEach((row, rowIndex) => {
-        newLayout[rowIndex] = compactGridRow(row);
+        newLayout[rowIndex] = resolveGridRow(row);
       });
       gridLayoutStateManager.gridLayout$.next(newLayout);
     }

packages/kbn-grid-layout/grid/utils/resolve_grid_row.ts

@@ -57,7 +57,7 @@ const getKeysInOrder = (rowData: GridRowData, draggedId?: string): string[] => {
   });
 };
 
-export const compactGridRow = (originalLayout: GridRowData) => {
+const compactGridRow = (originalLayout: GridRowData) => {
   const nextRowData = { ...originalLayout, panels: { ...originalLayout.panels } };
   // compact all vertical space.
   const sortedKeysAfterMove = getKeysInOrder(nextRowData);