PanelEvents: Refactors and removes unnecessary events, fixes panel editor update issue when panel options change (#29414)

* Refactoring some events to new events

* More refactoring

* Make panel editor subscribe to new event

* Minor change and comment added

* Updated snapshot

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

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { css, cx } from 'emotion';
-import { Unsubscribable } from 'rxjs';
+import { Subscription } from 'rxjs';
 
 import { FieldConfigSource, GrafanaTheme, PanelPlugin } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -36,6 +36,7 @@ import { CoreEvents, LocationState, StoreState } from 'app/types';
 import { DisplayMode, displayModes, PanelEditorTab } from './types';
 import { VariableModel } from 'app/features/variables/types';
 import { DashboardModel, PanelModel } from '../../state';
+import { PanelOptionsChangedEvent } from 'app/types/events';
 
 interface OwnProps {
   dashboard: DashboardModel;
@@ -64,15 +65,30 @@ interface DispatchProps {
 type Props = OwnProps & ConnectedProps & DispatchProps;
 
 export class PanelEditorUnconnected extends PureComponent<Props> {
-  querySubscription: Unsubscribable;
+  private eventSubs?: Subscription;
 
   componentDidMount() {
     this.props.initPanelEditor(this.props.sourcePanel, this.props.dashboard);
   }
+
+  componentDidUpdate() {
+    const { panel, initDone } = this.props;
+
+    if (initDone && !this.eventSubs) {
+      this.eventSubs = new Subscription();
+      this.eventSubs.add(panel.events.subscribe(PanelOptionsChangedEvent, this.triggerForceUpdate));
+    }
+  }
+
   componentWillUnmount() {
     this.props.panelEditorCleanUp();
+    this.eventSubs?.unsubscribe();
   }
 
+  triggerForceUpdate = () => {
+    this.forceUpdate();
+  };
+
   onPanelExit = () => {
     this.props.updateLocation({
       query: { editPanel: null, tab: null },
@@ -113,8 +129,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
   };
 
   onPanelOptionsChanged = (options: any) => {
+    // we do not need to trigger force update here as the function call below
+    // fires PanelOptionsChangedEvent which we subscribe to above
     this.props.panel.updateOptions(options);
-    this.forceUpdate();
   };
 
   onPanelConfigChanged = (configKey: string, value: any) => {