NewPanelEdit: Add unified UI to queries and transformations (#23478)

* Do not use pointer cursor on icon by default

* Allow items alignment in the HorizontalGroup layout

* Add util for rendering components based on their type (element or function)

* Components for rendering query and transformation rows in a unified way

* Apply new UI fo query and transformation rows

* Add some tests

* Minor fix for scroll area

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

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

@@ -9,16 +9,20 @@ import { Emitter } from 'app/core/utils/emitter';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 // Types
 import { PanelModel } from '../state/PanelModel';
-import { ErrorBoundaryAlert } from '@grafana/ui';
+
+import { ErrorBoundaryAlert, HorizontalGroup } from '@grafana/ui';
 import {
   DataQuery,
   DataSourceApi,
+  LoadingState,
   PanelData,
   PanelEvents,
   TimeRange,
-  LoadingState,
   toLegacyResponseData,
 } from '@grafana/data';
+import { QueryEditorRowTitle } from './QueryEditorRowTitle';
+import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
+import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
 import { DashboardModel } from '../state/DashboardModel';
 
 interface Props {
@@ -37,9 +41,9 @@ interface Props {
 interface State {
   loadedDataSourceValue: string | null | undefined;
   datasource: DataSourceApi | null;
-  isCollapsed: boolean;
   hasTextEditMode: boolean;
   data?: PanelData;
+  isOpen?: boolean;
 }
 
 export class QueryEditorRow extends PureComponent<Props, State> {
@@ -49,10 +53,10 @@ export class QueryEditorRow extends PureComponent<Props, State> {
 
   state: State = {
     datasource: null,
-    isCollapsed: false,
     loadedDataSourceValue: undefined,
     hasTextEditMode: false,
     data: null,
+    isOpen: true,
   };
 
   componentDidMount() {
@@ -122,23 +126,33 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     if (!this.element || this.angularQueryEditor) {
       return;
     }
+    this.renderAngularQueryEditor();
+  }
 
+  renderAngularQueryEditor = () => {
+    if (!this.element) {
+      return;
+    }
+    if (this.angularQueryEditor) {
+      this.angularQueryEditor.destroy();
+      this.angularQueryEditor = null;
+    }
     const loader = getAngularLoader();
     const template = '<plugin-component type="query-ctrl" />';
     const scopeProps = { ctrl: this.getAngularQueryComponentScope() };
     this.angularQueryEditor = loader.load(this.element, scopeProps, template);
     this.angularScope = scopeProps.ctrl;
-  }
+  };
 
-  onToggleCollapse = () => {
-    this.setState({ isCollapsed: !this.state.isCollapsed });
+  onOpen = () => {
+    this.renderAngularQueryEditor();
   };
 
   onRunQuery = () => {
     this.props.panel.refresh();
   };
 
-  renderPluginEditor() {
+  renderPluginEditor = () => {
     const { query, onChange } = this.props;
     const { datasource, data } = this.state;
 
@@ -161,16 +175,16 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     }
 
     return <div>Data source plugin does not export any Query Editor component</div>;
-  }
+  };
 
-  onToggleEditMode = () => {
+  onToggleEditMode = (e: React.MouseEvent, { isOpen, openRow }: { isOpen: boolean; openRow: () => void }) => {
+    e.stopPropagation();
     if (this.angularScope && this.angularScope.toggleEditorMode) {
       this.angularScope.toggleEditorMode();
       this.angularQueryEditor.digest();
-    }
-
-    if (this.state.isCollapsed) {
-      this.setState({ isCollapsed: false });
+      if (!isOpen) {
+        openRow();
+      }
     }
   };
 
@@ -201,14 +215,60 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     return null;
   }
 
-  render() {
-    const { query, inMixedMode } = this.props;
-    const { datasource, isCollapsed, hasTextEditMode } = this.state;
+  renderActions = (props: { isOpen: boolean; openRow: () => void }) => {
+    const { query } = this.props;
+    const { hasTextEditMode } = this.state;
     const isDisabled = query.hide;
 
-    const bodyClasses = classNames('query-editor-row__body gf-form-query', {
-      'query-editor-row__body--collapsed': isCollapsed,
-    });
+    return (
+      <HorizontalGroup>
+        {hasTextEditMode && (
+          <QueryOperationAction
+            title="Toggle text edit mode"
+            icon="pen"
+            onClick={e => {
+              this.onToggleEditMode(e, props);
+            }}
+          />
+        )}
+        <QueryOperationAction
+          title="Move query down"
+          icon="arrow-down"
+          onClick={() => this.props.onMoveQuery(query, 1)}
+        />
+        <QueryOperationAction title="Move query up" icon="arrow-up" onClick={() => this.props.onMoveQuery(query, -1)} />
+
+        <QueryOperationAction title="Duplicate query" icon="copy" onClick={this.onCopyQuery} />
+        <QueryOperationAction
+          title="Disable/enable query"
+          icon={isDisabled ? 'eye-slash' : 'eye'}
+          onClick={this.onDisableQuery}
+        />
+        <QueryOperationAction title="Remove query" icon="trash-alt" onClick={this.onRemoveQuery} />
+      </HorizontalGroup>
+    );
+  };
+
+  renderTitle = (props: { isOpen: boolean; openRow: () => void }) => {
+    const { query, inMixedMode } = this.props;
+    const { datasource } = this.state;
+    const isDisabled = query.hide;
+    return (
+      <QueryEditorRowTitle
+        query={query}
+        inMixedMode={inMixedMode}
+        datasource={datasource}
+        disabled={isDisabled}
+        onClick={e => this.onToggleEditMode(e, props)}
+        collapsedText={!props.isOpen ? this.renderCollapsedText() : null}
+      />
+    );
+  };
+
+  render() {
+    const { query } = this.props;
+    const { datasource } = this.state;
+    const isDisabled = query.hide;
 
     const rowClasses = classNames('query-editor-row', {
       'query-editor-row--disabled': isDisabled,
@@ -219,51 +279,14 @@ export class QueryEditorRow extends PureComponent<Props, State> {
       return null;
     }
 
+    const editor = this.renderPluginEditor();
+
     return (
-      <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"> ({datasource.name})</em>}
-            {isDisabled && <em className="query-editor-row__context-info"> Disabled</em>}
-          </div>
-          <div className="query-editor-row__collapsed-text" onClick={this.onToggleEditMode}>
-            {isCollapsed && <div>{this.renderCollapsedText()}</div>}
-          </div>
-          <div className="query-editor-row__actions">
-            {hasTextEditMode && (
-              <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-row__action" onClick={() => this.props.onMoveQuery(query, 1)}>
-              <i className="fa fa-fw fa-arrow-down" />
-            </button>
-            <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-row__action" onClick={this.onCopyQuery} title="Duplicate query">
-              <i className="fa fa-fw fa-copy" />
-            </button>
-            <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-row__action" onClick={this.onRemoveQuery} title="Remove query">
-              <i className="fa fa-fw fa-trash" />
-            </button>
-          </div>
+      <QueryOperationRow title={this.renderTitle} actions={this.renderActions} onOpen={this.onOpen}>
+        <div className={rowClasses}>
+          <ErrorBoundaryAlert>{editor}</ErrorBoundaryAlert>
         </div>
-        <div className={bodyClasses}>
-          <ErrorBoundaryAlert>{this.renderPluginEditor()}</ErrorBoundaryAlert>
-        </div>
-      </div>
+      </QueryOperationRow>
     );
   }
 }