diff --git a/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx b/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx
index e8d70ee76d7..4e319506fa2 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx
+++ b/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 = ;
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',
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelOptions.tsx b/public/app/features/dashboard-scene/panel-edit/PanelOptions.tsx
index 7da739a385a..590715a653a 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelOptions.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelOptions.tsx
@@ -62,9 +62,7 @@ export const PanelOptions = React.memo(({ vizManager, searchQuery, listMo
data?.series ?? [],
searchQuery,
(newConfig) => {
- panel.setState({
- fieldConfig: newConfig,
- });
+ panel.onFieldConfigChange(newConfig);
}
),
// eslint-disable-next-line react-hooks/exhaustive-deps