From 9770ebcd6ca4a09bac33952e5abd8eba814fba7c Mon Sep 17 00:00:00 2001
From: Bogdan Matei <bogdan.matei@grafana.com>
Date: Wed, 26 Jun 2024 13:46:44 +0300
Subject: [PATCH] Scopes: Open the selector to a selected scope (#89686)

---
 .../scene/Scopes/ScopesFiltersScene.tsx       | 43 ++++++++++++++++++-
 .../scene/Scopes/ScopesScene.test.tsx         | 11 +++++
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx
index f0d9ddfb503..7af747fc9d8 100644
--- a/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx
+++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx
@@ -166,7 +166,19 @@ export class ScopesFiltersScene extends SceneObjectBase<ScopesFiltersSceneState>
 
   public open() {
     if (!this.scopesParent.state.isViewing) {
-      this.setState({ isOpened: true });
+      let nodes = { ...this.state.nodes };
+
+      // First close all nodes
+      nodes = this.closeNodes(nodes);
+
+      // Extract the path of a scope
+      let path = [...(this.state.scopes[0]?.path ?? ['', ''])];
+      path.splice(path.length - 1, 1);
+
+      // Expand the nodes to the selected scope
+      nodes = this.expandNodes(nodes, path);
+
+      this.setState({ isOpened: true, nodes });
     }
   }
 
@@ -207,6 +219,35 @@ export class ScopesFiltersScene extends SceneObjectBase<ScopesFiltersSceneState>
     this.setState({ isOpened: false });
   }
 
+  private closeNodes(nodes: NodesMap): NodesMap {
+    return Object.entries(nodes).reduce<NodesMap>((acc, [id, node]) => {
+      acc[id] = {
+        ...node,
+        isExpanded: false,
+        nodes: this.closeNodes(node.nodes),
+      };
+
+      return acc;
+    }, {});
+  }
+
+  private expandNodes(nodes: NodesMap, path: string[]): NodesMap {
+    nodes = { ...nodes };
+    let currentNodes = nodes;
+
+    for (let i = 0; i < path.length; i++) {
+      const nodeId = path[i];
+
+      currentNodes[nodeId] = {
+        ...currentNodes[nodeId],
+        isExpanded: true,
+      };
+      currentNodes = currentNodes[nodeId].nodes;
+    }
+
+    return nodes;
+  }
+
   private getTreeScopes(): TreeScope[] {
     return this.state.scopes.map(({ scope, path }) => ({
       scopeName: scope.metadata.name,
diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx
index ae67ba1f558..bbda7e05cac 100644
--- a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx
+++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx
@@ -181,6 +181,17 @@ describe('ScopesScene', () => {
         expect(getApplicationsSlothVoteTrackerSelect()).toBeInTheDocument();
         expect(queryApplicationsClustersTitle()).not.toBeInTheDocument();
       });
+
+      it('Opens to a selected scope', async () => {
+        await userEvents.click(getFiltersInput());
+        await userEvents.click(getApplicationsExpand());
+        await userEvents.click(getApplicationsSlothPictureFactorySelect());
+        await userEvents.click(getApplicationsExpand());
+        await userEvents.click(getClustersExpand());
+        await userEvents.click(getFiltersApply());
+        await userEvents.click(getFiltersInput());
+        expect(queryApplicationsSlothPictureFactoryTitle()).toBeInTheDocument();
+      });
     });
 
     describe('Filters', () => {