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