PanelEditor: Present actionable suggestions when panel cannot visualize current data (#42083)

* PanelDataError: Show actions when current panel cannot visualize data

* Fixed so that suggestions tab is opened from action

* Cleanup

* Fixed tests

* Fix tests

* Fixing tests

* Fixed ts issues

public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx

@@ -11,6 +11,7 @@ import { prepareGraphableFields } from './utils';
 import { AnnotationEditorPlugin } from './plugins/AnnotationEditorPlugin';
 import { ThresholdControlsPlugin } from './plugins/ThresholdControlsPlugin';
 import { config } from 'app/core/config';
+import { PanelDataErrorView } from '@grafana/runtime';
 
 interface TimeSeriesPanelProps extends PanelProps<TimeSeriesOptions> {}
 
@@ -24,6 +25,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
   fieldConfig,
   onChangeTimeRange,
   replaceVariables,
+  id,
 }) => {
   const { sync, canAddAnnotations, onThresholdsChange, canEditThresholds, onSplitOpen } = usePanelContext();
 
@@ -31,14 +33,10 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
     return getFieldLinksForExplore({ field, rowIndex, splitOpenFn: onSplitOpen, range: timeRange });
   };
 
-  const { frames, warn } = useMemo(() => prepareGraphableFields(data?.series, config.theme2), [data]);
+  const frames = useMemo(() => prepareGraphableFields(data.series, config.theme2), [data]);
 
-  if (!frames || warn) {
-    return (
-      <div className="panel-empty">
-        <p>{warn ?? 'No data found in response'}</p>
-      </div>
-    );
+  if (!frames) {
+    return <PanelDataErrorView panelId={id} data={data} needsTimeField={true} needsNumberField={true} />;
   }
 
   const enableAnnotationCreation = Boolean(canAddAnnotations && canAddAnnotations());