From dae492f6c88d89b78c22cede280ccddb27a1185b Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:27:27 +0100
Subject: [PATCH] PanelSearchLayout: Support repeat panels (#94140)

---
 .../dashboard-scene/scene/PanelSearchLayout.tsx  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/PanelSearchLayout.tsx b/public/app/features/dashboard-scene/scene/PanelSearchLayout.tsx
index 4334ef92114..06d2e65d0b8 100644
--- a/public/app/features/dashboard-scene/scene/PanelSearchLayout.tsx
+++ b/public/app/features/dashboard-scene/scene/PanelSearchLayout.tsx
@@ -23,7 +23,7 @@ const panelsPerRowCSSVar = '--panels-per-row';
 
 export function PanelSearchLayout({ dashboard, panelSearch = '', panelsPerRow }: Props) {
   const { body } = dashboard.state;
-  const panels: VizPanel[] = [];
+  const filteredPanels: VizPanel[] = [];
   const styles = useStyles2(getStyles);
 
   const bodyGrid = body instanceof DefaultGridLayoutManager ? body.state.grid : null;
@@ -34,11 +34,13 @@ export function PanelSearchLayout({ dashboard, panelSearch = '', panelsPerRow }:
 
   for (const gridItem of bodyGrid.state.children) {
     if (gridItem instanceof DashboardGridItem) {
-      const panel = gridItem.state.body;
-      const interpolatedTitle = sceneGraph.interpolate(dashboard, panel.state.title).toLowerCase();
-      const interpolatedSearchString = sceneGraph.interpolate(dashboard, panelSearch).toLowerCase();
-      if (interpolatedTitle.includes(interpolatedSearchString)) {
-        panels.push(gridItem.state.body);
+      const panels = gridItem.state.repeatedPanels ?? [gridItem.state.body];
+      for (const panel of panels) {
+        const interpolatedTitle = panel.interpolate(panel.state.title, undefined, 'text').toLowerCase();
+        const interpolatedSearchString = sceneGraph.interpolate(dashboard, panelSearch).toLowerCase();
+        if (interpolatedTitle.includes(interpolatedSearchString)) {
+          filteredPanels.push(panel);
+        }
       }
     }
   }
@@ -48,7 +50,7 @@ export function PanelSearchLayout({ dashboard, panelSearch = '', panelsPerRow }:
       className={classNames(styles.grid, { [styles.perRow]: panelsPerRow !== undefined })}
       style={{ [panelsPerRowCSSVar]: panelsPerRow } as Record<string, number>}
     >
-      {panels.map((panel) => (
+      {filteredPanels.map((panel) => (
         <PanelSearchHit key={panel.state.key} panel={panel} />
       ))}
     </div>