Toggle edit mode works

public/app/features/dashboard/panel_editor/QueryEditorRow.tsx

@@ -23,6 +23,7 @@ interface Props {
 interface State {
   datasource: DataSourceApi | null;
   isCollapsed: boolean;
+  angularScope: AngularQueryComponentScope | null;
 }
 
 export class QueryEditorRow extends PureComponent<Props, State> {
@@ -32,6 +33,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
   state: State = {
     datasource: null,
     isCollapsed: false,
+    angularScope: null,
   };
 
   componentDidMount() {
@@ -85,6 +87,11 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     const scopeProps = { ctrl: this.getAngularQueryComponentScope() };
 
     this.angularQueryEditor = loader.load(this.element, scopeProps, template);
+
+    // give angular time to compile
+    setTimeout(() => {
+      this.setState({ angularScope: scopeProps.ctrl });
+    }, 10);
   }
 
   componentWillUnmount() {
@@ -97,54 +104,84 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     this.setState({ isCollapsed: !this.state.isCollapsed });
   };
 
-  render() {
+  renderPluginEditor() {
-    const { query } = this.props;
+    const { datasource } = this.state;
-    const { datasource, isCollapsed } = this.state;
-    const bodyClasses = classNames('query-editor-box__body gf-form-query', {hide: isCollapsed});
-
-    if (!datasource) {
-      return null;
-    }
 
     if (datasource.pluginExports.QueryCtrl) {
-      return (
+    }
-        <div className="query-editor-box">
+    return <div ref={element => (this.element = element)} />;
-          <div className="query-editor-box__header">
+
-            <div className="query-editor-box__ref-id" onClick={this.onToggleCollapse}>
+    if (datasource.pluginExports.QueryEditor) {
-              {isCollapsed && <i className="fa fa-caret-right" />}
-              {!isCollapsed && <i className="fa fa-caret-down" />}
-              <span>{query.refId}</span>
-            </div>
-            <div className="query-editor-box__actions">
-              <button className="query-editor-box__action">
-                <i className="fa fa-fw fa-arrow-down" />
-              </button>
-              <button className="query-editor-box__action">
-                <i className="fa fa-fw fa-arrow-up" />
-              </button>
-              <button className="query-editor-box__action">
-                <i className="fa fa-fw fa-copy" />
-              </button>
-              <button className="query-editor-box__action">
-                <i className="fa fa-fw fa-eye" />
-              </button>
-              <button className="query-editor-box__action">
-                <i className="fa fa-fw fa-trash" />
-              </button>
-            </div>
-          </div>
-          <div className={bodyClasses}>
-            <div ref={element => (this.element = element)} />
-          </div>
-        </div>
-      );
-    } else if (datasource.pluginExports.QueryEditor) {
       const QueryEditor = datasource.pluginExports.QueryEditor;
       return <QueryEditor />;
     }
 
     return <div>Data source plugin does not export any Query Editor component</div>;
   }
+
+  onToggleEditMode = () => {
+    const { angularScope } = this.state;
+
+    if (angularScope && angularScope.toggleEditorMode) {
+      angularScope.toggleEditorMode();
+      this.angularQueryEditor.digest();
+    }
+  }
+
+  get hasTextEditMode() {
+    const { angularScope } = this.state;
+    return angularScope && angularScope.toggleEditorMode;
+  }
+
+  render() {
+    const { query } = this.props;
+    const { datasource, isCollapsed, angularScope } = this.state;
+    const bodyClasses = classNames('query-editor-box__body gf-form-query', { hide: isCollapsed });
+
+    if (!datasource) {
+      return null;
+    }
+
+    console.log('Query render');
+    if (angularScope !== null && angularScope.toggleEditorMode) {
+      console.log('Query editor has text edit mode');
+    }
+
+    return (
+      <div className="query-editor-box">
+        <div className="query-editor-box__header">
+          <div className="query-editor-box__ref-id" onClick={this.onToggleCollapse}>
+            {isCollapsed && <i className="fa fa-caret-right" />}
+            {!isCollapsed && <i className="fa fa-caret-down" />}
+            <span>{query.refId}</span>
+          </div>
+          <div className="query-editor-box__actions">
+            {this.hasTextEditMode && (
+              <button className="query-editor-box__action" onClick={this.onToggleEditMode}>
+                <i className="fa fa-fw fa-pencil" />
+              </button>
+            )}
+            <button className="query-editor-box__action">
+              <i className="fa fa-fw fa-arrow-down" />
+            </button>
+            <button className="query-editor-box__action">
+              <i className="fa fa-fw fa-arrow-up" />
+            </button>
+            <button className="query-editor-box__action">
+              <i className="fa fa-fw fa-copy" />
+            </button>
+            <button className="query-editor-box__action">
+              <i className="fa fa-fw fa-eye" />
+            </button>
+            <button className="query-editor-box__action">
+              <i className="fa fa-fw fa-trash" />
+            </button>
+          </div>
+        </div>
+        <div className={bodyClasses}>{this.renderPluginEditor()}</div>
+      </div>
+    );
+  }
 }
 
 export interface AngularQueryComponentScope {
@@ -157,4 +194,5 @@ export interface AngularQueryComponentScope {
   addQuery: (query?: DataQuery) => void;
   moveQuery: (query: DataQuery, direction: number) => void;
   datasource: DataSourceApi;
+  toggleEditorMode?: () => void;
 }

public/app/features/panel/query_editor_row.ts

@@ -12,6 +12,7 @@ export class QueryRowCtrl {
   panel: any;
   collapsed: any;
   hideEditorRowActions: boolean;
+  hasTextEditMode: boolean;
 
   constructor() {
     this.panelCtrl = this.queryCtrl.panelCtrl;
@@ -19,6 +20,10 @@ export class QueryRowCtrl {
     this.panel = this.panelCtrl.panel;
     this.hideEditorRowActions = this.panelCtrl.hideEditorRowActions;
 
+    if (this.hasTextEditMode) {
+      this.panelCtrl.toggleEditorMode = this.toggleEditorMode.bind(this);
+    }
+
     if (!this.target.refId) {
       this.target.refId = this.panel.getNextQueryLetter();
     }

public/sass/components/_query_editor.scss

@@ -184,7 +184,6 @@ input[type='text'].tight-form-func-param {
 }
 
 .query-editor-box {
-  background: $page-bg;
   margin-bottom: 2px;
 
   &:hover {
@@ -199,13 +198,13 @@ input[type='text'].tight-form-func-param {
   padding: 4px 0px 4px 8px;
   position: relative;
   height: 35px;
+  background: $page-bg;
 }
 
 .query-editor-box__ref-id {
   font-weight: $font-weight-semi-bold;
   color: $blue;
   font-size: $font-size-md;
-  flex-grow: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -218,17 +217,24 @@ input[type='text'].tight-form-func-param {
 }
 
 .query-editor-box__actions {
+  flex-grow: 1;
   display: flex;
   justify-content: flex-end;
-  display: none;
+  color: $text-muted;
 }
 
 .query-editor-box__action {
-  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
+  margin-left: 3px;
-  border: 1px solid $navbar-button-border;
+  background: transparent;
-  margin-right: 3px;
+  border: none;
+  box-shadow: none;
+
+  &:hover {
+    color: $text-color;
+  }
 }
 
  .query-editor-box__body {
-   padding: 10px 20px;
+   margin: 0 0 10px 40px;
+   background: $page-bg;
  }