Transformations: Move transformation help to drawer component (#79247)

* Move help to drawer component

* Update component name

* Flip hierarchy of transformation name and help description

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -137,6 +137,7 @@ export const Components = {
       contract: 'Drawer contract',
       close: 'data-testid Drawer close',
       rcContentWrapper: () => '.rc-drawer-content-wrapper',
+      subtitle: 'data-testid drawer subtitle',
     },
   },
   PanelEditor: {

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

@@ -129,7 +129,11 @@ export function Drawer({
                 <Text element="h3" {...titleProps}>
                   {title}
                 </Text>
-                {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
+                {subtitle && (
+                  <div className={styles.subtitle} data-testid={selectors.components.Drawer.General.subtitle}>
+                    {subtitle}
+                  </div>
+                )}
                 {tabs && <div className={styles.tabsWrapper}>{tabs}</div>}
               </div>
             </div>

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

@@ -2,9 +2,10 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 
 import { TransformerRegistryItem } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { getStandardTransformers } from 'app/features/transformers/standardTransformers';
 
-import { TransformationEditorHelperModal } from './TransformationEditorHelperModal';
+import { TransformationEditorHelpDisplay } from './TransformationEditorHelpDisplay';
 
 // Mock the onCloseClick function
 const mockOnCloseClick = jest.fn();
@@ -13,16 +14,17 @@ const standardTransformers: Array<TransformerRegistryItem<null>> = getStandardTr
 
 const singleTestTransformer: TransformerRegistryItem<null> = standardTransformers[0];
 
-describe('TransformationEditorHelperModal', () => {
+describe('TransformationEditorHelpDisplay', () => {
   it('renders the modal with the correct title and content', () => {
     // Test each transformer
     standardTransformers.forEach((transformer) => {
       const { unmount } = render(
-        <TransformationEditorHelperModal isOpen={true} onCloseClick={mockOnCloseClick} transformer={transformer} />
+        <TransformationEditorHelpDisplay isOpen={true} onCloseClick={mockOnCloseClick} transformer={transformer} />
       );
 
       // Check if the modal title is rendered with the correct text
-      expect(screen.getByText(`Transformation help - ${transformer.transformation.name}`)).toBeInTheDocument();
+      expect(screen.getByText(`Transformation help`)).toBeInTheDocument();
+      expect(screen.getByTestId(selectors.components.Drawer.General.subtitle)).toBeInTheDocument();
 
       // Unmount the component to clean up
       unmount();
@@ -31,7 +33,7 @@ describe('TransformationEditorHelperModal', () => {
 
   it('calls onCloseClick when the modal is dismissed', () => {
     render(
-      <TransformationEditorHelperModal
+      <TransformationEditorHelpDisplay
         isOpen={true}
         onCloseClick={mockOnCloseClick}
         transformer={singleTestTransformer}
@@ -39,7 +41,7 @@ describe('TransformationEditorHelperModal', () => {
     );
 
     // Find and click the modal's close button
-    const closeButton = screen.getByRole('button', { name: 'Close' });
+    const closeButton = screen.getByTestId('data-testid Drawer close');
     fireEvent.click(closeButton);
 
     // Ensure that the onCloseClick function was called with the correct argument
@@ -48,7 +50,7 @@ describe('TransformationEditorHelperModal', () => {
 
   it('does not render when isOpen is false', () => {
     render(
-      <TransformationEditorHelperModal
+      <TransformationEditorHelpDisplay
         isOpen={false}
         onCloseClick={mockOnCloseClick}
         transformer={singleTestTransformer}
@@ -56,14 +58,14 @@ describe('TransformationEditorHelperModal', () => {
     );
 
     // Ensure that the modal is not rendered
-    expect(screen.queryByText(`Transformation help - ${singleTestTransformer.name}`)).toBeNull();
+    expect(screen.queryByText(`Transformation help`)).toBeNull();
   });
 
   it('renders a default message when help content is not provided', () => {
     const transformerWithoutHelp = { ...singleTestTransformer, help: undefined };
 
     render(
-      <TransformationEditorHelperModal
+      <TransformationEditorHelpDisplay
         isOpen={true}
         onCloseClick={mockOnCloseClick}
         transformer={transformerWithoutHelp}
@@ -80,7 +82,7 @@ describe('TransformationEditorHelperModal', () => {
     const transformerWithCustomHelp = { ...singleTestTransformer, help: customHelpContent };
 
     render(
-      <TransformationEditorHelperModal
+      <TransformationEditorHelpDisplay
         isOpen={true}
         onCloseClick={mockOnCloseClick}
         transformer={transformerWithCustomHelp}

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

@@ -1,39 +1,33 @@
 import React from 'react';
 
 import { TransformerRegistryItem } from '@grafana/data';
-import { Modal } from '@grafana/ui';
+import { Drawer } from '@grafana/ui';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
 
 import { getLinkToDocs } from '../../../transformers/docs/content';
 
-interface TransformationEditorHelperModalProps {
+interface TransformationEditorHelpDisplayProps {
   isOpen: boolean;
   onCloseClick: (value: boolean) => void;
   transformer: TransformerRegistryItem<null>;
 }
 
-export const TransformationEditorHelperModal = ({
+export const TransformationEditorHelpDisplay = ({
   isOpen,
   onCloseClick,
   transformer,
-}: TransformationEditorHelperModalProps) => {
+}: TransformationEditorHelpDisplayProps) => {
   const {
     transformation: { name },
     help,
   } = transformer;
 
   const helpContent = help ? help : getLinkToDocs();
-
-  const helpTitle = `Transformation help - ${name}`;
-
-  return (
-    <Modal
-      title={helpTitle}
-      isOpen={isOpen}
-      onClickBackdrop={() => onCloseClick(false)}
-      onDismiss={() => onCloseClick(false)}
-    >
+  const helpElement = (
+    <Drawer title={name} subtitle="Transformation help" onClose={() => onCloseClick(false)}>
       <OperationRowHelp markdown={helpContent} styleOverrides={{ borderTop: '2px solid' }} />
-    </Modal>
+    </Drawer>
   );
+
+  return isOpen ? helpElement : null;
 };

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

@@ -13,7 +13,7 @@ import config from 'app/core/config';
 import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
 
 import { TransformationEditor } from './TransformationEditor';
-import { TransformationEditorHelperModal } from './TransformationEditorHelperModal';
+import { TransformationEditorHelpDisplay } from './TransformationEditorHelpDisplay';
 import { TransformationFilter } from './TransformationFilter';
 import { TransformationData } from './TransformationsEditor';
 import { TransformationsEditorTransformation } from './types';
@@ -172,7 +172,7 @@ export const TransformationOperationRow = ({
           toggleShowDebug={toggleShowDebug}
         />
       </QueryOperationRow>
-      <TransformationEditorHelperModal transformer={uiConfig} isOpen={showHelp} onCloseClick={toggleShowHelp} />
+      <TransformationEditorHelpDisplay transformer={uiConfig} isOpen={showHelp} onCloseClick={toggleShowHelp} />
     </>
   );
 };