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/components/TransformationsEditor/TransformationEditor.tsx

@@ -0,0 +1,132 @@
+import React, { useContext } from 'react';
+import { css } from 'emotion';
+import { CustomScrollbar, Icon, JSONFormatter, ThemeContext } from '@grafana/ui';
+import { GrafanaTheme, DataFrame } from '@grafana/data';
+
+interface TransformationEditorProps {
+  name: string;
+  description: string;
+  editor?: JSX.Element;
+  input: DataFrame[];
+  output?: DataFrame[];
+  debugMode?: boolean;
+}
+
+export const TransformationEditor = ({ editor, input, output, debugMode }: TransformationEditorProps) => {
+  const theme = useContext(ThemeContext);
+  const styles = getStyles(theme);
+
+  return (
+    <div>
+      <div className={styles.editor}>
+        {editor}
+        {debugMode && (
+          <div className={styles.debugWrapper}>
+            <div className={styles.debug}>
+              <div className={styles.debugTitle}>Input</div>
+              <div className={styles.debugJson}>
+                <CustomScrollbar
+                  className={css`
+                    height: 100%;
+                  `}
+                >
+                  <JSONFormatter json={input} />
+                </CustomScrollbar>
+              </div>
+            </div>
+            <div className={styles.debugSeparator}>
+              <Icon name="arrow-right" />
+            </div>
+            <div className={styles.debug}>
+              <div className={styles.debugTitle}>Output</div>
+
+              <div className={styles.debugJson}>
+                <CustomScrollbar
+                  className={css`
+                    height: 100%;
+                  `}
+                >
+                  <JSONFormatter json={output} />
+                </CustomScrollbar>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => ({
+  title: css`
+    display: flex;
+    padding: 4px 8px 4px 8px;
+    position: relative;
+    height: 35px;
+    background: ${theme.colors.textFaint};
+    border-radius: 4px 4px 0 0;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+  `,
+  name: css`
+    font-weight: ${theme.typography.weight.semibold};
+    color: ${theme.colors.blue};
+  `,
+  iconRow: css`
+    display: flex;
+  `,
+  icon: css`
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    cursor: pointer;
+    color: ${theme.colors.textWeak};
+    margin-left: ${theme.spacing.sm};
+    &:hover {
+      color: ${theme.colors.text};
+    }
+  `,
+  editor: css`
+    padding-top: ${theme.spacing.sm};
+  `,
+  debugWrapper: css`
+    display: flex;
+    flex-direction: row;
+  `,
+  debugSeparator: css`
+    width: 48px;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 ${theme.spacing.xs};
+  `,
+  debugTitle: css`
+    padding: ${theme.spacing.xxs};
+    text-align: center;
+    font-family: ${theme.typography.fontFamily.monospace};
+    font-size: ${theme.typography.size.sm};
+    color: ${theme.colors.blueBase};
+    border-bottom: 1px dashed ${theme.colors.gray15};
+    flex-grow: 0;
+    flex-shrink: 1;
+  `,
+
+  debug: css`
+    margin-top: ${theme.spacing.md};
+    padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
+    border: 1px dashed ${theme.colors.gray15};
+    background: ${theme.colors.gray05};
+    border-radius: ${theme.border.radius.sm};
+    width: 100%;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+  `,
+  debugJson: css`
+    flex-grow: 1;
+    height: 100%;
+    overflow: hidden;
+  `,
+});

public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx

@@ -0,0 +1,44 @@
+import { DataFrame } from '@grafana/data';
+import React, { useState } from 'react';
+import { HorizontalGroup } from '@grafana/ui';
+import { TransformationEditor } from './TransformationEditor';
+import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
+import { QueryOperationAction } from 'app/core/components/QueryOperationRow/QueryOperationAction';
+
+interface TransformationOperationRowProps {
+  name: string;
+  description: string;
+  editor?: JSX.Element;
+  onRemove: () => void;
+  input: DataFrame[];
+  output: DataFrame[];
+}
+
+export const TransformationOperationRow: React.FC<TransformationOperationRowProps> = ({
+  children,
+  onRemove,
+  ...props
+}) => {
+  const [showDebug, setShowDebug] = useState(false);
+
+  const renderActions = ({ isOpen }: { isOpen: boolean }) => {
+    return (
+      <HorizontalGroup>
+        <QueryOperationAction
+          disabled={!isOpen}
+          icon="bug"
+          onClick={() => {
+            setShowDebug(!showDebug);
+          }}
+        />
+        <QueryOperationAction icon="trash-alt" onClick={onRemove} />
+      </HorizontalGroup>
+    );
+  };
+
+  return (
+    <QueryOperationRow title={props.name} actions={renderActions}>
+      <TransformationEditor {...props} debugMode={showDebug} />
+    </QueryOperationRow>
+  );
+};

public/app/features/dashboard/components/TransformationsEditor/TransformationRow.tsx

@@ -1,83 +0,0 @@
-import React, { useContext, useState } from 'react';
-import { css } from 'emotion';
-import { JSONFormatter, ThemeContext } from '@grafana/ui';
-import { GrafanaTheme, DataFrame } from '@grafana/data';
-
-interface TransformationRowProps {
-  name: string;
-  description: string;
-  editor?: JSX.Element;
-  onRemove: () => void;
-  input: DataFrame[];
-}
-
-export const TransformationRow = ({ onRemove, editor, name, input }: TransformationRowProps) => {
-  const theme = useContext(ThemeContext);
-  const [viewDebug, setViewDebug] = useState(false);
-  const styles = getStyles(theme);
-  return (
-    <div
-      className={css`
-        margin-bottom: 10px;
-      `}
-    >
-      <div className={styles.title}>
-        <div className={styles.name}>{name}</div>
-        <div className={styles.iconRow}>
-          <div onClick={() => setViewDebug(!viewDebug)} className={styles.icon}>
-            <i className="fa fa-fw fa-bug" />
-          </div>
-          <div onClick={onRemove} className={styles.icon}>
-            <i className="fa fa-fw fa-trash" />
-          </div>
-        </div>
-      </div>
-      <div className={styles.editor}>
-        {editor}
-        {viewDebug && (
-          <div>
-            <JSONFormatter json={input} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const getStyles = (theme: GrafanaTheme) => ({
-  title: css`
-    display: flex;
-    padding: 4px 8px 4px 8px;
-    position: relative;
-    height: 35px;
-    background: ${theme.colors.textFaint};
-    border-radius: 4px 4px 0 0;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-  `,
-  name: css`
-    font-weight: ${theme.typography.weight.semibold};
-    color: ${theme.colors.blue};
-  `,
-  iconRow: css`
-    display: flex;
-  `,
-  icon: css`
-    background: transparent;
-    border: none;
-    box-shadow: none;
-    cursor: pointer;
-    color: ${theme.colors.textWeak};
-    margin-left: ${theme.spacing.sm};
-    &:hover {
-      color: ${theme.colors.text};
-    }
-  `,
-  editor: css`
-    border: 2px dashed ${theme.colors.textFaint};
-    border-top: none;
-    border-radius: 0 0 4px 4px;
-    padding: 8px;
-  `,
-});

public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx

@@ -1,9 +1,9 @@
 import { css } from 'emotion';
 import React from 'react';
-import { transformersUIRegistry } from '@grafana/ui/src/components/TransformersUI/transformers';
+import { transformersUIRegistry } from '@grafana/ui';
 import { DataTransformerConfig, DataFrame, transformDataFrame, SelectableValue } from '@grafana/data';
-import { Button, Select } from '@grafana/ui';
-import { TransformationRow } from './TransformationRow';
+import { Button, CustomScrollbar, Select, Container } from '@grafana/ui';
+import { TransformationOperationRow } from './TransformationOperationRow';
 
 interface Props {
   onChange: (transformations: DataTransformerConfig[]) => void;
@@ -60,12 +60,15 @@ export class TransformationsEditor extends React.PureComponent<Props, State> {
       <div
         className={css`
           margin-bottom: 10px;
+          max-width: 300px;
         `}
       >
         <Select
           options={availableTransformers}
           placeholder="Select transformation"
           onChange={this.onTransformationAdd}
+          autoFocus={true}
+          openMenuOnFocus={true}
         />
       </div>
     );
@@ -81,7 +84,12 @@ export class TransformationsEditor extends React.PureComponent<Props, State> {
           let editor;
 
           const transformationUI = transformersUIRegistry.getIfExists(t.id);
+          if (!transformationUI) {
+            return null;
+          }
+
           const input = transformDataFrame(transformations.slice(0, i), preTransformData);
+          const output = transformDataFrame(transformations.slice(i), input);
 
           if (transformationUI) {
             editor = React.createElement(transformationUI.component, {
@@ -97,9 +105,10 @@ export class TransformationsEditor extends React.PureComponent<Props, State> {
           }
 
           return (
-            <TransformationRow
+            <TransformationOperationRow
               key={`${t.id}-${i}`}
               input={input || []}
+              output={output || []}
               onRemove={() => this.onTransformationRemove(i)}
               editor={editor}
               name={transformationUI ? transformationUI.name : ''}
@@ -113,17 +122,19 @@ export class TransformationsEditor extends React.PureComponent<Props, State> {
 
   render() {
     return (
-      <div className="panel-editor__content">
-        <p className="muted text-center" style={{ padding: '8px' }}>
-          Transformations allow you to combine, re-order, hide and rename specific parts the the data set before being
-          visualized.
-        </p>
-        {this.renderTransformationEditors()}
-        {this.renderTransformationSelector()}
-        <Button variant="secondary" icon="plus-circle" onClick={() => this.setState({ addingTransformation: true })}>
-          Add transformation
-        </Button>
-      </div>
+      <CustomScrollbar autoHeightMin="100%">
+        <Container padding="md">
+          <p className="muted text-center" style={{ padding: '8px' }}>
+            Transformations allow you to combine, re-order, hide and rename specific parts the the data set before being
+            visualized.
+          </p>
+          {this.renderTransformationEditors()}
+          {this.renderTransformationSelector()}
+          <Button variant="secondary" icon="plus" onClick={() => this.setState({ addingTransformation: true })}>
+            Add transformation
+          </Button>
+        </Container>
+      </CustomScrollbar>
     );
   }
 }

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>
     );
   }
 }

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { css } from 'emotion';
+import { DataQuery, DataSourceApi, GrafanaTheme } from '@grafana/data';
+import { HorizontalGroup, stylesFactory, useTheme } from '@grafana/ui';
+
+interface QueryEditorRowTitleProps {
+  query: DataQuery;
+  datasource: DataSourceApi;
+  inMixedMode: boolean;
+  disabled: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  collapsedText: string;
+}
+
+export const QueryEditorRowTitle: React.FC<QueryEditorRowTitleProps> = ({
+  datasource,
+  inMixedMode,
+  disabled,
+  query,
+  onClick,
+  collapsedText,
+}) => {
+  const theme = useTheme();
+  const styles = getQueryEditorRowTitleStyles(theme);
+  return (
+    <HorizontalGroup align="center">
+      <div className={styles.refId}>
+        <span>{query.refId}</span>
+        {inMixedMode && <em className={styles.contextInfo}> ({datasource.name})</em>}
+        {disabled && <em className={styles.contextInfo}> Disabled</em>}
+      </div>
+      {collapsedText && (
+        <div className={styles.collapsedText} onClick={onClick}>
+          {collapsedText}
+        </div>
+      )}
+    </HorizontalGroup>
+  );
+};
+
+const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    refId: css`
+      font-weight: ${theme.typography.weight.semibold};
+      color: ${theme.colors.blue95};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+    `,
+    collapsedText: css`
+      font-weight: ${theme.typography.weight.regular};
+      font-size: ${theme.typography.size.sm};
+      color: ${theme.colors.textWeak};
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      overflow: hidden;
+      font-style: italic;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      min-width: 0;
+    `,
+    contextInfo: css`
+      font-size: ${theme.typography.size.sm};
+      font-style: italic;
+      color: ${theme.colors.textWeak};
+      padding-left: 10px;
+    `,
+  };
+});