[kbn-grid-layout] [Dashboard] Fix memoization of onLayoutChange callback (#217235)

Closes https://github.com/elastic/kibana/issues/217117

## Summary

In the dashboard grid component, we memoize the `onLayoutChange`
callback with `viewMode` as a dependency:


64142047fb/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.tsx (L80-L105)

However, on the `kbn-grid-layout` side, the subscription responsible for
calling `onLayoutChange` was set up in a `useEffect` that did **not**
have the `onLayoutChange` prop as a dependency - so even though the prop
was changing, the subscription continued to use the original value.

That means that if the dashboard starts in view mode, then the
`kbn-grid-layout` layout change subscription will always be calling the
version of `onLayoutChange` where it returns early; and likewise when
you start the dashboard in edit mode. By adding `onLayoutChange` as a
dependency to the `useEffect` that sets up the subscriptions, this no
longer happens.

### Before



https://github.com/user-attachments/assets/5df796f5-929d-4522-b438-64cc49292ed6

### After



https://github.com/user-attachments/assets/286dd459-b429-40fb-8cb7-661b3f870214



### Checklist

- [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)
This commit is contained in:
Hannah Mudge 2025-04-04 14:53:17 -06:00 committed by GitHub
parent 62b418b907
commit 8382475eb5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -90,6 +90,13 @@ export const GridLayout = ({
}
});
return () => {
onLayoutChangeSubscription.unsubscribe();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [onLayoutChange]);
useEffect(() => {
/**
* This subscription ensures that rows get re-rendered when their orders change
*/
@ -131,7 +138,6 @@ export const GridLayout = ({
});
return () => {
onLayoutChangeSubscription.unsubscribe();
rowOrderSubscription.unsubscribe();
gridLayoutClassSubscription.unsubscribe();
};