From cff5a42bce8fb28457d696c6405e7855bb8b063a Mon Sep 17 00:00:00 2001 From: Sam Jewell <2903904+samjewell@users.noreply.github.com> Date: Wed, 19 Nov 2025 10:51:33 +0000 Subject: [PATCH] Rework Title of SQL Transformation card (#114093) * Rework UI of SQL Transformation card I made a few changes: - Green - to indicate that this is DIFFERENT from the other transforms, not similar - Command prompt, not a preview of the table input and output - to indicate that - you code this yourself, and - the output table format is not predictable - it's entirely outside of our control I updated the card title to "Transform with SQL" because I felt this was more indicative of what the user will be doing. It's a call to action. * Reverse the change to the illustration The changes to the illustration aren't ready yet, As per PR feedback in comment: https://github.com/grafana/grafana/pull/114093#issuecomment-3547943167 * Update tests and code with new header text --- .../PanelDataPane/EmptyTransformationsMessage.test.tsx | 8 ++++---- .../PanelDataPane/EmptyTransformationsMessage.tsx | 2 +- .../PanelDataPane/PanelDataTransformationsTab.test.tsx | 2 +- .../TransformationsEditor/TransformationPickerNg.test.tsx | 8 ++++---- public/locales/en-US/grafana.json | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.test.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.test.tsx index a506f923730..7f7af75146b 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.test.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.test.tsx @@ -60,7 +60,7 @@ describe('EmptyTransformationsMessage', () => { ); // Should show SQL transformation card - expect(screen.getByText('SQL Expressions')).toBeInTheDocument(); + expect(screen.getByText('Transform with SQL')).toBeInTheDocument(); expect(screen.getByText('Organize fields by name')).toBeInTheDocument(); expect(screen.getByText('Group by')).toBeInTheDocument(); expect(screen.getByText('Extract fields')).toBeInTheDocument(); @@ -78,7 +78,7 @@ describe('EmptyTransformationsMessage', () => { /> ); - expect(screen.queryByText('SQL Expressions')).not.toBeInTheDocument(); + expect(screen.queryByText('Transform with SQL')).not.toBeInTheDocument(); // But should still show transformation cards expect(screen.getByText('Organize fields by name')).toBeInTheDocument(); }); @@ -105,13 +105,13 @@ describe('EmptyTransformationsMessage', () => { it('should not show SQL transformation card when onGoToQueries is not provided', () => { render(); - expect(screen.queryByText('SQL Expressions')).not.toBeInTheDocument(); + expect(screen.queryByText('Transform with SQL')).not.toBeInTheDocument(); }); it('should not show transformation cards grid when neither onGoToQueries nor onAddTransformation are provided', () => { render(); - expect(screen.queryByText('SQL Expressions')).not.toBeInTheDocument(); + expect(screen.queryByText('Transform with SQL')).not.toBeInTheDocument(); // But should still show the "Show more" button expect(screen.getByTestId(selectors.components.Transforms.addTransformationButton)).toBeInTheDocument(); diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx index 841076ef910..80680aa4e1c 100644 --- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx +++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx @@ -102,7 +102,7 @@ export function NewEmptyTransformationsMessage(props: EmptyTransformationsProps) {showSqlCard && ( { render(); // Should show SQL transformation card in empty state - expect(screen.getByText('SQL Expressions')).toBeInTheDocument(); + expect(screen.getByText('Transform with SQL')).toBeInTheDocument(); expect(screen.getByTestId('go-to-queries-button')).toBeInTheDocument(); } finally { config.featureToggles.transformationsEmptyPlaceholder = originalTransformationsToggle; diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.test.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.test.tsx index 76d51c884fd..36cc0baa153 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.test.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.test.tsx @@ -78,17 +78,17 @@ describe('SqlExpressionCard', () => { }); it('renders SQL expression name and description', () => { - render(); + render(); - expect(screen.getByText('SQL Expressions')).toBeInTheDocument(); + expect(screen.getByText('Transform with SQL')).toBeInTheDocument(); expect(screen.getByText('Manipulate data with SQL')).toBeInTheDocument(); }); it('calls onClick when clicked', async () => { const user = userEvent.setup(); - render(); + render(); - const card = screen.getByText('SQL Expressions').closest('button'); + const card = screen.getByText('Transform with SQL').closest('button'); await user.click(card!); expect(onClick).toHaveBeenCalledTimes(1); diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 944b750790d..248c53b3b2b 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -5933,7 +5933,7 @@ "empty-transformations-message": { "add-transformation": "Add transformation", "show-more": "Show more", - "sql-name": "SQL Expressions", + "sql-name": "Transform with SQL", "sql-transformation-description": "Manipulate your data using MySQL-like syntax" }, "general-settings-edit-view": {