AIP-38 Show bundle version and bundle URL in code tab (apache#47442)

Author: pierrejeambrun

airflow/ui/src/components/DagVersionSelect.tsx

@@ -85,7 +85,9 @@ const DagVersionSelect = ({ disabled = false }: { readonly disabled?: boolean })
         onChange={handleStateChange}
         placeholder="Dag Version"
         value={
-          selectedVersion === undefined ? undefined : { label: `v${selectedVersion}`, value: selectedVersion }
+          selectedVersion === undefined
+            ? undefined
+            : { label: `v${selectedVersion}`, value: selectedVersion.toString() }
         }
       />
     </Field.Root>

airflow/ui/src/hooks/useSelectedVersion.ts

@@ -26,7 +26,7 @@ import {
 } from "openapi/queries";
 import { SearchParamsKeys } from "src/constants/searchParams";
 
-const useSelectedVersion = (): string | undefined => {
+const useSelectedVersion = (): number | undefined => {
   const [searchParams] = useSearchParams();
 
   const selectedVersionUrl = searchParams.get(SearchParamsKeys.VERSION_NUMBER);
@@ -72,12 +72,12 @@ const useSelectedVersion = (): string | undefined => {
   );
 
   const selectedVersionNumber =
-    selectedVersionUrl ??
+    (selectedVersionUrl === null ? undefined : parseInt(selectedVersionUrl, 10)) ??
     mappedTaskInstanceData?.dag_version?.version_number ??
     runData?.dag_versions.at(-1)?.version_number ??
     dagData?.latest_dag_version?.version_number;
 
-  return selectedVersionNumber?.toString();
+  return selectedVersionNumber;
 };
 
 export default useSelectedVersion;

airflow/ui/src/layouts/Details/Graph/Graph.tsx

@@ -95,12 +95,11 @@ export const Graph = () => {
   const [dependencies] = useLocalStorage<"all" | "immediate" | "tasks">(`dependencies-${dagId}`, "immediate");
 
   const selectedColor = colorMode === "dark" ? selectedDarkColor : selectedLightColor;
-  const versionNumber = selectedVersion === undefined ? undefined : parseInt(selectedVersion, 10);
 
   const { data: graphData = { arrange: "LR", edges: [], nodes: [] } } = useStructureServiceStructureData({
     dagId,
     externalDependencies: dependencies === "immediate",
-    versionNumber,
+    versionNumber: selectedVersion,
   });
 
   const { data: dagDependencies = { edges: [], nodes: [] } } = useDependenciesServiceGetDependencies(
@@ -122,7 +121,7 @@ export const Graph = () => {
         )
       : graphData.nodes,
     openGroupIds: [...openGroupIds, ...(dependencies === "all" ? [`dag:${dagId}`] : [])],
-    versionNumber,
+    versionNumber: selectedVersion,
   });
 
   const { data: gridData } = useGridServiceGridData(

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

@@ -16,14 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Button, Heading, HStack } from "@chakra-ui/react";
+import { Box, Button, Heading, HStack, Link } from "@chakra-ui/react";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { createElement, PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
 import { oneLight, oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
-import { useDagServiceGetDagDetails, useDagSourceServiceGetDagSource } from "openapi/queries";
+import {
+  useDagServiceGetDagDetails,
+  useDagSourceServiceGetDagSource,
+  useDagVersionServiceGetDagVersion,
+} from "openapi/queries";
 import DagVersionSelect from "src/components/DagVersionSelect";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import Time from "src/components/Time";
@@ -47,13 +51,22 @@ export const Code = () => {
     dagId: dagId ?? "",
   });
 
+  const { data: dagVersion } = useDagVersionServiceGetDagVersion(
+    {
+      dagId: dagId ?? "",
+      versionNumber: selectedVersion ?? 1,
+    },
+    undefined,
+    { enabled: dag !== undefined && selectedVersion !== undefined },
+  );
+
   const {
     data: code,
     error: codeError,
     isLoading: isCodeLoading,
   } = useDagSourceServiceGetDagSource({
     dagId: dagId ?? "",
-    versionNumber: selectedVersion === undefined ? undefined : parseInt(selectedVersion, 10),
+    versionNumber: selectedVersion,
   });
 
   const defaultWrap = Boolean(useConfig("default_wrap"));
@@ -73,11 +86,35 @@ export const Code = () => {
   return (
     <Box>
       <HStack justifyContent="space-between" mt={2}>
-        {dag?.last_parsed_time !== undefined && (
-          <Heading as="h4" fontSize="14px" size="md">
-            Parsed at: <Time datetime={dag.last_parsed_time} />
-          </Heading>
-        )}
+        <HStack gap={5}>
+          {dag?.last_parsed_time !== undefined && (
+            <Heading as="h4" fontSize="14px" size="md">
+              Parsed at: <Time datetime={dag.last_parsed_time} />
+            </Heading>
+          )}
+
+          {
+            // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+            dagVersion !== undefined && dagVersion.bundle_version !== null ? (
+              <Heading as="h4" fontSize="14px" size="md" wordBreak="break-word">
+                Bundle Version:{" "}
+                {dagVersion.bundle_url === null ? (
+                  dagVersion.bundle_version
+                ) : (
+                  <Link
+                    aria-label="Bundle Url"
+                    color="fg.info"
+                    href={dagVersion.bundle_url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    {dagVersion.bundle_version}
+                  </Link>
+                )}
+              </Heading>
+            ) : undefined
+          }
+        </HStack>
         <HStack>
           <DagVersionSelect />
           <Button aria-label={wrap ? "Unwrap" : "Wrap"} bg="bg.panel" onClick={toggleWrap} variant="outline">