Transformations: Move debug to drawer (#76281)

* Move debug to drawer
* Prettier
* Remove render actions arg
* Remove unused import

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

@@ -13,7 +13,7 @@ import {
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { getTemplateSrv } from '@grafana/runtime';
-import { Icon, JSONFormatter, useStyles2 } from '@grafana/ui';
+import { Icon, JSONFormatter, useStyles2, Drawer } from '@grafana/ui';
 
 import { TransformationsEditorTransformation } from './types';
 
@@ -24,6 +24,7 @@ interface TransformationEditorProps {
   uiConfig: TransformerRegistryItem<any>;
   configs: TransformationsEditorTransformation[];
   onChange: (index: number, config: DataTransformerConfig) => void;
+  toggleShowDebug: () => void;
 }
 
 export const TransformationEditor = ({
@@ -33,6 +34,7 @@ export const TransformationEditor = ({
   uiConfig,
   configs,
   onChange,
+  toggleShowDebug,
 }: TransformationEditorProps) => {
   const styles = useStyles2(getStyles);
   const [input, setInput] = useState<DataFrame[]>([]);
@@ -84,12 +86,13 @@ export const TransformationEditor = ({
     <div className={styles.editor} data-testid={selectors.components.TransformTab.transformationEditor(uiConfig.name)}>
       {editor}
       {debugMode && (
+        <Drawer title="Debug transformation" subtitle={uiConfig.name} onClose={toggleShowDebug}>
           <div
             className={styles.debugWrapper}
             data-testid={selectors.components.TransformTab.transformationEditorDebugger(uiConfig.name)}
           >
             <div className={styles.debug}>
-            <div className={styles.debugTitle}>Transformation input data</div>
+              <div className={styles.debugTitle}>Input data</div>
               <div className={styles.debugJson}>
                 <JSONFormatter json={input} />
               </div>
@@ -98,18 +101,17 @@ export const TransformationEditor = ({
               <Icon name="arrow-right" />
             </div>
             <div className={styles.debug}>
-            <div className={styles.debugTitle}>Transformation output data</div>
+              <div className={styles.debugTitle}>Output data</div>
               <div className={styles.debugJson}>{output && <JSONFormatter json={output} />}</div>
             </div>
           </div>
+        </Drawer>
       )}
     </div>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
-  const debugBorder = theme.isLight ? theme.v1.palette.gray85 : theme.v1.palette.gray15;
-
   return {
     title: css`
       display: flex;
@@ -159,7 +161,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       font-family: ${theme.typography.fontFamilyMonospace};
       font-size: ${theme.typography.bodySmall.fontSize};
       color: ${theme.colors.text};
-      border-bottom: 1px solid ${debugBorder};
+      border-bottom: 1px solid ${theme.colors.border.weak};
       flex-grow: 0;
       flex-shrink: 1;
     `,
@@ -167,7 +169,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     debug: css`
       margin-top: ${theme.spacing(1)};
       padding: 0 ${theme.spacing(1, 1, 1)};
-      border: 1px solid ${debugBorder};
+      border: 1px solid ${theme.colors.border.weak};
       background: ${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05};
       border-radius: ${theme.shape.radius.default};
       width: 100%;

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

@@ -9,10 +9,7 @@ import {
   QueryOperationAction,
   QueryOperationToggleAction,
 } from 'app/core/components/QueryOperationRow/QueryOperationAction';
-import {
+import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
-  QueryOperationRow,
-  QueryOperationRowRenderProps,
-} from 'app/core/components/QueryOperationRow/QueryOperationRow';
 import config from 'app/core/config';
 import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
 
@@ -101,7 +98,7 @@ export const TransformationOperationRow = ({
     [configs, index]
   );
 
-  const renderActions = ({ isOpen }: QueryOperationRowRenderProps) => {
+  const renderActions = () => {
     return (
       <>
         {uiConfig.state && <PluginStateInfo state={uiConfig.state} />}
@@ -122,7 +119,6 @@ export const TransformationOperationRow = ({
         )}
         <QueryOperationToggleAction
           title="Debug"
-          disabled={!isOpen}
           icon="bug"
           onClick={instrumentToggleCallback(toggleShowDebug, 'debug', showDebug)}
           active={showDebug}
@@ -183,6 +179,7 @@ export const TransformationOperationRow = ({
         configs={configs}
         uiConfig={uiConfig}
         onChange={onChange}
+        toggleShowDebug={toggleShowDebug}
       />
     </QueryOperationRow>
   );