Skip to content

UI: Fix visual and console-error bugs in Dag list and details - #75418

Merged
vatsrahul1001 merged 2 commits into
apache:mainfrom
astronomer:dev/airflow-ui-bugs-warnings-df81a6
Oct 25, 2026
Merged

vatsrahul1001 merged 2 commits into
apache:mainfrom
astronomer:dev/airflow-ui-bugs-warnings-df81a6

Conversation

@bbovenzi

@bbovenzi bbovenzi commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

Fix a bunch of various UI bugs.

  • console errors due to duplicate gantt chart keys
  • We missed the Dag Warning banner when cleaning up other banners. It is now merged into the dag import error to show errors and warnings together
  • Fixed console log error where FilterPill was nesting buttons
  • Added back a margin between filters and the dag card list that was lost when we get rid of the isFetching loader. This sits on the shared table header, so it comes back for every list, not just the Dag cards — the progress bar used to supply it everywhere
  • Dag runs in a Dag Card were occasionally aligned to the top of the card, breaking the bar chart
  • Removed spinner on Dag Card for pending runs. The state badges are enough
  • Reduce HITL task requests that kept ending in 404s
  • Fixed dagWarnings.errorAndWarning passing the wrong variable name, so "1 Error and N Warnings" has been rendering with its second half missing in every locale
  • Dag warning types were reaching the heading as raw backend values (non-existent pool, runtime varying value), untranslated in every language. They are mapped to i18n keys now and translated into all 20 locales — those translations are machine-generated and anchored on each locale's existing glossary, so a locale owner's eye on them would be welcome
  • Tests now fail on React's invalid-markup and duplicate-key warnings rather than logging them, which is what let the nesting bugs above go unnoticed

Warning banner before:

1-warnings-button-before

After:
5-merged-modal

Dag card before:
3-pending-runs-before

After:
3-pending-runs-after

Filter margin before:
2-filters-margin-before

After:
2-filters-margin-after


Was generative AI tooling used to co-author this PR?
  • Yes (please specify the tool below)

Generated-by: Claude Code (Opus 5) following the guidelines

These are pre-existing bugs, all found while testing an unrelated change and
all in the same corner of the UI, so they travel together rather than as a
handful of one-line pull requests.

Several survived review because nothing asserted on them: the Gantt axis only
collided its React keys on runs of roughly twenty seconds or less, the warnings
marker only stretched on a Dag that actually had a warning, and the HITL tab
lookup only logged its 404 on a task that was not human-in-the-loop. Each now
has a test that fails without its fix.

The Dag status markers are consolidated because apache#74516 moved every other Dag
status onto the shared StatusChip and left this one behind. That left two
markers that looked identical, sat in different containers, and meant different
things, with no single place to see everything wrong with a Dag.

Co-Authored-By: Claude <noreply@anthropic.com>
@bbovenzi bbovenzi added this to the Airflow 3.4.0 milestone Oct 22, 2026
@bbovenzi bbovenzi added the backport-to-v3-4-test Backport to v3-4-test label Oct 22, 2026
@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Oct 22, 2026
The merged status chip was introducing the same class of console error the rest
of the change removes. Rich detail was rendered inside a paragraph, which cannot
hold the blocks the import-error view brings, so the browser closed the
paragraph early and the file row inherited an error colour and type scale meant
only for the traceback. Tests now fail on React's markup warnings instead of
letting them scroll past in CI output, which is what let this through: the test
that opens that very modal was passing while logging two nesting errors.

Three assertions could not fail as written. One searched for a nested button
only inside the inner button, so restoring the old wrapper would have gone
unnoticed; one asked for a chip named after a deactivation that the import-error
branch can never produce; one opened the modal for a failed request without
checking the failure reached it.

Warning types reached the heading as the backend's own lowercase enum values,
which would have shown untranslated English in every locale, so they are
translated now rather than passed through. The chip and its modal each walked
the severity order themselves and would have disagreed the moment one changed.

Co-Authored-By: Claude <noreply@anthropic.com>
@vatsrahul1001
vatsrahul1001 merged commit da4fafc into apache:main Oct 25, 2026
79 checks passed
@vatsrahul1001
vatsrahul1001 deleted the dev/airflow-ui-bugs-warnings-df81a6 branch October 25, 2026 05:30
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-4-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

Status Branch Result
✅ v3-4-test PR Link

github-actions Bot pushed a commit to aws-mwaa/upstream-to-airflow that referenced this pull request Oct 25, 2026
…ails (apache#75418)

* UI: Fix visual and console-error bugs in Dag list and details

These are pre-existing bugs, all found while testing an unrelated change and
all in the same corner of the UI, so they travel together rather than as a
handful of one-line pull requests.

Several survived review because nothing asserted on them: the Gantt axis only
collided its React keys on runs of roughly twenty seconds or less, the warnings
marker only stretched on a Dag that actually had a warning, and the HITL tab
lookup only logged its 404 on a task that was not human-in-the-loop. Each now
has a test that fails without its fix.

The Dag status markers are consolidated because apache#74516 moved every other Dag
status onto the shared StatusChip and left this one behind. That left two
markers that looked identical, sat in different containers, and meant different
things, with no single place to see everything wrong with a Dag.

Co-Authored-By: Claude <noreply@anthropic.com>

* UI: Address review on the Dag status chip and warning translations

The merged status chip was introducing the same class of console error the rest
of the change removes. Rich detail was rendered inside a paragraph, which cannot
hold the blocks the import-error view brings, so the browser closed the
paragraph early and the file row inherited an error colour and type scale meant
only for the traceback. Tests now fail on React's markup warnings instead of
letting them scroll past in CI output, which is what let this through: the test
that opens that very modal was passing while logging two nesting errors.

Three assertions could not fail as written. One searched for a nested button
only inside the inner button, so restoring the old wrapper would have gone
unnoticed; one asked for a chip named after a deactivation that the import-error
branch can never produce; one opened the modal for a failed request without
checking the failure reached it.

Warning types reached the heading as the backend's own lowercase enum values,
which would have shown untranslated English in every locale, so they are
translated now rather than passed through. The chip and its modal each walked
the severity order themselves and would have disagreed the moment one changed.

Co-Authored-By: Claude <noreply@anthropic.com>

---------
(cherry picked from commit da4fafc)

Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Co-authored-by: Claude <noreply@anthropic.com>
vatsrahul1001 pushed a commit that referenced this pull request Oct 25, 2026
…ails (#75418) (#75593)

* UI: Fix visual and console-error bugs in Dag list and details

These are pre-existing bugs, all found while testing an unrelated change and
all in the same corner of the UI, so they travel together rather than as a
handful of one-line pull requests.

Several survived review because nothing asserted on them: the Gantt axis only
collided its React keys on runs of roughly twenty seconds or less, the warnings
marker only stretched on a Dag that actually had a warning, and the HITL tab
lookup only logged its 404 on a task that was not human-in-the-loop. Each now
has a test that fails without its fix.

The Dag status markers are consolidated because #74516 moved every other Dag
status onto the shared StatusChip and left this one behind. That left two
markers that looked identical, sat in different containers, and meant different
things, with no single place to see everything wrong with a Dag.



* UI: Address review on the Dag status chip and warning translations

The merged status chip was introducing the same class of console error the rest
of the change removes. Rich detail was rendered inside a paragraph, which cannot
hold the blocks the import-error view brings, so the browser closed the
paragraph early and the file row inherited an error colour and type scale meant
only for the traceback. Tests now fail on React's markup warnings instead of
letting them scroll past in CI output, which is what let this through: the test
that opens that very modal was passing while logging two nesting errors.

Three assertions could not fail as written. One searched for a nested button
only inside the inner button, so restoring the old wrapper would have gone
unnoticed; one asked for a chip named after a deactivation that the import-error
branch can never produce; one opened the modal for a failed request without
checking the failure reached it.

Warning types reached the heading as the backend's own lowercase enum values,
which would have shown untranslated English in every locale, so they are
translated now rather than passed through. The chip and its modal each walked
the severity order themselves and would have disagreed the moment one changed.



---------
(cherry picked from commit da4fafc)

Co-authored-by: Brent Bovenzi <brent@astronomer.io>
Co-authored-by: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. backport-to-v3-4-test Backport to v3-4-test

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants