QueryEditors: Fixes issue that happens after moving queries then editing would…

QueryEditors: Fixes issue that happens after moving queries then editing would update other queries (#31193)

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

@@ -75,7 +75,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
   }
   }
 
 
   getAngularQueryComponentScope(): AngularQueryComponentScope {
   getAngularQueryComponentScope(): AngularQueryComponentScope {
-    const { query, onChange, onRunQuery, queries } = this.props;
+    const { query, queries } = this.props;
     const { datasource } = this.state;
     const { datasource } = this.state;
     const panel = new PanelModel({ targets: queries });
     const panel = new PanelModel({ targets: queries });
     const dashboard = {} as DashboardModel;
     const dashboard = {} as DashboardModel;
@@ -87,8 +87,10 @@ export class QueryEditorRow extends PureComponent<Props, State> {
       dashboard: dashboard,
       dashboard: dashboard,
       refresh: () => {
       refresh: () => {
         // Old angular editors modify the query model and just call refresh
         // Old angular editors modify the query model and just call refresh
-        onChange(query);
-        onRunQuery();
+        // 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
+        this.props.onChange(query);
+        this.props.onRunQuery();
       },
       },
       render: () => () => console.log('legacy render function called, it does nothing'),
       render: () => () => console.log('legacy render function called, it does nothing'),
       events: new EventBusSrv(),
       events: new EventBusSrv(),