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

This commit is contained in:
Alexa V 2024-02-14 15:18:46 +01:00 committed by GitHub
parent 44ecb26ea1
commit 04005d770b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 21 additions and 39 deletions

View File

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

View File

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

View File

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