Transformations: debug mode tweaks (#23802)

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

@@ -22,7 +22,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
       {debugMode && (
         <div className={styles.debugWrapper}>
           <div className={styles.debug}>
-            <div className={styles.debugTitle}>Input</div>
+            <div className={styles.debugTitle}>Transformation input data</div>
             <div className={styles.debugJson}>
               <JSONFormatter json={input} />
             </div>
@@ -31,7 +31,7 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
             <Icon name="arrow-right" />
           </div>
           <div className={styles.debug}>
-            <div className={styles.debugTitle}>Output</div>
+            <div className={styles.debugTitle}>Transformation output data</div>
             <div className={styles.debugJson}>
               <JSONFormatter json={output} />
             </div>
@@ -42,73 +42,80 @@ export const TransformationEditor = ({ editor, input, output, debugMode }: Trans
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme) => {
-  title: css`
+  const debugBorder = theme.isLight ? theme.palette.gray85 : theme.palette.gray15;
-    display: flex;
-    padding: 4px 8px 4px 8px;
-    position: relative;
-    height: 35px;
-    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.textBlue};
-  `,
-  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``,
-  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.palette.blue80};
-    border-bottom: 1px dashed ${theme.palette.gray15};
-    flex-grow: 0;
-    flex-shrink: 1;
-  `,
 
-  debug: css`
+  return {
-    margin-top: ${theme.spacing.md};
+    title: css`
-    padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
+      display: flex;
-    border: 1px dashed ${theme.palette.gray15};
+      padding: 4px 8px 4px 8px;
-    background: ${theme.palette.gray05};
+      position: relative;
-    border-radius: ${theme.border.radius.sm};
+      height: 35px;
-    width: 100%;
+      border-radius: 4px 4px 0 0;
-    height: 300px;
+      flex-wrap: nowrap;
-    display: flex;
+      justify-content: space-between;
-    flex-direction: column;
+      align-items: center;
-  `,
+    `,
-  debugJson: css`
+    name: css`
-    flex-grow: 1;
+      font-weight: ${theme.typography.weight.semibold};
-    height: 100%;
+      color: ${theme.colors.textBlue};
-    overflow: hidden;
+    `,
-  `,
+    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``,
+    debugWrapper: css`
+      display: flex;
+      flex-direction: row;
+    `,
+    debugSeparator: css`
+      width: 48px;
+      min-height: 300px;
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      justify-content: center;
+      margin: 0 ${theme.spacing.xs};
+      color: ${theme.colors.textBlue};
+    `,
+    debugTitle: css`
+      padding: ${theme.spacing.sm} ${theme.spacing.xxs};
+      font-family: ${theme.typography.fontFamily.monospace};
+      font-size: ${theme.typography.size.sm};
+      color: ${theme.colors.text};
+      border-bottom: 1px solid ${debugBorder};
+      flex-grow: 0;
+      flex-shrink: 1;
+    `,
+
+    debug: css`
+      margin-top: ${theme.spacing.sm};
+      padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
+      border: 1px solid ${debugBorder};
+      background: ${theme.isLight ? theme.palette.white : theme.palette.gray05};
+      border-radius: ${theme.border.radius.sm};
+      width: 100%;
+      min-height: 300px;
+      display: flex;
+      flex-direction: column;
+      align-self: stretch;
+    `,
+    debugJson: css`
+      flex-grow: 1;
+      height: 100%;
+      overflow: hidden;
+      padding: ${theme.spacing.xs};
+    `,
+  };
+};