From 3fb47efc7f70453e4a873fbcaaa97f685e990b90 Mon Sep 17 00:00:00 2001
From: Develer <yeryomin.igor@gmail.com>
Date: Tue, 16 Dec 2025 15:00:02 +0100
Subject: [PATCH] chore(transformations): optimisation

---
 .../PanelDataPane/EmptyTransformationsMessage.tsx        | 2 +-
 .../PanelDataPane/PanelDataTransformationsTab.tsx        | 7 +++----
 .../TransformationsEditor/SqlExpressionCard.tsx          | 9 +++++++--
 3 files changed, 11 insertions(+), 7 deletions(-)

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 8462fe37b60..e009125d9cd 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage.tsx
@@ -62,7 +62,7 @@ export function LegacyEmptyTransformationsMessage({ onShowPicker }: { onShowPick
 export function NewEmptyTransformationsMessage(props: EmptyTransformationsProps) {
   const hasGoToQueries = props.onGoToQueries != null;
   const hasAddTransformation = props.onAddTransformation != null;
-  const isSqlApplicable = props.isSqlApplicable !== false; // Default to true if not provided
+  const isSqlApplicable = props.isSqlApplicable ?? true; // Default to true if not provided
 
   // Get transformations from registry
   const transformations = useMemo(() => {
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 8a9a4e0ea91..d1aca477055 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx
@@ -86,10 +86,9 @@ export function PanelDataTransformationsTabRendered({ model }: SceneComponentPro
   }, [transformsWrongType]);
 
   // Check if SQL expressions are applicable (all datasources must be backend datasources)
+  const queryRunner = model.getQueryRunner();
+  const { queries } = queryRunner.useState();
   const isSqlApplicable = useMemo(() => {
-    const queryRunner = model.getQueryRunner();
-    const queries = queryRunner.state.queries;
-
     if (!queries || queries.length === 0) {
       return true; // If no queries, SQL is theoretically applicable
     }
@@ -112,7 +111,7 @@ export function PanelDataTransformationsTabRendered({ model }: SceneComponentPro
     }
 
     return true;
-  }, [model]);
+  }, [queries]);
 
   const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
   const [confirmModalOpen, setConfirmModalOpen] = useState<boolean>(false);
diff --git a/public/app/features/dashboard/components/TransformationsEditor/SqlExpressionCard.tsx b/public/app/features/dashboard/components/TransformationsEditor/SqlExpressionCard.tsx
index f1432ed3fe0..bd528b6c0e1 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/SqlExpressionCard.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/SqlExpressionCard.tsx
@@ -23,10 +23,15 @@ export function SqlExpressionCard({
   disabledTooltip,
 }: SqlExpressionCardProps) {
   const styles = useStyles2(getSqlExpressionCardStyles);
-  const cardClasses = isDisabled ? cx(styles.card, styles.cardDisabled) : styles.card;
 
   return (
-    <Card className={cardClasses} data-testid={testId} onClick={onClick} noMargin>
+    <Card
+      // className={cardClasses}
+      className={cx(styles.card, { [styles.cardDisabled]: isDisabled })}
+      data-testid={testId}
+      onClick={onClick}
+      noMargin
+    >
       <Card.Heading className={styles.heading}>
         <div className={styles.titleRow}>
           <span>{name}</span>