From 114e9e90f3aab988211ba98b6ccb0564456f420e Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Wed, 7 Feb 2024 14:09:21 +0000 Subject: [PATCH] Scenes/PanelEditor: Fix panel options search crash (#82003) Co-authored-by: Dominik Prokop --- .../panel-edit/PanelOptionsPane.tsx | 17 +++++---- .../OptionsPaneCategoryDescriptor.tsx | 8 +++-- .../PanelEditor/OptionsPaneOptions.tsx | 35 ++++++++++++------- 3 files changed, 39 insertions(+), 21 deletions(-) diff --git a/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx b/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx index cebcbd46f73..29aee500a9d 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx +++ b/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 { if (isSearching) { mainBoxElements.push( - renderSearchHits([panelFrameOptions, ...(visualizationOptions ?? [])], justOverrides, searchQuery) + ); } else { switch (listMode) { case OptionFilter.All: - mainBoxElements.push(panelFrameOptions.render()); + mainBoxElements.push(); for (const item of visualizationOptions ?? []) { - mainBoxElements.push(item.render()); + mainBoxElements.push(); } for (const item of justOverrides) { - mainBoxElements.push(item.render()); + mainBoxElements.push(); } break; case OptionFilter.Overrides: for (const item of justOverrides) { - mainBoxElements.push(item.render()); + mainBoxElements.push(); } default: break; diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx index bc65bee8eb1..873dfcc4358 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx +++ b/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 ( {this.items.map((item) => item.render(searchQuery))} - {this.categories.map((category) => category.render(searchQuery))} + {this.categories.map((category) => ( + + ))} ); - } + }; } diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx index db9039bb24d..729d202c2c8 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx +++ b/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( + + ); // 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(); } // Panel frame options second - mainBoxElements.push(panelFrameOptions.render()); + mainBoxElements.push(); // 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(); } for (const item of justOverrides) { - mainBoxElements.push(item.render()); + mainBoxElements.push(); } break; case OptionFilter.Overrides: for (const override of justOverrides) { - mainBoxElements.push(override.render()); + mainBoxElements.push(); } 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))} - {overrideHits.map((override) => override.render(searchQuery))} + {overrideHits.map((override) => ( + + ))} ); }