PanelEdit: Adapt panel data error view CTAs to scenes (#102881)

adapt CTAs for scenes

public/app/features/panel/components/PanelDataErrorView.tsx

@@ -9,6 +9,7 @@ import {
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { PanelDataErrorViewProps, locationService } from '@grafana/runtime';
+import { VizPanel } from '@grafana/scenes';
 import { usePanelContext, useStyles2 } from '@grafana/ui';
 import { CardButton } from 'app/core/components/CardButton';
 import { LS_VISUALIZATION_SELECT_TAB_KEY } from 'app/core/constants';
@@ -17,6 +18,8 @@ import store from 'app/core/store';
 import { toggleVizPicker } from 'app/features/dashboard/components/PanelEditor/state/reducers';
 import { VisualizationSelectPaneTab } from 'app/features/dashboard/components/PanelEditor/types';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { DashboardScene } from 'app/features/dashboard-scene/scene/DashboardScene';
+import { findVizPanelByKey, getVizPanelKeyForPanelId } from 'app/features/dashboard-scene/utils/utils';
 import { useDispatch } from 'app/types';
 
 import { changePanelPlugin } from '../state/actions';
@@ -28,10 +31,23 @@ export function PanelDataErrorView(props: PanelDataErrorViewProps) {
   const { dataSummary } = builder;
   const message = getMessageFor(props, dataSummary);
   const dispatch = useDispatch();
-  const panel = getDashboardSrv().getCurrent()?.getPanelById(props.panelId);
+
+  const dashboardScene: DashboardScene | undefined = window.__grafanaSceneContext;
+  let panel;
+  if (dashboardScene instanceof DashboardScene) {
+    panel = findVizPanelByKey(dashboardScene, getVizPanelKeyForPanelId(props.panelId));
+  } else {
+    panel = getDashboardSrv().getCurrent()?.getPanelById(props.panelId);
+  }
 
   const openVizPicker = () => {
     store.setObject(LS_VISUALIZATION_SELECT_TAB_KEY, VisualizationSelectPaneTab.Suggestions);
+    if (dashboardScene) {
+      dashboardScene.state.editPanel?.state.optionsPane?.onToggleVizPicker();
+
+      return;
+    }
+
     dispatch(toggleVizPicker(true));
   };
 
@@ -40,6 +56,12 @@ export function PanelDataErrorView(props: PanelDataErrorViewProps) {
       return;
     }
 
+    if (panel instanceof VizPanel) {
+      panel.changePluginType('table');
+
+      return;
+    }
+
     dispatch(
       changePanelPlugin({
         panel,
@@ -52,12 +74,18 @@ export function PanelDataErrorView(props: PanelDataErrorViewProps) {
     if (!panel) {
       return;
     }
-    dispatch(
-      changePanelPlugin({
-        ...s, // includes panelId, config, etc
-        panel,
-      })
-    );
+
+    if (panel instanceof VizPanel) {
+      panel.changePluginType(s.pluginId, s.options, s.fieldConfig);
+    } else {
+      dispatch(
+        changePanelPlugin({
+          ...s, // includes panelId, config, etc
+          panel,
+        })
+      );
+    }
+
     if (s.transformations) {
       setTimeout(() => {
         locationService.partial({ tab: 'transform' });