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:
Oscar Kilhed
2025-12-11 13:54:30 +01:00
committed by GitHub
co-authored by grafakus
parent e6b5ece559
commit 350c3578c7
@@ -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;