Dynamic dashboards: Hide hidden elements in outline in view mode (#115249)

hide hidden elements in outline in view mode

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}

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,
     };
   }
 

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,
     };
   }