wip: testing new query editor row design

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

@@ -171,40 +171,39 @@ export class QueriesTab extends PureComponent<Props, State> {
     return (
       <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
         <>
-          <PanelOptionsGroup>
-            <div className="query-editor-rows">
-              {panel.targets.map((query, index) => (
-                <QueryEditorRow
-                  datasourceName={query.datasource || panel.datasource}
-                  key={query.refId}
-                  panel={panel}
-                  query={query}
-                  onRemoveQuery={this.onRemoveQuery}
-                  onAddQuery={this.onAddQuery}
-                  onMoveQuery={this.onMoveQuery}
-                />
-              ))}
-
-              <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>
-                <div className="gf-form">
-                  {!isAddingMixed && (
-                    <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
-                      Add Query
-                    </button>
-                  )}
-                  {isAddingMixed && this.renderMixedPicker()}
-                </div>
+          <div className="query-editor-rows">
+            {panel.targets.map((query, index) => (
+              <QueryEditorRow
+                datasourceName={query.datasource || panel.datasource}
+                key={query.refId}
+                panel={panel}
+                query={query}
+                onRemoveQuery={this.onRemoveQuery}
+                onAddQuery={this.onAddQuery}
+                onMoveQuery={this.onMoveQuery}
+              />
+            ))}
+          </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>
+              <div className="gf-form">
+                {!isAddingMixed && (
+                  <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
+                    Add Query
+                  </button>
+                )}
+                {isAddingMixed && this.renderMixedPicker()}
               </div>
             </div>
-          </PanelOptionsGroup>
+          </div>
           <PanelOptionsGroup>
             <QueryOptions panel={panel} datasource={currentDS} />
           </PanelOptionsGroup>

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

@@ -1,5 +1,6 @@
 // Libraries
 import React, { PureComponent } from 'react';
+import classNames from 'classnames';
 
 // Utils & Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -21,6 +22,7 @@ interface Props {
 
 interface State {
   datasource: DataSourceApi | null;
+  isCollapsed: boolean;
 }
 
 export class QueryEditorRow extends PureComponent<Props, State> {
@@ -29,6 +31,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
 
   state: State = {
     datasource: null,
+    isCollapsed: false,
   };
 
   componentDidMount() {
@@ -90,15 +93,51 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     }
   }
 
+  onToggleCollapse = () => {
+    this.setState({ isCollapsed: !this.state.isCollapsed });
+  };
+
   render() {
-    const { datasource } = this.state;
+    const { query } = this.props;
+    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 ref={element => (this.element = element)} />;
+      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">
+              <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 />;
@@ -119,4 +158,3 @@ export interface AngularQueryComponentScope {
   moveQuery: (query: DataQuery, direction: number) => void;
   datasource: DataSourceApi;
 }
-

public/app/features/panel/partials/query_editor_row.html

@@ -1,44 +1,2 @@
-<div class="gf-form-query">
-  <div ng-if="!ctrl.hideEditorRowActions" class="gf-form gf-form-query-letter-cell">
-    <label class="gf-form-label">
-      <a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()">
-        <span ng-class="{muted: !ctrl.canCollapse}" class="gf-form-query-letter-cell-carret">
-          <i class="fa fa-caret-down" ng-hide="ctrl.collapsed"></i>
-          <i class="fa fa-caret-right" ng-show="ctrl.collapsed"></i>
-        </span>
-        <span class="gf-form-query-letter-cell-letter">{{ ctrl.target.refId }}</span>
-        <em class="gf-form-query-letter-cell-ds" ng-show="ctrl.target.datasource">({{ ctrl.target.datasource }})</em>
-      </a>
-    </label>
-  </div>
+<div ng-transclude class="gf-form-query-content"></div>
 
-  <div class="gf-form-query-content gf-form-query-content--collapsed" ng-if="ctrl.collapsed">
-    <div class="gf-form">
-      <label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.toggleCollapse()">
-        {{ ctrl.collapsedText }}
-      </label>
-    </div>
-  </div>
-
-  <div ng-transclude class="gf-form-query-content" ng-if="!ctrl.collapsed"></div>
-
-  <div ng-if="!ctrl.hideEditorRowActions" class="gf-form">
-    <label class="gf-form-label dropdown">
-      <a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1"> <i class="fa fa-bars"></i> </a>
-      <ul class="dropdown-menu pull-right" role="menu">
-        <li role="menuitem" ng-if="ctrl.hasTextEditMode">
-          <a tabindex="1" ng-click="ctrl.toggleEditorMode()">Toggle Edit Mode</a>
-        </li>
-        <li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a></li>
-        <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a></li>
-        <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a></li>
-      </ul>
-    </label>
-    <label class="gf-form-label">
-      <a ng-click="ctrl.toggleHideQuery()" role="menuitem"> <i class="fa fa-eye"></i> </a>
-    </label>
-    <label class="gf-form-label">
-      <a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(ctrl.target)"> <i class="fa fa-trash"></i> </a>
-    </label>
-  </div>
-</div>

public/sass/components/_query_editor.scss

@@ -18,12 +18,6 @@
 }
 
 .gf-form-query {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-content: flex-start;
-  align-items: flex-start;
-
   .gf-form,
   .gf-form-filler {
     margin-bottom: 2px;
@@ -188,3 +182,53 @@ input[type='text'].tight-form-func-param {
 .rst-literal-block .rst-text {
   display: block;
 }
+
+.query-editor-box {
+  background: $page-bg;
+  margin-bottom: 2px;
+
+  &:hover {
+    .query-editor-box__actions {
+      display: flex;
+    }
+  }
+}
+
+.query-editor-box__header {
+  display: flex;
+  padding: 4px 0px 4px 8px;
+  position: relative;
+  height: 35px;
+}
+
+.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;
+
+  i {
+    padding-right: 5px;
+    color: $text-muted;
+    position: relative;
+  }
+}
+
+.query-editor-box__actions {
+  display: flex;
+  justify-content: flex-end;
+  display: none;
+}
+
+.query-editor-box__action {
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
+  border: 1px solid $navbar-button-border;
+  margin-right: 3px;
+}
+
+ .query-editor-box__body {
+   padding: 10px 20px;
+ }