Scenes/PanelEditor: Fix panel options search crash (#82003)

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

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

@@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { SceneComponentProps, SceneObjectBase, SceneObjectState, sceneGraph } from '@grafana/scenes';
 import { ButtonGroup, FilterInput, RadioButtonGroup, ToolbarButton, useStyles2 } from '@grafana/ui';
-import { OptionFilter, renderSearchHits } from 'app/features/dashboard/components/PanelEditor/OptionsPaneOptions';
+import { OptionFilter, RenderSearchHits } from 'app/features/dashboard/components/PanelEditor/OptionsPaneOptions';
 import { getFieldOverrideCategories } from 'app/features/dashboard/components/PanelEditor/getFieldOverrideElements';
 import { getPanelFrameCategory2 } from 'app/features/dashboard/components/PanelEditor/getPanelFrameOptions';
 import { getVisualizationOptions2 } from 'app/features/dashboard/components/PanelEditor/getVisualizationOptions';
@@ -75,24 +75,29 @@ export class PanelOptionsPane extends SceneObjectBase<PanelOptionsPaneState> {
 
     if (isSearching) {
       mainBoxElements.push(
-        renderSearchHits([panelFrameOptions, ...(visualizationOptions ?? [])], justOverrides, searchQuery)
+        <RenderSearchHits
+          allOptions={[panelFrameOptions, ...(visualizationOptions ?? [])]}
+          overrides={justOverrides}
+          searchQuery={searchQuery}
+          key="render-search-hits"
+        />
       );
     } else {
       switch (listMode) {
         case OptionFilter.All:
-          mainBoxElements.push(panelFrameOptions.render());
+          mainBoxElements.push(<panelFrameOptions.Render key="panel-frame-options" />);
 
           for (const item of visualizationOptions ?? []) {
-            mainBoxElements.push(item.render());
+            mainBoxElements.push(<item.Render key={item.props.id} />);
           }
 
           for (const item of justOverrides) {
-            mainBoxElements.push(item.render());
+            mainBoxElements.push(<item.Render key={item.props.id} />);
           }
           break;
         case OptionFilter.Overrides:
           for (const item of justOverrides) {
-            mainBoxElements.push(item.render());
+            mainBoxElements.push(<item.Render key={item.props.id} />);
           }
         default:
           break;

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

@@ -52,7 +52,7 @@ export class OptionsPaneCategoryDescriptor {
     return sub;
   }
 
-  render(searchQuery?: string) {
+  Render = ({ searchQuery }: { searchQuery?: string }) => {
     if (this.props.customRender) {
       return this.props.customRender();
     }
@@ -60,8 +60,10 @@ export class OptionsPaneCategoryDescriptor {
     return (
       <OptionsPaneCategory key={this.props.title} {...this.props}>
         {this.items.map((item) => item.render(searchQuery))}
-        {this.categories.map((category) => category.render(searchQuery))}
+        {this.categories.map((category) => (
+          <category.Render key={category.props.id} searchQuery={searchQuery} />
+        ))}
       </OptionsPaneCategory>
     );
-  }
+  };
 }

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

@@ -54,7 +54,14 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
     : [panelFrameOptions, ...vizOptions];
 
   if (isSearching) {
-    mainBoxElements.push(renderSearchHits(allOptions, justOverrides, searchQuery));
+    mainBoxElements.push(
+      <RenderSearchHits
+        key="render-search-hits"
+        allOptions={allOptions}
+        overrides={justOverrides}
+        searchQuery={searchQuery}
+      />
+    );
 
     // If searching for angular panel, then we need to add notice that results are limited
     if (props.plugin.angularPanelCtrl) {
@@ -69,10 +76,10 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
       case OptionFilter.All:
         if (isPanelModelLibraryPanel(panel)) {
           // Library Panel options first
-          mainBoxElements.push(libraryPanelOptions.render());
+          mainBoxElements.push(<libraryPanelOptions.Render key="library-panel-options" />);
         }
         // Panel frame options second
-        mainBoxElements.push(panelFrameOptions.render());
+        mainBoxElements.push(<panelFrameOptions.Render key="panel-frame-options" />);
         // If angular add those options next
         if (props.plugin.angularPanelCtrl) {
           mainBoxElements.push(
@@ -81,16 +88,16 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
         }
         // Then add all panel and field defaults
         for (const item of vizOptions) {
-          mainBoxElements.push(item.render());
+          mainBoxElements.push(<item.Render key={item.props.id} />);
         }
 
         for (const item of justOverrides) {
-          mainBoxElements.push(item.render());
+          mainBoxElements.push(<item.Render key={item.props.id} />);
         }
         break;
       case OptionFilter.Overrides:
         for (const override of justOverrides) {
-          mainBoxElements.push(override.render());
+          mainBoxElements.push(<override.Render key={override.props.id} />);
         }
         break;
       case OptionFilter.Recent:
@@ -150,11 +157,13 @@ export enum OptionFilter {
   Recent = 'Recent',
 }
 
-export function renderSearchHits(
-  allOptions: OptionsPaneCategoryDescriptor[],
-  overrides: OptionsPaneCategoryDescriptor[],
-  searchQuery: string
-) {
+interface RenderSearchHitsProps {
+  allOptions: OptionsPaneCategoryDescriptor[];
+  overrides: OptionsPaneCategoryDescriptor[];
+  searchQuery: string;
+}
+
+export function RenderSearchHits({ allOptions, overrides, searchQuery }: RenderSearchHitsProps) {
   const engine = new OptionSearchEngine(allOptions, overrides);
   const { optionHits, totalCount, overrideHits } = engine.search(searchQuery);
 
@@ -168,7 +177,9 @@ export function renderSearchHits(
       >
         {optionHits.map((hit) => hit.render(searchQuery))}
       </OptionsPaneCategory>
-      {overrideHits.map((override) => override.render(searchQuery))}
+      {overrideHits.map((override) => (
+        <override.Render key={override.props.id} searchQuery={searchQuery} />
+      ))}
     </div>
   );
 }