mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[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:
parent
62b418b907
commit
8382475eb5
1 changed files with 7 additions and 1 deletions
|
@ -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();
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue