[v11.0.x] DashboardScene: Fixes editing transformations after toggling table view (#87485)

DashboardScene: Fixes editing transformations after toggling table view (#87397)

(cherry picked from commit 0c2f58bdae)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx

@@ -48,13 +48,6 @@ export class PanelDataQueriesTab extends SceneObjectBase<PanelDataQueriesTabStat
     };
 
     this._panelManager = panelManager;
-    this.addActivationHandler(this.onActivate.bind(this));
-  }
-
-  private onActivate() {
-    // This is to preserve SceneQueryRunner stays alive when switching between visualizations and table view
-    const deactivate = this._panelManager.queryRunner.activate();
-    return () => deactivate();
   }
 
   buildQueryOptions(): QueryGroupOptions {

public/app/features/dashboard-scene/panel-edit/VizPanelManager.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import {
   DataSourceApi,
@@ -467,10 +467,19 @@ export class VizPanelManager extends SceneObjectBase<VizPanelManagerState> {
   public static Component = ({ model }: SceneComponentProps<VizPanelManager>) => {
     const { panel, tableView } = model.useState();
     const styles = useStyles2(getStyles);
-
     const panelToShow = tableView ?? panel;
+    const dataProvider = panelToShow.state.$data;
 
-    return <div className={styles.wrapper}>{<panelToShow.Component model={panelToShow} />}</div>;
+    // This is to preserve SceneQueryRunner stays alive when switching between visualizations and table view
+    useEffect(() => {
+      return dataProvider?.activate();
+    }, [dataProvider]);
+
+    return (
+      <>
+        <div className={styles.wrapper}>{<panelToShow.Component model={panelToShow} />}</div>
+      </>
+    );
   };
 }