VisualizationSelection: Real previews of suitable visualisation and options based on current data (#40527)

* Initial pass to move panel state to it's own, and make it by key not panel.id

* Progress

* Not making much progress, having panel.key be mutable is causing a lot of issues

* Think this is starting to work

* Began fixing tests

* Add selector

* Bug fixes and changes to cleanup, and fixing all flicking when switching library panels

* Removed console.log

* fixes after merge

* fixing tests

* fixing tests

* Added new test for changePlugin thunk

* Initial struture in place

* responding to state changes in another part of the state

* bha

* going in a different direction

* This is getting exciting

* minor

* More structure

* More real

* Added builder to reduce boiler plate

* Lots of progress

* Adding more visualizations

* More smarts

* tweaks

* suggestions

* Move to separate view

* Refactoring to builder concept

* Before hover preview test

* Increase line width in preview

* More suggestions

* Removed old elements of onSuggestVisualizations

* Don't call suggestion suppliers if there is no data

* Restore card styles to only borders

* Changing supplier interface to support data vs option suggestion scenario

* Renamed functions

* Add dynamic width support

* not sure about this

* Improve suggestions

* Improve suggestions

* Single grid/list

* Store vis select pane & size

* Prep for option suggestions

* more suggestions

* Name/title option for preview cards

* Improve barchart suggestions

* Support suggestions when there are no data

* Minor change

* reverted some changes

* Improve suggestions for stacking

* Removed size option

* starting on unit tests, hit cyclic dependency issue

* muuu

* First test for getting suggestion seems to work, going to bed

* add missing file

* A basis for more unit tests

* More tests

* More unit tests

* Fixed unit tests

* Update

* Some extreme scenarios

* Added basic e2e test

* Added another unit test for changePanelPlugin action

* More cleanup

* Minor tweak

* add wait to e2e test

* Renamed function and cleanup of unused function

* Adding search support and adding search test to e2e test

public/app/plugins/panel/alertlist/module.tsx

@@ -12,6 +12,7 @@ import {
   GENERAL_FOLDER,
   ReadonlyFolderPicker,
 } from '../../../core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker';
+import { AlertListSuggestionsSupplier } from './suggestions';
 
 function showIfCurrentState(options: AlertListOptions) {
   return options.showOptions === ShowOption.Current;
@@ -145,7 +146,8 @@ const alertList = new PanelPlugin<AlertListOptions>(AlertList)
         showIf: showIfCurrentState,
       });
   })
-  .setMigrationHandler(alertListPanelMigrationHandler);
+  .setMigrationHandler(alertListPanelMigrationHandler)
+  .setSuggestionsSupplier(new AlertListSuggestionsSupplier());
 
 const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertList).setPanelOptions((builder) => {
   builder

public/app/plugins/panel/alertlist/suggestions.ts

@@ -0,0 +1,20 @@
+import { VisualizationSuggestionsBuilder } from '@grafana/data';
+import { AlertListOptions } from './types';
+
+export class AlertListSuggestionsSupplier {
+  getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
+    const { dataSummary } = builder;
+
+    if (dataSummary.hasData) {
+      return;
+    }
+
+    const list = builder.getListAppender<AlertListOptions, {}>({
+      name: 'Dashboard list',
+      pluginId: 'dashlist',
+      options: {},
+    });
+
+    list.append({});
+  }
+}