Background
PR #67646 capped @chakra-ui/react at ~3.34.0 (patch only) because
the 3.35 bump pulled in @ark-ui/react >=5.36 and triggered a
page-unresponsive bug after closing any Clear / Mark-as dialog without
confirming. (Or even after successfully submitting I believe)
Per Ark UI's 5.36.0 release notes:
Dialog / Drawer: Avoid setting inline pointer-events when modal,
letting the dismissable layer manage it.
The cleanup moved from an inline DOM style (which disappeared on
unmount) to the dismissable layer's close-transition callback. Several
buttons in this codebase mount their dialog conditionally
({open ? <Dialog .../> : undefined}), which unmounts the dialog
before the close transition runs and leaves the pointer-events: none
lock stuck on document.
What needs doing
Unpin @chakra-ui/react so we can pick up 3.35+ and future Ark UI
fixes. To do so safely the conditional-mount sites must be rewritten
first.
-
Go over all the Run/TI actions (clear, mark as, delete, etc...) and verify that after cancelling and confirming the UI remains usable. Without any fix the UI will not respond to mouse click on buttons anywhere in the page.
-
Bump @chakra-ui/react to ^3.35.0 (or latest) in
airflow-core/src/airflow/ui/package.json and remove the
Dependency upgrade caveats section in
airflow-core/src/airflow/ui/CONTRIBUTING.md.
Note!: The pattern that unmounts the modals was done on purpose so the 'note' value would 'reset' to the TI / Run note when re-opened again. We didn't want to fix #47071 and we don't want a regression on that front.
Affected files
Parent buttons / headers that need to drop the {open ? <Dialog/> : undefined} wrapping:
airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunButton.tsx
airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceButton.tsx (three discriminator branches)
airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsButton.tsx
airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsButton.tsx
airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx
Dialogs themselves (will need a handleClose and possibly an
enabled: open on a dry-run query):
airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx
airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx
airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx
airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx
How to verify
- Open any Clear or Mark-as dialog from the Dag Runs list, the Task
Instances list, or the per-run / per-TI detail pages.
- Close the dialog without confirming (X button, Escape, or click
the backdrop).
- The rest of the page must still be clickable. Scroll alone isn't
enough — links, buttons, and table rows must respond.
- Repeat after a confirmed action (Confirm + close on success) — same
expectation.
- Reopen the same dialog: the note field should show the run/TI's
note value, not whatever you typed before cancelling.
Background
PR #67646 capped
@chakra-ui/reactat~3.34.0(patch only) becausethe
3.35bump pulled in@ark-ui/react >=5.36and triggered apage-unresponsive bug after closing any Clear / Mark-as dialog without
confirming. (Or even after successfully submitting I believe)
Per Ark UI's
5.36.0release notes:The cleanup moved from an inline DOM style (which disappeared on
unmount) to the dismissable layer's close-transition callback. Several
buttons in this codebase mount their dialog conditionally
(
{open ? <Dialog .../> : undefined}), which unmounts the dialogbefore the close transition runs and leaves the
pointer-events: nonelock stuck on
document.What needs doing
Unpin
@chakra-ui/reactso we can pick up 3.35+ and future Ark UIfixes. To do so safely the conditional-mount sites must be rewritten
first.
Go over all the Run/TI actions (clear, mark as, delete, etc...) and verify that after cancelling and confirming the UI remains usable. Without any fix the UI will not respond to mouse click on buttons anywhere in the page.
Bump
@chakra-ui/reactto^3.35.0(or latest) inairflow-core/src/airflow/ui/package.jsonand remove theDependency upgrade caveatssection inairflow-core/src/airflow/ui/CONTRIBUTING.md.Affected files
Parent buttons / headers that need to drop the
{open ? <Dialog/> : undefined}wrapping:airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunButton.tsxairflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceButton.tsx(three discriminator branches)airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsButton.tsxairflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsButton.tsxairflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsxDialogs themselves (will need a
handleCloseand possibly anenabled: openon a dry-run query):airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsxairflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsxairflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsxairflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsxHow to verify
Instances list, or the per-run / per-TI detail pages.
the backdrop).
enough — links, buttons, and table rows must respond.
expectation.
note value, not whatever you typed before cancelling.