QueryEditor: handle query.hide changes in angular based query-editors (#31336)

* handle query.hide changes in angular query-editors

* better comment

public/app/features/query/components/QueryEditorRow.tsx

@@ -80,6 +80,8 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     const panel = new PanelModel({ targets: queries });
     const panel = new PanelModel({ targets: queries });
     const dashboard = {} as DashboardModel;
     const dashboard = {} as DashboardModel;
 
 
+    const me = this;
+
     return {
     return {
       datasource: datasource,
       datasource: datasource,
       target: query,
       target: query,
@@ -89,6 +91,14 @@ export class QueryEditorRow extends PureComponent<Props, State> {
         // Old angular editors modify the query model and just call refresh
         // Old angular editors modify the query model and just call refresh
         // Important that this use this.props here so that as this fuction is only created on mount and it's
         // Important that this use this.props here so that as this fuction is only created on mount and it's
         // important not to capture old prop functions in this closure
         // important not to capture old prop functions in this closure
+
+        // the "hide" attribute of the quries can be changed from the "outside",
+        // it will be applied to "this.props.query.hide", but not to "query.hide".
+        // so we have to apply it.
+        if (query.hide !== me.props.query.hide) {
+          query.hide = me.props.query.hide;
+        }
+
         this.props.onChange(query);
         this.props.onChange(query);
         this.props.onRunQuery();
         this.props.onRunQuery();
       },
       },