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/state/PanelModel.test.ts

@@ -111,6 +111,25 @@ describe('PanelModel', () => {
       expect(saveModel.events).toBe(undefined);
     });
 
+    describe('variables interpolation', () => {
+      beforeEach(() => {
+        model.scopedVars = {
+          aaa: { value: 'AAA', text: 'upperA' },
+          bbb: { value: 'BBB', text: 'upperB' },
+        };
+      });
+      it('should interpolate variables', () => {
+        const out = model.replaceVariables('hello $aaa');
+        expect(out).toBe('hello AAA');
+      });
+
+      it('should prefer the local variable value', () => {
+        const extra = { aaa: { text: '???', value: 'XXX' } };
+        const out = model.replaceVariables('hello $aaa and $bbb', extra);
+        expect(out).toBe('hello XXX and BBB');
+      });
+    });
+
     describe('when changing panel type', () => {
       const newPanelPluginDefaults = {
         showThresholdLabels: false,
@@ -141,11 +160,6 @@ describe('PanelModel', () => {
         model.changePlugin(getPanelPlugin({ id: 'table' }));
         expect(model.alert).toBe(undefined);
       });
-
-      it('panelQueryRunner should be cleared', () => {
-        const panelQueryRunner = (model as any).queryRunner;
-        expect(panelQueryRunner).toBeFalsy();
-      });
     });
 
     describe('when changing to react panel from angular panel', () => {
@@ -171,5 +185,29 @@ describe('PanelModel', () => {
         expect(panelQueryRunner).toBe(sameQueryRunner);
       });
     });
+
+    describe('variables interpolation', () => {
+      let panelQueryRunner: any;
+
+      const onPanelTypeChanged = jest.fn();
+      const reactPlugin = getPanelPlugin({ id: 'react' }).setPanelChangeHandler(onPanelTypeChanged as any);
+
+      beforeEach(() => {
+        model.changePlugin(reactPlugin);
+        panelQueryRunner = model.getQueryRunner();
+      });
+
+      it('should call react onPanelTypeChanged', () => {
+        expect(onPanelTypeChanged.mock.calls.length).toBe(1);
+        expect(onPanelTypeChanged.mock.calls[0][1]).toBe('table');
+        expect(onPanelTypeChanged.mock.calls[0][2].angular).toBeDefined();
+      });
+
+      it('getQueryRunner() should return same instance after changing to another react panel', () => {
+        model.changePlugin(getPanelPlugin({ id: 'react2' }));
+        const sameQueryRunner = model.getQueryRunner();
+        expect(panelQueryRunner).toBe(sameQueryRunner);
+      });
+    });
   });
 });