[v11.0.x] DashboardScene: Fixes issue with dashboard links and variables (#87025)

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

* DashboardScene: Fixes issue with dashboard links and variables

* Update

(cherry picked from commit 01f8301504)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

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>) {

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 {