Query editor row react progress, buttons working

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

@@ -181,18 +181,16 @@ export class QueriesTab extends PureComponent<Props, State> {
                 onRemoveQuery={this.onRemoveQuery}
                 onAddQuery={this.onAddQuery}
                 onMoveQuery={this.onMoveQuery}
+                inMixedMode={currentDS.meta.mixed}
               />
             ))}
           </div>
-          <div>
-            <div className="gf-form-query">
-              <div className="gf-form gf-form-query-letter-cell">
-                <label className="gf-form-label">
-                  <span className="gf-form-query-letter-cell-carret muted">
-                    <i className="fa fa-caret-down" />
-                  </span>{' '}
-                  <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
-                </label>
+          <div className="query-editor-box">
+            <div className="query-editor-row__header">
+              <div className="query-editor-row__ref-id">
+                <i className="fa fa-caret-down" />
+                 {' '}
+                 <span>{panel.getNextQueryLetter()}</span>
               </div>
               <div className="gf-form">
                 {!isAddingMixed && (

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

 // Libraries
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
+import _ from 'lodash';
 
 // Utils & Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -18,6 +19,7 @@ interface Props {
   onRemoveQuery: (query: DataQuery) => void;
   onMoveQuery: (query: DataQuery, direction: number) => void;
   datasourceName: string | null;
+  inMixedMode: boolean;
 }
 
 interface State {
@@ -133,47 +135,68 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     return angularScope && angularScope.toggleEditorMode;
   }
 
+  onRemoveQuery = () => {
+    this.props.onRemoveQuery(this.props.query);
+  };
+
+  onCopyQuery = () => {
+    const copy = _.cloneDeep(this.props.query);
+    this.props.onAddQuery(copy);
+  };
+
+  onDisableQuery = () => {
+    this.props.query.hide = !this.props.query.hide;
+    this.forceUpdate();
+  };
+
   render() {
-    const { query } = this.props;
-    const { datasource, isCollapsed, angularScope } = this.state;
-    const bodyClasses = classNames('query-editor-box__body gf-form-query', { hide: isCollapsed });
+    const { query, datasourceName, inMixedMode } = this.props;
+    const { datasource, isCollapsed } = this.state;
+    const isDisabled = query.hide;
+
+    const bodyClasses = classNames('query-editor-row__body gf-form-query', {
+      'query-editor-row__body--collapsed': isCollapsed,
+    });
+
+    const rowClasses = classNames('query-editor-row', {
+      'query-editor-row--disabled': isDisabled,
+      'gf-form-disabled': isDisabled,
+    });
 
     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}>
+      <div className={rowClasses}>
+        <div className="query-editor-row__header">
+          <div className="query-editor-row__ref-id" onClick={this.onToggleCollapse}>
             {isCollapsed && <i className="fa fa-caret-right" />}
             {!isCollapsed && <i className="fa fa-caret-down" />}
             <span>{query.refId}</span>
+            {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-box__actions">
+          <div className="query-editor-row__actions">
             {this.hasTextEditMode && (
-              <button className="query-editor-box__action" onClick={this.onToggleEditMode}>
+              <button className="query-editor-row__action" onClick={this.onToggleEditMode} title="Toggle text edit mode">
                 <i className="fa fa-fw fa-pencil" />
               </button>
             )}
-            <button className="query-editor-box__action">
+            <button className="query-editor-row__action" onClick={() => this.props.onMoveQuery(query, 1)}>
               <i className="fa fa-fw fa-arrow-down" />
             </button>
-            <button className="query-editor-box__action">
+            <button className="query-editor-row__action" onClick={() => this.props.onMoveQuery(query, -1)}>
               <i className="fa fa-fw fa-arrow-up" />
             </button>
-            <button className="query-editor-box__action">
+            <button className="query-editor-row__action" onClick={this.onCopyQuery} title="Duplicate query">
               <i className="fa fa-fw fa-copy" />
             </button>
-            <button className="query-editor-box__action">
-              <i className="fa fa-fw fa-eye" />
+            <button className="query-editor-row__action" onClick={this.onDisableQuery} title="Disable/enable query">
+              {isDisabled && <i className="fa fa-fw fa-eye-slash" />}
+              {!isDisabled && <i className="fa fa-fw fa-eye" />}
             </button>
-            <button className="query-editor-box__action">
+            <button className="query-editor-row__action" onClick={this.onRemoveQuery} title="Remove query">
               <i className="fa fa-fw fa-trash" />
             </button>
           </div>

public/sass/components/_query_editor.scss

@@ -3,12 +3,6 @@
   color: $blue;
 }
 
-.gf-form-disabled {
-  .query-keyword {
-    color: darken($blue, 20%);
-  }
-}
-
 .query-segment-operator {
   color: $orange;
 }
@@ -183,17 +177,24 @@ input[type='text'].tight-form-func-param {
   display: block;
 }
 
-.query-editor-box {
+.query-editor-row {
   margin-bottom: 2px;
 
   &:hover {
-    .query-editor-box__actions {
+    .query-editor-row__actions {
       display: flex;
     }
   }
+
+  &--disabled {
+    .query-keyword {
+      color: darken($blue, 20%);
+    }
+  }
+
 }
 
-.query-editor-box__header {
+.query-editor-row__header {
   display: flex;
   padding: 4px 0px 4px 8px;
   position: relative;
@@ -201,7 +202,7 @@ input[type='text'].tight-form-func-param {
   background: $page-bg;
 }
 
-.query-editor-box__ref-id {
+.query-editor-row__ref-id {
   font-weight: $font-weight-semi-bold;
   color: $blue;
   font-size: $font-size-md;
@@ -216,14 +217,14 @@ input[type='text'].tight-form-func-param {
   }
 }
 
-.query-editor-box__actions {
+.query-editor-row__actions {
   flex-grow: 1;
   display: flex;
   justify-content: flex-end;
   color: $text-muted;
 }
 
-.query-editor-box__action {
+.query-editor-row__action {
   margin-left: 3px;
   background: transparent;
   border: none;
@@ -234,7 +235,19 @@ input[type='text'].tight-form-func-param {
   }
 }
 
- .query-editor-box__body {
+ .query-editor-row__body {
    margin: 0 0 10px 40px;
    background: $page-bg;
+
+   &--collapsed {
+     display: none;
+   }
  }
+
+.query-editor-row__context-info {
+  font-style: italic;
+  font-size: $font-size-sm;
+  color: $text-muted;
+  padding-left: 10px;
+}
+