(airflow) branch main updated: Added the download button on the assets page (#50045)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 77d2fa5b035 Added the download button on the assets page (#50045)
77d2fa5b035 is described below

commit 77d2fa5b035244944d10914d08e7855a20d573b0
Author: Aritra Basu <24430013+aritr...@users.noreply.github.com>
AuthorDate: Thu May 1 00:40:41 2025 +0530

    Added the download button on the assets page (#50045)
    
    * Added the download button on the assets
    
    Added for consistency, not sure on if
    people do actually want to download that
    graph
    
    * Update airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx
    
    Co-authored-by: Brent Bovenzi <brent.bove...@gmail.com>
    
    * Update AssetGraph.tsx
    
    ---------
    
    Co-authored-by: Brent Bovenzi <brent.bove...@gmail.com>
---
 airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx | 4 ++--
 airflow-core/src/airflow/ui/src/layouts/Details/Graph/Graph.tsx     | 2 +-
 airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx          | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git 
a/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx 
b/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx
index fb4cf5f02e8..1b155a65ea9 100644
--- a/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Graph/DownloadButton.tsx
@@ -23,7 +23,7 @@ import { FiDownload } from "react-icons/fi";
 
 import { toaster } from "src/components/ui";
 
-export const DownloadButton = ({ dagId }: { readonly dagId: string }) => {
+export const DownloadButton = ({ name }: { readonly name: string }) => {
   const { getNodes, getZoom } = useReactFlow();
 
   const onClick = () => {
@@ -49,7 +49,7 @@ export const DownloadButton = ({ dagId }: { readonly dagId: 
string }) => {
         .then((dataUrl) => {
           const downloadLink = document.createElement("a");
 
-          downloadLink.setAttribute("download", `${dagId}-graph.png`);
+          downloadLink.setAttribute("download", `${name}-graph.png`);
           downloadLink.setAttribute("href", dataUrl);
           downloadLink.click();
         })
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Graph/Graph.tsx 
b/airflow-core/src/airflow/ui/src/layouts/Details/Graph/Graph.tsx
index be47ebd3abf..12744c7d15f 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Graph/Graph.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Graph/Graph.tsx
@@ -198,7 +198,7 @@ export const Graph = () => {
         style={{ height: 150, width: 200 }}
         zoomable
       />
-      <DownloadButton dagId={dagId} />
+      <DownloadButton name={dagId} />
     </ReactFlow>
   );
 };
diff --git a/airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx 
b/airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx
index 28246ed57c1..42e1c39071f 100644
--- a/airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Asset/AssetGraph.tsx
@@ -22,6 +22,7 @@ import "@xyflow/react/dist/style.css";
 import { useParams } from "react-router-dom";
 
 import type { AssetResponse } from "openapi/requests/types.gen";
+import { DownloadButton } from "src/components/Graph/DownloadButton";
 import { edgeTypes, nodeTypes } from "src/components/Graph/graphTypes";
 import type { CustomNodeProps } from "src/components/Graph/reactflowUtils";
 import { useGraphLayout } from "src/components/Graph/useGraphLayout";
@@ -84,6 +85,7 @@ export const AssetGraph = ({ asset }: { readonly asset?: 
AssetResponse }) => {
         pannable
         zoomable
       />
+      <DownloadButton name={asset?.name ?? asset?.uri ?? "asset"} />
     </ReactFlow>
   );
 };