Dynamic dashboards: Update variable set state when variable hide property changes (#115094)
fix: update variable set state when variable hide property changes When changing a variable's positioning to show in controls menu using the edit side pane, the state of dashboardControls does not immediately update. This makes it seem to the user that nothing was changed. The issue was that when a variable's hide property changes, only the variable's state was updated, but not the parent SceneVariableSet state. Components that subscribe to the variable set state (like useDashboardControls) didn't detect the change because the variables array reference remained the same. This fix updates the parent SceneVariableSet state when a variable's hide property changes, ensuring components that subscribe to the variable set will re-render immediately. Co-authored-by: grafakus <marc.mignonsin@grafana.com>
This commit is contained in:
@@ -245,10 +245,29 @@ export const dashboardEditActions = {
|
||||
description: t('dashboard.variable.description.action', 'Change variable description'),
|
||||
prop: 'description',
|
||||
}),
|
||||
changeVariableHideValue: makeEditAction<SceneVariable, 'hide'>({
|
||||
description: t('dashboard.variable.hide.action', 'Change variable hide option'),
|
||||
prop: 'hide',
|
||||
}),
|
||||
changeVariableHideValue({ source, oldValue, newValue }: EditActionProps<SceneVariable, 'hide'>) {
|
||||
const variableSet = source.parent;
|
||||
const variablesBeforeChange =
|
||||
variableSet instanceof SceneVariableSet ? [...(variableSet.state.variables ?? [])] : undefined;
|
||||
|
||||
dashboardEditActions.edit({
|
||||
description: t('dashboard.variable.hide.action', 'Change variable hide option'),
|
||||
source,
|
||||
perform: () => {
|
||||
source.setState({ hide: newValue });
|
||||
// Updating the variables set since components that show/hide variables subscribe to the variable set, not the individual variables.
|
||||
if (variableSet instanceof SceneVariableSet) {
|
||||
variableSet.setState({ variables: [...(variableSet.state.variables ?? [])] });
|
||||
}
|
||||
},
|
||||
undo: () => {
|
||||
source.setState({ hide: oldValue });
|
||||
if (variableSet instanceof SceneVariableSet && variablesBeforeChange) {
|
||||
variableSet.setState({ variables: variablesBeforeChange });
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
moveElement(props: MoveElementActionHelperProps) {
|
||||
const { movedObject, source, perform, undo } = props;
|
||||
|
||||
Reference in New Issue
Block a user