FieldOverrides: Apply field overrides in PanelQueryRunner (#22439)

* Apply field overrides in PanelChrome

* Move applyFieldOverrides to panel query runner

* Review updates

* Make sure overrides are applied back on souce panel when exiting the new edit mode

* TS ignores in est

* Make field display work in viz repeater

* Review updates

* Review and test updates

* Change the way overrides and trransformations are retrieved in PQR

* Minor updates after review

* Fix null checks

public/app/features/dashboard/dashgrid/PanelChrome.test.tsx

@@ -1,28 +0,0 @@
-import { PanelChrome } from './PanelChrome';
-
-describe('PanelChrome', () => {
-  let chrome: PanelChrome;
-
-  beforeEach(() => {
-    chrome = new PanelChrome({
-      panel: {
-        scopedVars: {
-          aaa: { value: 'AAA', text: 'upperA' },
-          bbb: { value: 'BBB', text: 'upperB' },
-        },
-      },
-      isFullscreen: false,
-    } as any);
-  });
-
-  it('Should replace a panel variable', () => {
-    const out = chrome.replaceVariables('hello $aaa');
-    expect(out).toBe('hello AAA');
-  });
-
-  it('But it should prefer the local variable value', () => {
-    const extra = { aaa: { text: '???', value: 'XXX' } };
-    const out = chrome.replaceVariables('hello $aaa and $bbb', extra);
-    expect(out).toBe('hello XXX and BBB');
-  });
-});

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -10,14 +10,12 @@ import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
 import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
 import { profiler } from 'app/core/profiler';
 import { getProcessedDataFrames } from '../state/runRequest';
-import templateSrv from 'app/features/templating/template_srv';
 import config from 'app/core/config';
 // Types
 import { DashboardModel, PanelModel } from '../state';
 import { PANEL_BORDER } from 'app/core/constants';
 import {
   LoadingState,
-  ScopedVars,
   AbsoluteTimeRange,
   DefaultTimeRange,
   toUtc,
@@ -212,7 +210,6 @@ export class PanelChrome extends PureComponent<Props, State> {
 
   onRender = () => {
     const stateUpdate = { renderCounter: this.state.renderCounter + 1 };
-
     this.setState(stateUpdate);
   };
 
@@ -220,14 +217,6 @@ export class PanelChrome extends PureComponent<Props, State> {
     this.props.panel.updateOptions(options);
   };
 
-  replaceVariables = (value: string, extraVars?: ScopedVars, format?: string) => {
-    let vars = this.props.panel.scopedVars;
-    if (extraVars) {
-      vars = vars ? { ...vars, ...extraVars } : extraVars;
-    }
-    return templateSrv.replace(value, vars, format);
-  };
-
   onPanelError = (message: string) => {
     if (this.state.errorMessage !== message) {
       this.setState({ errorMessage: message });
@@ -273,16 +262,15 @@ export class PanelChrome extends PureComponent<Props, State> {
 
     const PanelComponent = plugin.panel;
     const timeRange = data.timeRange || this.timeSrv.timeRange();
-
     const headerHeight = this.hasOverlayHeader() ? 0 : theme.panelHeaderHeight;
     const chromePadding = plugin.noPadding ? 0 : theme.panelPadding;
     const panelWidth = width - chromePadding * 2 - PANEL_BORDER;
     const innerPanelHeight = height - headerHeight - chromePadding * 2 - PANEL_BORDER;
-
     const panelContentClassNames = classNames({
       'panel-content': true,
       'panel-content--no-padding': plugin.noPadding,
     });
+    const panelOptions = panel.getOptions();
 
     return (
       <>
@@ -292,12 +280,12 @@ export class PanelChrome extends PureComponent<Props, State> {
             data={data}
             timeRange={timeRange}
             timeZone={this.props.dashboard.getTimezone()}
-            options={panel.getOptions()}
+            options={panelOptions}
             transparent={panel.transparent}
             width={panelWidth}
             height={innerPanelHeight}
             renderCounter={renderCounter}
-            replaceVariables={this.replaceVariables}
+            replaceVariables={panel.replaceVariables}
             onOptionsChange={this.onOptionsChange}
             onChangeTimeRange={this.onChangeTimeRange}
           />

public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap

@@ -144,6 +144,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 1,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -171,6 +172,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 2,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -198,6 +200,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 3,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -225,6 +228,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 4,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -278,6 +282,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
           "id": 1,
           "isInView": false,
           "options": Object {},
+          "replaceVariables": [Function],
           "targets": Array [
             Object {
               "refId": "A",
@@ -390,6 +395,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 1,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -417,6 +423,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 2,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -444,6 +451,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 3,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -471,6 +479,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 4,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -524,6 +533,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
           "id": 2,
           "isInView": false,
           "options": Object {},
+          "replaceVariables": [Function],
           "targets": Array [
             Object {
               "refId": "A",
@@ -636,6 +646,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 1,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -663,6 +674,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 2,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -690,6 +702,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 3,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -717,6 +730,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 4,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -770,6 +784,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
           "id": 3,
           "isInView": false,
           "options": Object {},
+          "replaceVariables": [Function],
           "targets": Array [
             Object {
               "refId": "A",
@@ -882,6 +897,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 1,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -909,6 +925,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 2,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -936,6 +953,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 3,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -963,6 +981,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
               "id": 4,
               "isInView": false,
               "options": Object {},
+              "replaceVariables": [Function],
               "targets": Array [
                 Object {
                   "refId": "A",
@@ -1016,6 +1035,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
           "id": 4,
           "isInView": false,
           "options": Object {},
+          "replaceVariables": [Function],
           "targets": Array [
             Object {
               "refId": "A",