PanelEdit: Fixes suggestions not applying options or field config (#102675)

public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.test.tsx

@@ -1,3 +1,5 @@
+import { PanelPlugin } from '@grafana/data';
+import { getPanelPlugin } from '@grafana/data/test/__mocks__/pluginMocks';
 import { OptionFilter } from 'app/features/dashboard/components/PanelEditor/OptionsPaneOptions';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 
@@ -8,6 +10,15 @@ import { findVizPanelByKey } from '../utils/utils';
 import { PanelOptionsPane } from './PanelOptionsPane';
 import { testDashboard } from './testfiles/testDashboard';
 
+let pluginToLoad: PanelPlugin | undefined;
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getPluginImportUtils: () => ({
+    getPanelPluginFromCache: jest.fn(() => pluginToLoad),
+  }),
+}));
+
 describe('PanelOptionsPane', () => {
   describe('When changing plugin', () => {
     it('Should set the cache', () => {
@@ -22,6 +33,38 @@ describe('PanelOptionsPane', () => {
       expect(optionsPane['_cachedPluginOptions']['timeseries']?.fieldConfig).toBe(panel.state.fieldConfig);
     });
 
+    it('When visualization suggestion is selected should update options and fieldConfig', () => {
+      pluginToLoad = getPanelPlugin({
+        id: 'timeseries',
+      });
+
+      pluginToLoad.useFieldConfig({
+        useCustomConfig: (builder) => {
+          builder.addBooleanSwitch({
+            name: 'axisBorderShow',
+            path: 'axisBorderShow',
+            defaultValue: false,
+          });
+        },
+      });
+
+      const { optionsPane, panel } = setupTest('panel-1');
+      panel.setState({ $data: undefined });
+      panel.activate();
+
+      optionsPane.onChangePanelPlugin({
+        pluginId: 'table',
+        options: { showHeader: false },
+        fieldConfig: {
+          defaults: { custom: { axisBorderShow: true } },
+          overrides: [],
+        },
+      });
+
+      expect(panel.state.options).toEqual({ showHeader: false });
+      expect((panel.state.fieldConfig.defaults.custom as any).axisBorderShow).toEqual(true);
+    });
+
     it('Should preserve correct field config', () => {
       const { optionsPane, panel } = setupTest('panel-1');
 

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

@@ -72,6 +72,7 @@ export class PanelOptionsPane extends SceneObjectBase<PanelOptionsPaneState> {
     const panel = this.state.panelRef.resolve();
     const { options: prevOptions, fieldConfig: prevFieldConfig, pluginId: prevPluginId } = panel.state;
     const pluginId = options.pluginId;
+
     reportInteraction(INTERACTION_EVENT_NAME, {
       item: INTERACTION_ITEM.SELECT_PANEL_PLUGIN,
       plugin_id: pluginId,
@@ -96,6 +97,15 @@ export class PanelOptionsPane extends SceneObjectBase<PanelOptionsPaneState> {
     }
 
     panel.changePluginType(pluginId, cachedOptions, newFieldConfig);
+
+    if (options.options) {
+      panel.onOptionsChange(options.options, true);
+    }
+
+    if (options.fieldConfig) {
+      panel.onFieldConfigChange(options.fieldConfig, true);
+    }
+
     this.onToggleVizPicker();
   };