mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Overrides: Pass searchQuery to overrides section to highlight correctly (#41684)
This commit is contained in:
parent
d3e19b1b3b
commit
0e76f347c3
@ -9,6 +9,7 @@ import React from 'react';
|
||||
import { Counter, Field, HorizontalGroup, IconButton, Label, stylesFactory, useTheme } from '@grafana/ui';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { OptionsPaneCategory } from './OptionsPaneCategory';
|
||||
import Highlighter from 'react-highlight-words';
|
||||
|
||||
interface DynamicConfigValueEditorProps {
|
||||
property: DynamicConfigValue;
|
||||
@ -17,6 +18,7 @@ interface DynamicConfigValueEditorProps {
|
||||
context: FieldOverrideContext;
|
||||
onRemove: () => void;
|
||||
isSystemOverride?: boolean;
|
||||
searchQuery: string;
|
||||
}
|
||||
|
||||
export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> = ({
|
||||
@ -26,6 +28,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
|
||||
onChange,
|
||||
onRemove,
|
||||
isSystemOverride,
|
||||
searchQuery,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const styles = getStyles(theme);
|
||||
@ -48,7 +51,11 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
|
||||
const renderLabel = (includeDescription = true, includeCounter = false) => (isExpanded = false) => (
|
||||
<HorizontalGroup justify="space-between">
|
||||
<Label category={labelCategory} description={includeDescription ? item.description : undefined}>
|
||||
{item.name}
|
||||
<Highlighter
|
||||
textToHighlight={item.name}
|
||||
searchWords={[searchQuery]}
|
||||
highlightClassName={'search-fragment-highlight'}
|
||||
/>
|
||||
{!isExpanded && includeCounter && item.getItemsCount && <Counter value={item.getItemsCount(property.value)} />}
|
||||
</Label>
|
||||
{!isSystemOverride && (
|
||||
|
@ -57,8 +57,8 @@ export class OptionsPaneCategoryDescriptor {
|
||||
|
||||
return (
|
||||
<OptionsPaneCategory key={this.props.title} {...this.props}>
|
||||
{this.items.map((item) => item.render())}
|
||||
{this.categories.map((category) => category.render())}
|
||||
{this.items.map((item) => item.render(searchQuery))}
|
||||
{this.categories.map((category) => category.render(searchQuery))}
|
||||
</OptionsPaneCategory>
|
||||
);
|
||||
}
|
||||
|
@ -20,16 +20,17 @@ export const OptionsPaneOptions: React.FC<OptionPaneRenderProps> = (props) => {
|
||||
const [listMode, setListMode] = useState(OptionFilter.All);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
const [panelFrameOptions, vizOptions, justOverrides, libraryPanelOptions] = useMemo(
|
||||
() => [
|
||||
getPanelFrameCategory(props),
|
||||
getVizualizationOptions(props),
|
||||
getFieldOverrideCategories(props),
|
||||
getLibraryPanelOptionsCategory(props),
|
||||
],
|
||||
const [panelFrameOptions, vizOptions, libraryPanelOptions] = useMemo(
|
||||
() => [getPanelFrameCategory(props), getVizualizationOptions(props), getLibraryPanelOptionsCategory(props)],
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[panel.configRev, props.data, props.instanceState]
|
||||
[panel.configRev, props.data, props.instanceState, searchQuery]
|
||||
);
|
||||
|
||||
const justOverrides = useMemo(
|
||||
() => getFieldOverrideCategories(props, searchQuery),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[panel.configRev, props.data, props.instanceState, searchQuery]
|
||||
);
|
||||
|
||||
const mainBoxElements: React.ReactNode[] = [];
|
||||
|
@ -18,7 +18,10 @@ import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/l
|
||||
import { OverrideCategoryTitle } from './OverrideCategoryTitle';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
export function getFieldOverrideCategories(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor[] {
|
||||
export function getFieldOverrideCategories(
|
||||
props: OptionPaneRenderProps,
|
||||
searchQuery: string
|
||||
): OptionsPaneCategoryDescriptor[] {
|
||||
const categories: OptionsPaneCategoryDescriptor[] = [];
|
||||
const currentFieldConfig = props.panel.fieldConfig;
|
||||
const registry = props.plugin.fieldConfigRegistry;
|
||||
@ -170,6 +173,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
|
||||
property={property}
|
||||
registry={registry}
|
||||
context={context}
|
||||
searchQuery={searchQuery}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user