IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

PanelEditor: Fixes issue with unmount of option editor components (#32900)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-04-13 08:46:07 +02:00 committed by GitHub
parent 183a89b576
commit d90af6c6ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
View File

@ -1,6 +1,6 @@
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { Field, Label } from '@grafana/ui'; import { Field, Label } from '@grafana/ui';
import React, { ComponentType, ReactNode } from 'react'; import React, { ReactNode } from 'react';
import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor'; import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
export interface OptionsPaneItemProps { export interface OptionsPaneItemProps {
@ -8,7 +8,7 @@ export interface OptionsPaneItemProps {
value?: any; value?: any;
description?: string; description?: string;
popularRank?: number; popularRank?: number;
Component: ComponentType; render: () => React.ReactNode;
skipField?: boolean; skipField?: boolean;
showIf?: () => boolean; showIf?: () => boolean;
} }
@ -51,7 +51,7 @@ export class OptionsPaneItemDescriptor {
} }
render(isSearching?: boolean) { render(isSearching?: boolean) {
const { title, description, Component, showIf, skipField } = this.props; const { title, description, render, showIf, skipField } = this.props;
const key = `${this.parent.props.id} ${title}`; const key = `${this.parent.props.id} ${title}`;
if (showIf && !showIf()) { if (showIf && !showIf()) {
@ -59,7 +59,7 @@ export class OptionsPaneItemDescriptor {
} }
if (skipField) { if (skipField) {
return <Component key={key} />; return render();
} }
return ( return (
@ -69,7 +69,7 @@ export class OptionsPaneItemDescriptor {
key={key} key={key}
aria-label={selectors.components.PanelEditor.OptionsPane.fieldLabel(key)} aria-label={selectors.components.PanelEditor.OptionsPane.fieldLabel(key)}
> >
<Component /> {render() as React.ReactElement}
</Field> </Field>
); );
} }

6
public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
View File

@ -110,7 +110,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
category.addItem( category.addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: matcherUi.name, title: matcherUi.name,
Component: function renderMatcherUI() { render: function renderMatcherUI() {
return ( return (
<matcherUi.component <matcherUi.component
matcher={matcherUi.matcher} matcher={matcherUi.matcher}
@ -151,7 +151,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: registryItemForProperty.name, title: registryItemForProperty.name,
skipField: true, skipField: true,
Component: function renderPropertyEditor() { render: function renderPropertyEditor() {
return ( return (
<DynamicConfigValueEditor <DynamicConfigValueEditor
key={`${property.id}/${propIdx}`} key={`${property.id}/${propIdx}`}
@ -176,7 +176,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: '----------', title: '----------',
skipField: true, skipField: true,
Component: function renderAddPropertyButton() { render: function renderAddPropertyButton() {
return ( return (
<ValuePicker <ValuePicker
label="Add override property" label="Add override property"

14
public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
View File

@ -19,7 +19,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
title: 'Title', title: 'Title',
value: panel.title, value: panel.title,
popularRank: 1, popularRank: 1,
Component: function renderTitle() { render: function renderTitle() {
return ( return (
<Input <Input
id="PanelFrameTitle" id="PanelFrameTitle"
@ -35,7 +35,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
title: 'Description', title: 'Description',
description: panel.description, description: panel.description,
value: panel.description, value: panel.description,
Component: function renderDescription() { render: function renderDescription() {
return ( return (
<TextArea <TextArea
defaultValue={panel.description} defaultValue={panel.description}
@ -48,7 +48,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Transparent background', title: 'Transparent background',
Component: function renderTransparent() { render: function renderTransparent() {
return ( return (
<Switch <Switch
value={panel.transparent} value={panel.transparent}
@ -67,7 +67,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
}).addItem( }).addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Panel links', title: 'Panel links',
Component: function renderLinks() { render: function renderLinks() {
return ( return (
<DataLinksInlineEditor <DataLinksInlineEditor
links={panel.links} links={panel.links}
@ -91,7 +91,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
title: 'Repeat by variable', title: 'Repeat by variable',
description: description:
'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.', 'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.',
Component: function renderRepeatOptions() { render: function renderRepeatOptions() {
return ( return (
<RepeatRowSelect <RepeatRowSelect
repeat={panel.repeat} repeat={panel.repeat}
@ -107,7 +107,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Repeat direction', title: 'Repeat direction',
showIf: () => !!panel.repeat, showIf: () => !!panel.repeat,
Component: function renderRepeatOptions() { render: function renderRepeatOptions() {
const directionOptions = [ const directionOptions = [
{ label: 'Horizontal', value: 'h' }, { label: 'Horizontal', value: 'h' },
{ label: 'Vertical', value: 'v' }, { label: 'Vertical', value: 'v' },
@ -127,7 +127,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Max per row', title: 'Max per row',
showIf: () => Boolean(panel.repeat && panel.repeatDirection === 'h'), showIf: () => Boolean(panel.repeat && panel.repeatDirection === 'h'),
Component: function renderOption() { render: function renderOption() {
const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value })); const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value }));
return ( return (
<Select <Select

4
public/app/features/dashboard/components/PanelEditor/getVizualizationOptions.tsx
View File

@ -48,7 +48,7 @@ export function getVizualizationOptions(props: OptionPaneRenderProps): OptionsPa
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: pluginOption.name, title: pluginOption.name,
description: pluginOption.description, description: pluginOption.description,
Component: function renderEditor() { render: function renderEditor() {
const onChange = (value: any) => { const onChange = (value: any) => {
const newOptions = lodashSet({ ...currentOptions }, pluginOption.path, value); const newOptions = lodashSet({ ...currentOptions }, pluginOption.path, value);
onPanelOptionsChanged(newOptions); onPanelOptionsChanged(newOptions);
@ -101,7 +101,7 @@ export function getVizualizationOptions(props: OptionPaneRenderProps): OptionsPa
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: fieldOption.name, title: fieldOption.name,
description: fieldOption.description, description: fieldOption.description,
Component: function renderEditor() { render: function renderEditor() {
const onChange = (v: any) => { const onChange = (v: any) => {
onFieldConfigsChange( onFieldConfigsChange(
updateDefaultFieldConfigValue(currentFieldConfig, fieldOption.path, v, fieldOption.isCustom) updateDefaultFieldConfigValue(currentFieldConfig, fieldOption.path, v, fieldOption.isCustom)

24
public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
View File

@ -50,20 +50,20 @@ function getOptionCategories(): OptionsPaneCategoryDescriptor[] {
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Title', title: 'Title',
Component: jest.fn(), render: jest.fn(),
}) })
) )
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Min', title: 'Min',
Component: jest.fn(), render: jest.fn(),
}) })
) )
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'ASDSADASDSADA', title: 'ASDSADASDSADA',
description: 'DescriptionMatch', description: 'DescriptionMatch',
Component: jest.fn(), render: jest.fn(),
}) })
), ),
new OptionsPaneCategoryDescriptor({ new OptionsPaneCategoryDescriptor({
@ -73,19 +73,19 @@ function getOptionCategories(): OptionsPaneCategoryDescriptor[] {
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Min', title: 'Min',
Component: jest.fn(), render: jest.fn(),
}) })
) )
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'DescriptionMatch', title: 'DescriptionMatch',
Component: jest.fn(), render: jest.fn(),
}) })
) )
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Frame', title: 'Frame',
Component: jest.fn(), render: jest.fn(),
}) })
), ),
]; ];
@ -100,19 +100,19 @@ function getOverrides(): OptionsPaneCategoryDescriptor[] {
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Match by name', title: 'Match by name',
Component: jest.fn(), render: jest.fn(),
}) })
) )
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Min', title: 'Min',
Component: jest.fn(), render: jest.fn(),
}) })
) )
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Max', title: 'Max',
Component: jest.fn(), render: jest.fn(),
}) })
), ),
new OptionsPaneCategoryDescriptor({ new OptionsPaneCategoryDescriptor({
@ -122,19 +122,19 @@ function getOverrides(): OptionsPaneCategoryDescriptor[] {
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Match by name', title: 'Match by name',
Component: jest.fn(), render: jest.fn(),
}) })
) )
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Threshold', title: 'Threshold',
Component: jest.fn(), render: jest.fn(),
}) })
) )
.addItem( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Max', title: 'Max',
Component: jest.fn(), render: jest.fn(),
}) })
), ),
]; ];