From 0e76f347c3d60a8f3ba7ea16d35e9d46cea6919a Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 16 Nov 2021 11:41:53 +0000
Subject: [PATCH] Overrides: Pass searchQuery to overrides section to highlight
 correctly (#41684)

---
 .../PanelEditor/DynamicConfigValueEditor.tsx    |  9 ++++++++-
 .../OptionsPaneCategoryDescriptor.tsx           |  4 ++--
 .../PanelEditor/OptionsPaneOptions.tsx          | 17 +++++++++--------
 .../PanelEditor/getFieldOverrideElements.tsx    |  6 +++++-
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
index 592d1f49418..72eb4f45bd2 100644
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/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 && (
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
index 113dbc0dd49..5715aec6c47 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
+++ b/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.categories.map((category) => category.render())}
+        {this.items.map((item) => item.render(searchQuery))}
+        {this.categories.map((category) => category.render(searchQuery))}
       </OptionsPaneCategory>
     );
   }
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
index 6a105fb7a7c..9dae1eb897f 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+++ b/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(
-    () => [
-      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[] = [];
diff --git a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
index 9811f4e273e..43af045b55e 100644
--- a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
+++ b/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}
               />
             );
           },