Overrides: Pass searchQuery to overrides section to highlight correctly (#41684)

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

@@ -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 && (

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

@@ -57,8 +57,8 @@ export class OptionsPaneCategoryDescriptor {
 
     return (
       <OptionsPaneCategory key={this.props.title} {...this.props}>
-        {this.items.map((item) => item.render())}
+        {this.items.map((item) => item.render(searchQuery))}
-        {this.categories.map((category) => category.render())}
+        {this.categories.map((category) => category.render(searchQuery))}
       </OptionsPaneCategory>
     );
   }

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

@@ -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(
+  const [panelFrameOptions, vizOptions, libraryPanelOptions] = useMemo(
-    () => [
+    () => [getPanelFrameCategory(props), getVizualizationOptions(props), getLibraryPanelOptionsCategory(props)],
-      getPanelFrameCategory(props),
-      getVizualizationOptions(props),
-      getFieldOverrideCategories(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[] = [];

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

@@ -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}
               />
             );
           },