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>

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();
 

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>

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}
       </>

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}
+      />
     );
   };