Transformations: UX updates (#23574)

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

@@ -20,15 +20,15 @@ export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({ icon
     }
   };
   return (
-    <div title={title}>
-      <IconButton
-        name={icon}
-        className={styles.icon}
-        disabled={!!disabled}
-        onClick={onClick}
-        aria-label={`${title} query operation action`}
-      />
-    </div>
+    <IconButton
+      name={icon}
+      title={title}
+      className={styles.icon}
+      disabled={!!disabled}
+      onClick={onClick}
+      surface="header"
+      aria-label={`${title} query operation action`}
+    />
   );
 };
 

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

@@ -77,10 +77,11 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
       margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
     `,
     header: css`
-      padding: ${theme.spacing.sm};
+      padding: 0 ${theme.spacing.sm};
       border-radius: ${theme.border.radius.sm};
       background: ${theme.colors.bg2};
       height: ${theme.spacing.formInputHeight};
+      line-height: ${theme.spacing.formInputHeight};
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -93,14 +94,13 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
       align-items: center;
       cursor: pointer;
     `,
-
     title: css`
       font-weight: ${theme.typography.weight.semibold};
       color: ${theme.colors.textBlue};
       margin-left: ${theme.spacing.sm};
     `,
     content: css`
-      margin-top: ${theme.spacing.xs};
+      margin-top: ${theme.spacing.inlineFormMargin};
       margin-left: ${theme.spacing.xl};
     `,
   };

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { css } from 'emotion';
-import { CustomScrollbar, Icon, JSONFormatter, ThemeContext } from '@grafana/ui';
+import { Icon, JSONFormatter, ThemeContext } from '@grafana/ui';
 import { GrafanaTheme, DataFrame } from '@grafana/data';
 
 interface TransformationEditorProps {
@@ -17,42 +17,27 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
   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 className={styles.editor}>
+      {editor}
+      {debugMode && (
+        <div className={styles.debugWrapper}>
+          <div className={styles.debug}>
+            <div className={styles.debugTitle}>Input</div>
+            <div className={styles.debugJson}>
+              <JSONFormatter json={input} />
             </div>
           </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}>
+              <JSONFormatter json={output} />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
@@ -63,7 +48,6 @@ const getStyles = (theme: GrafanaTheme) => ({
     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;
@@ -87,9 +71,7 @@ const getStyles = (theme: GrafanaTheme) => ({
       color: ${theme.colors.text};
     }
   `,
-  editor: css`
-    padding-top: ${theme.spacing.sm};
-  `,
+  editor: css``,
   debugWrapper: css`
     display: flex;
     flex-direction: row;

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

@@ -23,7 +23,7 @@ export const TransformationOperationRow: React.FC<TransformationOperationRowProp
 
   const renderActions = ({ isOpen }: { isOpen: boolean }) => {
     return (
-      <HorizontalGroup>
+      <HorizontalGroup align="center">
         <QueryOperationAction
           disabled={!isOpen}
           icon="bug"
@@ -31,6 +31,7 @@ export const TransformationOperationRow: React.FC<TransformationOperationRowProp
             setShowDebug(!showDebug);
           }}
         />
+
         <QueryOperationAction icon="trash-alt" onClick={onRemove} />
       </HorizontalGroup>
     );

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

@@ -112,7 +112,7 @@ export class TransformationsEditor extends React.PureComponent<Props> {
     return (
       <CustomScrollbar autoHeightMin="100%">
         <Container padding="md">
-          <p className="muted text-center" style={{ padding: '8px' }}>
+          <p className="muted">
             Transformations allow you to combine, re-order, hide and rename specific parts the the data set before being
             visualized.
           </p>