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

public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx

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

public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx

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

public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx

@@ -19,7 +19,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
         title: 'Title',
         value: panel.title,
         popularRank: 1,
-        Component: function renderTitle() {
+        render: function renderTitle() {
           return (
             <Input
               id="PanelFrameTitle"
@@ -35,7 +35,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
         title: 'Description',
         description: panel.description,
         value: panel.description,
-        Component: function renderDescription() {
+        render: function renderDescription() {
           return (
             <TextArea
               defaultValue={panel.description}
@@ -48,7 +48,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
     .addItem(
       new OptionsPaneItemDescriptor({
         title: 'Transparent background',
-        Component: function renderTransparent() {
+        render: function renderTransparent() {
           return (
             <Switch
               value={panel.transparent}
@@ -67,7 +67,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
       }).addItem(
         new OptionsPaneItemDescriptor({
           title: 'Panel links',
-          Component: function renderLinks() {
+          render: function renderLinks() {
             return (
               <DataLinksInlineEditor
                 links={panel.links}
@@ -91,7 +91,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
             title: 'Repeat by variable',
             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.',
-            Component: function renderRepeatOptions() {
+            render: function renderRepeatOptions() {
               return (
                 <RepeatRowSelect
                   repeat={panel.repeat}
@@ -107,7 +107,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
           new OptionsPaneItemDescriptor({
             title: 'Repeat direction',
             showIf: () => !!panel.repeat,
-            Component: function renderRepeatOptions() {
+            render: function renderRepeatOptions() {
               const directionOptions = [
                 { label: 'Horizontal', value: 'h' },
                 { label: 'Vertical', value: 'v' },
@@ -127,7 +127,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
           new OptionsPaneItemDescriptor({
             title: 'Max per row',
             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 }));
               return (
                 <Select

public/app/features/dashboard/components/PanelEditor/getVizualizationOptions.tsx

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

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

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