From 3a3f781dcf5e858edee2f6daa2354edfb40afdee Mon Sep 17 00:00:00 2001
From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
Date: Fri, 7 Mar 2025 09:55:39 -0500
Subject: [PATCH] Docs: Add dashboard variables content (#101733)

* Added variables section

* Updated transformations file and Makefile

* Finished Dashboard variables in transformations section
---
 docs/Makefile                                 |  4 ++--
 .../transform-data/index.md                   | 10 ++++++++
 scripts/docs/generate-transformations.ts      | 24 ++++++++++++-------
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/docs/Makefile b/docs/Makefile
index 36b7e4f41be..7bdbe026293 100644
--- a/docs/Makefile
+++ b/docs/Makefile
@@ -9,6 +9,6 @@ include docs.mk
 
 .PHONY: sources/panels-visualizations/query-transform-data/transform-data/index.md
 sources/panels-visualizations/query-transform-data/transform-data/index.md: ## Generate the Transform Data page source.
-	cd $(CURDIR)/.. && npx tsc ./scripts/docs/generate-transformations.ts && \
-	node -e "require('./scripts/docs/generate-transformations').buildMarkdownContent()" && \
+	cd $(CURDIR)/.. && \
+	npx tsx ./scripts/docs/generate-transformations.ts && \
 	npx prettier -w $(CURDIR)/$@
diff --git a/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md b/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md
index 9fef087e422..cfc5a5e29e5 100644
--- a/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md
+++ b/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md
@@ -104,6 +104,16 @@ When there are multiple transformations, Grafana applies them in the order they
 
 The order in which Grafana applies transformations directly impacts the results. For example, if you use a Reduce transformation to condense all the results of one column into a single value, then you can only apply transformations to that single value.
 
+## Dashboard variables in transformations
+
+All text input fields in transformations accept [variable syntax](ref:dashboard-variable):
+
+{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-transformation-variables-v11.6.png" alt="Transformation with a mock variable in a text field" >}}
+
+When you use dashboard variables in transformations, the variables are automatically interpolated before the transformations are applied to the data.
+
+For an example, refer to [Use a dashboard variable](#use-a-dashboard-variable) in the **Filter fields by name** transformation.
+
 ## Add a transformation function to data
 
 The following steps guide you in adding a transformation to data. This documentation does not include steps for each type of transformation. For a complete list of transformations, refer to [Transformation functions](#transformation-functions).
diff --git a/scripts/docs/generate-transformations.ts b/scripts/docs/generate-transformations.ts
index 23b6142c20e..a8e52c07fc9 100644
--- a/scripts/docs/generate-transformations.ts
+++ b/scripts/docs/generate-transformations.ts
@@ -118,6 +118,16 @@ When there are multiple transformations, Grafana applies them in the order they
 
 The order in which Grafana applies transformations directly impacts the results. For example, if you use a Reduce transformation to condense all the results of one column into a single value, then you can only apply transformations to that single value.
 
+## Dashboard variables in transformations
+
+All text input fields in transformations accept [variable syntax](ref:dashboard-variable):
+
+{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-transformation-variables-v11.6.png" alt="Transformation with a mock variable in a text field" >}}
+
+When you use dashboard variables in transformations, the variables are automatically interpolated before the transformations are applied to the data.
+
+For an example, refer to [Use a dashboard variable](#use-a-dashboard-variable) in the **Filter fields by name** transformation.
+
 ## Add a transformation function to data
 
 The following steps guide you in adding a transformation to data. This documentation does not include steps for each type of transformation. For a complete list of transformations, refer to [Transformation functions](#transformation-functions).
@@ -204,14 +214,6 @@ ${transformationDocsContent[transformationName].getHelperDocs(ImageRenderType.Sh
   return content;
 }
 
-export function buildMarkdownContent(): void {
-  // Build the path to the Markdown file.
-  const indexPath = resolve(__dirname, '../../' + WRITE_PATH);
-
-  // Write content to the Markdown file.
-  writeFileSync(indexPath, completeTemplate, 'utf-8');
-}
-
 export function getMarkdownContent(): string {
   const rootDir = resolve(__dirname, '../../');
   const pathToMarkdown = resolve(rootDir, WRITE_PATH);
@@ -221,3 +223,9 @@ export function getMarkdownContent(): string {
 export function getJavaScriptContent(): string {
   return completeTemplate;
 }
+
+// Build the path to the Markdown file.
+const indexPath = resolve(__dirname, '../../' + WRITE_PATH);
+
+// Write content to the Markdown file.
+writeFileSync(indexPath, completeTemplate, 'utf-8');