This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new a02fbaa00cc fix(DagCalendarTab): improve background color retrieval
and loading overlay handling (#64189)
a02fbaa00cc is described below
commit a02fbaa00cc51bce42c4375ca65febbe5589d6b2
Author: MFWhen <[email protected]>
AuthorDate: Tue Apr 7 21:04:06 2026 +0100
fix(DagCalendarTab): improve background color retrieval and loading overlay
handling (#64189)
* fix(DagCalendarTab): improve background color retrieval and loading
overlay handling
* fix(DagCalendarTab): update loading overlay and calendar cell visibility
checks
* fix(DagCalendarTab): improve background color retrieval and loading
overlay handling
* fix(DagCalendarTab): update loading overlay and calendar cell visibility
checks
* refactor: update visibility checks in DagCalendarTab
* remove redundant visibility checks in DagCalendarTab
* removed unrelated change and attempted to resolve merge conflict markers
* Update airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarTab.ts
Co-authored-by: Copilot <[email protected]>
* Update airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarTab.ts
Co-authored-by: Copilot <[email protected]>
* updated getActiveCellColors to use getComputedStyle to properly return
rendered color of an element
* simplify child element color retrieval and improve readability
* changed file mode
---------
Co-authored-by: Yeonguk Choo <[email protected]>
Co-authored-by: Copilot <[email protected]>
---
.../airflow/ui/tests/e2e/pages/DagCalendarTab.ts | 52 +++++++++++++++-------
1 file changed, 36 insertions(+), 16 deletions(-)
diff --git a/airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarTab.ts
b/airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarTab.ts
index 7aee20db7c0..79e00c22266 100644
--- a/airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarTab.ts
+++ b/airflow-core/src/airflow/ui/tests/e2e/pages/DagCalendarTab.ts
@@ -50,9 +50,35 @@ export class DagCalendarTab extends BasePage {
for (let i = 0; i < count; i++) {
const cell = this.activeCells.nth(i);
- const bg = await cell.evaluate((el) =>
window.getComputedStyle(el).backgroundColor);
+ const computedColor = await cell.evaluate((el: Element) => {
+ const getRenderableColor = (element: Element): string => {
+ const color = window.getComputedStyle(element).backgroundColor;
- colors.push(bg);
+ return color && color !== "rgba(0, 0, 0, 0)" && color !==
"transparent" ? color : "";
+ };
+
+ const cellColor = getRenderableColor(el);
+
+ if (cellColor) {
+ return cellColor;
+ }
+
+ const children = [...el.querySelectorAll("*")];
+
+ for (const child of children) {
+ const childColor = getRenderableColor(child);
+
+ if (childColor) {
+ return childColor;
+ }
+ }
+
+ return "";
+ });
+
+ if (computedColor) {
+ colors.push(computedColor);
+ }
}
return colors;
@@ -88,7 +114,7 @@ export class DagCalendarTab extends BasePage {
public async navigateToCalendar(dagId: string) {
await expect(async () => {
await this.safeGoto(`/dags/${dagId}/calendar`);
- await this.page.getByTestId("dag-calendar-root").waitFor({ state:
"visible", timeout: 5000 });
+ await expect(this.page.getByTestId("dag-calendar-root")).toBeVisible({
timeout: 5000 });
}).toPass({ intervals: [2000], timeout: 60_000 });
await this.waitForCalendarReady();
}
@@ -100,7 +126,7 @@ export class DagCalendarTab extends BasePage {
public async switchToHourly() {
await this.hourlyToggle.click();
- await this.page.getByTestId("calendar-hourly-view").waitFor({ state:
"visible", timeout: 30_000 });
+ await expect(this.page.getByTestId("calendar-hourly-view")).toBeVisible({
timeout: 30_000 });
}
public async switchToTotalView() {
@@ -112,22 +138,16 @@ export class DagCalendarTab extends BasePage {
}
private async waitForCalendarReady(): Promise<void> {
- await this.page.getByTestId("dag-calendar-root").waitFor({ state:
"visible", timeout: 120_000 });
+ await expect(this.page.getByTestId("dag-calendar-root")).toBeVisible({
timeout: 120_000 });
- await this.page.getByTestId("calendar-current-period").waitFor({ state:
"visible", timeout: 120_000 });
+ await
expect(this.page.getByTestId("calendar-current-period")).toBeVisible({ timeout:
120_000 });
+ await expect(this.page.getByTestId("calendar-grid")).toBeVisible({
timeout: 120_000 });
const overlay = this.page.getByTestId("calendar-loading-overlay");
- if (await overlay.isVisible().catch(() => false)) {
- await overlay.waitFor({ state: "hidden", timeout: 120_000 });
- }
-
- await this.page.getByTestId("calendar-grid").waitFor({ state: "visible",
timeout: 120_000 });
-
- await this.page.waitForFunction(() => {
- const cells = document.querySelectorAll('[data-testid="calendar-cell"]');
+ await expect(overlay).toBeHidden({ timeout: 120_000 });
+ const cells = this.page.getByTestId("calendar-cell");
- return cells.length > 0;
- });
+ await expect(cells.first()).toBeVisible({ timeout: 120_000 });
}
}
