From d4e85e4857c3393d0f61bb76ed88e547e602efa1 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Sun, 9 Aug 2020 23:27:18 +0100
Subject: [PATCH] Dashboard Links: Links kept in sync with dashboard time range
 (#26845)

Closes #26694
---
 .../components/SubMenu/DashboardLinks.tsx         | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
index 0b461549f83..14db266dda3 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useReducer } from 'react';
 import { Icon, IconName, Tooltip } from '@grafana/ui';
 import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
 import { DashboardLinksDashboard } from './DashboardLinksDashboard';
@@ -7,6 +7,8 @@ import { getLinkSrv } from '../../../panel/panellinks/link_srv';
 import { DashboardModel } from '../../state';
 import { DashboardLink } from '../../state/DashboardModel';
 import { iconMap } from '../DashLinks/DashLinksEditorCtrl';
+import { useEffectOnce } from 'react-use';
+import { CoreEvents } from 'app/types';
 
 export interface Props {
   dashboard: DashboardModel;
@@ -18,6 +20,17 @@ export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
     return null;
   }
 
+  // Emulate forceUpdate (https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate)
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+  useEffectOnce(() => {
+    dashboard.on(CoreEvents.timeRangeUpdated, forceUpdate);
+
+    return () => {
+      dashboard.off(CoreEvents.timeRangeUpdated, forceUpdate);
+    };
+  });
+
   return (
     <>
       {links.map((link: DashboardLink, index: number) => {