NewPanelEditor: Fixed so that test alert rule works in new edit mode (#23179)

public/app/features/alerting/AlertTab.tsx

@@ -145,8 +145,8 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
   };
 
   renderTestRuleResult = () => {
-    const { panel, dashboard } = this.props;
-    return <TestRuleResult panelId={panel.id} dashboard={dashboard} />;
+    const { dashboard, panel } = this.props;
+    return <TestRuleResult panel={panel} dashboard={dashboard} />;
   };
 
   testRule = (): EditorToolbarView => ({

public/app/features/alerting/TestRuleResult.test.tsx

 import React from 'react';
 import { TestRuleResult, Props } from './TestRuleResult';
-import { DashboardModel } from '../dashboard/state';
+import { DashboardModel, PanelModel } from '../dashboard/state';
 import { shallow } from 'enzyme';
 
 jest.mock('@grafana/runtime', () => {
@@ -16,7 +16,7 @@ jest.mock('@grafana/runtime', () => {
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
-    panelId: 1,
+    panel: new PanelModel({ id: 1 }),
     dashboard: new DashboardModel({ panels: [{ id: 1 }] }),
   };
 

public/app/features/alerting/TestRuleResult.tsx

@@ -3,13 +3,13 @@ import { LoadingPlaceholder, JSONFormatter } from '@grafana/ui';
 
 import appEvents from 'app/core/app_events';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
-import { DashboardModel } from '../dashboard/state/DashboardModel';
+import { DashboardModel, PanelModel } from '../dashboard/state';
 import { getBackendSrv } from '@grafana/runtime';
 import { AppEvents } from '@grafana/data';
 
 export interface Props {
-  panelId: number;
   dashboard: DashboardModel;
+  panel: PanelModel;
 }
 
 interface State {
@@ -33,8 +33,17 @@ export class TestRuleResult extends PureComponent<Props, State> {
   }
 
   async testRule() {
-    const { panelId, dashboard } = this.props;
-    const payload = { dashboard: dashboard.getSaveModelClone(), panelId };
+    const { dashboard, panel } = this.props;
+
+    // dashboard save model
+    const model = dashboard.getSaveModelClone();
+
+    // now replace panel to get current edits
+    model.panels = model.panels.map(dashPanel => {
+      return dashPanel.id === panel.editSourceId ? panel.getSaveModel() : dashPanel;
+    });
+
+    const payload = { dashboard: model, panelId: panel.id };
 
     this.setState({ isLoading: true });
     const testRuleResponse = await getBackendSrv().post(`/api/alerts/test`, payload);