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 { + 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 = () => {