Fix: Update badges on PanelEditor tabs when adding a query/transformation/alert (#27729)

* minor nits in paneleditor

* add events for queries and transformations

* fix spelling

* add event to alertctrl

* revert alert changes

* re add force update

* reduce events

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -142,7 +142,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
     document.body.style.cursor = 'row-resize';
   };
 
-  onDiplayModeChange = (mode: DisplayMode) => {
+  onDisplayModeChange = (mode: DisplayMode) => {
     const { updatePanelEditorUIState } = this.props;
     updatePanelEditorUIState({
       mode: mode,
@@ -184,6 +184,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
       </div>
     );
   };
+
   renderHorizontalSplit(styles: EditorStyles) {
     const { dashboard, panel, tabs, uiState } = this.props;
     return tabs.length > 0 ? (
@@ -230,7 +231,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
           {this.renderTemplateVariables(styles)}
 
           <HorizontalGroup>
-            <RadioButtonGroup value={uiState.mode} options={displayModes} onChange={this.onDiplayModeChange} />
+            <RadioButtonGroup value={uiState.mode} options={displayModes} onChange={this.onDisplayModeChange} />
             <DashNavTimeControls
               dashboard={dashboard}
               location={location}
@@ -348,7 +349,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   }
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, props) => {
+const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = state => {
   const panel = state.panelEditor.getPanel();
   const { plugin } = getPanelStateById(state.dashboard, panel.id);
 

public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx

-import React, { useCallback } from 'react';
+import React, { PureComponent } from 'react';
 import { config } from 'app/core/config';
 import { css } from 'emotion';
 import { IconName, stylesFactory, Tab, TabContent, TabsBar } from '@grafana/ui';
-import { PanelEditorTab, PanelEditorTabId } from './types';
-import { DashboardModel } from '../../state';
 import { QueriesTab } from '../../panel_editor/QueriesTab';
-import { PanelModel } from '../../state/PanelModel';
 import { AlertTab } from 'app/features/alerting/AlertTab';
 import { TransformationsEditor } from '../TransformationsEditor/TransformationsEditor';
+import { DashboardModel, PanelModel } from '../../state';
+import { CoreEvents } from 'app/types';
+import { PanelEditorTab, PanelEditorTabId } from './types';
 
 interface PanelEditorTabsProps {
   panel: PanelModel;
@@ -16,12 +16,26 @@ interface PanelEditorTabsProps {
   onChangeTab: (tab: PanelEditorTab) => void;
 }
 
-export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboard, tabs, onChangeTab }) => {
-  const styles = getPanelEditorTabsStyles();
-  const activeTab = tabs.find(item => item.active)!;
+export class PanelEditorTabs extends PureComponent<PanelEditorTabsProps> {
+  componentDidMount() {
+    const { panel } = this.props;
+    panel.on(CoreEvents.queryChanged, this.triggerForceUpdate);
+    panel.on(CoreEvents.transformationChanged, this.triggerForceUpdate);
+  }
+
+  componentWillUnmount() {
+    const { panel } = this.props;
+    panel.off(CoreEvents.queryChanged, this.triggerForceUpdate);
+    panel.off(CoreEvents.transformationChanged, this.triggerForceUpdate);
+  }
+
+  triggerForceUpdate = () => {
+    this.forceUpdate();
+  };
+
+  getCounter = (tab: PanelEditorTab) => {
+    const { panel } = this.props;
 
-  const getCounter = useCallback(
-    (tab: PanelEditorTab) => {
     switch (tab.id) {
       case PanelEditorTabId.Query:
         return panel.targets.length;
@@ -33,9 +47,12 @@ export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboa
     }
 
     return null;
-    },
-    [panel]
-  );
+  };
+
+  render() {
+    const { dashboard, onChangeTab, tabs, panel } = this.props;
+    const styles = getPanelEditorTabsStyles();
+    const activeTab = tabs.find(item => item.active)!;
 
     if (tabs.length === 0) {
       return null;
@@ -52,7 +69,7 @@ export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboa
                 active={tab.active}
                 onChangeTab={() => onChangeTab(tab)}
                 icon={tab.icon as IconName}
-              counter={getCounter(tab)}
+                counter={this.getCounter(tab)}
               />
             );
           })}
@@ -64,7 +81,8 @@ export const PanelEditorTabs: React.FC<PanelEditorTabsProps> = ({ panel, dashboa
         </TabContent>
       </div>
     );
-};
+  }
+}
 
 const getPanelEditorTabsStyles = stylesFactory(() => {
   const { theme } = config;

public/app/features/dashboard/panel_editor/QueriesTab.tsx

@@ -161,7 +161,9 @@ export class QueriesTab extends PureComponent<Props, State> {
    * Sets the queries for the panel
    */
   onUpdateQueries = (queries: DataQuery[]) => {
-    this.props.panel.targets = queries;
+    this.props.panel.updateQueries(queries);
+
+    // Need to force update to rerender query rows.
     this.forceUpdate();
   };
 

public/app/features/dashboard/state/PanelModel.ts

@@ -6,6 +6,7 @@ import { getNextRefIdChar } from 'app/core/utils/query';
 import templateSrv from 'app/features/templating/template_srv';
 // Types
 import {
+  AppEvent,
   DataConfigSource,
   DataLink,
   DataQuery,
@@ -23,6 +24,7 @@ import { EDIT_PANEL_ID } from 'app/core/constants';
 import config from 'app/core/config';
 import { PanelQueryRunner } from './PanelQueryRunner';
 import { getDatasourceSrv } from '../../plugins/datasource_srv';
+import { CoreEvents } from '../../../types';
 
 export const panelAdded = eventFactory<PanelModel | undefined>('panel-added');
 export const panelRemoved = eventFactory<PanelModel | undefined>('panel-removed');
@@ -382,6 +384,11 @@ export class PanelModel implements DataConfigSource {
     }
   }
 
+  updateQueries(queries: DataQuery[]) {
+    this.events.emit(CoreEvents.queryChanged);
+    this.targets = queries;
+  }
+
   addQuery(query?: Partial<DataQuery>) {
     query = query || { refId: 'A' };
     query.refId = getNextRefIdChar(this.targets);
@@ -461,6 +468,7 @@ export class PanelModel implements DataConfigSource {
   }
 
   setTransformations(transformations: DataTransformerConfig[]) {
+    this.events.emit(CoreEvents.transformationChanged);
     this.transformations = transformations;
     this.resendLastResult();
   }
@@ -488,6 +496,14 @@ export class PanelModel implements DataConfigSource {
   getSavedId(): number {
     return this.editSourceId ?? this.id;
   }
+
+  on<T>(event: AppEvent<T>, callback: (payload?: T) => void) {
+    this.events.on(event, callback);
+  }
+
+  off<T>(event: AppEvent<T>, callback: (payload?: T) => void) {
+    this.events.off(event, callback);
+  }
 }
 
 function applyFieldConfigDefaults(fieldConfig: FieldConfigSource, defaults: FieldConfigSource): FieldConfigSource {

public/app/types/events.ts

@@ -156,3 +156,6 @@ export const jsonDiffReady = eventFactory('json-diff-ready');
 export const closeTimepicker = eventFactory('closeTimepicker');
 
 export const routeUpdated = eventFactory('$routeUpdate');
+
+export const queryChanged = eventFactory('queryChanged');
+export const transformationChanged = eventFactory('transformationChanged');