(airflow) branch main updated: Add filename display to DAG Code tab for easier file identification (#60759)

[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 3338b488a6d Add filename display to DAG Code tab for easier file 
identification (#60759)
3338b488a6d is described below

commit 3338b488a6de7536ce9a603e7c55d62eddbe1392
Author: Dheeraj Turaga <dheerajtur...@gmail.com>
AuthorDate: Fri Jan 30 10:26:00 2026 -0600

    Add filename display to DAG Code tab for easier file identification (#60759)
    
    * Add filename display to DAG Code tab for easier file identification
    
    * Fix static checks
    
    * Change filename to a tab like header above code editor
    
    * Remove translation key for fileLoc. Not needed
---
 .../src/airflow/ui/src/pages/Dag/Code/Code.tsx     |  9 ++++
 .../airflow/ui/src/pages/Dag/Code/FileLocation.tsx | 55 ++++++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx 
b/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
index 5cadb4da10a..3d023c9f090 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx
@@ -16,6 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+/* eslint-disable max-lines */
 import { Box, Button, Heading, HStack, Link, VStack } from "@chakra-ui/react";
 import Editor, { type EditorProps } from "@monaco-editor/react";
 import { useState } from "react";
@@ -42,6 +44,7 @@ import { useConfig } from "src/queries/useConfig";
 import { renderDuration } from "src/utils";
 
 import { CodeDiffViewer } from "./CodeDiffViewer";
+import { FileLocation } from "./FileLocation";
 import { VersionCompareSelect } from "./VersionCompareSelect";
 
 export const Code = () => {
@@ -244,6 +247,9 @@ export const Code = () => {
 
       {isDiffMode ? (
         <Box dir="ltr" height="full">
+          {dag?.fileloc !== undefined && (
+            <FileLocation fileloc={dag.fileloc} 
relativeFileloc={dag.relative_fileloc} />
+          )}
           <CodeDiffViewer
             modifiedCode={
               codeError?.status === 404 && !Boolean(code?.content)
@@ -268,6 +274,9 @@ export const Code = () => {
           fontSize="14px"
           height="full"
         >
+          {dag?.fileloc !== undefined && (
+            <FileLocation fileloc={dag.fileloc} 
relativeFileloc={dag.relative_fileloc} />
+          )}
           <Editor
             language="python"
             options={editorOptions}
diff --git a/airflow-core/src/airflow/ui/src/pages/Dag/Code/FileLocation.tsx 
b/airflow-core/src/airflow/ui/src/pages/Dag/Code/FileLocation.tsx
new file mode 100644
index 00000000000..34c14d0c6b4
--- /dev/null
+++ b/airflow-core/src/airflow/ui/src/pages/Dag/Code/FileLocation.tsx
@@ -0,0 +1,55 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Box, Code, HStack } from "@chakra-ui/react";
+
+import { ClipboardIconButton, ClipboardRoot, Tooltip } from 
"src/components/ui";
+
+type FileLocationProps = {
+  readonly fileloc: string;
+  readonly relativeFileloc: string | null;
+};
+
+export const FileLocation = ({ fileloc, relativeFileloc }: FileLocationProps) 
=> {
+  const displayFilename =
+    relativeFileloc !== null && relativeFileloc !== ""
+      ? relativeFileloc
+      : (fileloc.split("/").at(-1) ?? fileloc);
+
+  return (
+    <Box
+      bg="bg.subtle"
+      borderBottomWidth={1}
+      borderColor="border.emphasized"
+      borderTopRadius={8}
+      px={3}
+      py={1}
+    >
+      <HStack gap={2}>
+        <Tooltip closeDelay={100} content={fileloc} openDelay={100}>
+          <Code fontSize="13px" wordBreak="break-word">
+            {displayFilename}
+          </Code>
+        </Tooltip>
+        <ClipboardRoot value={fileloc}>
+          <ClipboardIconButton size="2xs" />
+        </ClipboardRoot>
+      </HStack>
+    </Box>
+  );
+};