Query editor row in react is working

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

@@ -189,7 +189,7 @@ export class QueriesTab extends PureComponent<Props, State> {
 
     return (
       <EditorTabBody
-        heading="Data Source"
+        heading="Queries to"
         renderToolbar={this.renderToolbar}
         toolbarItems={[queryInspector, dsHelp]}
         setScrollTop={this.setScrollTop}

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

@@ -110,8 +110,8 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     const { datasource } = this.state;
 
     if (datasource.pluginExports.QueryCtrl) {
+      return <div ref={element => (this.element = element)} />;
     }
-    return <div ref={element => (this.element = element)} />;
 
     if (datasource.pluginExports.QueryEditor) {
       const QueryEditor = datasource.pluginExports.QueryEditor;
@@ -128,7 +128,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
       angularScope.toggleEditorMode();
       this.angularQueryEditor.digest();
     }
-  }
+  };
 
   get hasTextEditMode() {
     const { angularScope } = this.state;
@@ -149,6 +149,16 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     this.forceUpdate();
   };
 
+  renderCollapsedText(): string | null {
+    const { angularScope } = this.state;
+
+    if (angularScope && angularScope.getCollapsedText) {
+      return angularScope.getCollapsedText();
+    }
+
+    return null;
+  }
+
   render() {
     const { query, datasourceName, inMixedMode } = this.props;
     const { datasource, isCollapsed } = this.state;
@@ -177,9 +187,16 @@ export class QueryEditorRow extends PureComponent<Props, State> {
             {inMixedMode && <em className="query-editor-row__context-info"> ({datasourceName})</em>}
             {isDisabled && <em className="query-editor-row__context-info"> Disabled</em>}
           </div>
+          <div className="query-editor-row__collapsed-text">
+            {isCollapsed && <div>{this.renderCollapsedText()}</div>}
+          </div>
           <div className="query-editor-row__actions">
             {this.hasTextEditMode && (
-              <button className="query-editor-row__action" onClick={this.onToggleEditMode} title="Toggle text edit mode">
+              <button
+                className="query-editor-row__action"
+                onClick={this.onToggleEditMode}
+                title="Toggle text edit mode"
+              >
                 <i className="fa fa-fw fa-pencil" />
               </button>
             )}
@@ -218,4 +235,5 @@ export interface AngularQueryComponentScope {
   moveQuery: (query: DataQuery, direction: number) => void;
   datasource: DataSourceApi;
   toggleEditorMode?: () => void;
+  getCollapsedText?: () => string;
 }

public/app/features/panel/query_editor_row.ts

@@ -3,94 +3,26 @@ import angular from 'angular';
 const module = angular.module('grafana.directives');
 
 export class QueryRowCtrl {
-  collapsedText: string;
-  canCollapse: boolean;
-  getCollapsedText: any;
   target: any;
   queryCtrl: any;
   panelCtrl: any;
   panel: any;
-  collapsed: any;
-  hideEditorRowActions: boolean;
   hasTextEditMode: boolean;
 
   constructor() {
     this.panelCtrl = this.queryCtrl.panelCtrl;
     this.target = this.queryCtrl.target;
     this.panel = this.panelCtrl.panel;
-    this.hideEditorRowActions = this.panelCtrl.hideEditorRowActions;
 
     if (this.hasTextEditMode) {
-      this.panelCtrl.toggleEditorMode = this.toggleEditorMode.bind(this);
+      // expose this function to react parent component
+      this.panelCtrl.toggleEditorMode = this.queryCtrl.toggleEditorMode.bind(this.queryCtrl);
     }
 
-    if (!this.target.refId) {
+    if (this.queryCtrl.getCollapsedText) {
-      this.target.refId = this.panel.getNextQueryLetter();
+      // expose this function to react parent component
+      this.panelCtrl.getCollapsedText = this.queryCtrl.getCollapsedText.bind(this.queryCtrl);
     }
-
-    this.toggleCollapse(true);
-    if (this.target.isNew) {
-      delete this.target.isNew;
-      this.toggleCollapse(false);
-    }
-
-    if (this.panel.targets.length < 4) {
-      this.collapsed = false;
-    }
-  }
-
-  toggleHideQuery() {
-    this.target.hide = !this.target.hide;
-    this.panelCtrl.refresh();
-  }
-
-  toggleCollapse(init) {
-    if (!this.canCollapse) {
-      return;
-    }
-
-    if (!this.panelCtrl.__collapsedQueryCache) {
-      this.panelCtrl.__collapsedQueryCache = {};
-    }
-
-    if (init) {
-      this.collapsed = this.panelCtrl.__collapsedQueryCache[this.target.refId] !== false;
-    } else {
-      this.collapsed = !this.collapsed;
-      this.panelCtrl.__collapsedQueryCache[this.target.refId] = this.collapsed;
-    }
-
-    try {
-      this.collapsedText = this.queryCtrl.getCollapsedText();
-    } catch (e) {
-      const err = e.message || e.toString();
-      this.collapsedText = 'Error: ' + err;
-    }
-  }
-
-  toggleEditorMode() {
-    if (this.canCollapse && this.collapsed) {
-      this.collapsed = false;
-    }
-
-    this.queryCtrl.toggleEditorMode();
-  }
-
-  removeQuery() {
-    if (this.panelCtrl.__collapsedQueryCache) {
-      delete this.panelCtrl.__collapsedQueryCache[this.target.refId];
-    }
-
-    this.panelCtrl.removeQuery(this.target);
-  }
-
-  duplicateQuery() {
-    const clone = angular.copy(this.target);
-    this.panelCtrl.addQuery(clone);
-  }
-
-  moveQuery(direction) {
-    this.panelCtrl.moveQuery(this.target, direction);
   }
 }
 

public/sass/components/_panel_editor.scss

@@ -35,6 +35,7 @@
   flex-grow: 1;
   background: $input-bg;
   margin: 0 20px 0 84px;
+  width: calc(100% - 84px);
   border-radius: 3px;
   box-shadow: $panel-editor-shadow;
   min-height: 0;

public/sass/components/_query_editor.scss

@@ -200,6 +200,8 @@ input[type='text'].tight-form-func-param {
   position: relative;
   height: 35px;
   background: $page-bg;
+  flex-wrap: nowrap;
+  align-items: center;
 }
 
 .query-editor-row__ref-id {
@@ -217,8 +219,26 @@ input[type='text'].tight-form-func-param {
   }
 }
 
-.query-editor-row__actions {
+.query-editor-row__collapsed-text {
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
   flex-grow: 1;
+  overflow: hidden;
+
+  > div {
+    color: $text-muted;
+    font-style: italic;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: $font-size-sm;
+    min-width: 0;
+  }
+}
+
+.query-editor-row__actions {
+  flex-shrink: 0;
   display: flex;
   justify-content: flex-end;
   color: $text-muted;
@@ -235,14 +255,14 @@ input[type='text'].tight-form-func-param {
   }
 }
 
- .query-editor-row__body {
+.query-editor-row__body {
-   margin: 0 0 10px 40px;
+  margin: 0 0 10px 40px;
-   background: $page-bg;
+  background: $page-bg;
 
-   &--collapsed {
+  &--collapsed {
-     display: none;
+    display: none;
-   }
+  }
- }
+}
 
 .query-editor-row__context-info {
   font-style: italic;