From 4d6069583e8c4df0961bb0d7dadd031cbcc18036 Mon Sep 17 00:00:00 2001 From: Kyle Cunningham Date: Fri, 19 Jan 2024 04:47:05 -0600 Subject: [PATCH] Transformations: Move transformation help to drawer component (#79247) * Move help to drawer component * Update component name * Flip hierarchy of transformation name and help description --- .../src/selectors/components.ts | 1 + .../src/components/Drawer/Drawer.tsx | 6 ++++- ... TransformationEditorHelpDisplay.test.tsx} | 22 +++++++++-------- ...sx => TransformationEditorHelpDisplay.tsx} | 24 +++++++------------ .../TransformationOperationRow.tsx | 4 ++-- 5 files changed, 29 insertions(+), 28 deletions(-) rename public/app/features/dashboard/components/TransformationsEditor/{TransformationEditorHelperModal.test.tsx => TransformationEditorHelpDisplay.test.tsx} (77%) rename public/app/features/dashboard/components/TransformationsEditor/{TransformationEditorHelperModal.tsx => TransformationEditorHelpDisplay.tsx} (59%) diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 0ec2247a52b..c994124ff27 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/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: { diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index 763a31ef953..4f455907e3e 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -129,7 +129,11 @@ export function Drawer({ {title} - {subtitle &&
{subtitle}
} + {subtitle && ( +
+ {subtitle} +
+ )} {tabs &&
{tabs}
} diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditorHelperModal.test.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditorHelpDisplay.test.tsx similarity index 77% rename from public/app/features/dashboard/components/TransformationsEditor/TransformationEditorHelperModal.test.tsx rename to public/app/features/dashboard/components/TransformationsEditor/TransformationEditorHelpDisplay.test.tsx index 0d6cd74f322..b365b8d0504 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditorHelperModal.test.tsx +++ b/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> = getStandardTr const singleTestTransformer: TransformerRegistryItem = 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( - + ); // 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( - { ); // 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( - { ); // 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( - { const transformerWithCustomHelp = { ...singleTestTransformer, help: customHelpContent }; render( - void; transformer: TransformerRegistryItem; } -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 ( - onCloseClick(false)} - onDismiss={() => onCloseClick(false)} - > + const helpElement = ( + onCloseClick(false)}> - + ); + + return isOpen ? helpElement : null; }; diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx index 60177515fb9..59fb8ad76e2 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationOperationRow.tsx +++ b/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} /> - + ); };