DynamicDashboards: Hide variables from outline in view mode (#115142)

public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx

@@ -59,9 +59,9 @@ export class DashboardEditableElement implements EditableDashboardElement {
     };
   }
 
-  public getOutlineChildren(): SceneObject[] {
+  public getOutlineChildren(isEditing: boolean): SceneObject[] {
     const { $variables, body } = this.dashboard.state;
-    return [$variables!, ...body.getOutlineChildren()];
+    return isEditing ? [$variables!, ...body.getOutlineChildren()] : body.getOutlineChildren();
   }
 
   public useEditPaneOptions = useEditPaneOptions.bind(this, this.dashboard);

public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx

@@ -51,7 +51,7 @@ function DashboardOutlineNode({ sceneObject, editPane, isEditing, depth, index }
 
   const noTitleText = t('dashboard.outline.tree-item.no-title', '<no title>');
 
-  const children = editableElement.getOutlineChildren?.() ?? [];
+  const children = editableElement.getOutlineChildren?.(isEditing) ?? [];
   const elementInfo = editableElement.getEditableElementInfo();
   const instanceName = elementInfo.instanceName === '' ? noTitleText : elementInfo.instanceName;
   const outlineRename = useOutlineRename(editableElement, isEditing);

public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts

@@ -74,7 +74,7 @@ export interface EditableDashboardElement {
   /**
    * Container objects can have children
    */
-  getOutlineChildren?(): SceneObject[];
+  getOutlineChildren?(isEditing?: boolean): SceneObject[];
 }
 
 export interface EditableDashboardElementInfo {