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>

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -24,7 +24,6 @@ const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
       vertical-align: middle;
       display: inline-block;
       margin-bottom: ${theme.spacing.xxs};
-      cursor: pointer;
       fill: currentColor;
     `,
     orange: css`

packages/grafana-ui/src/components/Layout/Layout.tsx

@@ -42,8 +42,8 @@ export const Layout: React.FC<LayoutProps> = ({
   );
 };
 
-export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({ children, spacing, justify }) => (
-  <Layout spacing={spacing} justify={justify} orientation={Orientation.Horizontal}>
+export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({ children, spacing, justify, align }) => (
+  <Layout spacing={spacing} justify={justify} orientation={Orientation.Horizontal} align={align}>
     {children}
   </Layout>
 );

packages/grafana-ui/src/utils/index.ts

@@ -11,3 +11,5 @@ export { DOMUtil };
 
 // Exposes standard editors for registries of optionsUi config and panel options UI
 export { getStandardFieldConfigs, getStandardOptionEditors } from './standardEditors';
+
+export { renderOrCallToRender } from './renderOrCallToRender';

packages/grafana-ui/src/utils/renderOrCallToRender.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+
+/**
+ * Given react node or function returns element accordingly
+ *
+ * @param itemToRender
+ * @param props props to be passed to the function if item provided as such
+ */
+export function renderOrCallToRender<TProps = any>(
+  itemToRender: ((props?: TProps) => React.ReactNode) | React.ReactNode,
+  props?: TProps
+): React.ReactNode {
+  if (React.isValidElement(itemToRender) || typeof itemToRender === 'string' || typeof itemToRender === 'number') {
+    return itemToRender;
+  }
+
+  if (typeof itemToRender === 'function') {
+    return itemToRender(props);
+  }
+
+  throw new Error(`${itemToRender} is not a React element nor a function that returns React element`);
+}

public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { QueryOperationAction } from './QueryOperationAction';
+import { shallow } from 'enzyme';
+
+describe('QueryOperationAction', () => {
+  it('renders', () => {
+    expect(() => shallow(<QueryOperationAction icon="add-panel" onClick={() => {}} />)).not.toThrow();
+  });
+  describe('when disabled', () => {
+    it('does not call onClick handler', () => {
+      const clickSpy = jest.fn();
+      const wrapper = shallow(<QueryOperationAction icon="add-panel" onClick={clickSpy} title="Test action" />);
+      const actionEl = wrapper.find({ 'aria-label': 'Test action query operation action' });
+
+      expect(actionEl).toHaveLength(1);
+      expect(clickSpy).not.toBeCalled();
+
+      actionEl.first().simulate('click');
+
+      expect(clickSpy).toBeCalledTimes(1);
+    });
+  });
+});

public/app/core/components/QueryOperationRow/QueryOperationAction.tsx

@@ -0,0 +1,45 @@
+import { Icon, IconName, stylesFactory, useTheme } from '@grafana/ui';
+import React from 'react';
+import { css, cx } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
+
+interface QueryOperationActionProps {
+  icon: IconName;
+  title?: string;
+  onClick: (e: React.MouseEvent) => void;
+  disabled?: boolean;
+}
+
+export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({ icon, disabled, title, ...otherProps }) => {
+  const theme = useTheme();
+  const styles = getQueryOperationActionStyles(theme, !!disabled);
+  const onClick = (e: React.MouseEvent) => {
+    if (!disabled) {
+      otherProps.onClick(e);
+    }
+  };
+  return (
+    <div title={title}>
+      <Icon name={icon} className={styles.icon} onClick={onClick} aria-label={`${title} query operation action`} />
+    </div>
+  );
+};
+
+const getQueryOperationActionStyles = stylesFactory((theme: GrafanaTheme, disabled: boolean) => {
+  return {
+    icon: cx(
+      !disabled &&
+        css`
+          cursor: pointer;
+          color: ${theme.colors.textWeak};
+        `,
+      disabled &&
+        css`
+          color: ${theme.colors.gray25};
+          cursor: disabled;
+        `
+    ),
+  };
+});
+
+QueryOperationAction.displayName = 'QueryOperationAction';

public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { QueryOperationRow } from './QueryOperationRow';
+import { shallow, mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+describe('QueryOperationRow', () => {
+  it('renders', () => {
+    expect(() =>
+      shallow(
+        <QueryOperationRow>
+          <div>Test</div>
+        </QueryOperationRow>
+      )
+    ).not.toThrow();
+  });
+
+  describe('callbacks', () => {
+    it('should not call onOpen when component is shallowed', async () => {
+      const onOpenSpy = jest.fn();
+      await act(async () => {
+        shallow(
+          <QueryOperationRow onOpen={onOpenSpy}>
+            <div>Test</div>
+          </QueryOperationRow>
+        );
+      });
+      expect(onOpenSpy).not.toBeCalled();
+    });
+
+    it('should call onOpen when row is opened and onClose when row is collapsed', async () => {
+      const onOpenSpy = jest.fn();
+      const onCloseSpy = jest.fn();
+      const wrapper = mount(
+        <QueryOperationRow onOpen={onOpenSpy} onClose={onCloseSpy} isOpen={false}>
+          <div>Test</div>
+        </QueryOperationRow>
+      );
+      const titleEl = wrapper.find({ 'aria-label': 'Query operation row title' });
+      expect(titleEl).toHaveLength(1);
+
+      await act(async () => {
+        // open
+        titleEl.first().simulate('click');
+      });
+      await act(async () => {
+        // close
+        titleEl.first().simulate('click');
+      });
+
+      expect(onOpenSpy).toBeCalledTimes(1);
+      expect(onCloseSpy).toBeCalledTimes(1);
+    });
+  });
+
+  describe('title rendering', () => {
+    it('should render title provided as element', () => {
+      const title = <div aria-label="test title">Test</div>;
+      const wrapper = shallow(
+        <QueryOperationRow title={title}>
+          <div>Test</div>
+        </QueryOperationRow>
+      );
+
+      const titleEl = wrapper.find({ 'aria-label': 'test title' });
+      expect(titleEl).toHaveLength(1);
+    });
+    it('should render title provided as function', () => {
+      const title = () => <div aria-label="test title">Test</div>;
+      const wrapper = shallow(
+        <QueryOperationRow title={title}>
+          <div>Test</div>
+        </QueryOperationRow>
+      );
+
+      const titleEl = wrapper.find({ 'aria-label': 'test title' });
+      expect(titleEl).toHaveLength(1);
+    });
+
+    it('should expose api to title rendered as function', () => {
+      const propsSpy = jest.fn();
+      const title = (props: any) => {
+        propsSpy(props);
+        return <div aria-label="test title">Test</div>;
+      };
+      shallow(
+        <QueryOperationRow title={title}>
+          <div>Test</div>
+        </QueryOperationRow>
+      );
+
+      expect(Object.keys(propsSpy.mock.calls[0][0])).toContain('isOpen');
+    });
+  });
+
+  describe('actions rendering', () => {
+    it('should render actions provided as element', () => {
+      const actions = <div aria-label="test actions">Test</div>;
+      const wrapper = shallow(
+        <QueryOperationRow actions={actions}>
+          <div>Test</div>
+        </QueryOperationRow>
+      );
+
+      const actionsEl = wrapper.find({ 'aria-label': 'test actions' });
+      expect(actionsEl).toHaveLength(1);
+    });
+    it('should render actions provided as function', () => {
+      const actions = () => <div aria-label="test actions">Test</div>;
+      const wrapper = shallow(
+        <QueryOperationRow actions={actions}>
+          <div>Test</div>
+        </QueryOperationRow>
+      );
+
+      const actionsEl = wrapper.find({ 'aria-label': 'test actions' });
+      expect(actionsEl).toHaveLength(1);
+    });
+
+    it('should expose api to title rendered as function', () => {
+      const propsSpy = jest.fn();
+      const actions = (props: any) => {
+        propsSpy(props);
+        return <div aria-label="test actions">Test</div>;
+      };
+      shallow(
+        <QueryOperationRow actions={actions}>
+          <div>Test</div>
+        </QueryOperationRow>
+      );
+
+      expect(Object.keys(propsSpy.mock.calls[0][0])).toContainEqual('isOpen');
+      expect(Object.keys(propsSpy.mock.calls[0][0])).toContainEqual('openRow');
+      expect(Object.keys(propsSpy.mock.calls[0][0])).toContainEqual('closeRow');
+    });
+  });
+});

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { renderOrCallToRender, HorizontalGroup, Icon, stylesFactory, useTheme } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
+import { useUpdateEffect } from 'react-use';
+
+interface QueryOperationRowProps {
+  title?: ((props: { isOpen: boolean }) => React.ReactNode) | React.ReactNode;
+  actions?:
+    | ((props: { isOpen: boolean; openRow: () => void; closeRow: () => void }) => React.ReactNode)
+    | React.ReactNode;
+  onOpen?: () => void;
+  onClose?: () => void;
+  children: React.ReactNode;
+  isOpen?: boolean;
+}
+
+export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
+  children,
+  actions,
+  title,
+  onClose,
+  onOpen,
+  isOpen,
+}: QueryOperationRowProps) => {
+  const [isContentVisible, setIsContentVisible] = useState(isOpen !== undefined ? isOpen : true);
+  const theme = useTheme();
+  const styles = getQueryOperationRowStyles(theme);
+  useUpdateEffect(() => {
+    if (isContentVisible) {
+      if (onOpen) {
+        onOpen();
+      }
+    } else {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, [isContentVisible]);
+
+  const titleElement = title && renderOrCallToRender(title, { isOpen: isContentVisible });
+  const actionsElement =
+    actions &&
+    renderOrCallToRender(actions, {
+      isOpen: isContentVisible,
+      openRow: () => {
+        setIsContentVisible(true);
+      },
+      closeRow: () => {
+        setIsContentVisible(false);
+      },
+    });
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <HorizontalGroup justify="space-between">
+          <div
+            className={styles.titleWrapper}
+            onClick={() => {
+              setIsContentVisible(!isContentVisible);
+            }}
+            aria-label="Query operation row title"
+          >
+            <Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
+            {title && <span className={styles.title}>{titleElement}</span>}
+          </div>
+          {actions && <div>{actionsElement}</div>}
+        </HorizontalGroup>
+      </div>
+      {isContentVisible && <div className={styles.content}>{children}</div>}
+    </div>
+  );
+};
+
+const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
+  const borderColor = theme.isLight ? theme.colors.gray85 : theme.colors.gray25;
+
+  return {
+    wrapper: css`
+      margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
+    `,
+    header: css`
+      padding: ${theme.spacing.sm};
+      border-radius: ${theme.border.radius.sm};
+      border: 1px solid ${borderColor};
+      background: ${theme.colors.pageBg};
+    `,
+    collapseIcon: css`
+      color: ${theme.colors.textWeak};
+    `,
+    titleWrapper: css`
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    `,
+
+    title: css`
+      font-weight: ${theme.typography.weight.semibold};
+      color: ${theme.colors.blue95};
+      margin-left: ${theme.spacing.sm};
+    `,
+    content: css`
+      border: 1px solid ${borderColor};
+      margin-top: -1px;
+      background: ${theme.colors.pageBg};
+      margin-left: ${theme.spacing.xl};
+      border-top: 1px solid ${theme.colors.pageBg};
+      border-radis: 0 ${theme.border.radius.sm};
+      padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.lg};
+    `,
+  };
+});
+
+QueryOperationRow.displayName = 'QueryOperationRow';

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() {
+  renderActions = (props: { isOpen: boolean; openRow: () => void }) => {
+    const { query } = this.props;
+    const { hasTextEditMode } = this.state;
+    const isDisabled = query.hide;
+
+    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, isCollapsed, hasTextEditMode } = this.state;
+    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}
+      />
+    );
+  };
 
-    const bodyClasses = classNames('query-editor-row__body gf-form-query', {
-      'query-editor-row__body--collapsed': isCollapsed,
-    });
+  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>
-        </div>
-        <div className={bodyClasses}>
-          <ErrorBoundaryAlert>{this.renderPluginEditor()}</ErrorBoundaryAlert>
+      <QueryOperationRow title={this.renderTitle} actions={this.renderActions} onOpen={this.onOpen}>
+        <div className={rowClasses}>
+          <ErrorBoundaryAlert>{editor}</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;
+    `,
+  };
+});

public/sass/components/_query_editor.scss

@@ -150,45 +150,6 @@ input[type='text'].tight-form-func-param {
   flex-wrap: nowrap;
   align-items: center;
 }
-.query-editor-row__ref-id {
-  font-weight: $font-weight-semi-bold;
-  color: $blue;
-  font-size: $font-size-md;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  i {
-    padding-right: 5px;
-    color: $text-muted;
-    position: relative;
-  }
-}
-
-.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;
-}
 
 .query-editor-row__action {
   margin-left: 3px;
@@ -209,10 +170,3 @@ input[type='text'].tight-form-func-param {
     display: none;
   }
 }
-
-.query-editor-row__context-info {
-  font-style: italic;
-  font-size: $font-size-sm;
-  color: $text-muted;
-  padding-left: 10px;
-}