stackdriver: make sure default template query editor state is propagted to parent angular scope

public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx

@@ -1,19 +1,9 @@
-import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 import { importPluginModule } from './plugin_loader';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
 import DefaultTemplateQueryCtrl from '../templating/defaultTemplateQueryCtrl';
 
-function WrapInProvider(Component, props) {
-  return (
-    <Provider>
-      <Component {...props} />
-    </Provider>
-  );
-}
-
 async function loadComponent(module) {
   const component = await importPluginModule(module);
   if (!component.TemplateQueryCtrl) {
@@ -28,9 +18,13 @@ function pluginTemplateQueryComponentLoader(datasourceSrv) {
   return {
     restrict: 'E',
     link: async (scope, elem) => {
-      const component = await loadComponent(scope.currentDatasource.meta.module);
-      const props = { datasourceSrv, query: scope.current.query, isValid: scope.current.isValid };
-      ReactDOM.render(WrapInProvider(component, props), elem[0]);
+      const Component = await loadComponent(scope.currentDatasource.meta.module);
+      const props = {
+        datasourceSrv,
+        query: scope.current.query,
+        onChange: scope.onQueryChange,
+      };
+      ReactDOM.render(<Component {...props} />, elem[0]);
       scope.$on('$destroy', () => {
         ReactDOM.unmountComponentAtNode(elem[0]);
       });

public/app/features/templating/defaultTemplateQueryCtrl.tsx

@@ -2,15 +2,23 @@ import React, { PureComponent } from 'react';
 
 interface Props {
   query: string;
+  onChange: (c: string) => void;
 }
 
-export default class DefaultTemplateQueryCtrl extends PureComponent<Props> {
+export default class DefaultTemplateQueryCtrl extends PureComponent<Props, any> {
   constructor(props) {
     super(props);
+    this.state = { value: props.query };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
   }
 
-  componentDidMount() {
-    console.log('componentDidMount');
+  handleChange(event) {
+    this.setState({ value: event.target.value });
+  }
+
+  handleBlur(event) {
+    this.props.onChange(event.target.value);
   }
 
   render() {
@@ -20,10 +28,10 @@ export default class DefaultTemplateQueryCtrl extends PureComponent<Props> {
         <input
           type="text"
           className="gf-form-input"
-          ng-model="current.query"
+          value={this.state.value}
+          onChange={this.handleChange}
+          onBlur={this.handleBlur}
           placeholder="metric name or tags query"
-          ng-model-onblur
-          ng-change="runQuery()"
           required
         />
       </div>

public/app/features/templating/editor_ctrl.ts

@@ -106,6 +106,11 @@ export class VariableEditorCtrl {
       });
     };
 
+    $scope.onQueryChange = value => {
+      $scope.current.query = value;
+      $scope.runQuery();
+    };
+
     $scope.edit = variable => {
       $scope.current = variable;
       $scope.currentIsNew = false;
@@ -173,8 +178,9 @@ export class VariableEditorCtrl {
     };
 
     $scope.datasourceChanged = async () => {
-      $scope.currentDatasource = await datasourceSrv.get($scope.current.datasource);
-      console.log($scope.currentDatasource);
+      datasourceSrv.get($scope.current.datasource).then(ds => {
+        $scope.currentDatasource = ds;
+      });
     };
   }
 }