[v11.1.x] DashboardScene: Fixes lack of re-render when updating field override properties (#89011)

DashboardScene: Fixes lack of re-render when updating field override properties (#88796)

* DashboardScene: Fixes lack of re-render when updating field override properties

* Added unit test

(cherry picked from commit db25886f9c)

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

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

@@ -1,14 +1,20 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+import { standardEditorsRegistry, standardFieldConfigEditorRegistry } from '@grafana/data';
+import { getPanelPlugin } from '@grafana/data/test/__mocks__/pluginMocks';
 import { selectors } from '@grafana/e2e-selectors';
 import { VizPanel } from '@grafana/scenes';
+import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/OptionsUI/registry';
 import { OptionFilter } from 'app/features/dashboard/components/PanelEditor/OptionsPaneOptions';
+import { overrideRuleTooltipDescription } from 'app/features/dashboard/components/PanelEditor/state/getOptionOverrides';
 
 import { DashboardGridItem } from '../scene/DashboardGridItem';
 import { DashboardScene } from '../scene/DashboardScene';
 import { LibraryVizPanel } from '../scene/LibraryVizPanel';
 import { vizPanelToPanel } from '../serialization/transformSceneToSaveModel';
+import { activateFullSceneTree } from '../utils/test-utils';
 import * as utils from '../utils/utils';
 
 import { PanelOptions } from './PanelOptions';
@@ -22,10 +28,38 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
+standardEditorsRegistry.setInit(getAllOptionEditors);
+standardFieldConfigEditorRegistry.setInit(getAllStandardFieldConfigs);
+
+const plugin = getPanelPlugin({
+  id: 'TestPanel',
+}).useFieldConfig({
+  standardOptions: {},
+  useCustomConfig: (b) => {
+    b.addBooleanSwitch({
+      name: 'CustomBool',
+      path: 'CustomBool',
+    })
+      .addBooleanSwitch({
+        name: 'HiddenFromDef',
+        path: 'HiddenFromDef',
+        hideFromDefaults: true,
+      })
+      .addTextInput({
+        name: 'TextPropWithCategory',
+        path: 'TextPropWithCategory',
+        settings: {
+          placeholder: 'CustomTextPropPlaceholder',
+        },
+        category: ['Axis'],
+      });
+  },
+});
+
 jest.mock('@grafana/runtime', () => ({
   ...jest.requireActual('@grafana/runtime'),
   getPluginImportUtils: () => ({
-    getPanelPluginFromCache: jest.fn(),
+    getPanelPluginFromCache: jest.fn().mockReturnValue(plugin),
   }),
 }));
 
@@ -44,13 +78,30 @@ function setup(options: SetupOptions = {}) {
       key: 'panel-1',
       pluginId: 'text',
       title: 'My title',
+      fieldConfig: {
+        defaults: {},
+        overrides: [
+          {
+            matcher: { id: 'byName', options: 'SeriesA' },
+            properties: [
+              {
+                id: 'decimals',
+                value: 2,
+              },
+            ],
+          },
+        ],
+      },
     });
 
     new DashboardGridItem({ body: panel });
   }
 
+  // need to wait for plugin to load
   const vizManager = VizPanelManager.createFor(panel);
 
+  activateFullSceneTree(vizManager);
+
   const panelOptions = <PanelOptions vizManager={vizManager} searchQuery="" listMode={OptionFilter.All}></PanelOptions>;
 
   const renderResult = render(panelOptions);
@@ -87,6 +138,22 @@ describe('PanelOptions', () => {
     });
   });
 
+  describe('Field overrides', () => {
+    it('Should be rendered', async () => {
+      const {} = setup();
+
+      expect(screen.getByLabelText(overrideRuleTooltipDescription)).toBeInTheDocument();
+    });
+
+    it('Can update', async () => {
+      const {} = setup();
+
+      await userEvent.click(screen.getByLabelText('Remove label'));
+
+      expect(screen.queryByLabelText(overrideRuleTooltipDescription)).not.toBeInTheDocument();
+    });
+  });
+
   it('gets library panel options when the editing a library panel', async () => {
     const panel = new VizPanel({
       key: 'panel-1',

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

@@ -62,9 +62,7 @@ export const PanelOptions = React.memo<Props>(({ vizManager, searchQuery, listMo
         data?.series ?? [],
         searchQuery,
         (newConfig) => {
-          panel.setState({
-            fieldConfig: newConfig,
-          });
+          panel.onFieldConfigChange(newConfig);
         }
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps