Add filename display to DAG Code tab for easier file identification

airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json

@@ -36,6 +36,7 @@
   },
   "code": {
     "bundleUrl": "Bundle Url",
+    "fileLocation": "File:",
     "noCode": "No Code Found",
     "parseDuration": "Parse Duration:",
     "parsedAt": "Parsed at:"

airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx

@@ -42,6 +42,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 = () => {
@@ -142,6 +143,9 @@ export const Code = () => {
     <Box h="100%" overflow="hidden">
       <HStack justifyContent="space-between" mt={2}>
         <HStack gap={5}>
+          {dag?.fileloc !== undefined && (
+            <FileLocation fileloc={dag.fileloc} relativeFileloc={dag.relative_fileloc} />
+          )}
           {dag?.last_parsed_time !== undefined && (
             <Heading as="h4" fontSize="14px" size="md">
               {translate("code.parsedAt")} <Time datetime={dag.last_parsed_time} />

airflow-core/src/airflow/ui/src/pages/Dag/Code/FileLocation.tsx

@@ -0,0 +1,51 @@
+/*!
+ * 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 { Code, Heading, HStack } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+
+import { ClipboardIconButton, ClipboardRoot, Tooltip } from "src/components/ui";
+
+type FileLocationProps = {
+  readonly fileloc: string;
+  readonly relativeFileloc: string | null;
+};
+
+export const FileLocation = ({ fileloc, relativeFileloc }: FileLocationProps) => {
+  const { t: translate } = useTranslation("dag");
+  const displayFilename =
+    relativeFileloc !== null && relativeFileloc !== ""
+      ? relativeFileloc
+      : (fileloc.split("/").at(-1) ?? fileloc);
+
+  return (
+    <HStack gap={1}>
+      <Heading as="h4" fontSize="14px" size="md">
+        {translate("code.fileLocation")}
+      </Heading>
+      <Tooltip closeDelay={100} content={fileloc} openDelay={100}>
+        <Code fontSize="14px" wordBreak="break-word">
+          {displayFilename}
+        </Code>
+      </Tooltip>
+      <ClipboardRoot value={fileloc}>
+        <ClipboardIconButton size="2xs" />
+      </ClipboardRoot>
+    </HStack>
+  );
+};