Skip to content

Make Dag pause toggle update immediately on click - #69134

Merged
pierrejeambrun merged 2 commits into
apache:mainfrom
astronomer:fix-dag-pause-toggle-cache-invalidation
Jul 2, 2026
Merged

Make Dag pause toggle update immediately on click#69134
pierrejeambrun merged 2 commits into
apache:mainfrom
astronomer:fix-dag-pause-toggle-cache-invalidation

Conversation

@pierrejeambrun

Copy link
Copy Markdown
Member

The pause/unpause switch on the Dags list page waited for the dags-list refetch to settle before flipping. Under fast interaction this looked like the first clicks were dropped — clicking once on several rows left them all visually unchanged until enough subsequent clicks accumulated and the list eventually refetched. With a filter on paused=true/false, the same delay meant a toggled row stayed in the visible list for a beat after the user changed its state instead of leaving the filtered view right away.

Apply React Query's optimistic update pattern to useTogglePause:

  • onMutate writes the new is_paused into the dag detail, dag, and all dags-list caches so the Switch reflects the new state on click instead of after the server round-trip.
  • onError rolls each of those caches back to the pre-mutation snapshot if the server rejects, then surfaces the existing toaster.
  • onSettled invalidates the same query keys the previous onSuccess did, so filtered list queries refetch and may move the row in or out of the visible page.

Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.7)

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

The pause/unpause switch on the Dags list page waited for the dags list
refetch to settle before flipping, which under fast interaction looked
like the first clicks were dropped: clicking once on several rows left
them all visually unchanged until enough subsequent clicks accumulated
and the list eventually refetched.

Apply React Query's optimistic update pattern: write the new is_paused
into the dag detail and dags list caches on mutate, roll back if the
server rejects, and invalidate the list on settle so filtered views
(e.g. paused=true) drop the row that no longer matches the filter.
@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Jun 29, 2026
@pierrejeambrun
pierrejeambrun marked this pull request as ready for review June 30, 2026 13:15
@pierrejeambrun

Copy link
Copy Markdown
Member Author

Before

Screen.Recording.2026-06-30.at.15.18.54.mov

After

Screen.Recording.2026-06-30.at.15.15.57.mov

The test seeded a single dags-list query and "verified" sibling invalidation
with isFetching(...) >= 0, which is always true and asserted nothing. Seed a
second list under a different filter and assert that both the prefix-keyed
optimistic write and the on-settle invalidation reach it, so the test proves
the cache update is not limited to the one seeded list variant.

@choo121600 choo121600 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good :)

@pierrejeambrun
pierrejeambrun merged commit 2033e1a into apache:main Jul 2, 2026
85 checks passed
@pierrejeambrun
pierrejeambrun deleted the fix-dag-pause-toggle-cache-invalidation branch July 2, 2026 09:38
@pierrejeambrun pierrejeambrun added this to the Airflow 3.3.1 milestone Jul 2, 2026
@vatsrahul1001 vatsrahul1001 added the backport-to-v3-3-test Backport to v3-3-test label Jul 30, 2026
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-3-test Backport to v3-3-test

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants