From 395d7eb74cdce7c2a405bba80738cd4a3d342784 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Mon, 24 May 2021 14:28:26 +0100
Subject: [PATCH] DashboardRow: fixes time variable not updating when used in
 row title (#34523)

* DashboardRow: fixes time variable not updating when used in row title

* adds test cases for subscribe event
---
 .../components/DashboardRow/DashboardRow.test.tsx   |  5 +++++
 .../components/DashboardRow/DashboardRow.tsx        | 13 +++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
index df944b049c5..9da5aa3b5b7 100644
--- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
+++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
@@ -13,6 +13,7 @@ describe('DashboardRow', () => {
       meta: {
         canEdit: true,
       },
+      events: { subscribe: jest.fn() },
     };
 
     panel = new PanelModel({ collapsed: false });
@@ -31,6 +32,10 @@ describe('DashboardRow', () => {
     expect(dashboardMock.toggleRow.mock.calls).toHaveLength(1);
   });
 
+  it('Should subscribe to event during mount', () => {
+    expect(dashboardMock.events.subscribe.mock.calls).toHaveLength(1);
+  });
+
   it('should have two actions as admin', () => {
     expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(2);
   });
diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
index 687eedbe843..4081e2162ef 100644
--- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
+++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
@@ -4,10 +4,10 @@ import { Icon } from '@grafana/ui';
 import { PanelModel } from '../../state/PanelModel';
 import { DashboardModel } from '../../state/DashboardModel';
 import appEvents from 'app/core/app_events';
-import { CoreEvents } from 'app/types';
 import { RowOptionsButton } from '../RowOptions/RowOptionsButton';
 import { getTemplateSrv } from '@grafana/runtime';
-import { ShowConfirmModalEvent } from '../../../../types/events';
+import { RefreshEvent, ShowConfirmModalEvent } from '../../../../types/events';
+import { Unsubscribable } from 'rxjs';
 
 export interface DashboardRowProps {
   panel: PanelModel;
@@ -15,18 +15,23 @@ export interface DashboardRowProps {
 }
 
 export class DashboardRow extends React.Component<DashboardRowProps, any> {
+  sub?: Unsubscribable;
   constructor(props: DashboardRowProps) {
     super(props);
 
     this.state = {
       collapsed: this.props.panel.collapsed,
     };
+  }
 
-    this.props.dashboard.on(CoreEvents.templateVariableValueUpdated, this.onVariableUpdated);
+  componentDidMount() {
+    this.sub = this.props.dashboard.events.subscribe(RefreshEvent, this.onVariableUpdated);
   }
 
   componentWillUnmount() {
-    this.props.dashboard.off(CoreEvents.templateVariableValueUpdated, this.onVariableUpdated);
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
   }
 
   onVariableUpdated = () => {