This is an automated email from the ASF dual-hosted git repository.
potiuk pushed a commit to branch v3-3-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-3-test by this push:
new c4105f0895d [v3-3-test] UI: Keep Dag version indicator below sticky
task names in grid (#73572) (#73628)
c4105f0895d is described below
commit c4105f0895d0f485c0ccd3ae41112b0945aaf24e
Author: github-actions[bot]
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Mon Sep 28 16:58:19 2026 +0200
[v3-3-test] UI: Keep Dag version indicator below sticky task names in grid
(#73572) (#73628)
* [v3-3-test] UI: Keep Dag version indicator below sticky task names in
grid (#73572)
When the grid is scrolled horizontally, a run whose Dag version changed
slides under the sticky task name column, but its version line kept
painting on top of that column and over the duration labels. The line
then points at nothing and makes it look like the version changed at a
different run than it did.
(cherry picked from commit 150d0a9b6664964e3f95c58f2ddfb3c3c256fa16)
Co-authored-by: manish1337 <[email protected]>
* Apply v3-3-test UI import grouping to the Grid test
Generated-by: Claude Opus 5
---------
Co-authored-by: manish1337 <[email protected]>
Co-authored-by: Jarek Potiuk <[email protected]>
---
.../ui/src/layouts/Details/Grid/Grid.test.tsx | 95 ++++++++++++++++++++++
.../airflow/ui/src/layouts/Details/Grid/Grid.tsx | 6 +-
2 files changed, 99 insertions(+), 2 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.test.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.test.tsx
new file mode 100644
index 00000000000..eefe0725b6a
--- /dev/null
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.test.tsx
@@ -0,0 +1,95 @@
+/*!
+ * 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 "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { GridRunsResponse } from "openapi/requests/types.gen";
+import { VersionIndicatorOptions } from
"src/constants/showVersionIndicatorOptions";
+import { GroupsProvider } from "src/context/groups";
+import { Wrapper } from "src/utils/Wrapper";
+
+import { Grid } from "./Grid";
+
+const buildRun = (runId: string, versionNumber: number): GridRunsResponse => ({
+ dag_id: "example_dag",
+ dag_versions: [
+ {
+ bundle_name: "dags-folder",
+ bundle_url: null,
+ bundle_version: null,
+ created_at: "2026-09-22T00:00:00Z",
+ dag_display_name: "example_dag",
+ dag_id: "example_dag",
+ id: `version-${versionNumber}`,
+ version_number: versionNumber,
+ },
+ ],
+ duration: 1,
+ end_date: null,
+ has_missed_deadline: false,
+ has_note: false,
+ queued_at: null,
+ run_after: "2026-09-22T00:00:00Z",
+ run_id: runId,
+ run_type: "manual",
+ start_date: null,
+ state: "success",
+});
+
+const gridRuns = [buildRun("run_v2", 2), buildRun("run_v1", 1)];
+
+vi.mock("src/queries/useGridRuns.ts", () => ({
+ useGridRuns: () => ({ data: gridRuns, isLoading: false }),
+}));
+
+vi.mock("src/queries/useGridStructure.ts", () => ({
+ useGridStructure: () => ({ data: [{ id: "say_hello", label: "say_hello" }]
}),
+}));
+
+vi.mock("src/queries/useGridTISummaries.ts", () => ({
+ useGridTiSummariesStream: () => ({ summariesByRunId: new Map() }),
+}));
+
+describe("Grid", () => {
+ it("keeps run columns below the sticky task name column during horizontal
scroll", () => {
+ const { container } = render(
+ <Wrapper>
+ <GroupsProvider dagId="example_dag">
+ <Grid
+ limit={10}
+ offset={0}
+ onJumpToLatest={vi.fn()}
+ setOffset={vi.fn()}
+ showVersionIndicatorMode={VersionIndicatorOptions.ALL}
+ />
+ </GroupsProvider>
+ </Wrapper>,
+ );
+
+ const runContainers = new Set(
+ [...container.querySelectorAll("[data-run-id]")].map((element) =>
element.parentElement),
+ );
+
+ expect(runContainers.size).toBe(2);
+ for (const runContainer of runContainers) {
+ expect(runContainer).toHaveStyle({ isolation: "isolate" });
+ }
+ });
+});
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
index 7faf057f9bb..5232c488f0f 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
@@ -229,7 +229,9 @@ export const Grid = ({
<DurationAxis top={`${GRID_HEADER_HEIGHT_PX}px`} />
<DurationAxis top={`${GRID_HEADER_HEIGHT_PX / 2}px`} />
<DurationAxis top="4px" />
- <Flex flexDirection="row-reverse">
+ {/* Isolated so version indicators stay beneath the sticky task
name column when scrolled
+ behind it. Pagination buttons sit outside on purpose: the
older-runs button overlaps that column. */}
+ <Flex flexDirection="row-reverse" style={{ isolation: "isolate" }}>
{!showGantt && <ScrollbarSpacer width={scrollbarSpacerWidth} />}
{runsWithVersionFlags?.map((dr) => (
<Bar
@@ -259,7 +261,7 @@ export const Grid = ({
<Box bg="bg" left={0} position="sticky" zIndex={1}
{...taskNameColumnStyles}>
<TaskNames nodes={flatNodes} onRowClick={handleRowClick}
virtualItems={virtualItems} />
</Box>
- <Flex flexDirection="row-reverse" flexShrink={0}>
+ <Flex flexDirection="row-reverse" flexShrink={0} style={{ isolation:
"isolate" }}>
{!showGantt && <ScrollbarSpacer width={scrollbarSpacerWidth} />}
{gridRuns?.map((dr: GridRunsResponse) => (
<TaskInstancesColumn
