Skip to content

UI: Unpin @chakra-ui/react (currently capped at ~3.34.0) #67647

@pierrejeambrun

Description

@pierrejeambrun

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.

  1. 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.

  2. 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

  1. Open any Clear or Mark-as dialog from the Dag Runs list, the Task
    Instances list, or the per-run / per-TI detail pages.
  2. Close the dialog without confirming (X button, Escape, or click
    the backdrop).
  3. The rest of the page must still be clickable. Scroll alone isn't
    enough — links, buttons, and table rows must respond.
  4. Repeat after a confirmed action (Confirm + close on success) — same
    expectation.
  5. Reopen the same dialog: the note field should show the run/TI's
    note value, not whatever you typed before cancelling.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions