From 1e031db60752dd3c93acd989d58dd6b98f1ccaa2 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Mon, 15 Dec 2025 12:28:28 +0100
Subject: [PATCH] Dynamic dashboards: Hide hidden elements in outline in view
 mode (#115249)

hide hidden elements in outline in view mode
---
 .../edit-pane/DashboardOutline.tsx                | 15 ++++++++++++---
 .../dashboard-scene/scene/layout-rows/RowItem.tsx |  2 ++
 .../dashboard-scene/scene/layout-tabs/TabItem.tsx |  2 ++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
index 39a10538f67..10bb180a4b1 100644
--- a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
@@ -51,11 +51,16 @@ function DashboardOutlineNode({ sceneObject, editPane, isEditing, depth, index }
 
   const noTitleText = t('dashboard.outline.tree-item.no-title', '<no title>');
 
-  const children = editableElement.getOutlineChildren?.(isEditing) ?? [];
   const elementInfo = editableElement.getEditableElementInfo();
   const instanceName = elementInfo.instanceName === '' ? noTitleText : elementInfo.instanceName;
   const outlineRename = useOutlineRename(editableElement, isEditing);
   const isContainer = editableElement.getOutlineChildren ? true : false;
+  const visibleChildren = useMemo(() => {
+    const children = editableElement.getOutlineChildren?.(isEditing) ?? [];
+    return isEditing
+      ? children
+      : children.filter((child) => !getEditableElementFor(child)?.getEditableElementInfo().isHidden);
+  }, [editableElement, isEditing]);
 
   const onNodeClicked = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -74,6 +79,10 @@ function DashboardOutlineNode({ sceneObject, editPane, isEditing, depth, index }
     setIsCollapsed(!isCollapsed);
   };
 
+  if (elementInfo.isHidden && !isEditing) {
+    return null;
+  }
+
   return (
     // todo: add proper keyboard navigation
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -130,8 +139,8 @@ function DashboardOutlineNode({ sceneObject, editPane, isEditing, depth, index }
 
       {isContainer && !isCollapsed && (
         <ul className={styles.nodeChildren} role="group">
-          {children.length > 0 ? (
-            children.map((child, i) => (
+          {visibleChildren.length > 0 ? (
+            visibleChildren.map((child, i) => (
               <DashboardOutlineNode
                 key={child.state.key}
                 sceneObject={child}
diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx
index e3f3155497b..154ebf7875a 100644
--- a/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx
@@ -91,10 +91,12 @@ export class RowItem
   }
 
   public getEditableElementInfo(): EditableDashboardElementInfo {
+    const isHidden = !this.state.conditionalRendering?.state.result;
     return {
       typeName: t('dashboard.edit-pane.elements.row', 'Row'),
       instanceName: sceneGraph.interpolate(this, this.state.title, undefined, 'text'),
       icon: 'list-ul',
+      isHidden,
     };
   }
 
diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx
index 5bcaba4b140..a20301dd904 100644
--- a/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabItem.tsx
@@ -89,10 +89,12 @@ export class TabItem
   }
 
   public getEditableElementInfo(): EditableDashboardElementInfo {
+    const isHidden = !this.state.conditionalRendering?.state.result;
     return {
       typeName: t('dashboard.edit-pane.elements.tab', 'Tab'),
       instanceName: sceneGraph.interpolate(this, this.state.title, undefined, 'text'),
       icon: 'layers',
+      isHidden,
     };
   }