[kbn-grid-layout] Store rows in object instead of array (#212965)

Closes #211930 ## Summary This PR makes it so that `kbn-grid-layout` stores its rows as an object / dictionary (`{ [key: string]: GridRowData }`) rather than an array (`Array<GridRowData>`). This is a prerequisite for #190381 , since it allows us to re-order rows without re-rendering their contents. It also means that deleting a row will no longer cause the rows below it to re-render, since re-rendering is now dependant on the row's **ID** rather than the row's order. **Before** https://github.com/user-attachments/assets/83651b24-a32c-4953-8ad5-c0eced163eb5 **After** https://github.com/user-attachments/assets/9cef6dbc-3d62-46aa-bc40-ab24fc4e5556 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit b32f0fe)
elastic · Mar 4, 2025 · 6b3c34f · 6b3c34f
1 parent f921aa9
commit 6b3c34f
Show file tree

Hide file tree

Showing 29 changed files with 325 additions and 286 deletions.
diff --git a/examples/grid_example/public/app.tsx b/examples/grid_example/public/app.tsx
@@ -8,9 +8,11 @@
  */
 
 import deepEqual from 'fast-deep-equal';
+import { cloneDeep } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Subject, combineLatest, debounceTime, map, skip, take } from 'rxjs';
+import { v4 as uuidv4 } from 'uuid';
 
 import {
   EuiBadge,
@@ -88,8 +90,8 @@ export const GridExample = ({
             const currentPanel = panels[panelId];
             const savedPanel = savedState.current.panels[panelId];
             panelsAreEqual = deepEqual(
-              { row: 0, ...currentPanel.gridData },
-              { row: 0, ...savedPanel.gridData }
+              { row: 'first', ...currentPanel.gridData },
+              { row: 'first', ...savedPanel.gridData }
             );
           }
           const hasChanges = !(panelsAreEqual && deepEqual(rows, savedState.current.rows));
@@ -147,15 +149,17 @@ export const GridExample = ({
   );
 
   const addNewSection = useCallback(() => {
-    mockDashboardApi.rows$.next([
-      ...mockDashboardApi.rows$.getValue(),
-      {
-        title: i18n.translate('examples.gridExample.defaultSectionTitle', {
-          defaultMessage: 'New collapsible section',
-        }),
-        collapsed: false,
-      },
-    ]);
+    const rows = cloneDeep(mockDashboardApi.rows$.getValue());
+    const id = uuidv4();
+    rows[id] = {
+      id,
+      order: Object.keys(rows).length,
+      title: i18n.translate('examples.gridExample.defaultSectionTitle', {
+        defaultMessage: 'New collapsible section',
+      }),
+      collapsed: false,
+    };
+    mockDashboardApi.rows$.next(rows);
 
     // scroll to bottom after row is added
     layoutUpdated$.pipe(skip(1), take(1)).subscribe(() => {

diff --git a/examples/grid_example/public/logs_dashboard_panels.json b/examples/grid_example/public/logs_dashboard_panels.json
@@ -1004,7 +1004,7 @@
       "w": 48,
       "h": 17,
       "i": "4",
-      "row": 1
+      "row": "second"
     },
     "explicitInput": {
       "id": "4",
@@ -1035,7 +1035,7 @@
       "w": 18,
       "h": 8,
       "i": "05da0d2b-0145-4068-b21c-00be3184d465",
-      "row": 1
+      "row": "second"
     },
     "explicitInput": {
       "id": "05da0d2b-0145-4068-b21c-00be3184d465",
@@ -1073,7 +1073,7 @@
       "w": 18,
       "h": 16,
       "i": "b7da9075-4742-47e3-b4f8-fc9ba82de74c",
-      "row": 1
+      "row": "second"
     },
     "explicitInput": {
       "id": "b7da9075-4742-47e3-b4f8-fc9ba82de74c",
@@ -1111,7 +1111,7 @@
       "w": 12,
       "h": 16,
       "i": "5c409557-644d-4c05-a284-ffe54bb28db0",
-      "row": 1
+      "row": "second"
     },
     "explicitInput": {
       "id": "5c409557-644d-4c05-a284-ffe54bb28db0",
@@ -1234,7 +1234,7 @@
       "w": 6,
       "h": 8,
       "i": "af4b5c07-506e-44c2-b2bb-2113d0c5b274",
-      "row": 1
+      "row": "second"
     },
     "explicitInput": {
       "id": "af4b5c07-506e-44c2-b2bb-2113d0c5b274",
@@ -1400,7 +1400,7 @@
       "w": 6,
       "h": 8,
       "i": "d42c4870-c028-4d8a-abd0-0effbc190ce3",
-      "row": 1
+      "row": "second"
     },
     "explicitInput": {
       "id": "d42c4870-c028-4d8a-abd0-0effbc190ce3",
@@ -1520,7 +1520,7 @@
       "w": 6,
       "h": 8,
       "i": "4092d42c-f93b-4c71-a6db-8f12abf12791",
-      "row": 1
+      "row": "second"
     },
     "explicitInput": {
       "id": "4092d42c-f93b-4c71-a6db-8f12abf12791",
@@ -1641,7 +1641,7 @@
       "w": 30,
       "h": 15,
       "i": "15",
-      "row": 2
+      "row": "third"
     },
     "explicitInput": {
       "id": "15",
@@ -1887,7 +1887,7 @@
       "w": 18,
       "h": 8,
       "i": "4e64d6d7-4f92-4d5e-abbb-13796604db30",
-      "row": 2
+      "row": "third"
     },
     "explicitInput": {
       "id": "4e64d6d7-4f92-4d5e-abbb-13796604db30v",
@@ -1925,7 +1925,7 @@
       "w": 6,
       "h": 7,
       "i": "ddce4ad8-6a82-44f0-9995-57f46f153f50",
-      "row": 2
+      "row": "third"
     },
     "explicitInput": {
       "id": "ddce4ad8-6a82-44f0-9995-57f46f153f50",
@@ -2120,7 +2120,7 @@
       "w": 6,
       "h": 7,
       "i": "a2884704-db3b-4b92-a19a-cdfe668dec39",
-      "row": 2
+      "row": "third"
     },
     "explicitInput": {
       "id": "a2884704-db3b-4b92-a19a-cdfe668dec39",
@@ -2315,7 +2315,7 @@
       "w": 6,
       "h": 7,
       "i": "529eec49-10e2-4a40-9c77-5c81f4eb3943",
-      "row": 2
+      "row": "third"
     },
     "explicitInput": {
       "id": "529eec49-10e2-4a40-9c77-5c81f4eb3943",
@@ -2510,7 +2510,7 @@
       "w": 48,
       "h": 12,
       "i": "1d5f0b3f-d9d2-4b26-997b-83bc5ca3090b",
-      "row": 2
+      "row": "third"
     },
     "explicitInput": {
       "id": "1d5f0b3f-d9d2-4b26-997b-83bc5ca3090b",
@@ -2905,7 +2905,7 @@
       "w": 48,
       "h": 15,
       "i": "9f79ecca-123f-4098-a658-6b0e998da003",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "9f79ecca-123f-4098-a658-6b0e998da003",
@@ -2922,7 +2922,7 @@
       "w": 24,
       "h": 9,
       "i": "7",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "7",
@@ -3161,7 +3161,7 @@
       "w": 24,
       "h": 11,
       "i": "10",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "10",
@@ -3346,7 +3346,7 @@
       "w": 24,
       "h": 22,
       "i": "23",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "23",
@@ -3371,7 +3371,7 @@
       "w": 24,
       "h": 22,
       "i": "31",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "31",
@@ -3388,7 +3388,7 @@
       "w": 24,
       "h": 8,
       "i": "6afc61f7-e2d5-45a3-9e7a-281160ad3eb9",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "6afc61f7-e2d5-45a3-9e7a-281160ad3eb9",
@@ -3420,7 +3420,7 @@
       "w": 8,
       "h": 8,
       "i": "392b4936-f753-47bc-a98d-a4e41a0a4cd4",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "392b4936-f753-47bc-a98d-a4e41a0a4cd4",
@@ -3485,7 +3485,7 @@
       "w": 8,
       "h": 4,
       "i": "9271deff-5a61-4665-83fc-f9fdc6bf0c0b",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "9271deff-5a61-4665-83fc-f9fdc6bf0c0b",
@@ -3613,7 +3613,7 @@
       "w": 8,
       "h": 4,
       "i": "aa591c29-1a31-4ee1-a71d-b829c06fd162",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "aa591c29-1a31-4ee1-a71d-b829c06fd162",
@@ -3777,7 +3777,7 @@
       "w": 8,
       "h": 4,
       "i": "b766e3b8-4544-46ed-99e6-9ecc4847e2a2",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "b766e3b8-4544-46ed-99e6-9ecc4847e2a2",
@@ -3905,7 +3905,7 @@
       "w": 8,
       "h": 4,
       "i": "2e33ade5-96e5-40b4-b460-493e5d4fa834",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "2e33ade5-96e5-40b4-b460-493e5d4fa834",
@@ -4069,7 +4069,7 @@
       "w": 24,
       "h": 8,
       "i": "086ac2e9-dd16-4b45-92b8-1e43ff7e3f65",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "086ac2e9-dd16-4b45-92b8-1e43ff7e3f65",
@@ -4190,7 +4190,7 @@
       "w": 24,
       "h": 28,
       "i": "fb86b32f-fb7a-45cf-9511-f366fef51bbd",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "fb86b32f-fb7a-45cf-9511-f366fef51bbd",
@@ -4500,7 +4500,7 @@
       "w": 24,
       "h": 11,
       "i": "0cc42484-16f7-42ec-b38c-9bf8be69cde7",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "0cc42484-16f7-42ec-b38c-9bf8be69cde7",
@@ -4643,7 +4643,7 @@
       "w": 12,
       "h": 11,
       "i": "5d53db36-2d5a-4adc-af7b-cec4c1a294e0",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "5d53db36-2d5a-4adc-af7b-cec4c1a294e0",
@@ -4773,7 +4773,7 @@
       "w": 12,
       "h": 11,
       "i": "ecd89a7c-9124-4472-bdc6-9bdbd70d45d5",
-      "row": 3
+      "row": "fourth"
     },
     "explicitInput": {
       "id": "ecd89a7c-9124-4472-bdc6-9bdbd70d45d5",

diff --git a/examples/grid_example/public/serialized_grid_layout.ts b/examples/grid_example/public/serialized_grid_layout.ts
@@ -28,10 +28,10 @@ export function setSerializedGridLayout(state: MockSerializedDashboardState) {
 
 const initialState: MockSerializedDashboardState = {
   panels: logsPanels,
-  rows: [
-    { title: 'Request Sizes', collapsed: false },
-    { title: 'Visitors', collapsed: false },
-    { title: 'Response Codes', collapsed: false },
-    { title: 'Entire Flights Dashboard', collapsed: true },
-  ],
+  rows: {
+    first: { id: 'first', order: 0, title: 'Request Sizes', collapsed: false },
+    second: { id: 'second', order: 1, title: 'Visitors', collapsed: false },
+    third: { id: 'third', order: 2, title: 'Response Codes', collapsed: false },
+    fourth: { id: 'fourth', order: 3, title: 'Entire Flights Dashboard', collapsed: true },
+  },
 };
diff --git a/examples/grid_example/public/types.ts b/examples/grid_example/public/types.ts
@@ -26,7 +26,7 @@ export interface DashboardGridData {
 
 interface DashboardPanelState {
   type: string;
-  gridData: DashboardGridData & { row?: number };
+  gridData: DashboardGridData & { row?: string };
   explicitInput: Partial<any> & { id: string };
   version?: string;
 }
@@ -35,7 +35,9 @@ export interface MockedDashboardPanelMap {
   [key: string]: DashboardPanelState;
 }
 
-export type MockedDashboardRowMap = Array<{ title: string; collapsed: boolean }>;
+export interface MockedDashboardRowMap {
+  [id: string]: { id: string; order: number; title: string; collapsed: boolean };
+}
 
 export interface MockSerializedDashboardState {
   panels: MockedDashboardPanelMap;

diff --git a/examples/grid_example/public/use_mock_dashboard_api.tsx b/examples/grid_example/public/use_mock_dashboard_api.tsx
@@ -99,7 +99,7 @@ export const useMockDashboardApi = ({
           [newId]: {
             type: panelPackage.panelType,
             gridData: {
-              row: 0,
+              row: 'first',
               x: 0,
               y: 0,
               w: DEFAULT_PANEL_WIDTH,