From 7cdeab43537d86497fe3dff5a487b5b4649c4057 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Fri, 23 May 2025 14:23:28 +0100
Subject: [PATCH] DashboardOutline: Allow scrolling to unactivated panels
 (#105954)

---
 .../edit-pane/VizPanelEditableElement.tsx                | 5 +----
 .../scene/layout-default/DashboardGridItem.tsx           | 9 +++++++--
 .../scene/layouts-shared/scrollCanvasElementIntoView.ts  | 2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx b/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
index bfce86da4b7..d633c8a6495 100644
--- a/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/VizPanelEditableElement.tsx
@@ -123,10 +123,7 @@ export class VizPanelEditableElement implements EditableDashboardElement, BulkAc
   }
 
   public scrollIntoView() {
-    if (this.panel.parent instanceof AutoGridItem) {
-      this.panel.parent.scrollIntoView();
-    }
-    if (this.panel.parent instanceof DashboardGridItem) {
+    if (this.panel.parent instanceof AutoGridItem || this.panel.parent instanceof DashboardGridItem) {
       this.panel.parent.scrollIntoView();
     }
   }
diff --git a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItem.tsx b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItem.tsx
index aa52ca947b7..05bd804b77c 100644
--- a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItem.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItem.tsx
@@ -21,7 +21,7 @@ import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components
 
 import { getCloneKey } from '../../utils/clone';
 import { getMultiVariableValues } from '../../utils/utils';
-import { scrollCanvasElementIntoView } from '../layouts-shared/scrollCanvasElementIntoView';
+import { scrollCanvasElementIntoView, scrollIntoView } from '../layouts-shared/scrollCanvasElementIntoView';
 import { DashboardLayoutItem } from '../types/DashboardLayoutItem';
 import { DashboardRepeatsProcessedEvent } from '../types/DashboardRepeatsProcessedEvent';
 
@@ -253,6 +253,11 @@ export class DashboardGridItem
   }
 
   public scrollIntoView() {
-    scrollCanvasElementIntoView(this, this.containerRef);
+    const gridItemEl = document.querySelector(`[data-griditem-key="${this.state.key}"`);
+    if (gridItemEl instanceof HTMLElement) {
+      scrollIntoView(gridItemEl);
+    } else {
+      scrollCanvasElementIntoView(this, this.containerRef);
+    }
   }
 }
diff --git a/public/app/features/dashboard-scene/scene/layouts-shared/scrollCanvasElementIntoView.ts b/public/app/features/dashboard-scene/scene/layouts-shared/scrollCanvasElementIntoView.ts
index b54fc73d811..e87b7e269f0 100644
--- a/public/app/features/dashboard-scene/scene/layouts-shared/scrollCanvasElementIntoView.ts
+++ b/public/app/features/dashboard-scene/scene/layouts-shared/scrollCanvasElementIntoView.ts
@@ -42,6 +42,6 @@ export function scrollCanvasElementIntoView(sceneObject: SceneObject, ref: React
   }, 10);
 }
 
-function scrollIntoView(element: HTMLElement) {
+export function scrollIntoView(element: HTMLElement) {
   element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
 }