From f970cbb42b3d488985868ae214219f84727f1062 Mon Sep 17 00:00:00 2001
From: Ihor Yeromin <yeryomin.igor@gmail.com>
Date: Thu, 18 Dec 2025 10:25:53 +0100
Subject: [PATCH] Transformations: Gray out inapplicable transformation cards
 (#115512)

* fix(transformation): gray out transformation card on transformation tab

* fix(transformations): make data prop required in EmptyTransformationsMessage

This ensures TypeScript enforces that all call sites pass the data prop,
which is required for graying out inapplicable transformation cards.

- Changed data prop from optional to required in EmptyTransformationsProps
- Fixed TransformationsEditor.tsx to pass data (was missing in legacy code)
- Updated tests to pass the required data prop

---------

Co-authored-by: Sam Jewell <sam.jewell@grafana.com>
---
 .../PanelDataPane/EmptyTransformationsMessage.test.tsx   | 9 +++++++--
 .../PanelDataPane/EmptyTransformationsMessage.tsx        | 4 +++-
 .../PanelDataPane/PanelDataTransformationsTab.tsx        | 1 +
 .../TransformationsEditor/TransformationsEditor.tsx      | 3 ++-
 4 files changed, 13 insertions(+), 4 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 7f7af75146b..c974710b566 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
@@ -56,6 +56,7 @@ describe('EmptyTransformationsMessage', () => {
           onShowPicker={onShowPicker}
           onGoToQueries={onGoToQueries}
           onAddTransformation={onAddTransformation}
+          data={[]}
         />
       );
 
@@ -75,6 +76,7 @@ describe('EmptyTransformationsMessage', () => {
           onShowPicker={onShowPicker}
           onGoToQueries={onGoToQueries}
           onAddTransformation={onAddTransformation}
+          data={[]}
         />
       );
 
@@ -92,6 +94,7 @@ describe('EmptyTransformationsMessage', () => {
           onShowPicker={onShowPicker}
           onGoToQueries={onGoToQueries}
           onAddTransformation={onAddTransformation}
+          data={[]}
         />
       );
 
@@ -103,13 +106,15 @@ describe('EmptyTransformationsMessage', () => {
     });
 
     it('should not show SQL transformation card when onGoToQueries is not provided', () => {
-      render(<EmptyTransformationsMessage onShowPicker={onShowPicker} onAddTransformation={onAddTransformation} />);
+      render(
+        <EmptyTransformationsMessage onShowPicker={onShowPicker} onAddTransformation={onAddTransformation} data={[]} />
+      );
 
       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} />);
+      render(<EmptyTransformationsMessage onShowPicker={onShowPicker} data={[]} />);
 
       expect(screen.queryByText('Transform with SQL')).not.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 80680aa4e1c..eab5f3e9c58 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { DataTransformerID, standardTransformersRegistry, TransformerRegistryItem } from '@grafana/data';
+import { DataFrame, DataTransformerID, standardTransformersRegistry, TransformerRegistryItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { t, Trans } from '@grafana/i18n';
 import { reportInteraction } from '@grafana/runtime';
@@ -16,6 +16,7 @@ interface EmptyTransformationsProps {
   onShowPicker: () => void;
   onGoToQueries?: () => void;
   onAddTransformation?: (transformationId: string) => void;
+  data: DataFrame[];
 }
 
 const TRANSFORMATION_IDS = [
@@ -121,6 +122,7 @@ export function NewEmptyTransformationsMessage(props: EmptyTransformationsProps)
                   showIllustrations={true}
                   showPluginState={false}
                   showTags={false}
+                  data={props.data}
                 />
               ))}
           </Grid>
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx
index af937d150c1..425eb792109 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx
@@ -152,6 +152,7 @@ export function PanelDataTransformationsTabRendered({ model }: SceneComponentPro
           onShowPicker={openDrawer}
           onGoToQueries={onGoToQueries}
           onAddTransformation={onAddTransformation}
+          data={sourceData.data.series}
         />
         {transformationsDrawer}
       </>
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index 1593c6162b7..9bdcefdcab2 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -256,7 +256,8 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
         onShowPicker={() => {
           this.setState({ showPicker: true });
         }}
-      ></EmptyTransformationsMessage>
+        data={this.state.data.series}
+      />
     );
   };