This is an automated email from the ASF dual-hosted git repository.
bbovenzi 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 0a4537d2e4f [v3-3-test] Make GridButton tooltip label timezone aware
(#71944) (#71951)
0a4537d2e4f is described below
commit 0a4537d2e4fdcf92b54c6331a145d01c9d88cfbf
Author: github-actions[bot]
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Fri Aug 21 12:15:14 2026 -0400
[v3-3-test] Make GridButton tooltip label timezone aware (#71944) (#71951)
Plain runafter string was used as GridButton tooltip label;
using the <Time> component, it is now rendered in the users selected
timezone
(cherry picked from commit 0eda936b484ace04b4c69f2d4a11929caedb9c68)
Co-authored-by: Stephan <[email protected]>
---
.../airflow/ui/src/layouts/Details/Grid/Bar.tsx | 2 +-
.../src/layouts/Details/Grid/GridButton.test.tsx | 26 +++++++++++++---------
.../ui/src/layouts/Details/Grid/GridButton.tsx | 7 +++---
3 files changed, 20 insertions(+), 15 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
index 37bef5dbad7..9e3c7bb7e61 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx
@@ -83,8 +83,8 @@ export const Bar = ({ max, onClick, run,
showVersionIndicatorMode }: Props) => {
flexDir="column"
height={`${(run.duration / max) * BAR_HEIGHT}px`}
justifyContent="flex-end"
- label={run.run_after}
minHeight="14px"
+ runAfter={run.run_after}
runId={run.run_id}
searchParams={search}
state={run.state}
diff --git
a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.test.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.test.tsx
index bb0f38b8725..e5103df00c3 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.test.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.test.tsx
@@ -20,25 +20,28 @@ import "@testing-library/jest-dom";
import { act, fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
+import { TimezoneContext } from "src/context/timezone";
import { Wrapper } from "src/utils/Wrapper";
import { GridButton } from "./GridButton";
describe("GridButton", () => {
- it("shows run ID in the grid tooltip", () => {
+ it("shows run details in the grid tooltip respecting the selected timezone",
() => {
vi.useFakeTimers();
render(
- <GridButton
- dagId="example_dag"
- duration={3661}
- label="2026-04-21T00:00:00+00:00"
- runId="manual__2026-04-21T00:00:00+00:00"
- searchParams=""
- state="success"
- >
- <span>bar</span>
- </GridButton>,
+ <TimezoneContext.Provider value={{ selectedTimezone: "Europe/Vienna",
setSelectedTimezone: vi.fn() }}>
+ <GridButton
+ dagId="example_dag"
+ duration={3661}
+ runAfter="2026-04-21T00:00:00+00:00"
+ runId="manual__2026-04-21T00:00:00+00:00"
+ searchParams=""
+ state="success"
+ >
+ <span>bar</span>
+ </GridButton>
+ </TimezoneContext.Provider>,
{ wrapper: Wrapper },
);
@@ -47,6 +50,7 @@ describe("GridButton", () => {
vi.advanceTimersByTime(500);
});
+ expect(screen.getByTestId("basic-tooltip")).toHaveTextContent("2026-04-21
02:00:00");
expect(screen.getByTestId("basic-tooltip")).toHaveTextContent(
"common:runId: manual__2026-04-21T00:00:00+00:00",
);
diff --git
a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
index 8721d937c72..3d89867fcd5 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridButton.tsx
@@ -22,13 +22,14 @@ import { Link } from "react-router-dom";
import type { DagRunState, TaskInstanceState } from
"openapi/requests/types.gen";
import { BasicTooltip } from "src/components/BasicTooltip";
+import Time from "src/components/Time";
import { renderDuration } from "src/utils/datetimeUtils";
type Props = {
readonly dagId: string;
readonly duration?: number | null;
readonly isGroup?: boolean;
- readonly label: string;
+ readonly runAfter: string;
readonly runId: string;
readonly searchParams: string;
readonly state: DagRunState | TaskInstanceState | null | undefined;
@@ -40,7 +41,7 @@ export const GridButton = ({
dagId,
duration,
isGroup,
- label,
+ runAfter,
runId,
searchParams,
state,
@@ -51,7 +52,7 @@ export const GridButton = ({
const tooltipContent = (
<>
- {label}
+ <Time datetime={runAfter} />
<br />
{translate("common:runId")}: {runId}
<br />
