[Release 12.0.1] TableNG: Fix interpolation for actions (#104577) (#104799)

TableNG: Fix interpolation for actions (#104577)

(cherry picked from commit 6c0250dde2)

COMMIT_EDITMSG

@@ -0,0 +1,24 @@
+TableNG: Fix interpolation for actions (#104577)
+
+(cherry picked from commit 6c0250dde285affbdc56edcd069473f33d48b3be)
+
+# Conflicts:
+#	packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
+#
+# It looks like you may be committing a cherry-pick.
+# If this is not correct, please run
+#	git update-ref -d CHERRY_PICK_HEAD
+# and try again.
+
+
+# Please enter the commit message for your changes. Lines starting
+# with '#' will be ignored, and an empty message aborts the commit.
+#
+# Author:    Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
+# Date:      Wed Apr 30 09:42:15 2025 -0500
+#
+# On branch backport-104577-to-release-12.0.1
+# Your branch is up to date with 'origin/backport-104577-to-release-12.0.1'.
+#
+# You are currently cherry-picking commit 6c0250dde28.
+#

packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx

@@ -45,6 +45,7 @@ export function TableCellNG(props: TableCellNGProps) {
     getActions,
     rowBg,
     onCellFilterAdded,
+    replaceVariables,
   } = props;
 
   const cellInspect = field.config?.custom?.inspect ?? false;
@@ -74,7 +75,7 @@ export function TableCellNG(props: TableCellNGProps) {
   const [divWidth, setDivWidth] = useState(0);
   const [isHovered, setIsHovered] = useState(false);
 
-  const actions = getActions ? getActions(frame, field, rowIdx) : [];
+  const actions = getActions ? getActions(frame, field, rowIdx, replaceVariables) : [];
 
   useLayoutEffect(() => {
     if (divWidthRef.current && divWidthRef.current.clientWidth !== 0) {

packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx

@@ -75,6 +75,7 @@ export function TableNG(props: TableNGProps) {
     data,
     enableSharedCrosshair,
     showTypeIcons,
+    replaceVariables,
   } = props;
 
   const initialSortColumns = useMemo<SortColumn[]>(() => {
@@ -461,6 +462,7 @@ export function TableNG(props: TableNGProps) {
           styles,
           theme,
           showTypeIcons,
+          replaceVariables,
           ...props,
         },
         handlers: {
@@ -669,6 +671,7 @@ export function mapFrameToDataGrid({
     timeRange,
     getActions,
     showTypeIcons,
+    replaceVariables,
   } = options;
   const { onCellExpand, onColumnResize } = handlers;
 
@@ -816,6 +819,7 @@ export function mapFrameToDataGrid({
             getActions={getActions}
             rowBg={rowBg}
             onCellFilterAdded={onCellFilterAdded}
+            replaceVariables={replaceVariables}
           />
         );
       },

packages/grafana-ui/src/components/Table/TableNG/types.ts

@@ -157,6 +157,7 @@ export interface TableCellNGProps {
   value: TableCellValue;
   rowBg: Function | undefined;
   onCellFilterAdded?: TableFilterActionCallback;
+  replaceVariables?: InterpolateFunction;
 }
 
 /* ------------------------- Specialized Cell Props ------------------------- */