UI: Fix silent errors and layout shift in import error components by vamsi2246 · Pull Request #64267 · apache/airflow

vamsi2246 · 2026-03-26T19:06:52Z

This PR improves the robustness and UX of the DAGImportErrors and PluginImportErrors components by addressing three issues:

Error Visibility: Fixed a bug where API errors were swallowed because the component returned undefined early when the error count was 0 (the default on failure).
Prevent Layout Shift: Adjusted the loading skeleton dimensions for iconOnly mode to match the final badge size, eliminating a noticeable flicker on the Dags List and Dashboard pages.
UI Polish: Corrected the warning icon size from 8 (too small) to a standard 16 for better visibility.

Was generative AI tooling used to co-author this PR?

Yes — Antigravity (Google DeepMind Advanced Agentic Coding)

Generated-by: Antigravity following the guidelines

boring-cyborg · 2026-03-26T19:06:56Z

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide (https://github.com/apache/airflow/blob/main/contributing-docs/README.rst)
Here are some useful points:

Pay attention to the quality of your code (ruff, mypy and type annotations). Our prek-hooks will help you with that.
In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example DAG that shows how users should use it.
Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
Be sure to read the Airflow Coding style.
Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
Apache Airflow is a community-driven project and together we are making it better 🚀.
In case of doubts contact the developers at:
Mailing List: dev@airflow.apache.org
Slack: https://s.apache.org/airflow-slack

bbovenzi · 2026-03-27T19:59:49Z

Thanks. Can you provide some screenshots or videos of before and after?

airflow-core/newsfragments/99999.bugfix.rst

airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx

… components

vamsi2246 · 2026-03-28T19:25:02Z

Thanks for the review! I'll add before/after screenshots shortly.

bbovenzi · 2026-03-31T19:22:03Z

Still asking for videos of the before and after conditions.

pierrejeambrun

LGTM, would love some screenshot to document the PR as mentioned by Brent.

Copilot

Pull request overview

This PR improves the Dashboard “import errors” UI by ensuring API failures are visible (instead of being silently hidden) and by reducing layout shift during loading, plus a small icon-size polish.

Changes:

Prevents silent-swallowing of API errors by only early-returning when the error count is 0 and there is no query error.
Updates loading skeleton dimensions (including iconOnly) to better match final rendered sizes and reduce flicker/layout shift.
Standardizes iconOnly warning icon size to 16 for better visibility.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File	Description
airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx	Fixes error visibility when the query fails; adjusts loading skeleton sizing; updates icon size; keeps 403 hidden.
airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx	Fixes error visibility when the query fails; adjusts loading skeleton sizing; updates icon size.

Copilot · 2026-04-02T00:50:25Z

airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx

  if (isLoading) {
-    return <Skeleton height="9" width="225px" />;
+    // Skeleton dimensions match the rendered component sizes to prevent layout shift.
+    // iconOnly: 28px × 60px matches StateBadge (height={7} = 28px in Chakra spacing scale).
+    // full: 42px × 175px matches the rendered StatsCard dimensions.
+    return iconOnly ? (
+      <Skeleton height="28px" width="60px" />
+    ) : (
+      <Skeleton height="42px" width="175px" />
+    );


The loading Skeleton sizes are hard-coded here (28×60 and 42×175). This can easily drift from the real rendered sizes if StateBadge / StatsCard styles change (reintroducing layout shift). Consider deriving these from the same source (e.g. reuse StatsCard’s built-in loading skeleton for the full variant, and for iconOnly either render a StateBadge container with a fixed/min width while loading, or share constants with the badge styles) to avoid duplicated magic numbers.

Copilot · 2026-04-02T00:50:25Z

airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx

  if (isLoading) {
-    return <Skeleton height="9" width="225px" />;
+    // Skeleton dimensions match the rendered component sizes to prevent layout shift.
+    // iconOnly: 28px × 60px matches StateBadge (height={7} = 28px in Chakra spacing scale).
+    // full: 42px × 175px matches the rendered StatsCard dimensions.
+    return iconOnly ? (
+      <Skeleton height="28px" width="60px" />
+    ) : (
+      <Skeleton height="42px" width="175px" />
+    );


The loading Skeleton sizes are duplicated and hard-coded (28×60 and 42×175). This risks getting out of sync with StateBadge / StatsCard styling changes and reintroducing layout shift. Consider reusing StatsCard’s loading skeleton for the full variant and centralizing the iconOnly placeholder dimensions (or rendering a fixed-size StateBadge-like wrapper) to avoid repeating magic numbers.

Copilot · 2026-04-02T00:50:25Z

airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/DAGImportErrors.tsx

+  if (importErrorsCount === 0 && !error) {
    return undefined;
  }


This changes behavior so the component renders (via ErrorAlert) when the import-errors query fails (previously it returned early when total_entries defaulted to 0). Please add a regression test that simulates an API error (e.g. 500) and asserts the error alert is shown and the badge/card is not rendered when total_entries is 0.

Copilot · 2026-04-02T00:50:25Z

airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx

+  if (importErrorsCount === 0 && !error) {
    return undefined;
  }


This updates the early-return guard to allow the ErrorAlert to render when the query fails (since total_entries defaults to 0 on failure). Please add a regression test that mocks an API error and verifies the error alert shows even when importErrorsCount is 0, and that the badge/card only renders when importErrorsCount > 0.

Copilot · 2026-04-02T00:50:26Z

airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx

+    );
  }

  if (Boolean(error) && (error as ExpandedApiError).status === 403) {


The 403 handling does an unsafe cast (error as ExpandedApiError).status. Elsewhere in the UI (e.g. pages/Dashboard/PoolSummary/PoolSummary.tsx:50-52) code checks error?.status === 403 without a cast. Consider typing the query hook’s error (via generics) or using optional chaining ((error as ExpandedApiError | undefined)?.status) to avoid a potential runtime crash if error is not an ApiError shape.

Suggested change

if (Boolean(error) && (error as ExpandedApiError).status === 403) {

if ((error as ExpandedApiError | undefined)?.status === 403) {

…sibility

vamsi2246 requested review from bbovenzi, choo121600, guan404ming, pierrejeambrun, ryanahamilton, shubhamraj-git and vatsrahul1001 as code owners March 26, 2026 19:06

boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Mar 26, 2026

bbovenzi reviewed Mar 27, 2026

View reviewed changes

airflow-core/newsfragments/99999.bugfix.rst Outdated Show resolved Hide resolved

bbovenzi reviewed Mar 27, 2026

View reviewed changes

airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/PluginImportErrors.tsx Outdated Show resolved Hide resolved

UI: Fix silent errors and layout shift in DAG and Plugin import error…

c16879d

… components

vamsi2246 force-pushed the fix-ui-dag-import-errors-layout-and-error-visibility branch from becc9a0 to c16879d Compare March 28, 2026 19:16

shivaam mentioned this pull request Mar 31, 2026

Auto-triage: flag area:UI PRs missing screenshots/demo from new contributors #64516

Open

1 task

pierrejeambrun reviewed Apr 1, 2026

View reviewed changes

kaxil requested a review from Copilot April 2, 2026 00:43

Copilot AI reviewed Apr 2, 2026

View reviewed changes

potiuk added the ready for maintainer review Set after triaging when all criteria pass. label Apr 2, 2026

Merge branch 'main' into fix-ui-dag-import-errors-layout-and-error-vi…

3c0ccb1

…sibility

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Fix silent errors and layout shift in import error components#64267

UI: Fix silent errors and layout shift in import error components#64267
vamsi2246 wants to merge 2 commits intoapache:mainfrom
vamsi2246:fix-ui-dag-import-errors-layout-and-error-visibility

vamsi2246 commented Mar 26, 2026

Uh oh!

boring-cyborg bot commented Mar 26, 2026

Uh oh!

bbovenzi commented Mar 27, 2026

Uh oh!

Uh oh!

Uh oh!

vamsi2246 commented Mar 28, 2026

Uh oh!

bbovenzi commented Mar 31, 2026

Uh oh!

pierrejeambrun left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Copilot AI Apr 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	if (Boolean(error) && (error as ExpandedApiError).status === 403) {
	if ((error as ExpandedApiError \| undefined)?.status === 403) {

Conversation

vamsi2246 commented Mar 26, 2026

Was generative AI tooling used to co-author this PR?

Uh oh!

boring-cyborg bot commented Mar 26, 2026

Uh oh!

bbovenzi commented Mar 27, 2026

Uh oh!

Uh oh!

Uh oh!

vamsi2246 commented Mar 28, 2026

Uh oh!

bbovenzi commented Mar 31, 2026

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants