kibana/examples/grid_example/public/serialized_grid_layout.ts
Hannah Mudge b32f0fe1e8
[kbn-grid-layout] Store rows in object instead of array (#212965)
Closes https://github.com/elastic/kibana/issues/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
https://github.com/elastic/kibana/issues/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>
2025-03-04 13:34:39 -07:00

37 lines
1.5 KiB
TypeScript

/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/
import { MockSerializedDashboardState } from './types';
import logsPanels from './logs_dashboard_panels.json';
const STATE_SESSION_STORAGE_KEY = 'kibana.examples.gridExample.state';
export function clearSerializedDashboardState() {
sessionStorage.removeItem(STATE_SESSION_STORAGE_KEY);
}
export function getSerializedDashboardState(): MockSerializedDashboardState {
const serializedStateJSON = sessionStorage.getItem(STATE_SESSION_STORAGE_KEY);
return serializedStateJSON ? JSON.parse(serializedStateJSON) : initialState;
}
export function setSerializedGridLayout(state: MockSerializedDashboardState) {
sessionStorage.setItem(STATE_SESSION_STORAGE_KEY, JSON.stringify(state));
}
const initialState: MockSerializedDashboardState = {
panels: logsPanels,
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 },
},
};