From a96f80312ffed5290f23a438fe04479d7d353a83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 3 Apr 2025 10:13:43 +0200
Subject: [PATCH] DashboardOutline: Sync row collapse state with outline node
 collapse state  (#103283)

DashboardOutline: Sync row expanded state with outline
---
 .../edit-pane/DashboardOutline.tsx            | 41 +++++++++++++++----
 .../scene/layout-rows/RowItem.tsx             |  8 ++++
 .../scene/types/EditableDashboardElement.ts   | 10 +++++
 3 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
index 55841138a99..1a7e61a1e5f 100644
--- a/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { SceneObject, VizPanel } from '@grafana/scenes';
@@ -22,12 +22,20 @@ export function DashboardOutline({ editPane }: Props) {
 
   return (
     <Box padding={1} gap={0.25} display="flex" direction="column">
-      <DashboardOutlineNode sceneObject={dashboard} expandable />
+      <DashboardOutlineNode sceneObject={dashboard} editPane={editPane} expandable />
     </Box>
   );
 }
 
-function DashboardOutlineNode({ sceneObject, expandable }: { sceneObject: SceneObject; expandable: boolean }) {
+function DashboardOutlineNode({
+  sceneObject,
+  expandable,
+  editPane,
+}: {
+  sceneObject: SceneObject;
+  expandable: boolean;
+  editPane: DashboardEditPane;
+}) {
   const [isExpanded, setIsExpanded] = useState(true);
   const { key } = sceneObject.useState();
   const styles = useStyles2(getStyles);
@@ -38,17 +46,33 @@ function DashboardOutlineNode({ sceneObject, expandable }: { sceneObject: SceneO
   const children = collectEditableElementChildren(sceneObject);
   const elementInfo = editableElement.getEditableElementInfo();
   const instanceName = elementInfo.instanceName === '' ? '<empty title>' : elementInfo.instanceName;
+  const elementExpanded = !editableElement.getCollapsedState?.();
+
+  const onPointerDown = (evt: React.PointerEvent) => {
+    onSelect?.(evt);
+    setIsExpanded(!isExpanded);
+    editableElement.scrollIntoView?.();
+
+    // Sync expanded state with canvas element
+    if (editableElement.getCollapsedState) {
+      editableElement.setCollapsedState?.(isExpanded);
+    }
+  };
+
+  // Sync canvas element expanded state with outline element
+  useEffect(() => {
+    if (elementExpanded !== isExpanded) {
+      console.log('elementExpanded', elementExpanded);
+      setIsExpanded(elementExpanded);
+    }
+  }, [isExpanded, elementExpanded]);
 
   return (
     <>
       <button
         role="treeitem"
         className={cx(styles.nodeButton, isCloned && styles.nodeButtonClone, isSelected && styles.nodeButtonSelected)}
-        onPointerDown={(evt) => {
-          onSelect?.(evt);
-          setIsExpanded(!isExpanded);
-          editableElement.scrollIntoView?.();
-        }}
+        onPointerDown={onPointerDown}
       >
         {expandable && <Icon name={isExpanded ? 'angle-down' : 'angle-right'} />}
         <Icon size="sm" name={elementInfo.icon} />
@@ -63,6 +87,7 @@ function DashboardOutlineNode({ sceneObject, expandable }: { sceneObject: SceneO
                 key={child.sceneObject.state.key}
                 sceneObject={child.sceneObject}
                 expandable={child.expandable}
+                editPane={editPane}
               />
             ))
           ) : (
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 4c9f6443a67..0518d25023f 100644
--- a/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItem.tsx
@@ -202,4 +202,12 @@ export class RowItem
   public scrollIntoView() {
     scrollCanvasElementIntoView(this, this.containerRef);
   }
+
+  public getCollapsedState(): boolean {
+    return this.state.collapse ?? false;
+  }
+
+  public setCollapsedState(collapse: boolean) {
+    this.setState({ collapse });
+  }
 }
diff --git a/public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts b/public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts
index 15ec993d1be..3f22a6fd60f 100644
--- a/public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts
+++ b/public/app/features/dashboard-scene/scene/types/EditableDashboardElement.ts
@@ -49,6 +49,16 @@ export interface EditableDashboardElement {
    * scroll element into view (when selected from outline)
    */
   scrollIntoView?(): void;
+
+  /**
+   * Used to sync row collapsed state with outline
+   */
+  getCollapsedState?(): boolean;
+
+  /**
+   * Used to sync row collapsed state with outline
+   */
+  setCollapsedState?(collapsed: boolean): void;
 }
 
 export interface EditableDashboardElementInfo {