Update dag version UI

airflow-core/src/airflow/ui/src/components/DagVersion.tsx

@@ -0,0 +1,36 @@
+/*!
+ * 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 { Text } from "@chakra-ui/react";
+
+import type { DagVersionResponse } from "openapi/requests/types.gen";
+
+import Time from "./Time";
+import { Tooltip } from "./ui";
+
+export const DagVersion = ({ version }: { readonly version: DagVersionResponse | null | undefined }) => {
+  if (version === null || version === undefined) {
+    return undefined;
+  }
+
+  return (
+    <Tooltip content={<Time datetime={version.created_at} />}>
+      <Text as="span">v{version.version_number}</Text>
+    </Tooltip>
+  );
+};

airflow-core/src/airflow/ui/src/components/DagVersionSelect.tsx

@@ -16,90 +16,87 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Field } from "@chakra-ui/react";
-import { useQueryClient } from "@tanstack/react-query";
-import type { OptionsOrGroups, GroupBase, SingleValue } from "chakra-react-select";
-import { AsyncSelect } from "chakra-react-select";
-import { useCallback } from "react";
+import { createListCollection, Flex, Select, type SelectValueChangeDetails, Text } from "@chakra-ui/react";
+import { useCallback, useMemo } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
 
-import { UseDagVersionServiceGetDagVersionsKeyFn } from "openapi/queries";
-import { DagVersionService } from "openapi/requests/services.gen";
-import type { DAGVersionCollectionResponse, DagVersionResponse } from "openapi/requests/types.gen";
+import { useDagVersionServiceGetDagVersions } from "openapi/queries";
+import type { DagVersionResponse } from "openapi/requests/types.gen";
 import { SearchParamsKeys } from "src/constants/searchParams";
 import useSelectedVersion from "src/hooks/useSelectedVersion";
-import type { Option } from "src/utils/option";
 
-const DagVersionSelect = ({
-  disabled = false,
-  showLabel = true,
-}: {
-  readonly disabled?: boolean;
-  readonly showLabel?: boolean;
-}) => {
-  const queryClient = useQueryClient();
+import Time from "./Time";
 
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const selectedVersion = useSelectedVersion();
+type VersionSelected = {
+  value: number;
+  version: DagVersionResponse;
+};
 
+export const DagVersionSelect = ({ showLabel = true }: { readonly showLabel?: boolean }) => {
   const { dagId = "" } = useParams();
 
-  const loadVersions = (
-    _: string,
-    callback: (options: OptionsOrGroups<Option, GroupBase<Option>>) => void,
-  ): Promise<OptionsOrGroups<Option, GroupBase<Option>>> =>
-    queryClient.fetchQuery({
-      queryFn: () =>
-        DagVersionService.getDagVersions({
-          dagId,
-        }).then((data: DAGVersionCollectionResponse) => {
-          const options = [...data.dag_versions].reverse().map((version: DagVersionResponse) => {
-            const versionNumber = version.version_number.toString();
+  const { data, isLoading } = useDagVersionServiceGetDagVersions({ dagId, orderBy: "-version_number" });
 
-            return {
-              label: `v${versionNumber}`,
-              value: versionNumber,
-            };
-          });
+  const [searchParams, setSearchParams] = useSearchParams();
 
-          callback(options);
+  const selectedVersionNumber = useSelectedVersion();
 
-          return options;
-        }),
-      queryKey: UseDagVersionServiceGetDagVersionsKeyFn({ dagId }),
-      staleTime: 0,
-    });
+  const selectedVersion = data?.dag_versions.find((dv) => dv.version_number === selectedVersionNumber);
+
+  const versionOptions = useMemo(
+    () =>
+      createListCollection({
+        items: (data?.dag_versions ?? []).map((dv) => ({ value: dv.version_number, version: dv })),
+      }),
+    [data],
+  );
 
   const handleStateChange = useCallback(
-    (version: SingleValue<Option>) => {
-      if (version) {
-        searchParams.set(SearchParamsKeys.VERSION_NUMBER, version.value);
+    ({ items }: SelectValueChangeDetails<VersionSelected>) => {
+      if (items[0]) {
+        searchParams.set(SearchParamsKeys.VERSION_NUMBER, items[0].value.toString());
         setSearchParams(searchParams);
       }
     },
     [searchParams, setSearchParams],
   );
 
   return (
-    <Field.Root disabled={disabled} width="fit-content">
-      {showLabel ? <Field.Label fontSize="xs">Dag Version</Field.Label> : undefined}
-      <AsyncSelect
-        defaultOptions
-        filterOption={undefined}
-        isSearchable={false}
-        loadOptions={loadVersions}
-        onChange={handleStateChange}
-        placeholder="Dag Version"
-        size="sm"
-        value={
-          selectedVersion === undefined
-            ? undefined
-            : { label: `v${selectedVersion}`, value: selectedVersion.toString() }
-        }
-      />
-    </Field.Root>
+    <Select.Root
+      collection={versionOptions}
+      data-testid="dag-run-select"
+      disabled={isLoading || !data?.dag_versions}
+      onValueChange={handleStateChange}
+      size="sm"
+      value={selectedVersionNumber === undefined ? [] : [selectedVersionNumber.toString()]}
+      width="250px"
+    >
+      {showLabel ? <Select.Label fontSize="xs">Dag Version</Select.Label> : undefined}
+      <Select.Control>
+        <Select.Trigger>
+          <Select.ValueText placeholder="All Versions">
+            {selectedVersion === undefined ? undefined : (
+              <Flex justifyContent="space-between" width="175px">
+                <Text>v{selectedVersion.version_number}</Text>
+                <Time datetime={selectedVersion.created_at} />
+              </Flex>
+            )}
+          </Select.ValueText>
+        </Select.Trigger>
+        <Select.IndicatorGroup>
+          <Select.Indicator />
+        </Select.IndicatorGroup>
+      </Select.Control>
+      <Select.Positioner>
+        <Select.Content>
+          {versionOptions.items.map((option) => (
+            <Select.Item item={option} key={option.version.version_number}>
+              <Text>v{option.version.version_number}</Text>
+              <Time datetime={option.version.created_at} />
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Positioner>
+    </Select.Root>
   );
 };
-
-export default DagVersionSelect;

airflow-core/src/airflow/ui/src/components/LimitedItemsList.tsx

@@ -16,35 +16,55 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Flex, Text, VStack } from "@chakra-ui/react";
-import type { ReactNode } from "react";
+import { Box, Text, HStack } from "@chakra-ui/react";
+import React, { type ReactNode } from "react";
 
-import { Tooltip } from "src/components/ui";
+import { Tooltip } from "./ui";
 
-type Props = {
+type ListProps = {
   readonly icon?: ReactNode;
-  readonly items: Array<string>;
+  readonly items: Array<ReactNode | string>;
   readonly maxItems?: number;
-  readonly wrap?: boolean;
+  readonly separator?: string;
 };
 
-export const LimitedItemsList = ({ icon, items, maxItems = 3, wrap = false }: Props) =>
-  items.length ? (
-    <Flex alignItems="center" textWrap={wrap ? "normal" : "nowrap"}>
+export const LimitedItemsList = ({ icon, items, maxItems, separator = ", " }: ListProps) => {
+  const shouldTruncate = maxItems !== undefined && items.length > maxItems;
+  const displayItems = shouldTruncate ? items.slice(0, maxItems) : items;
+  const remainingItems = shouldTruncate ? items.slice(maxItems) : [];
+  const remainingItemsList = remainingItems
+    .map((item) => (typeof item === "string" ? item : "item"))
+    .join(", ");
+
+  if (!items.length) {
+    return undefined;
+  }
+
+  return (
+    <HStack align="center" gap={1}>
       {icon}
-      <Text fontSize="sm">{items.slice(0, maxItems).join(", ")}</Text>
-      {items.length > maxItems && (
-        <Tooltip
-          content={
-            <VStack gap={1} p={1}>
-              {items.slice(maxItems).map((item) => (
-                <Text key={item}>{item}</Text>
-              ))}
-            </VStack>
-          }
-        >
-          <Text as="span">, +{items.length - maxItems} more</Text>
-        </Tooltip>
-      )}
-    </Flex>
-  ) : undefined;
+      <Box fontSize="sm">
+        {displayItems.map((item, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <React.Fragment key={index}>
+            <Text as="span">{item}</Text>
+            {index < displayItems.length - 1 || (shouldTruncate && remainingItems.length > 1) ? (
+              <Text as="span">{separator}</Text>
+            ) : undefined}
+          </React.Fragment>
+        ))}
+        {shouldTruncate ? (
+          remainingItems.length === 1 ? (
+            <Text as="span">{remainingItems[0]}</Text>
+          ) : (
+            <Tooltip content={`More items: ${remainingItemsList}`}>
+              <Text as="span" cursor="help">
+                , +{remainingItems.length} more
+              </Text>
+            </Tooltip>
+          )
+        ) : undefined}
+      </Box>
+    </HStack>
+  );
+};

airflow-core/src/airflow/ui/src/layouts/Details/DagRunSelect.tsx

@@ -66,7 +66,7 @@ export const DagRunSelect = forwardRef<HTMLDivElement, DagRunSelectProps>(({ lim
     <Select.Root
       collection={runOptions}
       data-testid="dag-run-select"
-      disabled={isLoading}
+      disabled={isLoading || !data?.dag_runs}
       onValueChange={selectDagRun}
       ref={ref}
       size="sm"

airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx

@@ -31,7 +31,7 @@ import { MdOutlineAccountTree } from "react-icons/md";
 import { useParams } from "react-router-dom";
 import { useLocalStorage } from "usehooks-ts";
 
-import DagVersionSelect from "src/components/DagVersionSelect";
+import { DagVersionSelect } from "src/components/DagVersionSelect";
 import { directionOptions, type Direction } from "src/components/Graph/useGraphLayout";
 import { Button } from "src/components/ui";
 

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

@@ -30,7 +30,7 @@ import {
 } from "openapi/queries";
 import type { ApiError } from "openapi/requests/core/ApiError";
 import type { DAGSourceResponse } from "openapi/requests/types.gen";
-import DagVersionSelect from "src/components/DagVersionSelect";
+import { DagVersionSelect } from "src/components/DagVersionSelect";
 import { ErrorAlert } from "src/components/ErrorAlert";
 import Time from "src/components/Time";
 import { ClipboardRoot, ClipboardButton } from "src/components/ui";

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

@@ -24,6 +24,7 @@ import { DagIcon } from "src/assets/DagIcon";
 import ParseDag from "src/components/DagActions/ParseDag";
 import RunBackfillButton from "src/components/DagActions/RunBackfillButton";
 import DagRunInfo from "src/components/DagRunInfo";
+import { DagVersion } from "src/components/DagVersion";
 import DisplayMarkdownButton from "src/components/DisplayMarkdownButton";
 import { HeaderCard } from "src/components/HeaderCard";
 import { TogglePause } from "src/components/TogglePause";
@@ -80,11 +81,8 @@ export const Header = ({
       value: <DagTags tags={dag?.tags ?? []} />,
     },
     {
-      label: "Latest DAG Version",
-      value:
-        dag?.latest_dag_version?.version_number === undefined
-          ? ""
-          : `v${dag.latest_dag_version.version_number}`,
+      label: "Latest Dag Version",
+      value: <DagVersion version={dag?.latest_dag_version} />,
     },
   ];
 

airflow-core/src/airflow/ui/src/pages/DagRuns.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable max-lines */
+
 /*!
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -24,6 +26,7 @@ import { Link as RouterLink, useParams, useSearchParams } from "react-router-dom
 import { useDagRunServiceGetDagRuns } from "openapi/queries";
 import type { DAGRunResponse, DagRunState, DagRunType } from "openapi/requests/types.gen";
 import { ClearRunButton } from "src/components/Clear";
+import { DagVersion } from "src/components/DagVersion";
 import { DataTable } from "src/components/DataTable";
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { ErrorAlert } from "src/components/ErrorAlert";
@@ -104,7 +107,10 @@ const runColumns = (dagId?: string): Array<ColumnDef<DAGRunResponse>> => [
     accessorKey: "dag_versions",
     cell: ({ row: { original } }) => (
       <LimitedItemsList
-        items={original.dag_versions.map(({ version_number: versionNumber }) => `v${versionNumber}`)}
+        items={original.dag_versions.map((version) => (
+          <DagVersion key={version.id} version={version} />
+        ))}
+        maxItems={4}
       />
     ),
     enableSorting: false,

airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx

@@ -40,7 +40,7 @@ export const AssetSchedule = ({ dag }: Props) => {
       return true;
     }
     if (ev.lastUpdate !== null && dag.latest_dag_runs[0]?.run_after !== undefined) {
-      return dayjs(ev.lastUpdate).isAfter(dag.latest_dag_runs[0]?.run_after);
+      return dayjs(ev.lastUpdate).isAfter(dag.latest_dag_runs[0].run_after);
     }
 
     return false;

airflow-core/src/airflow/ui/src/pages/DagsList/DagCard.test.tsx

@@ -66,12 +66,32 @@ describe("DagCard", () => {
     expect(screen.queryByTestId("dag-tag")).toBeNull();
   });
 
+  it("DagCard should not show +X more text if there is only +1 over the limit", () => {
+    const tags = [
+      { dag_id: "id", name: "tag1" },
+      { dag_id: "id", name: "tag2" },
+      { dag_id: "id", name: "tag3" },
+      { dag_id: "id", name: "tag4" },
+    ] satisfies Array<DagTagResponse>;
+
+    const expandedMockDag = {
+      ...mockDag,
+      tags,
+    } satisfies DAGWithLatestDagRunsResponse;
+
+    render(<DagCard dag={expandedMockDag} />, { wrapper: Wrapper });
+    expect(screen.getByTestId("dag-tag")).toBeInTheDocument();
+    expect(screen.queryByText("tag4")).toBeInTheDocument();
+    expect(screen.queryByText(", +1 more")).toBeNull();
+  });
+
   it("DagCard should show +X more text if there are more than 3 tags", () => {
     const tags = [
       { dag_id: "id", name: "tag1" },
       { dag_id: "id", name: "tag2" },
       { dag_id: "id", name: "tag3" },
       { dag_id: "id", name: "tag4" },
+      { dag_id: "id", name: "tag5" },
     ] satisfies Array<DagTagResponse>;
 
     const expandedMockDag = {
@@ -81,6 +101,6 @@ describe("DagCard", () => {
 
     render(<DagCard dag={expandedMockDag} />, { wrapper: Wrapper });
     expect(screen.getByTestId("dag-tag")).toBeInTheDocument();
-    expect(screen.getByText(", +1 more")).toBeInTheDocument();
+    expect(screen.getByText(", +2 more")).toBeInTheDocument();
   });
 });