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

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(<EmptyTransformationsMessage onShowPicker={onShowPicker} onAddTransformation={onAddTransformation} />);
 
-      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(<EmptyTransformationsMessage onShowPicker={onShowPicker} />);
 
-      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();

public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx

@@ -102,7 +102,7 @@ export function NewEmptyTransformationsMessage(props: EmptyTransformationsProps)
           <Grid columns={gridColumns} gap={1}>
             {showSqlCard && (
               <SqlExpressionCard
-                name={t('dashboard-scene.empty-transformations-message.sql-name', 'SQL Expressions')}
+                name={t('dashboard-scene.empty-transformations-message.sql-name', 'Transform with SQL')}
                 description={t(
                   'dashboard-scene.empty-transformations-message.sql-transformation-description',
                   'Manipulate your data using MySQL-like syntax'

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.test.tsx

@@ -179,7 +179,7 @@ describe('PanelDataTransformationsTab', () => {
       render(<PanelDataTransformationsTabRendered model={modelMock}></PanelDataTransformationsTabRendered>);
 
       // 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;

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

@@ -78,17 +78,17 @@ describe('SqlExpressionCard', () => {
   });
 
   it('renders SQL expression name and description', () => {
-    render(<SqlExpressionCard name="SQL Expressions" description="Manipulate data with SQL" onClick={onClick} />);
+    render(<SqlExpressionCard name="Transform with SQL" description="Manipulate data with SQL" onClick={onClick} />);
 
-    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(<SqlExpressionCard name="SQL Expressions" description="Test" onClick={onClick} />);
+    render(<SqlExpressionCard name="Transform with SQL" description="Test" onClick={onClick} />);
 
-    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);

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": {