From cb49b9314683b5d99b6843738d6c62c6991a1d60 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Mon, 29 Apr 2024 09:45:50 +0100
Subject: [PATCH] [v11.0.x] DashboardScene: Fixes issue with dashboard links
 and variables (#87025)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DashboardScene: Fixes issue with dashboard links and variables (#86910)

* DashboardScene: Fixes issue with dashboard links and variables

* Update

(cherry picked from commit 01f83015047d0026f3d7083430e930ad5d6e6c34)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../dashboard-scene/scene/DashboardControls.tsx   | 15 +++++++++++++++
 .../SubMenu/DashboardLinksDashboard.tsx           |  3 ++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
index 693e6b9ba46..e62cd864efe 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -10,6 +10,7 @@ import {
   SceneTimePicker,
   SceneRefreshPicker,
   SceneDebugger,
+  VariableDependencyConfig,
 } from '@grafana/scenes';
 import { Box, Stack, useStyles2 } from '@grafana/ui';
 
@@ -27,6 +28,10 @@ interface DashboardControlsState extends SceneObjectState {
 export class DashboardControls extends SceneObjectBase<DashboardControlsState> {
   static Component = DashboardControlsRenderer;
 
+  protected _variableDependency = new VariableDependencyConfig(this, {
+    onAnyVariableChanged: this._onAnyVariableChanged.bind(this),
+  });
+
   public constructor(state: Partial<DashboardControlsState>) {
     super({
       variableControls: [],
@@ -35,6 +40,16 @@ export class DashboardControls extends SceneObjectBase<DashboardControlsState> {
       ...state,
     });
   }
+
+  /**
+   * Links can include all variables so we need to re-render when any change
+   */
+  private _onAnyVariableChanged(): void {
+    const dashboard = getDashboardSceneFor(this);
+    if (dashboard.state.links?.length > 0) {
+      this.forceRender();
+    }
+  }
 }
 
 function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardControls>) {
diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
index fe77b4870e4..5d02274ad8f 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React from 'react';
 import { useAsync } from 'react-use';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, ScopedVars } from '@grafana/data';
 import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
 import { selectors } from '@grafana/e2e-selectors';
 import { DashboardLink } from '@grafana/schema';
@@ -17,6 +17,7 @@ interface Props {
   link: DashboardLink;
   linkInfo: { title: string; href: string };
   dashboardUID: string;
+  scopedVars?: ScopedVars;
 }
 
 interface DashboardLinksMenuProps {